<x-filament-widgets::widget>
    <x-filament::section>
        <div id="mauritania-map" style="height: 500px; width: 100%;"></div>
    </x-filament::section>

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

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var map = L.map('mauritania-map').setView([21.0079, -10.9408], 5);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap contributors'
            }).addTo(map);

            // Couleurs pour les pôles
            var poleColors = {
                'Pôle 1': '#3b82f6',
                'Pôle 2': '#10b981',
                'Pôle 3': '#f59e0b',
                'Pôle 4': '#ef4444',
                'Pôle 5': '#8b5cf6',
            };

            // Données des pôles
            var poles = @json($poles);

            // Ajouter des marqueurs pour chaque pôle
            poles.forEach(function(pole) {
                var color = poleColors[pole.libellefr] || '#6b7280';
                
                // Créer un cercle pour chaque pôle
                L.circle([21.0079, -10.9408], {
                    color: color,
                    fillColor: color,
                    fillOpacity: 0.5,
                    radius: 50000
                }).addTo(map).bindPopup(`
                    <strong>${pole.libellefr}</strong><br>
                    Inspecteurs: ${pole.inspecteurs_count}<br>
                    Établissements: ${pole.etablissements_count}<br>
                    Professeurs: ${pole.professeurs_count}<br>
                    Rapports: ${pole.rapports_count}
                `);
            });
        });
    </script>
</x-filament-widgets::widget>
