@props(['etablissement' => []])



<link rel="stylesheet" href="{{ asset('css/styles.css') }}">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
    crossorigin=""></script>

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


<style>
    #map {
        height: 60vh;
        width: 60vw;
      
    }

</style>


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


    var coordinates = [lat, lng];
    var map = L.map('map').setView(coordinates, 17);

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

    L.marker([lat, lng]).addTo(map)
        .bindPopup(name
            + '<br>Adresse : ' + adresse 
            + '<br>Type : ' + type
            + '<br>Contrat : ' + contrat
            + '<br>Département : ' + departement
            + '<br>Région : ' + region
        );
       
</script>