<div class="py-8 px-4 mx-auto lg:px-6">
    <div class="mx-auto">
        <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
                @lang('menu.myAddresses')
            </h2>
            @if(!$showAddressForm && $addresses->isNotEmpty() && $addresses->count() < \App\Livewire\Shop\Addresses::MAX_ADDRESSES)
            <x-button wire:click="createNewAddress" type="button" class="w-full justify-center sm:w-auto">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1 inline-flex" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
                @lang('app.addNew')
            </x-button>
            @endif
        </div>

        @if($showAddressForm)
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6 border border-gray-200 dark:border-gray-700">
                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                    {{ $editMode ? __('modules.delivery.editAddress') : __('modules.delivery.addNewAddress') }}
                </h3>

                <form wire:submit="saveAddress">
                    <div class="mb-4">
                        <x-label for="label" value="{{ __('modules.delivery.addressLabel') }}" />
                        <x-input id="label" wire:model.defer="label" placeholder="{{ __('placeholders.addressLabelPlaceholder') }}" class="w-full" />
                        <x-input-error for="label" />
                    </div>

                    <!-- Search Box -->
                    <div id="place-autocomplete-card" class="mb-2 border dark:border-gray-500 rounded-lg p-1 relative z-[1200]" wire:ignore>
                        <p id="location-search"> </p>
                    </div>

                    <div class="mb-4">
                        <section id="address-map" class="relative z-0 h-96 rounded-lg shadow-md border border-gray-200 mb-2" wire:ignore></section>
                        <x-input-error for="lat" custom-message="{{ __('modules.delivery.pleaseSelectLocation') }}" />
                        <div class="flex items-center gap-4 mt-2 text-sm text-gray-600 dark:text-gray-400">
                            <span>
                                <span class="font-medium text-gray-700 dark:text-gray-300">{{ __('modules.delivery.latitude') }}:</span>
                                {{ $lat ?? 'N/A' }}
                            </span>
                            <span>
                                <span class="font-medium text-gray-700 dark:text-gray-300">{{ __('modules.delivery.longitude') }}:</span>
                                {{ $lng ?? 'N/A' }}
                            </span>
                        </div>
                    </div>

                    <div class="mb-4">
                        <x-label for="address" value="{{ __('modules.delivery.fullAddress') }}" />
                        <x-textarea id="address" wire:model.defer="address" rows="3" class="w-full" data-gramm="false" placeholder="{{ __('placeholders.addressPlaceholder') }}"></x-textarea>
                        <x-input-error for="address" />
                    </div>

                    <div class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
                        <x-secondary-button wire:click="cancelForm" type="button" class="w-full justify-center sm:w-auto">
                            @lang('app.cancel')
                        </x-secondary-button>
                        <x-button type="submit" class="w-full justify-center sm:w-auto">
                            {{ $editMode ? __('modules.delivery.updateAddress') : __('modules.delivery.saveAddress') }}
                        </x-button>
                    </div>
                </form>
            </div>
        @endif

        @if($addresses->isEmpty() && !$showAddressForm)
            <div class="flex flex-col items-center justify-center p-8 text-center bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-800 dark:border-gray-700">
                <div class="w-16 h-16 mb-4 text-gray-400">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                    </svg>
                </div>
                <h3 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">@lang('modules.delivery.noAddressesFound')</h3>
                <p class="mb-4 text-sm text-gray-500 dark:text-gray-400">@lang('modules.delivery.addAddressDescription')</p>
                <x-button wire:click="createNewAddress" type="button">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1 inline-flex" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                    </svg>
                    @lang('app.addNew')
                </x-button>
            </div>
        @elseif(!$showAddressForm)
            <div class="grid gap-4">
                @foreach($addresses as $address)
                    <div class="p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-800 dark:border-gray-700">
                        <div class="flex justify-between">
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                                    {{ $address->label }}
                                </h3>
                                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                                    {{ $address->address }}
                                </p>
                                <div class="mt-1 text-xs text-gray-400">
                                    Lat: {{ $address->lat }}, Lng: {{ $address->lng }}
                                </div>
                            </div>
                        <div class="ml-3 flex flex-shrink-0 space-x-2">
                                <button wire:click="editAddress({{ $address->id }})" class="text-blue-600 hover:text-blue-800 dark:text-blue-500 dark:hover:text-blue-700">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                    </svg>
                                </button>
                                <button wire:click="confirmDeleteAddress({{ $address->id }})" class="text-red-600 hover:text-red-800 dark:text-red-500 dark:hover:text-red-700">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    <x-confirmation-modal wire:model.defer="confirmDeleteAddressModal">
        <x-slot name="title">
            @lang('modules.delivery.confirmDeleteAddress')
        </x-slot>

        <x-slot name="content">
            @lang('modules.delivery.confirmDeleteAddressDescription')
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="$toggle('confirmDeleteAddressModal')" wire:loading.attr="disabled">
                {{ __('app.cancel') }}
            </x-secondary-button>

            @if ($confirmDeleteAddressId)
            <x-danger-button class="ml-3" wire:click='deleteAddress' wire:loading.attr="disabled">
                {{ __('app.delete') }}
            </x-danger-button>
            @endif
        </x-slot>
    </x-confirmation-modal>

    @script
    <script>
        const MAP_API_KEY = atob('{{ base64_encode($mapApiKey) }}');
        const MAP_PROVIDER = '{{ $mapProvider ?? 'google' }}';

        const STRINGS = {
            deliveryLocation: "@lang('modules.delivery.deliveryLocation')",
            shopLocation: "@lang('modules.delivery.shopLocation')",
            dragToAdjust: "@lang('modules.delivery.dragMarkerToAdjust')",
            showRange: "@lang('modules.delivery.showDeliveryRange')",
            hideRange: "@lang('modules.delivery.hideDeliveryRange')",
            useCurrentLocation: "@lang('modules.delivery.useCurrentLocation')",
            locationPermissionDenied: "@lang('modules.delivery.locationPermissionDenied')",
        };

        let addressMap = null, addressMarker = null, mapInitialized = false;
        let leafletMap = null, leafletMarker = null;
        let googleAutocompleteInstance = null;
        let searchDebounce = null;

        // Defined before use so window assignment is safe
        function initAddressMap() {
            if (document.getElementById('address-map')) {
                setTimeout(() => setupAddressMap(), 300);
            }
        }

        // Expose globally AFTER function declaration so Google Maps callback can find it
        window.initAddressMap = initAddressMap;

        // Listen for Livewire event to re-init map with coordinates (e.g. edit mode)
        Livewire.on('initAddressMap', (params) => {
            setTimeout(() => setupAddressMap(params), 300);
        });

        bootstrapMap();

        function bootstrapMap() {
            if (MAP_PROVIDER === 'osm') {
                loadLeafletAssets().then(() => initAddressMap());
                return;
            }

            loadGoogleMaps().then(() => initAddressMap()).catch(() => {
                loadLeafletAssets().then(() => {
                    initAddressMap();
                });
            });
        }

        function loadGoogleMaps() {
            return new Promise((resolve, reject) => {
                if (window.google && window.google.maps) {
                    resolve();
                    return;
                }

                window.initAddressMap = () => resolve();
                const script = document.createElement('script');
                script.src = MAP_API_KEY
                    ? `https://maps.googleapis.com/maps/api/js?key=${MAP_API_KEY}&loading=async&libraries=places,geocoding,marker&callback=initAddressMap`
                    : `https://maps.googleapis.com/maps/api/js?libraries=places,geocoding,marker&callback=initAddressMap`;
                script.async = true;
                script.onerror = reject;
                document.head.appendChild(script);
            });
        }

        function loadLeafletAssets() {
            return new Promise((resolve) => {
                if (window.L) {
                    resolve();
                    return;
                }

                if (!document.querySelector('link[data-map-provider="leaflet"]')) {
                    const leafletCss = document.createElement('link');
                    leafletCss.rel = 'stylesheet';
                    leafletCss.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
                    leafletCss.setAttribute('data-map-provider', 'leaflet');
                    document.head.appendChild(leafletCss);
                }

                const script = document.createElement('script');
                script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
                script.onload = () => resolve();
                document.head.appendChild(script);
            });
        }

        function setupAddressMap(params = {}) {
            const el = document.getElementById('address-map');
            if (!el || (mapInitialized && !params)) return;
            mapInitialized = true;

            let { lat = 26.9125, lng = 75.7875 } = (params?.[0] || {});
            const hasPresetCoordinates = Number.isFinite(Number(lat)) && Number.isFinite(Number(lng));

            if (MAP_PROVIDER === 'osm') {
                setupLeafletMap(lat, lng, hasPresetCoordinates);
                return;
            }

            addressMap = new google.maps.Map(el, {
                center: { lat: lat, lng: lng },
                zoom: 15,
                gestureHandling: 'greedy',
                zoomControl: false,
                streetViewControl: false,
                mapId: 'DEMO_MAP_ID',
            });

            // Customer marker
            addressMarker = new google.maps.marker.AdvancedMarkerElement({
                position: { lat: lat, lng: lng },
                map: addressMap,
                gmpDraggable:true,
                title: STRINGS.deliveryLocation
            });

            google.maps.event.addListener(addressMarker, 'dragend', (e) => {
                updateLatLng(e.latLng.lat(), e.latLng.lng());
                reverseGeocode(e.latLng);
            });

            google.maps.event.addListener(addressMap, 'click', (e) => {
                updateLatLng(e.latLng.lat(), e.latLng.lng());
                reverseGeocode(e.latLng);
            });

            // Ensure proper map rendering
            setTimeout(() => {
                google.maps.event.trigger(addressMap, 'resize');
                addressMap.setCenter(new google.maps.LatLng(lat, lng));
            }, 100);

            const searchInput = mountSearchInput();
            addGoogleAutocomplete(searchInput);

            addCurrentLocationButton();

            // For new addresses, auto-fill coordinates using browser location if available.
            initializeDefaultCustomerLocation(hasPresetCoordinates, lat, lng);
        }

        function setupLeafletMap(lat, lng, hasPresetCoordinates = false) {
            if (!window.L) {
                return;
            }

            if (leafletMap) {
                leafletMap.remove();
                leafletMap = null;
            }

            leafletMap = L.map('address-map').setView([lat, lng], 15);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; OpenStreetMap contributors'
            }).addTo(leafletMap);

            leafletMarker = L.marker([lat, lng], {
                draggable: true,
                title: STRINGS.deliveryLocation
            }).addTo(leafletMap);

            leafletMarker.on('dragend', (event) => {
                const position = event.target.getLatLng();
                updateLatLng(position.lat, position.lng, true);
            });

            leafletMap.on('click', (event) => {
                updateLatLng(event.latlng.lat, event.latlng.lng, true);
            });

            const searchInput = mountSearchInput();
            addOsmAutocomplete(searchInput);
            addCurrentLocationButton();

            // For new addresses, auto-fill coordinates using browser location if available.
            initializeDefaultCustomerLocation(hasPresetCoordinates, lat, lng);
        }

        function addCurrentLocationButton() {
            const button = document.createElement('button-element');
            button.className = 'bg-white p-2 rounded-lg shadow-md m-3';
            button.title = STRINGS.useCurrentLocation;

            const defaultSvg = `<svg class="w-5 h-5 text-current" width="20" height="20" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="3"/><path d="M13 4.069V2h-2v2.069A8.01 8.01 0 0 0 4.069 11H2v2h2.069A8.01 8.01 0 0 0 11 19.931V22h2v-2.069A8.01 8.01 0 0 0 19.931 13H22v-2h-2.069A8.01 8.01 0 0 0 13 4.069M12 18c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6"/></svg>`;
            const loadingSvg = `<svg class="animate-spin w-5 h-5 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4z"/></svg>`;

            button.innerHTML = defaultSvg;

            button.addEventListener('click', () => {
            if (!navigator.geolocation) return;

            button.innerHTML = loadingSvg;

            navigator.geolocation.getCurrentPosition(
                ({ coords: { latitude: lat, longitude: lng } }) => {
                const coords = { lat, lng };
                updateLatLng(coords.lat , coords.lng);
                reverseGeocode(coords);
                button.innerHTML = defaultSvg;
                },
                (error) => {
                console.error('Geolocation error:', error);
                button.innerHTML = defaultSvg;
                },
                { timeout: 10000, enableHighAccuracy: true }
            );
            });

            if (MAP_PROVIDER === 'osm' && leafletMap) {
                const customControl = L.control({ position: 'bottomright' });
                customControl.onAdd = () => button;
                customControl.addTo(leafletMap);
            } else if (addressMap) {
                addressMap.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(button);
            }
        }

        async function updateLatLng(lat, lng, shouldReverseGeocode = false) {
            if (lat && lng) {
                if (MAP_PROVIDER === 'osm' && leafletMap && leafletMarker) {
                    leafletMarker.setLatLng([lat, lng]);
                    leafletMap.setView([lat, lng], leafletMap.getZoom());
                } else if (addressMarker && addressMap) {
                    addressMarker.position = { lat, lng };
                    addressMap.setCenter({ lat, lng });
                }
                @this.set('lat', lat);
                @this.set('lng', lng);

                if (MAP_PROVIDER === 'osm' && shouldReverseGeocode) {
                    const formattedAddress = await reverseGeocodeOsm(lat, lng);
                    if (formattedAddress) {
                        @this.set('address', formattedAddress);
                    }
                }
            }
        }

        function mountSearchInput() {
            const card = document.getElementById('place-autocomplete-card');
            if (!card) {
                return null;
            }

            card.innerHTML = `
                <div class="relative">
                    <input id="location-search-input" type="text" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white" placeholder="Search address..." autocomplete="off" />
                    <div id="location-search-results" class="absolute z-[1300] mt-1 hidden w-full rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-600 dark:bg-gray-800"></div>
                </div>
            `;

            return document.getElementById('location-search-input');
        }

        function addGoogleAutocomplete(inputElement) {
            if (!inputElement || !window.google || !google.maps) {
                return;
            }

            googleAutocompleteInstance = new google.maps.places.Autocomplete(inputElement, {
                fields: ['geometry', 'formatted_address']
            });

            googleAutocompleteInstance.addListener('place_changed', () => {
                const place = googleAutocompleteInstance.getPlace();
                const location = place?.geometry?.location;
                const formattedAddress = place?.formatted_address;

                if (!location) {
                    return;
                }

                inputElement.value = formattedAddress || '';
                @this.set('address', formattedAddress || '');
                updateLatLng(location.lat(), location.lng());
            });
        }

        function addOsmAutocomplete(inputElement) {
            if (!inputElement) {
                return;
            }

            const resultBox = document.getElementById('location-search-results');
            if (!resultBox) {
                return;
            }

            inputElement.addEventListener('input', (event) => {
                const query = event.target.value?.trim();
                clearTimeout(searchDebounce);

                if (!query || query.length < 3) {
                    resultBox.classList.add('hidden');
                    resultBox.innerHTML = '';
                    return;
                }

                searchDebounce = setTimeout(async () => {
                    resultBox.classList.remove('hidden');
                    resultBox.innerHTML = `<div class="px-3 py-2 text-sm text-gray-500 dark:text-gray-300">Searching...</div>`;
                    const results = await searchOsmAddress(query);
                    renderOsmResults(results, resultBox, inputElement);
                }, 400);
            });
        }

        function renderOsmResults(results, resultBox, inputElement) {
            if (!Array.isArray(results) || results.length === 0) {
                resultBox.classList.remove('hidden');
                resultBox.innerHTML = `<div class="px-3 py-2 text-sm text-gray-500 dark:text-gray-300">No locations found.</div>`;
                return;
            }

            resultBox.innerHTML = results.map((item) => `
                <button type="button" class="block w-full border-b border-gray-100 px-3 py-2 text-left text-sm hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700" data-lat="${item.lat}" data-lng="${item.lon}" data-label="${item.display_name}">
                    ${item.display_name}
                </button>
            `).join('');

            resultBox.classList.remove('hidden');

            resultBox.querySelectorAll('button').forEach((button) => {
                button.addEventListener('click', () => {
                    const lat = parseFloat(button.dataset.lat);
                    const lng = parseFloat(button.dataset.lng);
                    const label = button.dataset.label;

                    inputElement.value = label;
                    @this.set('address', label);
                    updateLatLng(lat, lng);

                    resultBox.classList.add('hidden');
                    resultBox.innerHTML = '';
                });
            });
        }

        async function searchOsmAddress(query) {
            const normalizedQuery = query.replace(/\s+/g, ' ').trim();
            const encodedQuery = encodeURIComponent(normalizedQuery);
            const center = getCurrentMapCenter();
            const latParam = Number.isFinite(center.lat) ? `&lat=${center.lat}` : '';
            const lonParam = Number.isFinite(center.lng) ? `&lon=${center.lng}` : '';
            const nominatimUrl = `https://nominatim.openstreetmap.org/search?q=${encodedQuery}&format=json&addressdetails=1&limit=8&countrycodes=in&accept-language=en${latParam}${lonParam}`;
            const photonUrl = `https://photon.komoot.io/api/?q=${encodedQuery}&limit=8${latParam}${lonParam}`;

            try {
                const nominatimResponse = await fetch(nominatimUrl);
                if (nominatimResponse.ok) {
                    const nominatimResults = await nominatimResponse.json();
                    if (Array.isArray(nominatimResults) && nominatimResults.length > 0) {
                        const mappedResults = nominatimResults.map((item) => ({
                            lat: item.lat,
                            lon: item.lon,
                            display_name: item.display_name
                        }));
                        return rankResultsByDistance(mappedResults, center);
                    }
                }
            } catch (error) {
                console.error('Nominatim search failed', error);
            }

            try {
                const photonResponse = await fetch(photonUrl);
                if (!photonResponse.ok) {
                    return [];
                }

                const photonData = await photonResponse.json();
                if (!Array.isArray(photonData?.features)) {
                    return [];
                }

                const mappedResults = photonData.features.map((feature) => {
                    const coords = feature?.geometry?.coordinates ?? [];
                    const props = feature?.properties ?? {};
                    const labelParts = [props.name, props.street, props.city, props.state, props.country].filter(Boolean);

                    return {
                        lat: coords[1],
                        lon: coords[0],
                        display_name: labelParts.join(', ')
                    };
                }).filter((item) => Number.isFinite(Number(item.lat)) && Number.isFinite(Number(item.lon)));
                return rankResultsByDistance(mappedResults, center);
            } catch (error) {
                console.error('Photon search failed', error);
                return [];
            }
        }

        function getCurrentMapCenter() {
            if (leafletMap) {
                const center = leafletMap.getCenter();
                return { lat: center.lat, lng: center.lng };
            }

            if (addressMap) {
                const center = addressMap.getCenter();
                return { lat: center?.lat?.() ?? NaN, lng: center?.lng?.() ?? NaN };
            }

            return {
                lat: parseFloat(@this.get('lat')) || NaN,
                lng: parseFloat(@this.get('lng')) || NaN
            };
        }

        function rankResultsByDistance(results, center) {
            if (!Number.isFinite(center.lat) || !Number.isFinite(center.lng)) {
                return results;
            }

            return [...results].sort((a, b) => {
                const aDist = Math.hypot(Number(a.lat) - center.lat, Number(a.lon) - center.lng);
                const bDist = Math.hypot(Number(b.lat) - center.lat, Number(b.lon) - center.lng);
                return aDist - bDist;
            });
        }

        function reverseGeocode(latLng) {
            const geocoder = new google.maps.Geocoder();
            geocoder.geocode({ location: latLng }, (results, status) => {
            if (status === google.maps.GeocoderStatus.OK && results[0]) {
                @this.set('address', results[0].formatted_address);
            } else {
                console.error("Geocoder failed due to: " + status);
            }
            });
        }

        async function reverseGeocodeOsm(lat, lng) {
            try {
                const response = await fetch(`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json`);
                const data = await response.json();
                return data?.display_name || null;
            } catch (error) {
                console.error('Reverse geocoding failed', error);
                return null;
            }
        }

        function initializeDefaultCustomerLocation(hasPresetCoordinates, fallbackLat, fallbackLng) {
            // If we are editing an existing address, keep its saved coordinates.
            if (hasPresetCoordinates && @this.get('lat') !== null && @this.get('lng') !== null) {
                return;
            }

            if (!navigator.geolocation) {
                updateLatLng(Number(fallbackLat), Number(fallbackLng), true);
                return;
            }

            navigator.geolocation.getCurrentPosition(
                ({ coords: { latitude, longitude } }) => {
                    updateLatLng(latitude, longitude, true);
                },
                () => {
                    updateLatLng(Number(fallbackLat), Number(fallbackLng), true);
                },
                { timeout: 10000, enableHighAccuracy: true }
            );
        }

    </script>
    @endscript
</div>
