@php
    // initial center. Use saved lat/lng if present.
    $lat = (float) ($get('latitude') ?? 34.7300);
    $lng = (float) ($get('longitude') ?? 36.7138);
@endphp

<div x-data
     x-init="
        // load Leaflet CSS/JS from CDN once
        (function ensureLeaflet(){
            if(!window.leafletLoaded){
                const lcss=document.createElement('link');
                lcss.rel='stylesheet';
                lcss.href='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
                document.head.appendChild(lcss);
                const js=document.createElement('script');
                js.src='https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
                js.onload=()=>{ window.leafletLoaded=true; init(); };
                document.head.appendChild(js);
            } else { init(); }
        })();

        function init(){
            const el = $refs.map;
            const map = L.map(el).setView([{{ $lat }}, {{ $lng }}], 14);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
                attribution: '&copy; OpenStreetMap contributors'
            }).addTo(map);

            let marker = L.marker([{{ $lat }}, {{ $lng }}], {draggable:true}).addTo(map);

            function setLatLng(lat, lng){
                marker.setLatLng([lat,lng]);
                // push JSON to hidden 'location' state; Filament ->afterStateUpdated copies to lat/lng inputs
                $wire.set('data.location', JSON.stringify({lat: lat, lng: lng}));
            }

            map.on('click', e => setLatLng(e.latlng.lat, e.latlng.lng));
            marker.on('dragend', e => {
                const p = e.target.getLatLng();
                setLatLng(p.lat, p.lng);
            });

            // if user edits inputs manually, keep map in sync when form refreshes:
            $watch(() => [{{ $get('latitude') ?? 'null' }}, {{ $get('longitude') ?? 'null' }}], (v)=>{
                const [lat,lng]=v||[];
                if(typeof lat==='number' && typeof lng==='number'){
                    marker.setLatLng([lat,lng]);
                    map.setView([lat,lng]);
                }
            });
        }
     "
     class="w-full"
>
    <div x-ref="map" style="height: 350px; border-radius: 12px; overflow: hidden;"></div>
</div>