<x-filament-panels::page>
    <div class="space-y-6">
        {{-- Form de filtrage --}}
        <div class="bg-white rounded-lg shadow p-6">
            {{ $this->form }}
        </div>

        {{-- Carte géographique de la Mauritanie --}}
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-xl font-bold mb-4">Carte géographique de la Mauritanie</h2>
            <div id="mauritania-map" style="height: 500px; width: 100%; border-radius: 8px;"></div>
        </div>
    </div>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Attendre que Leaflet soit chargé
            setTimeout(function() {
                if (typeof L !== 'undefined') {
                    // Initialiser la carte centrée sur la Mauritanie
                    var map = L.map('mauritania-map').setView([21.0079, -10.9408], 6);

                    // Ajouter le fond de carte
                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    }).addTo(map);

                    // Ajouter un marqueur pour la capitale (Nouakchott)
                    L.marker([18.0859, -15.9785])
                        .addTo(map)
                        .bindPopup('<b>Nouakchott</b><br>Capitale de la Mauritanie')
                        .openPopup();

                    // Ajouter des cercles pour les principales villes
                    var cities = [
                        { name: 'Nouadhibou', coords: [20.9333, -17.0333], population: 90000 },
                        { name: 'Kaédi', coords: [16.6167, -13.5], population: 50000 },
                        { name: 'Rosso', coords: [16.5167, -15.8], population: 30000 },
                        { name: 'Atar', coords: [20.5167, -13.05], population: 25000 },
                        { name: 'Zouérat', coords: [22.7333, -12.4833], population: 20000 },
                    ];

                    cities.forEach(function(city) {
                        L.circleMarker(city.coords, {
                            radius: Math.sqrt(city.population) / 10,
                            fillColor: '#4472C4',
                            color: '#000',
                            weight: 1,
                            opacity: 1,
                            fillOpacity: 0.7
                        }).addTo(map)
                        .bindPopup('<b>' + city.name + '</b><br>Population: ' + city.population.toLocaleString());
                    });

                    // Ajouter les limites de la Mauritanie (approximatif)
                    var mauritaniaBounds = [
                        [26.6, -17.1],  // Nord-Ouest
                        [26.6, -4.8],   // Nord-Est
                        [14.7, -4.8],   // Sud-Est
                        [14.7, -17.1]   // Sud-Ouest
                    ];

                    L.rectangle(mauritaniaBounds, {
                        color: '#4472C4',
                        weight: 2,
                        fillColor: '#4472C4',
                        fillOpacity: 0.1
                    }).addTo(map);
                    
                    // Forcer le redimensionnement de la carte
                    setTimeout(function() {
                        map.invalidateSize();
                    }, 100);
                } else {
                    console.error('Leaflet n\'est pas chargé');
                }
            }, 500);
        });
    </script>
</x-filament-panels::page>
