{{--
    Position du visiteur : géolocalisation de l'appareil, ou ville et pays
    saisis. Les annonces sont ensuite classées de la plus proche à la plus
    éloignée. S'ouvre depuis tout élément portant [data-visitor-location-open]
    (bouton de l'en-tête desktop et de l'en-tête mobile).
--}}
@php
    $locationCountries = \App\Support\VisitorLocation::countries();
    $defaultCountry = $visitorLocation['country'] ?? ([
        'fr' => 'FR', 'en' => 'GB', 'es' => 'ES', 'it' => 'IT', 'pt' => 'PT', 'de' => 'DE',
    ][app()->getLocale()] ?? 'FR');
@endphp

<style>
    .visitor-location-pill {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 50px;
        max-width: 220px;
        padding: 0 16px;
        border: 1px solid #E2E2E2;
        border-radius: 6px;
        background: #fff;
        color: #2C3C28;
        font-weight: 500;
        box-shadow: 0 6px 17px rgba(0, 0, 0, 0.06);
        transition: 0.3s;
        flex-shrink: 0;
    }
    .visitor-location-pill:hover { border-color: var(--color-primary); }
    .visitor-location-pill i { color: var(--color-primary); font-size: 16px; }
    .visitor-location-pill .visitor-location-pill-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        min-width: 0;
        line-height: 1.2;
    }
    .visitor-location-pill small { font-size: 11px; color: #74787C; font-weight: 400; }
    .visitor-location-pill .visitor-location-pill-label {
        max-width: 160px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 14px;
    }
    @media screen and (max-width: 1270px) {
        .visitor-location-pill .visitor-location-pill-text { display: none; }
    }

    /*
     * Le thème donne au champ de recherche desktop une largeur fixe pensée sans
     * le bouton de localisation : on la réduit pour que l'en-tête tienne sur
     * une ligne. La marge droite de 150px réservait la place d'un bouton
     * « Rechercher » désormais retiré.
     */
    .search-header-area-main .logo-search-category-wrapper .category-search-wrapper .search-header input {
        width: 560px;
        padding-right: 20px;
    }
    @media only screen and (min-width: 1600px) and (max-width: 1919px) {
        .search-header-area-main .logo-search-category-wrapper .category-search-wrapper .search-header input { width: 400px; }
    }
    @media only screen and (min-width: 1271px) and (max-width: 1599px) {
        .search-header-area-main .logo-search-category-wrapper .category-search-wrapper .search-header input { width: 280px; }
    }
    @media only screen and (max-width: 1270px) {
        .search-header-area-main .logo-search-category-wrapper .category-search-wrapper .search-header input { width: 260px; }
    }
    @media only screen and (max-width: 1199px) {
        .search-header-area-main .logo-search-category-wrapper .category-search-wrapper .search-header input { width: 200px; }
    }
    .search-header-area-main .logo-search-category-wrapper { gap: 20px; }

    .visitor-location-btn { position: relative; }
    .visitor-location-btn i { font-size: 17px; color: #1F1F25; }
    /*
     * Position active : les boutons mobiles ont un fond doré, l'icône reste donc
     * foncée ; une pastille façon compteur panier/favoris signale la position.
     */
    .visitor-location-btn.is-active::after {
        content: '\2713';
        position: absolute;
        top: -8px;
        right: -8px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border: 1px solid var(--color-primary);
        border-radius: 50%;
        background: #1F1F25;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
    }

    .visitor-location-modal {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        background: rgba(0, 0, 0, 0.45);
        overscroll-behavior: contain;
        touch-action: none;
    }
    .visitor-location-modal[hidden] { display: none; }
    .visitor-location-dialog {
        position: relative;
        width: 100%;
        max-width: 440px;
        padding: 22px 20px 20px;
        touch-action: manipulation;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    }
    .visitor-location-dialog h3 { font-size: 20px; margin: 0 0 4px; padding-right: 30px; }
    .visitor-location-dialog p { font-size: 13px; line-height: 1.45; margin: 0 0 14px; color: #74787C; }
    .visitor-location-close {
        position: absolute;
        top: 10px;
        right: 12px;
        width: 34px;
        height: 34px;
        border: 0;
        background: none;
        font-size: 20px;
        color: #74787C;
        /* Au-dessus du titre, que l'animation du thème fait passer devant. */
        z-index: 2;
    }
    .visitor-location-current {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 14px;
        padding: 8px 12px;
        border-radius: 6px;
        background: #F7F5EE;
        font-size: 14px;
    }
    .visitor-location-current strong { color: #2C3C28; }
    .visitor-location-link {
        border: 0;
        background: none;
        padding: 0;
        font-size: 13px;
        color: #74787C;
        text-decoration: underline;
    }
    .visitor-location-primary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        height: 44px;
        border: 0;
        border-radius: 6px;
        background: var(--color-primary);
        color: #fff;
        font-weight: 600;
        font-size: 15px;
    }
    .visitor-location-primary:disabled { opacity: 0.6; cursor: wait; }
    .visitor-location-secondary { background: #2C3C28; }
    .visitor-location-or {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 12px 0;
        font-size: 12px;
        color: #74787C;
        text-transform: uppercase;
    }
    .visitor-location-or::before,
    .visitor-location-or::after { content: ''; flex: 1; height: 1px; background: #E2E2E2; }
    .visitor-location-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
    .visitor-location-field label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; }
    .visitor-location-field input,
    .visitor-location-field select {
        width: 100%;
        height: 44px;
        padding: 0 10px;
        border: 1px solid #E2E2E2;
        border-radius: 6px;
        background: #fff;
        /* 16px minimum : en dessous, iOS zoome sur le champ au toucher. */
        font-size: 16px;
    }
    .visitor-location-error { margin: 12px 0 0; font-size: 13px; color: #C0392B; }
    .visitor-location-error:empty { display: none; }
</style>

<div class="visitor-location-modal" id="visitor-location-modal" hidden role="dialog" aria-modal="true" aria-labelledby="visitor-location-title">
    <div class="visitor-location-dialog">
        <button type="button" class="visitor-location-close" data-visitor-location-close aria-label="{{ __('messages.location_close') }}">
            <i class="fa-regular fa-xmark"></i>
        </button>

        <h3 id="visitor-location-title">{{ __('messages.location_modal_title') }}</h3>
        <p>{{ __('messages.location_modal_intro', ['km' => \App\Support\VisitorLocation::RADIUS_KM]) }}</p>

        @if($visitorLocationLabel)
            <div class="visitor-location-current">
                <span>{{ __('messages.location_current') }} <strong>{{ $visitorLocationLabel }}</strong></span>
                <button type="button" class="visitor-location-link" data-visitor-location-clear>{{ __('messages.location_clear') }}</button>
            </div>
        @endif

        <button type="button" class="visitor-location-primary" id="visitor-location-device">
            <i class="fa-solid fa-location-crosshairs"></i>
            <span>{{ __('messages.location_use_device') }}</span>
        </button>

        <div class="visitor-location-or">{{ __('messages.location_or') }}</div>

        <form id="visitor-location-form" novalidate>
            <div class="visitor-location-fields">
                <div class="visitor-location-field">
                    <label for="visitor-location-city">{{ __('messages.location_city') }}</label>
                    <input type="text" id="visitor-location-city" name="city" maxlength="120" required
                        autocomplete="address-level2"
                        placeholder="{{ __('messages.location_city_placeholder') }}"
                        value="{{ ($visitorLocation['source'] ?? null) === 'city' ? $visitorLocation['city'] : '' }}">
                </div>

                <div class="visitor-location-field">
                    <label for="visitor-location-country">{{ __('messages.location_country') }}</label>
                    <select id="visitor-location-country" name="country" required autocomplete="country">
                        @foreach($locationCountries as $code => $name)
                            <option value="{{ $code }}" @selected($code === $defaultCountry)>{{ $name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <button type="submit" class="visitor-location-primary visitor-location-secondary">
                {{ __('messages.location_submit') }}
            </button>
        </form>

        <p class="visitor-location-error" id="visitor-location-error" role="alert"></p>
    </div>
</div>

<script>
    (function () {
        const modal = document.getElementById('visitor-location-modal');
        if (!modal) return;

        // La fenêtre est rendue dans l'en-tête, qui forme son propre plan
        // d'empilement : elle passerait sous le bandeau collant. On la rattache
        // directement au corps de la page.
        document.body.appendChild(modal);

        // Le thème remplace tous les <select> par une liste maison (nice-select),
        // étroite et tronquée pour ~200 pays : on garde le menu natif.
        const countrySelect = document.getElementById('visitor-location-country');

        function restoreNativeSelect() {
            const fake = countrySelect.nextElementSibling;
            if (fake && fake.classList.contains('nice-select')) fake.remove();
            countrySelect.style.display = 'block';
        }

        const errorBox = document.getElementById('visitor-location-error');
        const deviceBtn = document.getElementById('visitor-location-device');
        const form = document.getElementById('visitor-location-form');
        const csrf = @json(csrf_token());
        const messages = {
            locating: @json(__('messages.location_locating')),
            denied: @json(__('messages.location_denied')),
            unavailable: @json(__('messages.location_unavailable')),
            error: @json(__('messages.location_error')),
            cityRequired: @json(__('messages.location_city_required')),
        };

        // La page derrière la fenêtre ne doit pas défiler. Sur iOS, un simple
        // overflow: hidden ne suffit pas : on fige le corps à sa position.
        let scrollY = 0;

        function open() {
            errorBox.textContent = '';
            scrollY = window.scrollY;
            Object.assign(document.body.style, {
                position: 'fixed', top: -scrollY + 'px', left: '0', right: '0', width: '100%', overflow: 'hidden',
            });
            document.documentElement.style.overflow = 'hidden';
            restoreNativeSelect();
            modal.hidden = false;
        }

        function close() {
            modal.hidden = true;
            Object.assign(document.body.style, {
                position: '', top: '', left: '', right: '', width: '', overflow: '',
            });
            document.documentElement.style.overflow = '';
            window.scrollTo(0, scrollY);
        }

        document.addEventListener('click', function (e) {
            if (e.target.closest('[data-visitor-location-open]')) {
                e.preventDefault();
                open();
            } else if (e.target.closest('[data-visitor-location-close]') || e.target === modal) {
                close();
            }
        });

        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape' && !modal.hidden) close();
        });

        // Une position enregistrée change l'ordre des annonces : on recharge la
        // page pour l'appliquer partout (grille, tri de la boutique...).
        function send(method, url, body) {
            errorBox.textContent = '';

            return fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrf,
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: body ? JSON.stringify(body) : null,
            }).then(function (response) {
                return response.json().catch(function () { return {}; }).then(function (data) {
                    if (!response.ok) {
                        throw new Error(data.message || messages.error);
                    }
                    window.location.reload();
                });
            });
        }

        function busy(button, isBusy, label) {
            button.disabled = isBusy;
            if (label !== undefined) {
                const span = button.querySelector('span');
                if (span) span.textContent = label;
            }
        }

        const deviceLabel = deviceBtn.querySelector('span').textContent;

        deviceBtn.addEventListener('click', function () {
            if (!navigator.geolocation) {
                errorBox.textContent = messages.unavailable;
                return;
            }

            busy(deviceBtn, true, messages.locating);

            navigator.geolocation.getCurrentPosition(function (position) {
                send('POST', @json(route('visitor-location.device')), {
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                }).catch(function (err) {
                    errorBox.textContent = err.message;
                    busy(deviceBtn, false, deviceLabel);
                });
            }, function (err) {
                errorBox.textContent = err.code === err.PERMISSION_DENIED ? messages.denied : messages.unavailable;
                busy(deviceBtn, false, deviceLabel);
            }, { enableHighAccuracy: false, timeout: 15000, maximumAge: 600000 });
        });

        form.addEventListener('submit', function (e) {
            e.preventDefault();

            const city = form.city.value.trim();
            if (!city) {
                errorBox.textContent = messages.cityRequired;
                form.city.focus();
                return;
            }

            const submit = form.querySelector('button[type="submit"]');
            submit.disabled = true;

            send('POST', @json(route('visitor-location.city')), {
                city: city,
                country: form.country.value,
            }).catch(function (err) {
                errorBox.textContent = err.message;
                submit.disabled = false;
            });
        });

        // « Ne plus utiliser de position » : dans la fenêtre, et sur les pages
        // vides faute d'annonce à proximité (« Voir toutes les annonces »).
        document.addEventListener('click', function (e) {
            const clearBtn = e.target.closest('[data-visitor-location-clear]');
            if (!clearBtn) return;

            e.preventDefault();
            clearBtn.disabled = true;
            send('DELETE', @json(route('visitor-location.clear'))).catch(function (err) {
                errorBox.textContent = err.message;
                clearBtn.disabled = false;
            });
        });
    })();
</script>