@props(['active' => 1])
@props(['etablissements' => []])
@props(['value' => null])
@props(['value2' => null])




<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
    crossorigin=""></script>

<style>
    #map {
        height: 80vh;
        width: 75vw;

    }
</style>

<div style="display: flex; justify-content: center; align-items: center;">
    <div id="map"></div>
</div>


<script>
    var lat = '46.03388337718503';
    var lng = '4.198044631080168';
    var coordinates = [parseFloat(lat), parseFloat(lng)];
    var map = L.map('map').setView(coordinates, 10);

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

    console.log('Filtered Schools:', $value);
    console.log('Filtered Schools:', $filteredSchools);
</script>

@foreach ($etablissements as $school)

<script>
    var lat = '{{ $lat }}';
    var lng = '{{ $lng }}';
    var name = '{{ $name }}';
    var type = '{{ $type }}';
    var contrat = '{{ $contrat }}';
    var adresse = '{{ $adresse }}';
    var departement = '{{ $departement }}';
    var region = '{{ $region }}';


    L.marker([lat, lng]).addTo(map)
        .bindPopup(
            'Nom: ' + name +
            '<br> Type: ' + type +
            '<br> Contrat: ' + contrat +
            '<br> Adresse: ' + adresse +
            '<br> Département: ' + departement +
            '<br> Région: ' + region +
            '<br> <a href="/etablissement/{{ $id }}">Voir détails</a>'

);
</script>
@endforeach