@once
@push('style_section')
<style>
    .listing-address-suggestions {
        position: absolute;
        z-index: 20;
        width: 100%;
        max-height: 260px;
        overflow-y: auto;
        margin-top: 4px;
        box-shadow: 0 4px 12px rgba(0,0,0,.12);
    }
    .listing-address-suggestions .list-group-item {
        cursor: pointer;
        font-size: 14px;
        line-height: 1.35;
    }
    .listing-address-suggestions .list-group-item small {
        display: block;
        color: #6b7280;
        font-size: 12px;
        margin-top: 2px;
    }
    .listing-address-suggestions .list-group-item.is-muted {
        cursor: default;
        color: #6b7280;
        background: #f8fafc;
    }

    .listing-map-preview--compact {
        max-width: 100%;
        max-height: 200px;
        background: #0f172a;
    }

    .listing-map-preview__img {
        display: block;
        width: 100%;
        height: 200px;
        max-height: 200px;
        object-fit: contain;
        object-position: center;
    }

    .listing-map-preview__img.is-location-map {
        object-fit: cover;
    }

    .js-listing-address-input:disabled {
        background-color: #f3f4f6;
        cursor: not-allowed;
    }
</style>
@endpush
@push('js_section')
<script>
(function () {
    var config = {
        enabled: @json(listing_uses_locationiq()),
        token: @json(listing_locationiq_token()),
        pinIconUrl: @json(listing_map_pin_icon_url()),
        i18n: {
            selectLocationFirst: @json(__('translate.Address select location first')),
            noResultsInArea: @json(__('translate.Address no results in selected area')),
            typeMoreChars: @json(__('translate.Address type more characters')),
        },
    };

    if (!config.enabled || !config.token) {
        return;
    }

    var input = document.getElementById('address');
    var list = document.getElementById('listing-address-suggestions');
    var mapField = document.getElementById('google_map');
    var previewImg = document.getElementById('listing-map-preview-img');

    if (!input || !list || !mapField) {
        return;
    }

    var placeholderSrc = previewImg ? previewImg.getAttribute('data-placeholder-src') : '';
    var defaultPlaceholder = input.getAttribute('placeholder') || '';
    var timer = null;
    var viewboxTimer = null;
    var cityViewboxCache = Object.create(null);

    function normalizeLocationText(value) {
        return String(value || '')
            .toLowerCase()
            .normalize('NFD')
            .replace(/[\u0300-\u036f]/g, '')
            .replace(/[^a-z0-9\s]/g, ' ')
            .replace(/\s+/g, ' ')
            .trim();
    }

    function significantLocationPart(name) {
        return normalizeLocationText(name)
            .replace(/^(municipiul|judetul|judet|județul|jud)\s+/g, '')
            .trim();
    }

    function locationMatchTokens(name) {
        var base = significantLocationPart(name);

        if (!base) {
            return [];
        }

        var tokens = [base];
        var sectorMatch = base.match(/sector(?:ul)?\s*(\d+)/);

        if (sectorMatch) {
            tokens.push('sector ' + sectorMatch[1]);
            tokens.push('sectorul ' + sectorMatch[1]);
        }

        var words = base.split(' ').filter(function (word) {
            return word.length > 2;
        });

        if (words.length > 1) {
            tokens.push(words.join(' '));
        }

        return tokens.filter(function (token, index, array) {
            return token && array.indexOf(token) === index;
        });
    }

    function haystackContainsLocation(haystack, locationName) {
        return locationMatchTokens(locationName).some(function (token) {
            return token && haystack.indexOf(token) !== -1;
        });
    }

    function selectedText(id) {
        var field = document.getElementById(id);

        if (!field || field.tagName !== 'SELECT' || field.selectedIndex < 0) {
            return '';
        }

        var option = field.options[field.selectedIndex];

        if (!option || !option.value) {
            return '';
        }

        return (option.textContent || '').trim();
    }

    function countryField() {
        return document.getElementById('country_id');
    }

    function defaultCountryName() {
        var field = countryField();

        if (field && field.dataset && field.dataset.countryName) {
            return field.dataset.countryName;
        }

        return 'România';
    }

    function selectedCountryCode() {
        var field = countryField();

        if (field && field.dataset && field.dataset.countryCode) {
            return String(field.dataset.countryCode).toLowerCase();
        }

        return 'ro';
    }

    function selectedDistrictName() {
        return selectedText('city_district_id');
    }

    function locationContextReady() {
        return Boolean(selectedText('county_id') && selectedText('city_id'));
    }

    function updateAddressFieldState() {
        var ready = locationContextReady();
        input.disabled = !ready;
        input.setAttribute('aria-disabled', ready ? 'false' : 'true');
        input.placeholder = ready ? defaultPlaceholder : config.i18n.selectLocationFirst;
    }

    function buildLocationContextQuery(includeDistrict) {
        var parts = [];

        if (includeDistrict !== false && selectedDistrictName()) {
            parts.push(selectedDistrictName());
        }

        parts.push(selectedText('city_id'));
        parts.push(selectedText('county_id'));
        parts.push(defaultCountryName());

        return parts.filter(function (value) {
            return value && value.length;
        }).join(', ');
    }

    function buildSearchQuery(streetQuery) {
        return [
            streetQuery,
            buildLocationContextQuery(),
        ].filter(function (value) {
            return value && value.length;
        }).join(', ');
    }

    function addressHaystack(item) {
        var address = item.address || {};

        return normalizeLocationText([
            address.road,
            address.pedestrian,
            address.footway,
            address.house_number,
            address.building,
            address.suburb,
            address.neighbourhood,
            address.city_district,
            address.quarter,
            address.hamlet,
            address.village,
            address.town,
            address.city,
            address.municipality,
            address.county,
            address.state,
            address.state_district,
            address.postcode,
            address.country,
            item.display_name,
            item.name,
        ].filter(Boolean).join(' '));
    }

    function addressFieldValues(address, keys) {
        return keys.map(function (key) {
            return address[key] || '';
        }).filter(Boolean);
    }

    function fieldMatchesLocation(fields, locationName) {
        if (!locationName) {
            return true;
        }

        var tokens = locationMatchTokens(locationName);

        return fields.some(function (fieldValue) {
            var normalizedField = normalizeLocationText(fieldValue);

            return tokens.some(function (token) {
                return token
                    && (normalizedField.indexOf(token) !== -1 || token.indexOf(normalizedField) !== -1);
            });
        });
    }

    function matchesSelectedCounty(item, countyName) {
        if (!countyName) {
            return true;
        }

        var address = item.address || {};

        return fieldMatchesLocation(
            addressFieldValues(address, ['county', 'state', 'state_district']),
            countyName
        ) || haystackContainsLocation(addressHaystack(item), countyName);
    }

    function matchesSelectedCity(item, cityName) {
        if (!cityName) {
            return true;
        }

        var address = item.address || {};

        return fieldMatchesLocation(
            addressFieldValues(address, ['city', 'town', 'village', 'municipality', 'hamlet']),
            cityName
        ) || haystackContainsLocation(addressHaystack(item), cityName);
    }

    function matchesSelectedLocation(item, options) {
        options = options || {};
        var countryCode = selectedCountryCode();
        var address = item.address || {};

        if (countryCode) {
            var resultCountry = normalizeLocationText(address.country_code || address.country);

            if (resultCountry && resultCountry !== countryCode && resultCountry !== 'ro' && resultCountry !== 'romania') {
                return false;
            }
        }

        if (!matchesSelectedCounty(item, selectedText('county_id'))) {
            return false;
        }

        if (!options.skipCityCheck && !matchesSelectedCity(item, selectedText('city_id'))) {
            return false;
        }

        var districtName = selectedDistrictName();

        if (!options.skipDistrictCheck && districtName && !haystackContainsLocation(addressHaystack(item), districtName)) {
            return false;
        }

        return true;
    }

    function streetAddressFromItem(item) {
        var address = item.address || {};
        var parts = [];
        var road = address.road || address.pedestrian || address.footway || address.residential || address.street || '';

        if (road) {
            parts.push(road);
        }

        if (address.house_number) {
            parts.push('nr. ' + address.house_number);
        }

        if (address.building) {
            parts.push('bl. ' + address.building);
        }

        if (address.block) {
            parts.push('sc. ' + address.block);
        }

        if (address.staircase) {
            parts.push('et. ' + address.staircase);
        }

        if (parts.length) {
            return parts.join(', ');
        }

        var displayName = item.display_name || item.label || '';

        return displayName.split(',')[0].trim();
    }

    function formatSuggestionPrimary(item) {
        return streetAddressFromItem(item);
    }

    function formatSuggestionSecondary(item) {
        var address = item.address || {};
        var parts = [];

        var locality = address.suburb || address.neighbourhood || address.city_district || address.quarter || '';

        if (locality) {
            parts.push(locality);
        }

        var city = address.city || address.town || address.village || address.municipality || '';

        if (city && city !== locality) {
            parts.push(city);
        }

        var county = address.county || address.state || '';

        if (county) {
            parts.push(county);
        }

        if (address.postcode) {
            parts.push(address.postcode);
        }

        parts.push(defaultCountryName());

        return parts.filter(function (value, index, array) {
            return value && array.indexOf(value) === index;
        }).join(', ');
    }

    function resetMapSelection() {
        mapField.value = '';

        if (previewImg && placeholderSrc) {
            previewImg.classList.remove('is-location-map');
            previewImg.src = placeholderSrc;
        }
    }

    function buildMapValue(lat, lon) {
        return 'locationiq:' + lat + ',' + lon;
    }

    function buildStaticMapUrl(lat, lon) {
        var marker = 'icon:' + config.pinIconUrl + '|' + lat + ',' + lon;
        var params = new URLSearchParams({
            key: config.token,
            center: lat + ',' + lon,
            zoom: '17',
            size: '640x360',
            format: 'png',
            maptype: 'streets',
            markers: marker,
        });

        return 'https://maps.locationiq.com/v3/staticmap?' + params.toString();
    }

    function applySelection(item) {
        input.value = streetAddressFromItem(item) || input.value;
        var lat = String(item.lat);
        var lon = String(item.lon);
        mapField.value = buildMapValue(lat, lon);

        if (previewImg) {
            previewImg.classList.add('is-location-map');
            previewImg.src = buildStaticMapUrl(lat, lon);
        }

        list.classList.add('d-none');
        list.innerHTML = '';
    }

    function renderMessage(text, muted) {
        list.innerHTML = '';
        var li = document.createElement('li');
        li.className = 'list-group-item' + (muted ? ' is-muted' : '');
        li.textContent = text;
        list.appendChild(li);
        list.classList.remove('d-none');
    }

    function renderSuggestions(items) {
        list.innerHTML = '';

        if (!items.length) {
            renderMessage(config.i18n.noResultsInArea, true);
            return;
        }

        items.forEach(function (item) {
            var li = document.createElement('li');
            li.className = 'list-group-item list-group-item-action';
            li.textContent = formatSuggestionPrimary(item);

            var secondary = formatSuggestionSecondary(item);

            if (secondary) {
                var meta = document.createElement('small');
                meta.textContent = secondary;
                li.appendChild(meta);
            }

            li.addEventListener('click', function () {
                applySelection(item);
            });
            list.appendChild(li);
        });
        list.classList.remove('d-none');
    }

    function viewboxParamFromBbox(bbox) {
        if (!Array.isArray(bbox) || bbox.length < 4) {
            return null;
        }

        var south = parseFloat(bbox[0]);
        var north = parseFloat(bbox[1]);
        var west = parseFloat(bbox[2]);
        var east = parseFloat(bbox[3]);

        if ([south, north, west, east].some(function (value) {
            return Number.isNaN(value);
        })) {
            return null;
        }

        return south + ',' + west + ',' + north + ',' + east;
    }

    function cacheKeyForCityContext() {
        return [
            selectedText('county_id'),
            selectedText('city_id'),
            selectedText('city_district_id'),
        ].join('|');
    }

    function loadCityViewbox(callback) {
        var cacheKey = cacheKeyForCityContext();

        if (!cacheKey || cacheKey === '||') {
            callback(null);
            return;
        }

        if (Object.prototype.hasOwnProperty.call(cityViewboxCache, cacheKey)) {
            callback(cityViewboxCache[cacheKey]);
            return;
        }

        var params = new URLSearchParams({
            key: config.token,
            q: buildLocationContextQuery(),
            limit: '1',
            countrycodes: selectedCountryCode(),
            addressdetails: '0',
            format: 'json',
        });

        fetch('https://api.locationiq.com/v1/search?' + params.toString())
            .then(function (response) { return response.json(); })
            .then(function (data) {
                var item = Array.isArray(data) ? data[0] : null;
                var viewbox = item ? viewboxParamFromBbox(item.boundingbox) : null;
                cityViewboxCache[cacheKey] = viewbox;
                callback(viewbox);
            })
            .catch(function () {
                cityViewboxCache[cacheKey] = null;
                callback(null);
            });
    }

    function scheduleCityViewboxRefresh() {
        clearTimeout(viewboxTimer);
        viewboxTimer = setTimeout(function () {
            loadCityViewbox(function () {});
        }, 250);
    }

    function requestAutocomplete(query, viewbox, useStrictBounds) {
        var params = new URLSearchParams({
            key: config.token,
            q: buildSearchQuery(query),
            limit: '12',
            dedupe: '1',
            addressdetails: '1',
            'accept-language': 'ro',
            normalizecity: '1',
            countrycodes: selectedCountryCode(),
        });

        if (viewbox) {
            params.set('viewbox', viewbox);
            params.set('bounded', useStrictBounds ? '1' : '0');
        }

        return fetch('https://api.locationiq.com/v1/autocomplete?' + params.toString())
            .then(function (response) { return response.json(); });
    }

    function filterSuggestions(items) {
        var filtered = items.filter(function (item) {
            return matchesSelectedLocation(item);
        });

        if (filtered.length) {
            return filtered.slice(0, 8);
        }

        filtered = items.filter(function (item) {
            return matchesSelectedLocation(item, { skipCityCheck: true });
        });

        return filtered.slice(0, 8);
    }

    function fetchSuggestions(query) {
        var useStrictBounds = Boolean(selectedDistrictName());

        loadCityViewbox(function (viewbox) {
            requestAutocomplete(query, viewbox, useStrictBounds)
                .then(function (data) {
                    if (!Array.isArray(data)) {
                        renderMessage(config.i18n.noResultsInArea, true);
                        return;
                    }

                    var filtered = filterSuggestions(data);

                    if (!filtered.length && viewbox && !useStrictBounds) {
                        return requestAutocomplete(query, null, false).then(function (fallbackData) {
                            if (!Array.isArray(fallbackData)) {
                                renderMessage(config.i18n.noResultsInArea, true);
                                return;
                            }

                            renderSuggestions(filterSuggestions(fallbackData));
                        });
                    }

                    renderSuggestions(filtered);
                })
                .catch(function () {
                    list.classList.add('d-none');
                });
        });
    }

    input.addEventListener('input', function () {
        clearTimeout(timer);
        var q = input.value.trim();
        resetMapSelection();

        if (!locationContextReady()) {
            renderMessage(config.i18n.selectLocationFirst, true);
            return;
        }

        if (q.length === 0) {
            list.classList.add('d-none');
            list.innerHTML = '';
            return;
        }

        if (q.length < 2) {
            renderMessage(config.i18n.typeMoreChars, true);
            return;
        }

        timer = setTimeout(function () {
            fetchSuggestions(q);
        }, 300);
    });

    ['country_id', 'county_id', 'city_id', 'city_district_id'].forEach(function (id) {
        var field = document.getElementById(id);

        if (!field) {
            return;
        }

        field.addEventListener('change', function () {
            list.classList.add('d-none');
            list.innerHTML = '';
            resetMapSelection();
            updateAddressFieldState();
            scheduleCityViewboxRefresh();

            if (input.value.trim().length >= 2 && locationContextReady()) {
                fetchSuggestions(input.value.trim());
            }
        });
    });

    document.addEventListener('click', function (event) {
        if (!list.contains(event.target) && event.target !== input) {
            list.classList.add('d-none');
        }
    });

    updateAddressFieldState();

    if (locationContextReady()) {
        scheduleCityViewboxRefresh();
    }
})();
</script>
@endpush
@endonce