@extends('layouts.app')

@section('title', 'Geofence Violations Report')
@section('no-page-header')

@section('content')
<div class="min-h-screen bg-gray-50 p-6">
    <div class="max-w-7xl mx-auto">
        <div class="bg-white rounded-lg shadow-lg">
            <div class="border-b border-gray-200 px-6 py-4">
                <h5 class="text-xl font-semibold text-gray-900">Geofence Violations Report</h5>
            </div>
            <div class="p-6">
                    <!-- Filters Section -->
                <div class="bg-white rounded-lg shadow-md border border-gray-200 mb-6">
                    <div class="border-b border-gray-200 px-6 py-4">
                        <h6 class="text-lg font-semibold text-gray-900">
                            <i class="fas fa-filter mr-2"></i>
                            Filters
                        </h6>
                    </div>
                    <div class="p-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
                                <input type="date" class="w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" name="start_date" value="{{ $startDate }}" onchange="applyFilters()">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">End Date</label>
                                <input type="date" class="w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" name="end_date" value="{{ $endDate }}" onchange="applyFilters()">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Geofence</label>
                                <select class="w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" name="geofence_id" onchange="applyFilters()">
                                    <option value="">All Geofences</option>
                                    @foreach($geofences as $geofence)
                                        <option value="{{ $geofence->id }}" {{ $filters['geofence_id'] == $geofence->id ? 'selected' : '' }}>
                                            {{ $geofence->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Employee</label>
                                <select class="w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" name="employee_id" onchange="applyFilters()">
                                    <option value="">All Employees</option>
                                    @foreach($employees as $employee)
                                        <option value="{{ $employee->id }}" {{ $filters['employee_id'] == $employee->id ? 'selected' : '' }}>
                                            {{ $employee->full_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Violation Type</label>
                                <select class="w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" name="violation_type" onchange="applyFilters()">
                                    <option value="">All Types</option>
                                    <option value="entry_violation" {{ $filters['violation_type'] == 'entry_violation' ? 'selected' : '' }}>Entry Violation</option>
                                    <option value="exit_violation" {{ $filters['violation_type'] == 'exit_violation' ? 'selected' : '' }}>Exit Violation</option>
                                    <option value="unauthorized_entry" {{ $filters['violation_type'] == 'unauthorized_entry' ? 'selected' : '' }}>Unauthorized Entry</option>
                                    <option value="missed_checkpoint" {{ $filters['violation_type'] == 'missed_checkpoint' ? 'selected' : '' }}>Missed Checkpoint</option>
                                    <option value="late_arrival" {{ $filters['violation_type'] == 'late_arrival' ? 'selected' : '' }}>Late Arrival</option>
                                    <option value="early_departure" {{ $filters['violation_type'] == 'early_departure' ? 'selected' : '' }}>Early Departure</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                    <!-- Summary Cards -->
                <div class="mb-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                        <div class="bg-blue-600 text-white rounded-lg p-6 shadow-md">
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <h5 class="text-lg font-semibold flex items-center">
                                        <i class="fas fa-exclamation-triangle mr-2"></i>
                                        {{ $report['summary']['total_violations'] }}
                                    </h5>
                                    <p class="text-blue-100 text-sm mt-1">Total Violations</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-green-600 text-white rounded-lg p-6 shadow-md">
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <h5 class="text-lg font-semibold flex items-center">
                                        <i class="fas fa-check-circle mr-2"></i>
                                        {{ $report['summary']['resolved_violations'] }}
                                    </h5>
                                    <p class="text-green-100 text-sm mt-1">Resolved</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-red-600 text-white rounded-lg p-6 shadow-md">
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <h5 class="text-lg font-semibold flex items-center">
                                        <i class="fas fa-times-circle mr-2"></i>
                                        {{ $report['summary']['unresolved_violations'] }}
                                    </h5>
                                    <p class="text-red-100 text-sm mt-1">Unresolved</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-cyan-600 text-white rounded-lg p-6 shadow-md">
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <h5 class="text-lg font-semibold flex items-center">
                                        <i class="fas fa-percentage mr-2"></i>
                                        {{ $report['summary']['resolution_rate'] }}%
                                    </h5>
                                    <p class="text-cyan-100 text-sm mt-1">Resolution Rate</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                    <!-- Charts Section -->
                <div class="bg-white rounded-lg shadow-md border border-gray-200 mb-6">
                    <div class="border-b border-gray-200 px-6 py-4">
                        <h6 class="text-lg font-semibold text-gray-900">
                            <i class="fas fa-chart-bar mr-2"></i>
                            Visual Analytics
                        </h6>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                                <div class="border-b border-gray-200 px-6 py-4 bg-gray-50 rounded-t-lg">
                                    <h6 class="text-base font-semibold text-gray-900">Violation Types Distribution</h6>
                                </div>
                                <div class="p-6">
                                    <canvas id="violationTypesChart" width="400" height="200"></canvas>
                                </div>
                            </div>
                            <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                                <div class="border-b border-gray-200 px-6 py-4 bg-gray-50 rounded-t-lg">
                                    <h6 class="text-base font-semibold text-gray-900">Time-based Patterns</h6>
                                </div>
                                <div class="p-6">
                                    <canvas id="violationPatternsChart" width="400" height="200"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                    <!-- Detailed Violations Table -->
                <div class="bg-white rounded-lg shadow-md border border-gray-200 mb-6">
                    <div class="border-b border-gray-200 px-6 py-4 flex justify-between items-center">
                        <h6 class="text-lg font-semibold text-gray-900">
                            <i class="fas fa-list mr-2"></i>
                            Detailed Violations
                        </h6>
                        <button class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 flex items-center" onclick="exportReport()">
                            <i class="fas fa-download mr-2"></i>
                            Export to CSV
                        </button>
                    </div>
                    <div class="overflow-x-auto">
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Employee</th>
                                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Geofence</th>
                                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Violation Type</th>
                                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Violation Time</th>
                                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Location</th>
                                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Status</th>
                                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Resolution Notes</th>
                                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-100">
                                    @forelse($report['details'] as $violation)
                                        <tr class="hover:bg-gray-50 transition-colors">
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <div class="flex items-center">
                                                    <div class="flex-shrink-0 h-10 w-10">
                                                        <img class="h-10 w-10 rounded-full object-cover" src="{{ $violation->employee->avatar ?? '/images/default-avatar.png' }}" alt="">
                                                    </div>
                                                    <div class="ml-4">
                                                        <div class="text-sm font-medium text-gray-900">{{ $violation->employee->full_name ?? 'Unknown Employee' }}</div>
                                                        <div class="text-sm text-gray-500">{{ $violation->employee->profile->employee_id ?? '' }}</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <div class="text-sm text-gray-900 font-medium">{{ $violation->geofence->name ?? 'Unknown Geofence' }}</div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-{{ $violation->type_class }}-100 text-{{ $violation->type_class }}-800 border border-{{ $violation->type_class }}-200">
                                                    {{ ucfirst(str_replace('_', ' ', $violation->violation_type)) }}
                                                </span>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <div class="text-sm text-gray-900">{{ $violation->violation_time->format('M d, Y') }}</div>
                                                <div class="text-sm text-gray-500">{{ $violation->violation_time->format('h:i A') }}</div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <div class="text-sm text-gray-500 font-mono">
                                                    {{ $violation->latitude }}, {{ $violation->longitude }}
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-{{ $violation->is_resolved ? 'green' : 'red' }}-100 text-{{ $violation->is_resolved ? 'green' : 'red' }}-800 border border-{{ $violation->is_resolved ? 'green' : 'red' }}-200">
                                                    {{ $violation->is_resolved ? 'Resolved' : 'Unresolved' }}
                                                </span>
                                            </td>
                                            <td class="px-6 py-4">
                                                <div class="text-sm text-gray-900 max-w-xs truncate">{{ $violation->resolution_notes ?? 'N/A' }}</div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                                <div class="flex space-x-2">
                                                    @if(!$violation->is_resolved)
                                                        <button class="text-green-600 hover:text-green-900 hover:bg-green-50 p-2 rounded-lg transition-colors" onclick="resolveViolation({{ $violation->id }})" title="Resolve Violation">
                                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                                            </svg>
                                                        </button>
                                                    @endif
                                                    <button class="text-blue-600 hover:text-blue-900 hover:bg-blue-50 p-2 rounded-lg transition-colors" onclick="viewOnMap({{ $violation->latitude }}, {{ $violation->longitude }})" title="View on Map">
                                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                                        </svg>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="8" class="px-6 py-12 text-center">
                                                <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                                </svg>
                                                <div class="text-sm text-gray-500 font-medium">No violation records found</div>
                                                <div class="text-xs text-gray-400 mt-1">Try adjusting your filters to see more results</div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Analysis Sections -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                        <!-- Hotspots Analysis -->
                        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                            <div class="border-b border-gray-200 px-6 py-4 bg-gray-50">
                                <h3 class="text-base font-semibold text-gray-900 flex items-center">
                                    <svg class="w-5 h-5 mr-2 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    Violation Hotspots
                                </h3>
                            </div>
                            <div class="p-6">
                                <div class="overflow-x-auto">
                                    <table class="min-w-full divide-y divide-gray-200">
                                        <thead class="bg-gray-50">
                                            <tr>
                                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Geofence</th>
                                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Violations</th>
                                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Employees</th>
                                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Risk Level</th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white divide-y divide-gray-100">
                                            @forelse($report['hotspots']['top_hotspots'] ?? [] as $hotspot)
                                                <tr class="hover:bg-gray-50 transition-colors">
                                                    <td class="px-4 py-3 whitespace-nowrap">
                                                        <div class="text-sm font-medium text-gray-900">{{ $hotspot['geofence']['name'] ?? 'Unknown Geofence' }}</div>
                                                    </td>
                                                    <td class="px-4 py-3 whitespace-nowrap">
                                                        <div class="text-sm text-gray-900 font-semibold">{{ $hotspot['violation_count'] }}</div>
                                                    </td>
                                                    <td class="px-4 py-3 whitespace-nowrap">
                                                        <div class="text-sm text-gray-900">{{ $hotspot['unique_employees'] }}</div>
                                                    </td>
                                                    <td class="px-4 py-3 whitespace-nowrap">
                                                        @php
                                                            $riskLevel = $hotspot['violation_count'] > 10 ? 'High' : ($hotspot['violation_count'] > 5 ? 'Medium' : 'Low');
                                                            $riskColor = $riskLevel === 'High' ? 'red' : ($riskLevel === 'Medium' ? 'yellow' : 'green');
                                                        @endphp
                                                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-{{ $riskColor }}-100 text-{{ $riskColor }}-800 border border-{{ $riskColor }}-200">
                                                            {{ $riskLevel }}
                                                        </span>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="4" class="px-4 py-8 text-center">
                                                        <div class="text-sm text-gray-500">No hotspots data available</div>
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- Employee Patterns -->
                        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                            <div class="border-b border-gray-200 px-6 py-4 bg-gray-50">
                                <h3 class="text-base font-semibold text-gray-900 flex items-center">
                                    <svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
                                    </svg>
                                    Employee Violation Patterns
                                </h3>
                            </div>
                            <div class="p-6">
                                <div class="overflow-x-auto">
                                    <table class="min-w-full divide-y divide-gray-200">
                                        <thead class="bg-gray-50">
                                            <tr>
                                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Employee</th>
                                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Violations</th>
                                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Geofences</th>
                                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Common Type</th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white divide-y divide-gray-100">
                                            @forelse($report['patterns']['employee_violation_patterns'] ?? [] as $pattern)
                                                <tr class="hover:bg-gray-50 transition-colors">
                                                    <td class="px-4 py-3 whitespace-nowrap">
                                                        <div class="text-sm font-medium text-gray-900">{{ $pattern['employee']['full_name'] ?? 'Unknown Employee' }}</div>
                                                    </td>
                                                    <td class="px-4 py-3 whitespace-nowrap">
                                                        <div class="text-sm text-gray-900 font-semibold">{{ $pattern['violation_count'] }}</div>
                                                    </td>
                                                    <td class="px-4 py-3 whitespace-nowrap">
                                                        <div class="text-sm text-gray-900">{{ $pattern['geofences_violated'] }}</div>
                                                    </td>
                                                    <td class="px-4 py-3 whitespace-nowrap">
                                                        @php
                                                            $mostCommonType = $pattern['violation_types']->sortDesc()->keys()->first();
                                                        @endphp
                                                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 border border-yellow-200">
                                                            {{ ucfirst(str_replace('_', ' ', $mostCommonType)) }}
                                                        </span>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="4" class="px-4 py-8 text-center">
                                                        <div class="text-sm text-gray-500">No pattern data available</div>
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Time Pattern Analysis -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-8">
                        <!-- Hourly Pattern -->
                        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                            <div class="border-b border-gray-200 px-6 py-4 bg-gray-50">
                                <h3 class="text-base font-semibold text-gray-900 flex items-center">
                                    <svg class="w-5 h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    Hourly Violation Pattern
                                </h3>
                            </div>
                            <div class="p-6">
                                <div class="overflow-x-auto">
                                    <table class="min-w-full divide-y divide-gray-200">
                                        <thead class="bg-gray-50">
                                            <tr>
                                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Hour</th>
                                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Violations</th>
                                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Risk Level</th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white divide-y divide-gray-100">
                                            @forelse($report['patterns']['hourly_pattern'] ?? [] as $hour => $count)
                                                <tr class="hover:bg-gray-50 transition-colors">
                                                    <td class="px-4 py-3 whitespace-nowrap">
                                                        <div class="text-sm font-medium text-gray-900">{{ $hour }}:00</div>
                                                    </td>
                                                    <td class="px-4 py-3 whitespace-nowrap">
                                                        <div class="text-sm text-gray-900 font-semibold">{{ $count }}</div>
                                                    </td>
                                                    <td class="px-4 py-3 whitespace-nowrap">
                                                        @php
                                                            $riskLevel = $count > 5 ? 'High' : ($count > 2 ? 'Medium' : 'Low');
                                                            $riskColor = $riskLevel === 'High' ? 'red' : ($riskLevel === 'Medium' ? 'yellow' : 'green');
                                                        @endphp
                                                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-{{ $riskColor }}-100 text-{{ $riskColor }}-800 border border-{{ $riskColor }}-200">
                                                            {{ $riskLevel }}
                                                        </span>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="3" class="px-4 py-8 text-center">
                                                        <div class="text-sm text-gray-500">No hourly data available</div>
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- Daily Pattern -->
                        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                            <div class="border-b border-gray-200 px-6 py-4 bg-gray-50">
                                <h3 class="text-base font-semibold text-gray-900 flex items-center">
                                    <svg class="w-5 h-5 mr-2 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                    </svg>
                                    Daily Violation Pattern
                                </h3>
                            </div>
                            <div class="p-6">
                                <div class="overflow-x-auto">
                                    <table class="min-w-full divide-y divide-gray-200">
                                        <thead class="bg-gray-50">
                                            <tr>
                                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Day</th>
                                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Violations</th>
                                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Risk Level</th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white divide-y divide-gray-100">
                                            @forelse($report['patterns']['daily_pattern'] ?? [] as $day => $count)
                                                <tr class="hover:bg-gray-50 transition-colors">
                                                    <td class="px-4 py-3 whitespace-nowrap">
                                                        <div class="text-sm font-medium text-gray-900">{{ $day }}</div>
                                                    </td>
                                                    <td class="px-4 py-3 whitespace-nowrap">
                                                        <div class="text-sm text-gray-900 font-semibold">{{ $count }}</div>
                                                    </td>
                                                    <td class="px-4 py-3 whitespace-nowrap">
                                                        @php
                                                            $riskLevel = $count > 10 ? 'High' : ($count > 5 ? 'Medium' : 'Low');
                                                            $riskColor = $riskLevel === 'High' ? 'red' : ($riskLevel === 'Medium' ? 'yellow' : 'green');
                                                        @endphp
                                                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-{{ $riskColor }}-100 text-{{ $riskColor }}-800 border border-{{ $riskColor }}-200">
                                                            {{ $riskLevel }}
                                                        </span>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="3" class="px-4 py-8 text-center">
                                                        <div class="text-sm text-gray-500">No daily data available</div>
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let violationTypesChart, violationPatternsChart;

document.addEventListener('DOMContentLoaded', function() {
    createViolationTypesChart();
    createViolationPatternsChart();
});

function createViolationTypesChart() {
    const ctx = document.getElementById('violationTypesChart').getContext('2d');
    
    violationTypesChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: @json($report['summary']['violation_types']->keys()),
            datasets: [{
                data: @json($report['summary']['violation_types']->values()),
                backgroundColor: [
                    'rgba(255, 99, 132, 0.8)',
                    'rgba(54, 162, 235, 0.8)',
                    'rgba(255, 206, 86, 0.8)',
                    'rgba(75, 192, 192, 0.8)',
                    'rgba(153, 102, 255, 0.8)',
                    'rgba(255, 159, 64, 0.8)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
}

function createViolationPatternsChart() {
    const ctx = document.getElementById('violationPatternsChart').getContext('2d');
    
    violationPatternsChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: @json($report['patterns']['hourly_pattern']->keys()),
            datasets: [{
                label: 'Violations by Hour',
                data: @json($report['patterns']['hourly_pattern']->values()),
                backgroundColor: 'rgba(255, 99, 132, 0.8)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

function applyFilters() {
    const form = document.createElement('form');
    form.method = 'GET';
    form.action = window.location.pathname;
    
    const inputs = document.querySelectorAll('input[name], select[name]');
    inputs.forEach(input => {
        const inputClone = input.cloneNode(true);
        form.appendChild(inputClone);
    });
    
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

function exportReport() {
    const params = new URLSearchParams(window.location.search);
    
    // Convert parameter names to match what the backend expects
    const exportParams = new URLSearchParams();
    if (params.has('start_date')) {
        exportParams.set('start_date', params.get('start_date'));
    }
    if (params.has('end_date')) {
        exportParams.set('end_date', params.get('end_date'));
    }
    if (params.has('geofence_id')) {
        exportParams.set('geofence_id', params.get('geofence_id'));
    }
    if (params.has('employee_id')) {
        exportParams.set('employee_id', params.get('employee_id'));
    }
    if (params.has('violation_type')) {
        exportParams.set('violation_type', params.get('violation_type'));
    }
    
    window.location.href = `{{ route('reports.geofence.export') }}?${exportParams.toString()}`;
}

function resolveViolation(violationId) {
    const notes = prompt('Enter resolution notes:');
    if (notes) {
        // Implement resolution logic
        fetch(`/geofences/violations/${violationId}/resolve`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({ resolution_notes: notes })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error resolving violation: ' + data.message);
            }
        })
        .catch(error => console.error('Error:', error));
    }
}

function viewOnMap(latitude, longitude) {
    // Open in Google Maps or internal map view
    window.open(`https://maps.google.com/?q=${latitude},${longitude}`, '_blank');
}
</script>