<x-filament-panels::page>
    @php
        $stats = $this->getStats();
        $offices = $this->getOffices();
        $markers = $this->getAttendanceMarkers();
        $center = $this->getMapCenter();
    @endphp

    <div class="space-y-6">
        {{-- Stats Cards - Single Row --}}
        <div class="stats-row flex flex-nowrap gap-4 overflow-x-auto">
            <div class="flex-1 min-w-[120px] bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 shadow-sm">
                <div class="text-center">
                    <p class="text-2xl font-bold text-primary-600 dark:text-primary-400">{{ $stats['total'] }}</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Total Presensi</p>
                </div>
            </div>

            <div class="flex-1 min-w-[120px] bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 shadow-sm">
                <div class="text-center">
                    <p class="text-2xl font-bold text-success-600 dark:text-success-400">{{ $stats['checked_in'] }}</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Check In</p>
                </div>
            </div>

            <div class="flex-1 min-w-[120px] bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 shadow-sm">
                <div class="text-center">
                    <p class="text-2xl font-bold text-info-600 dark:text-info-400">{{ $stats['checked_out'] }}</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Check Out</p>
                </div>
            </div>

            <div class="flex-1 min-w-[120px] bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 shadow-sm">
                <div class="text-center">
                    <p class="text-2xl font-bold text-success-600 dark:text-success-400">{{ $stats['in_radius'] }}</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Dalam Radius</p>
                </div>
            </div>

            <div class="flex-1 min-w-[120px] bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 shadow-sm">
                <div class="text-center">
                    <p class="text-2xl font-bold text-danger-600 dark:text-danger-400">{{ $stats['out_radius'] }}</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Luar Radius</p>
                </div>
            </div>
        </div>

        {{-- Filter --}}
        <x-filament::section>
            <x-slot name="heading">Filter</x-slot>
            <div class="max-w-2xl">
                {{ $this->form }}
            </div>
        </x-filament::section>

        {{-- Map Container --}}
        <x-filament::section>
            <x-slot name="heading">Peta Lokasi Presensi</x-slot>
            <x-slot name="description">
                <span class="inline-flex items-center gap-2">
                    <span class="w-3 h-3 rounded-full bg-blue-500"></span> Kantor
                    <span class="w-3 h-3 rounded-full bg-green-500 ml-4"></span> Check In
                    <span class="w-3 h-3 rounded-full bg-red-500 ml-4"></span> Check Out
                </span>
            </x-slot>

            <div id="attendance-map" class="w-full h-[600px] rounded-lg border border-gray-200 dark:border-gray-700"></div>
        </x-filament::section>
    </div>

    @push('styles')
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
        <style>
            .custom-marker {
                background: transparent;
                border: none;
            }

            /* Ensure stats cards display in single row */
            .stats-row {
                display: flex !important;
                flex-wrap: nowrap !important;
            }
        </style>
    @endpush

    @push('scripts')
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                initMap();
            });

            document.addEventListener('livewire:navigated', function() {
                initMap();
            });

            function initMap() {
                const mapContainer = document.getElementById('attendance-map');
                if (!mapContainer) return;

                // Clear existing map
                if (mapContainer._leaflet_id) {
                    mapContainer._leaflet_id = null;
                    mapContainer.innerHTML = '';
                }

                const center = @json($center);
                const offices = @json($offices);
                const markers = @json($markers);

                // Initialize map
                const map = L.map('attendance-map').setView([center.lat, center.lng], 15);

                // Add tile layer (OpenStreetMap)
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    maxZoom: 19,
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                }).addTo(map);

                // Custom icons
                const officeIcon = L.divIcon({
                    className: 'custom-marker',
                    html: '<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center shadow-lg border-2 border-white"><svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z" clip-rule="evenodd"></path></svg></div>',
                    iconSize: [32, 32],
                    iconAnchor: [16, 32],
                    popupAnchor: [0, -32]
                });

                const checkInIcon = L.divIcon({
                    className: 'custom-marker',
                    html: '<div class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center shadow-lg border-2 border-white"><svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg></div>',
                    iconSize: [24, 24],
                    iconAnchor: [12, 24],
                    popupAnchor: [0, -24]
                });

                const checkOutIcon = L.divIcon({
                    className: 'custom-marker',
                    html: '<div class="w-6 h-6 bg-red-500 rounded-full flex items-center justify-center shadow-lg border-2 border-white"><svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg></div>',
                    iconSize: [24, 24],
                    iconAnchor: [12, 24],
                    popupAnchor: [0, -24]
                });

                // Add office markers with radius
                offices.forEach(office => {
                    // Add radius circle
                    L.circle([office.lat, office.lng], {
                        color: '#3b82f6',
                        fillColor: '#3b82f6',
                        fillOpacity: 0.1,
                        radius: office.radius
                    }).addTo(map);

                    // Add office marker
                    L.marker([office.lat, office.lng], { icon: officeIcon })
                        .bindPopup(`
                            <div class="p-2">
                                <h3 class="font-bold text-blue-600">${office.name}</h3>
                                <p class="text-sm text-gray-600">${office.address || '-'}</p>
                                <p class="text-xs text-gray-400 mt-1">Radius: ${office.radius}m</p>
                            </div>
                        `)
                        .addTo(map);
                });

                // Add attendance markers
                markers.forEach(marker => {
                    const icon = marker.type === 'check_in' ? checkInIcon : checkOutIcon;
                    const typeLabel = marker.type === 'check_in' ? 'Check In' : 'Check Out';
                    const typeColor = marker.type === 'check_in' ? 'green' : 'red';

                    L.marker([marker.lat, marker.lng], { icon: icon })
                        .bindPopup(`
                            <div class="p-2 min-w-[200px]">
                                <h3 class="font-bold">${marker.name}</h3>
                                <p class="text-sm" style="color: ${typeColor}">${typeLabel}: ${marker.time}</p>
                                <p class="text-xs text-gray-600 mt-1">${marker.address || '-'}</p>
                                ${marker.distance ? `<p class="text-xs text-gray-400">Jarak: ${marker.distance}m</p>` : ''}
                            </div>
                        `)
                        .addTo(map);
                });

                // Fit bounds to show all markers
                if (markers.length > 0) {
                    const allPoints = [
                        ...offices.map(o => [o.lat, o.lng]),
                        ...markers.map(m => [m.lat, m.lng])
                    ];
                    if (allPoints.length > 0) {
                        map.fitBounds(allPoints, { padding: [50, 50] });
                    }
                }
            }
        </script>
    @endpush
</x-filament-panels::page>
