@assets
<script>
    (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
        key: "{{ config('services.google_maps.key') }}",
        v: "weekly",
    });
</script>
@endassets

<x-partner.card>
    <h1 class="text-xl font-semibold">Where is your shop?</h1>
    <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">Search your address or drag the pin to the exact spot.</p>

    <div class="mt-6 space-y-4">
        <input
            id="location-search"
            type="text"
            placeholder="Search for your shop's address"
            class="block w-full rounded-xl border border-neutral-300 bg-white px-3.5 py-2.5 text-sm text-neutral-900 shadow-sm placeholder:text-neutral-400 focus:border-neutral-900 focus:outline-none focus:ring-1 focus:ring-neutral-900 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100 dark:focus:border-white dark:focus:ring-white"
        >

        <div id="location-map" wire:ignore class="h-72 w-full rounded-2xl bg-neutral-100 dark:bg-neutral-800"></div>

        @if ($latitude && $longitude)
            <p class="text-xs text-neutral-400">Pinned at {{ round($latitude, 6) }}, {{ round($longitude, 6) }}</p>
        @endif
        @error('latitude') <p class="text-sm text-red-600 dark:text-red-400">Drop a pin on the map to set your location.</p> @enderror

        <x-partner.select wire:model="localityId" name="localityId" label="Locality (optional)">
            <option value="">Select a locality</option>
            @foreach ($localities as $locality)
                <option value="{{ $locality->id }}">{{ $locality->name }}</option>
            @endforeach
        </x-partner.select>

        <x-partner.button type="button" wire:click="save" class="w-full" wire:loading.attr="disabled" wire:target="save">
            <span wire:loading.remove wire:target="save">{{ $editing ? 'Save changes' : 'Continue' }}</span>
            <span wire:loading wire:target="save">Saving...</span>
        </x-partner.button>

        @if ($editing)
            <p x-data="{ show: false }" x-init="$wire.on('saved', () => { show = true; setTimeout(() => show = false, 2000) })" x-show="show" x-cloak class="text-center text-sm text-emerald-600 dark:text-emerald-400">
                Saved.
            </p>
        @endif
    </div>
</x-partner.card>

@script
<script>
    (async () => {
        const { Map } = await google.maps.importLibrary('maps');
        const { Marker } = await google.maps.importLibrary('marker');
        const { Autocomplete } = await google.maps.importLibrary('places');

        const fallback = { lat: 26.1445, lng: 91.7362 };
        const initial = {
            lat: @js($latitude) ?? fallback.lat,
            lng: @js($longitude) ?? fallback.lng,
        };

        const mapEl = document.getElementById('location-map');
        const map = new Map(mapEl, { center: initial, zoom: @js($latitude) ? 16 : 12 });
        const marker = new Marker({ map, position: initial, draggable: true });

        const setPosition = (lat, lng) => {
            $wire.set('latitude', lat);
            $wire.set('longitude', lng);
        };

        marker.addListener('dragend', () => {
            const pos = marker.getPosition();
            setPosition(pos.lat(), pos.lng());
        });

        map.addListener('click', (event) => {
            marker.setPosition(event.latLng);
            setPosition(event.latLng.lat(), event.latLng.lng());
        });

        const searchInput = document.getElementById('location-search');
        const autocomplete = new Autocomplete(searchInput, { fields: ['geometry'] });
        autocomplete.addListener('place_changed', () => {
            const place = autocomplete.getPlace();
            if (!place.geometry || !place.geometry.location) {
                return;
            }
            map.setCenter(place.geometry.location);
            map.setZoom(16);
            marker.setPosition(place.geometry.location);
            setPosition(place.geometry.location.lat(), place.geometry.location.lng());
        });

        if (!@js($latitude) && navigator.geolocation) {
            navigator.geolocation.getCurrentPosition((position) => {
                const here = { lat: position.coords.latitude, lng: position.coords.longitude };
                map.setCenter(here);
                map.setZoom(16);
                marker.setPosition(here);
                setPosition(here.lat, here.lng);
            });
        }
    })();
</script>
@endscript