@extends('layouts.app')

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

@php
$pageTitle = 'Geofence Violations';
$pageSubtitle = 'Monitor and manage geofence violations';
$breadcrumbs = [
    ['label' => 'Dashboard', 'url' => route('dashboard'), 'icon' => 'tachometer-alt'],
    ['label' => 'Geofence Violations', 'url' => '']
];
@endphp

@section('content')
<div class="w-full px-4">
    <div class="flex flex-wrap -mx-2">
        <div class="w-full px-2">
            <div class="bg-white rounded-lg shadow-md border border-gray-200">
                <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                    <h5 class="text-lg font-semibold m-0">Geofence Violations</h5>
                    <div class="flex gap-2">
                        <button class="px-4 py-2 border border-green-500 text-green-600 rounded-md hover:bg-green-50 transition-colors" onclick="exportViolations()">
                            <i class="fas fa-download mr-2"></i>Export
                        </button>
                    </div>
                </div>
                <div class="p-6">
                    <!-- Filters -->
                    <div class="flex flex-wrap gap-4 mb-4">
                        <div class="flex-1 min-w-[200px]">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Date Range</label>
                            <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" id="date_from" value="{{ request('date_from', now()->subDays(7)->format('Y-m-d')) }}">
                        </div>
                        <div class="flex-1 min-w-[200px]">
                            <label class="block text-sm font-medium text-gray-700 mb-1">&nbsp;</label>
                            <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" id="date_to" value="{{ request('date_to', now()->format('Y-m-d')) }}">
                        </div>
                        <div class="flex-1 min-w-[200px]">
                            <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 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" id="geofence_filter">
                                <option value="">All Geofences</option>
                                @foreach($geofences ?? [] as $geofence)
                                    <option value="{{ $geofence->id }}">{{ $geofence->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="flex-1 min-w-[200px]">
                            <label class="block text-sm font-medium text-gray-700 mb-1">&nbsp;</label>
                            <button class="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors" onclick="filterViolations()">Filter</button>
                        </div>
                    </div>

                    <!-- Summary Cards -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                        <div class="bg-blue-600 text-white rounded-lg p-4">
                            <h5 class="text-2xl font-bold">{{ $violations->count() }}</h5>
                            <p class="text-sm opacity-90">Total Violations</p>
                        </div>
                        <div class="bg-red-600 text-white rounded-lg p-4">
                            <h5 class="text-2xl font-bold">{{ $violations->where('is_resolved', false)->count() }}</h5>
                            <p class="text-sm opacity-90">Unresolved</p>
                        </div>
                        <div class="bg-green-600 text-white rounded-lg p-4">
                            <h5 class="text-2xl font-bold">{{ $violations->where('is_resolved', true)->count() }}</h5>
                            <p class="text-sm opacity-90">Resolved</p>
                        </div>
                        <div class="bg-yellow-600 text-white rounded-lg p-4">
                            <h5 class="text-2xl font-bold">{{ $violations->getCollection()->filter(function($violation) { return \Carbon\Carbon::parse($violation->violation_time)->isToday(); })->count() }}</h5>
                            <p class="text-sm opacity-90">Today</p>
                        </div>
                    </div>

                    <!-- Violations Table -->
                    <div class="overflow-x-auto">
                        <table class="w-full border-collapse">
                            <thead>
                                <tr class="bg-gray-50 border-b border-gray-200">
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Geofence</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Employee</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @forelse($violations ?? [] as $violation)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-4 py-3 text-sm text-gray-900">{{ $violation->id }}</td>
                                        <td class="px-4 py-3 text-sm text-gray-900">{{ $violation->geofence->name }}</td>
                                        <td class="px-4 py-3 text-sm text-gray-900">{{ $violation->employee->full_name }}</td>
                                        <td class="px-4 py-3 text-sm">
                                            <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-{{ $violation->type_class ?? 'gray' }}-100 text-{{ $violation->type_class ?? 'gray' }}-800">
                                                {{ ucfirst(str_replace('_', ' ', $violation->violation_type)) }}
                                            </span>
                                        </td>
                                        <td class="px-4 py-3 text-sm text-gray-900">{{ $violation->violation_time->format('M d, Y h:i A') }}</td>
                                        <td class="px-4 py-3 text-sm text-gray-900">
                                            <span class="text-xs">
                                                {{ $violation->latitude }}, {{ $violation->longitude }}
                                            </span>
                                        </td>
                                        <td class="px-4 py-3 text-sm">
                                            @if($violation->is_resolved)
                                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Resolved</span>
                                            @else
                                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Unresolved</span>
                                            @endif
                                        </td>
                                        <td class="px-4 py-3 text-sm">
                                            <div class="flex gap-1">
                                                <button class="p-1 border border-blue-300 text-blue-600 rounded hover:bg-blue-50 transition-colors" onclick="viewViolation({{ $violation->id }})">
                                                    <i class="fas fa-eye text-xs"></i>
                                                </button>
                                                @if(!$violation->is_resolved)
                                                    <button class="p-1 border border-green-300 text-green-600 rounded hover:bg-green-50 transition-colors" onclick="showResolveModal({{ $violation->id }})">
                                                        <i class="fas fa-check text-xs"></i>
                                                    </button>
                                                @endif
                                                <button class="p-1 border border-cyan-300 text-cyan-600 rounded hover:bg-cyan-50 transition-colors" onclick="viewMap({{ $violation->id }})">
                                                    <i class="fas fa-map text-xs"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="9" class="px-4 py-8 text-center text-sm text-gray-500">No geofence violations found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    {{ $violations->links() }}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Violation Details Modal -->
<div class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50" id="violationDetailsModal">
    <div class="bg-white rounded-lg max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">
        <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
            <h5 class="text-lg font-semibold">Violation Details</h5>
            <button type="button" class="text-gray-400 hover:text-gray-600" onclick="closeModal('violationDetailsModal')">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="p-6" id="violationDetailsContent">
            <!-- Violation details will be loaded here -->
        </div>
        <div class="px-6 py-4 border-t border-gray-200 flex justify-end">
            <button type="button" class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors" onclick="closeModal('violationDetailsModal')">Close</button>
        </div>
    </div>
</div>

<!-- Map Modal -->
<div class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50" id="mapModal">
    <div class="bg-white rounded-lg max-w-7xl w-full mx-4 max-h-[90vh] overflow-y-auto">
        <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
            <h5 class="text-lg font-semibold">Violation Location Map</h5>
            <button type="button" class="text-gray-400 hover:text-gray-600" onclick="closeModal('mapModal')">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="p-6">
            <div id="mapContainer" style="height: 500px;">
                <!-- Map will be loaded here -->
            </div>
        </div>
        <div class="px-6 py-4 border-t border-gray-200 flex justify-end">
            <button type="button" class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors" onclick="closeModal('mapModal')">Close</button>
        </div>
    </div>
</div>

<!-- Resolve Violation Modal -->
<div class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50" id="resolveModal">
    <div class="bg-white rounded-lg max-w-md w-full mx-4">
        <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
            <h5 class="text-lg font-semibold">Resolve Violation</h5>
            <button type="button" class="text-gray-400 hover:text-gray-600" onclick="closeModal('resolveModal')">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form id="resolveForm">
            <div class="p-6">
                <input type="hidden" id="violation_id" name="violation_id">
                <div class="mb-4">
                    <label for="resolution_notes" class="block text-sm font-medium text-gray-700 mb-1">Resolution Notes</label>
                    <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" id="resolution_notes" name="resolution_notes" rows="3" required></textarea>
                </div>
                <div class="mb-4">
                    <label for="action_taken" class="block text-sm font-medium text-gray-700 mb-1">Action Taken</label>
                    <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" id="action_taken" name="action_taken" required>
                        <option value="">Select Action</option>
                        <option value="warning">Warning Issued</option>
                        <option value="suspension">Suspension</option>
                        <option value="training">Additional Training Required</option>
                        <option value="no_action">No Action Required</option>
                        <option value="other">Other</option>
                    </select>
                </div>
            </div>
            <div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-2">
                <button type="button" class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors" onclick="closeModal('resolveModal')">Cancel</button>
                <button type="button" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors" onclick="submitResolveViolation()">Resolve</button>
            </div>
        </form>
    </div>
</div>
@endsection

<script>
function filterViolations() {
    const params = new URLSearchParams({
        date_from: document.getElementById('date_from').value,
        date_to: document.getElementById('date_to').value,
        geofence_id: document.getElementById('geofence_filter').value
    });
    
    window.location.href = `{{ route('geofences.violations') }}?${params.toString()}`;
}

function viewViolation(id) {
    fetch(`/geofences/violations/${id}`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            const content = `
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <h6 class="text-sm font-semibold text-gray-900 mb-2">Violation Information</h6>
                        <p class="text-sm"><strong>ID:</strong> ${data.id}</p>
                        <p class="text-sm"><strong>Type:</strong> ${data.violation_type}</p>
                        <p class="text-sm"><strong>Time:</strong> ${data.violation_time}</p>
                        <p class="text-sm"><strong>Status:</strong> ${data.is_resolved ? 'Resolved' : 'Unresolved'}</p>
                    </div>
                    <div>
                        <h6 class="text-sm font-semibold text-gray-900 mb-2">Location Details</h6>
                        <p class="text-sm"><strong>Geofence:</strong> ${data.geofence ? data.geofence.name : 'N/A'}</p>
                        <p class="text-sm"><strong>Coordinates:</strong> ${data.latitude}, ${data.longitude}</p>
                        <p class="text-sm"><strong>Accuracy:</strong> ${data.location_accuracy || 'N/A'}m</p>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                    <div>
                        <h6 class="text-sm font-semibold text-gray-900 mb-2">Employee Information</h6>
                        <p class="text-sm"><strong>Name:</strong> ${data.employee ? data.employee.full_name : 'N/A'}</p>
                        <p class="text-sm"><strong>Email:</strong> ${data.employee ? data.employee.email : 'N/A'}</p>
                        <p class="text-sm"><strong>Employee ID:</strong> ${data.employee && data.employee.profile ? data.employee.profile.employee_id : 'N/A'}</p>
                    </div>
                </div>
                ${data.resolution_notes ? `
                    <div class="mt-4">
                        <h6 class="text-sm font-semibold text-gray-900 mb-2">Resolution Details</h6>
                        <p class="text-sm"><strong>Notes:</strong> ${data.resolution_notes}</p>
                        <p class="text-sm"><strong>Action Taken:</strong> ${data.action_taken || 'N/A'}</p>
                        <p class="text-sm"><strong>Resolved By:</strong> ${data.resolved_by ? data.resolved_by.full_name : 'N/A'}</p>
                        <p class="text-sm"><strong>Resolved At:</strong> ${data.resolved_at || 'N/A'}</p>
                    </div>
                ` : ''}
                ${data.photos && data.photos.length > 0 ? `
                    <div class="mt-4">
                        <h6 class="text-sm font-semibold text-gray-900 mb-2">Evidence Photos</h6>
                        <div class="flex flex-wrap gap-2">
                            ${data.photos.map(photo => `
                                <img src="${photo}" class="rounded-lg" width="100" height="100" style="object-fit: cover;">
                            `).join('')}
                        </div>
                    </div>
                ` : ''}
            `;
            
            document.getElementById('violationDetailsContent').innerHTML = content;
            showModal('violationDetailsModal');
        })
        .catch(error => {
            console.error('Error fetching violation details:', error);
            alert('Error loading violation details. Please try again.');
        });
}

function showResolveModal(id) {
    document.getElementById('violation_id').value = id;
    showModal('resolveModal');
}

function submitResolveViolation() {
    const id = document.getElementById('violation_id').value;
    const data = {
        resolution_notes: document.getElementById('resolution_notes').value,
        action_taken: document.getElementById('action_taken').value
    };
    
    fetch(`/geofences/violations/${id}/resolve`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            closeModal('resolveModal');
            location.reload();
        } else {
            alert('Error resolving violation: ' + (data.message || 'Unknown error'));
        }
    });
}

