@php
    // initial center; fall back to Hama coords
    $lat = (float) ($get('latitude') ?? 34.7300);
    $lng = (float) ($get('longitude') ?? 36.7138);
    $apiKey = config('services.google.maps_js_key') ?? env('GOOGLE_MAPS_API_KEY');
@endphp

<div
    x-data
    x-init="
        // load Maps JS once
        (function loadGMaps(){
            if (window._gmapsLoaded) { init(); return; }
            const s = document.createElement('script');
            s.src = 'https://maps.googleapis.com/maps/api/js?key={{ $apiKey }}&libraries=places&callback=__gmapsInit';
            s.async = true; s.defer = true;
            window.__gmapsInit = () => { window._gmapsLoaded = true; init(); };
            document.head.appendChild(s);
        })();

        function init(){
            const center = { lat: {{ $lat }}, lng: {{ $lng }} };
            const map = new google.maps.Map($refs.map, { center, zoom: 14 });
            const marker = new google.maps.Marker({ position: center, map, draggable: true });

            // search box
            const input = $refs.search;
            const autocomplete = new google.maps.places.Autocomplete(input, { fields: ['geometry','formatted_address'] });
            autocomplete.addListener('place_changed', () => {
                const place = autocomplete.getPlace();
                if (!place.geometry) return;
                const p = place.geometry.location;
                const pos = { lat: p.lat(), lng: p.lng() };
                marker.setPosition(pos);
                map.setCenter(pos);
                // write to Filament state
                $wire.set('data.latitude', pos.lat);
                $wire.set('data.longitude', pos.lng);
                if (place.formatted_address) $wire.set('data.formatted_address', place.formatted_address);
            });

            // click to move marker
            map.addListener('click', (e) => {
                const pos = { lat: e.latLng.lat(), lng: e.latLng.lng() };
                marker.setPosition(pos);
                $wire.set('data.latitude', pos.lat);
                $wire.set('data.longitude', pos.lng);
            });

            // drag to move marker
            marker.addListener('dragend', (e) => {
                const pos = { lat: e.latLng.lat(), lng: e.latLng.lng() };
                $wire.set('data.latitude', pos.lat);
                $wire.set('data.longitude', pos.lng);
            });
        }
    "
    class="space-y-2"
>
    <input x-ref="search" type="text" placeholder="Search address…" class="w-full border rounded px-3 py-2" value="{{ $get('formatted_address') }}">
    <div x-ref="map" style="height: 350px; border-radius: 12px; overflow: hidden;"></div>
</div>