@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: @js(config('services.google_maps.key')), v: 'weekly' });
    </script>
@endassets

<div class="space-y-3">
    <p class="text-sm text-gray-500 dark:text-gray-400">Search for the address, click the map, or drag the pin to set the business location.</p>
    <input id="business-location-search" type="text" placeholder="Search business address"
        class="fi-input block w-full rounded-lg border-gray-300 bg-white shadow-sm dark:border-white/10 dark:bg-white/5">
    <div id="business-location-map" wire:ignore class="h-80 w-full rounded-xl bg-gray-100 dark:bg-gray-800"></div>
    <p id="business-location-coordinates" class="text-xs text-gray-500 dark:text-gray-400"></p>
    @error('data.latitude')
        <p class="text-sm text-danger-600">Choose a location on the map.</p>
    @enderror
    @error('data.longitude')
        <p class="text-sm text-danger-600">Choose a location on the map.</p>
    @enderror
</div>

@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 latitude = @js($latitude);
            const longitude = @js($longitude);
            const hasLocation = latitude !== null && latitude !== '' && longitude !== null && longitude !== '';
            const initial = {
                lat: hasLocation ? Number(latitude) : fallback.lat,
                lng: hasLocation ? Number(longitude) : fallback.lng,
            };
            const mapElement = document.getElementById('business-location-map');
            if (!mapElement || mapElement.dataset.initialized) return;
            mapElement.dataset.initialized = 'true';

            const map = new Map(mapElement, {
                center: initial,
                zoom: hasLocation ? 16 : 12,
            });
            const marker = new Marker({ map, position: initial, draggable: true });
            const coordinateLabel = document.getElementById('business-location-coordinates');

            const setPosition = (lat, lng) => {
                $wire.set('data.latitude', lat);
                $wire.set('data.longitude', lng);
                coordinateLabel.textContent = `Pinned at ${lat.toFixed(6)}, ${lng.toFixed(6)}`;
            };

            if (hasLocation) {
                coordinateLabel.textContent = `Pinned at ${initial.lat.toFixed(6)}, ${initial.lng.toFixed(6)}`;
            }

            marker.addListener('dragend', () => {
                const position = marker.getPosition();
                if (position) setPosition(position.lat(), position.lng());
            });
            map.addListener('click', event => {
                if (!event.latLng) return;
                marker.setPosition(event.latLng);
                setPosition(event.latLng.lat(), event.latLng.lng());
            });

            const autocomplete = new Autocomplete(document.getElementById('business-location-search'), {
                fields: ['geometry'],
            });
            autocomplete.addListener('place_changed', () => {
                const place = autocomplete.getPlace();
                if (!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());
            });
        })();
    </script>
@endscript