function viewMap(id) {
    fetch(`/geofences/violations/${id}`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            // Initialize map with violation location
            const mapContainer = document.getElementById('mapContainer');
            mapContainer.innerHTML = `
                <div class="text-center py-8">
                    <p class="font-semibold">Map integration will be implemented</p>
                    <p class="text-sm"><strong>Violation Type:</strong> ${data.violation_type}</p>
                    <p class="text-sm"><strong>Location:</strong> ${data.latitude}, ${data.longitude}</p>
                    <p class="text-sm"><strong>Checkpoint:</strong> ${data.checkpoint ? data.checkpoint.checkpoint_name : 'N/A'}</p>
                    <p class="text-sm"><strong>Employee:</strong> ${data.employee ? data.employee.full_name : 'N/A'}</p>
                </div>
            `;
            
            showModal('mapModal');
        })
        .catch(error => {
            console.error('Error fetching map data:', error);
            alert('Error loading map data. Please try again.');
        });
}

function exportViolations() {
    const params = new URLSearchParams({
        date_from: document.getElementById('date_from').value,
        date_to: document.getElementById('date_to').value,
        geofence_id: document.getElementById('geofence_filter').value
    });
    
    window.location.href = `/geofences/violations/export?${params.toString()}`;
}

// Modal helper functions
function showModal(modalId) {
    const modal = document.getElementById(modalId);
    modal.classList.remove('hidden');
    modal.classList.add('flex');
    document.body.style.overflow = 'hidden';
}

function closeModal(modalId) {
    const modal = document.getElementById(modalId);
    modal.classList.add('hidden');
    modal.classList.remove('flex');
    document.body.style.overflow = 'auto';
}

// Close modal when clicking outside
document.addEventListener('click', function(event) {
    if (event.target.classList.contains('fixed') && event.target.classList.contains('inset-0')) {
        closeModal(event.target.id);
    }
});

// Load geofences when client is selected
document.getElementById('geofence_filter').addEventListener('change', function() {
    const geofenceId = this.value;
    if (geofenceId) {
        fetch(`/api/geofences/${geofenceId}`)
            .then(response => response.json())
            .then(data => {
                // Update violation filter if needed
                console.log('Geofence selected:', data);
            });
    }
});
</script>