@assets
    <script>
        // Google calls this global when it rejects the API key (domain not allowed, invalid key, billing, ...).
        window.gm_authFailure = () => {
            window.__zoshopMapsAuthFailed = true;
            window.dispatchEvent(new Event('zoshop:maps-auth-failed'));
        };

        (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

<div class="space-y-6">
    <div class="flex items-center gap-3">
        @if ($editing)
            <a href="{{ route('partner.settings') }}" wire:navigate aria-label="Back to settings" class="hidden rounded-full p-2 text-neutral-500 transition hover:bg-neutral-100 sm:inline-flex dark:text-neutral-400 dark:hover:bg-neutral-800">
                <x-heroicon-o-arrow-left class="h-5 w-5" />
            </a>
        @endif
        <div>
            <h1 class="text-xl font-semibold">{{ $editing ? 'Location' : '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>
    </div>

    <x-partner.card>
    <div class="space-y-4">
        {{-- wire:ignore keeps Livewire re-renders from undoing the JS-driven error state below. --}}
        <div wire:ignore class="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 disabled:cursor-not-allowed disabled:opacity-60 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100 dark:focus:border-white dark:focus:ring-white">

            <div id="location-map" class="aspect-square w-full rounded-2xl bg-neutral-100 dark:bg-neutral-800 sm:aspect-auto sm:h-96"></div>

            <div id="location-map-error" role="alert" hidden
                class="flex aspect-square w-full flex-col items-center justify-center gap-2 rounded-2xl bg-neutral-100 p-6 text-center dark:bg-neutral-800 sm:aspect-auto sm:h-96">
                <p data-map-error-title class="text-sm font-medium text-red-600 dark:text-red-400"></p>
                <p data-map-error-detail class="text-sm text-neutral-500 dark:text-neutral-400"></p>
            </div>
        </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 }}{{ $locality->pin_no ? ' - '.$locality->pin_no : '' }}</option>
            @endforeach
        </x-partner.select>

        <div class="flex flex-col gap-3 sm:flex-row">
            @unless ($editing)
                <x-partner.button tag="a" href="{{ route('partner.onboarding.categories') }}" wire:navigate variant="secondary" class="w-full sm:w-auto">
                    Previous
                </x-partner.button>
            @endunless
            <x-partner.button type="button" wire:click="save" class="w-full sm:flex-1" 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>
        </div>

        @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>
</div>

@script
    <script>
        (async () => {
            const showMapError = (title, detail) => {
                const mapEl = document.getElementById('location-map');
                const errorEl = document.getElementById('location-map-error');
                const searchEl = document.getElementById('location-search');
                if (!mapEl || !errorEl) return;

                errorEl.querySelector('[data-map-error-title]').textContent = title;
                errorEl.querySelector('[data-map-error-detail]').textContent = detail;
                mapEl.hidden = true;
                errorEl.hidden = false;

                if (searchEl) {
                    searchEl.disabled = true;
                    searchEl.value = '';
                    searchEl.placeholder = 'Address search is unavailable';
                }
            };

            const showAuthError = () => {
                console.error(
                    `[Zoshop] Google Maps rejected the API key on ${window.location.host}. ` +
                    `Add https://${window.location.host}/* to the key's website restrictions in Google Cloud Console, ` +
                    'and make sure the Maps JavaScript API and Places API are enabled for the key. ' +
                    "See Google's error above for the exact cause.",
                );
                showMapError(
                    "The map couldn't load right now.",
                    'Please try again later. If this keeps happening, contact Zoshop support.',
                );
            };

            if (window.__zoshopMapsAuthFailed) {
                showAuthError();
                return;
            }
            window.addEventListener('zoshop:maps-auth-failed', showAuthError, {
                once: true
            });

            let Map, Marker, Autocomplete;
            try {
                ({
                    Map
                } = await google.maps.importLibrary('maps'));
                ({
                    Marker
                } = await google.maps.importLibrary('marker'));
                ({
                    Autocomplete
                } = await google.maps.importLibrary('places'));
            } catch (error) {
                console.error('[Zoshop] Google Maps JavaScript API failed to load.', error);
                showMapError(
                    "The map couldn't load.",
                    'Check your internet connection and reload the page.',
                );
                return;
            }

            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