@php($apt = config('bassin.apartment'))

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />

<div class="my-8 bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
    <div class="flex flex-wrap items-center justify-between gap-3 px-5 py-4 border-b border-gray-50">
        <div class="flex items-center gap-2">
            <span class="text-xl">📍</span>
            <span class="font-display font-bold text-[var(--color-brand)]">{{ $city['n'] }}</span>
        </div>
        <span class="inline-block bg-[var(--color-gold)] text-white text-sm px-3 py-1 rounded-full">🚗 {{ $city['drive'] }} depuis l'appartement</span>
    </div>
    <div id="city-map" class="w-full h-[340px] z-0"></div>
</div>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script>
(function () {
    function initCityMap() {
        if (typeof L === 'undefined') { return setTimeout(initCityMap, 200); }
        var apt = @json($apt);
        var city = @json($city);

        var map = L.map('city-map', { scrollWheelZoom: false }).setView([city.lat, city.lng], 12);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '© OpenStreetMap' }).addTo(map);

        var aptIcon = L.divIcon({ className: '', html: '<div style="background:#8c239f;width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;"><span style="transform:rotate(45deg);font-size:14px;">🏠</span></div>', iconSize:[30,30], iconAnchor:[15,30], popupAnchor:[0,-30] });
        var cityIcon = L.divIcon({ className: '', html: '<div style="background:#008e97;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.35);"></div>', iconSize:[26,26], iconAnchor:[13,26], popupAnchor:[0,-26] });

        L.marker([apt.lat, apt.lng], { icon: aptIcon }).addTo(map).bindPopup('<strong style="color:#8c239f;">Notre appartement</strong>');
        L.marker([city.lat, city.lng], { icon: cityIcon }).addTo(map).bindPopup('<strong style="color:#008e97;">'+city.n+'</strong>');

        // Trait entre l'appartement et la ville
        L.polyline([[apt.lat, apt.lng],[city.lat, city.lng]], { color:'#d0ab3d', weight:3, dashArray:'6,8', opacity:.8 }).addTo(map);

        map.fitBounds([[apt.lat, apt.lng],[city.lat, city.lng]], { padding:[50,50] });
        map.on('focus', function(){ map.scrollWheelZoom.enable(); });
        map.on('blur', function(){ map.scrollWheelZoom.disable(); });
    }
    initCityMap();
})();
</script>