@extends('layouts.app')

@section('title', 'Выбор города — РестоМесто')
@section('description', 'Города, где доступно онлайн-бронирование столиков через «РестоМесто».')

@push('meta')
    <link rel="canonical" href="{{ route('cities.index') }}">
@endpush

@section('content')
    <div class="container-page py-8">
        <h1 class="text-2xl font-extrabold tracking-tight text-ink sm:text-3xl">Выберите город</h1>

        {{--
            Фильтрация идёт по списку названий, а не по содержимому DOM: Alpine
            не отслеживает результаты querySelectorAll, и группы букв не
            скрывались бы вместе со своими городами.
        --}}
        <div x-data="{
                 q: '',
                 matches(name) {
                     return this.q === '' || name.toLowerCase().includes(this.q.toLowerCase());
                 },
                 groupHasMatches(names) {
                     return names.some((name) => this.matches(name));
                 },
             }"
             class="mt-6">
            <label class="block max-w-md">
                <span class="sr-only">Поиск города</span>
                <input type="search" x-model="q" placeholder="Начните вводить название города"
                       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>

            <p x-show="q !== '' && ! {{ Js::from($cities->flatten()->pluck('name')) }}.some((n) => matches(n))"
               x-cloak class="mt-6 rounded-card bg-surface-alt p-6 text-sm text-muted">
                Такого города пока нет в каталоге.
            </p>

            <div class="mt-8 space-y-8">
                @foreach ($cities as $letter => $group)
                    <section x-show="groupHasMatches({{ Js::from($group->pluck('name')) }})">
                        <h2 class="text-lg font-bold text-primary">{{ $letter }}</h2>
                        <ul class="mt-3 grid gap-x-6 gap-y-2 sm:grid-cols-2 lg:grid-cols-4">
                            @foreach ($group as $city)
                                <li x-show="matches({{ Js::from($city->name) }})">
                                    <a href="{{ route('cities.select', $city->slug) }}"
                                       class="flex items-baseline justify-between gap-2 py-1 text-sm text-text hover:text-primary">
                                        <span>{{ $city->name }}</span>
                                        @if ($city->active_venues_count > 0)
                                            <span class="text-xs text-subtle">{{ $city->active_venues_count }}</span>
                                        @endif
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </section>
                @endforeach
            </div>
        </div>
    </div>
@endsection