{{--
    Окно выбора города (ТЗ §8.2).

    Городов почти две сотни, поэтому главное здесь — поиск, а не список.
    Совпадения запрашиваются с сервера: встраивать весь справочник в шапку
    каждой страницы дорого и незачем.

    Автоопределение оставлено рядом и в прежнем порядке: объяснение → запрос
    координат → подтверждение. Молча подменять выбранный город нельзя.
--}}
<x-modal store="cityModal" title="Выбор города">
    <div x-data="citySelect({ searchUrl: @js(route('cities.search')) })">
        <label class="block">
            <span class="sr-only">Поиск города</span>
            <input x-ref="search" x-model="query"
                   type="search" placeholder="Начните вводить название" autocomplete="off"
                   class="w-full rounded-control border border-border bg-surface px-4 py-3 text-sm text-text placeholder:text-subtle focus:border-primary">
        </label>

        <div x-data="cityDetector({
                detectUrl: @js(route('cities.detect')),
                csrfToken: @js(csrf_token()),
             })" class="mt-3">

            <button type="button" x-show="state === 'idle'" x-on:click="explain()"
                    class="flex w-full items-center justify-center gap-1.5 rounded-control border border-border px-3 py-2 text-sm font-medium text-muted transition-colors hover:border-primary hover:text-primary">
                <span aria-hidden="true">📍</span>
                Определить автоматически
            </button>

            <div x-show="state === 'explaining'" x-cloak class="rounded-control bg-surface-alt p-3">
                <p class="text-sm text-text">
                    Разрешите определить местоположение, чтобы показать ближайшие рестораны.
                </p>
                <div class="mt-3 flex gap-2">
                    <button type="button" x-on:click="locate()"
                            class="flex-1 rounded-control bg-primary px-3 py-2 text-sm font-semibold text-primary-contrast hover:bg-primary-hover">
                        Разрешить
                    </button>
                    <button type="button" x-on:click="cancel()"
                            class="rounded-control px-3 py-2 text-sm text-muted hover:text-text">
                        Не сейчас
                    </button>
                </div>
            </div>

            <p x-show="state === 'locating'" x-cloak
               class="rounded-control bg-surface-alt p-3 text-sm text-muted">Определяем город…</p>

            {{-- Подтверждение обязательно: определение может ошибаться. --}}
            <div x-show="state === 'suggesting'" x-cloak class="rounded-control bg-surface-alt p-3">
                <p class="text-sm text-text">
                    Похоже, вы в городе <strong x-text="suggestion?.name"></strong>. Показать заведения здесь?
                </p>
                <div class="mt-3 flex gap-2">
                    <button type="button" x-on:click="accept()"
                            class="flex-1 rounded-control bg-primary px-3 py-2 text-sm font-semibold text-primary-contrast hover:bg-primary-hover">
                        Да, показать
                    </button>
                    <button type="button" x-on:click="cancel()"
                            class="rounded-control px-3 py-2 text-sm text-muted hover:text-text">
                        Выбрать другой
                    </button>
                </div>
            </div>

            <p x-show="state === 'denied' || state === 'failed'" x-cloak
               class="rounded-control bg-surface-alt p-3 text-sm text-muted" x-text="message"></p>
        </div>

        <p x-show="loading" x-cloak class="py-6 text-center text-sm text-muted">Загрузка…</p>

        <p x-show="! loading && cities.length === 0" x-cloak
           class="py-6 text-center text-sm text-muted">Такого города пока нет в каталоге.</p>

        <ul class="mt-2 max-h-[45vh] divide-y divide-border overflow-y-auto">
            <template x-for="city in cities" :key="city.slug">
                <li>
                    <a x-bind:href="city.url"
                       class="flex items-baseline justify-between gap-3 rounded-control px-3 py-2.5 transition-colors hover:bg-surface-alt">
                        <span class="text-sm font-medium text-text" x-text="city.name"></span>
                        <span class="shrink-0 text-xs text-subtle"
                              x-text="city.venues > 0 ? city.venues : city.region"></span>
                    </a>
                </li>
            </template>
        </ul>

        <p class="mt-4 border-t border-border pt-4 text-center">
            <a href="{{ route('cities.index') }}" class="text-sm text-muted underline hover:text-primary">
                Все города списком
            </a>
        </p>
    </div>
</x-modal>