@extends('layouts.app')

{{-- Каталог (ТЗ §8.3, §8.5), разметка по макету `design/new design and ui`. --}}

@php
    $heading = $seo->h1 ?? ($cuisine
        ? $cuisine->name.' кухня в '.$city->inCity()
        : 'Рестораны в '.$city->inCity());

    $canonicalPath = $cuisine
        ? route('catalog.cuisine', [$city->slug, $cuisine->slug], false)
        : route('catalog.city', $city->slug, false);

    $sorts = [
        'recommended' => 'Сначала рекомендуемые',
        'rating' => 'По рейтингу',
        'free_tables' => 'По свободным столам',
        'bill' => 'По среднему чеку',
        'popular' => 'По популярности',
    ];

    if ($filters->hasCoordinates()) {
        $sorts = ['nearest' => 'Сначала ближайшие'] + $sorts;
    }
@endphp

{{-- Метаданные собирает SeoResolver; свои значения из админки сильнее
     шаблона типа страницы (ТЗ §18.3, §18.9). --}}
@section('title', $seo->title ?? $heading.' — забронировать столик онлайн')
@section('description', $seo->description ?? 'Каталог заведений в '.$city->inCity().': свободные столики, средний чек, рейтинг и онлайн-бронирование.')

@push('meta')
    {{-- Параметрические страницы фильтров не должны плодить дубли (ТЗ §18.4) --}}
    <link rel="canonical" href="{{ $seo->canonical ?? url($canonicalPath) }}">
    @if ($seo->noindex || $filters->hasActiveFilters() || $result->venues->currentPage() > 1)
        <meta name="robots" content="noindex, follow">
    @endif
@endpush

@section('content')
    <div class="container-page pb-[72px] pt-7">
        <nav aria-label="Хлебные крошки" class="mb-[18px] text-[13px] text-ink-40">
            <ol class="flex flex-wrap items-center gap-1.5">
                <li><a href="{{ route('home') }}" class="text-ink-40 no-underline hover:text-ink hover:no-underline">Главная</a></li>
                <li aria-hidden="true">/</li>
                @if ($cuisine)
                    <li><a href="{{ route('catalog.city', $city->slug) }}" class="text-ink-40 no-underline hover:text-ink hover:no-underline">{{ $city->name }}</a></li>
                    <li aria-hidden="true">/</li>
                    <li class="text-ink" aria-current="page">{{ $cuisine->name }}</li>
                @else
                    <li class="text-ink" aria-current="page">{{ $city->name }}</li>
                @endif
            </ol>
        </nav>

        <div class="flex flex-wrap items-end justify-between gap-4">
            <div>
                <h1 class="text-[28px] font-extrabold tracking-[-0.03em] sm:text-[34px]">{{ $heading }}</h1>
                <p class="mt-1.5 text-[15px] text-ink-60">
                    {{ trans_choice(':count заведение|:count заведения|:count заведений', $result->venues->total(), ['count' => $result->venues->total()]) }}
                    @if ($result->availabilityCheckedAt)
                        · доступность проверена в {{ $result->availabilityCheckedAt->setTimezone($city->timezone)->format('H:i') }}
                    @endif
                </p>
            </div>

            {{-- Переключатель списка и карты — сегмент-контрол из макета --}}
            <div class="flex items-center gap-1 rounded-tab bg-border-soft p-[5px]">
                @foreach (['list' => 'Список', 'map' => 'Карта'] as $view => $label)
                    <a href="{{ route('catalog.city', [$city->slug] + $filters->with('view', $view)->toQuery()) }}"
                       @class([
                           'rounded-[9px] px-4 py-1.5 text-sm font-semibold no-underline transition-colors hover:no-underline',
                           'bg-surface text-ink shadow-tab' => $filters->view === $view,
                           'text-ink-60 hover:text-ink' => $filters->view !== $view,
                       ])>{{ $label }}</a>
                @endforeach
            </div>
        </div>

        <div class="mt-7 grid items-start gap-7 lg:grid-cols-[260px_minmax(0,1fr)]">
            @php($activeChips = $filters->activeChips())

            {{--
                На узком экране фильтры занимают его целиком, и до выдачи
                приходится долго листать — там они свёрнуты, разворачивает
                кнопка. Ширину экрана определяет CSS, а не JavaScript:
                со слушателем resize состояние разъезжалось при повороте
                устройства и изменении окна.

                Без JavaScript фильтры открыты как раньше, а кнопка не
                показывается вовсе — её прячет `x-cloak`.
            --}}
            <aside x-data="{ open: false }">
                <div x-cloak class="mb-3 lg:hidden">
                    <button type="button" x-on:click="open = ! open" class="btn btn-secondary w-full">
                        <x-ui-icon name="filters" :size="18" />
                        <span x-text="open ? 'Скрыть фильтры' : 'Фильтры'">Фильтры</span>

                        @if ($activeChips !== [])
                            <span class="badge badge-accent">{{ count($activeChips) }}</span>
                        @endif
                    </button>
                </div>

                {{-- lg:block! перебивает inline-стиль от x-show: на широком
                     экране колонка видна независимо от состояния. --}}
                <div x-show="open" class="lg:block!">
                    <x-catalog-filters :city="$city" :filters="$filters" :cuisines="$cuisines" :features="$features" />
                </div>
            </aside>

            <div>
                @if ($result->availabilityUnavailable())
                    <p class="mb-4 rounded-card border border-primary-line bg-primary-bg px-4 py-3 text-sm text-primary-hover">
                        Сервис бронирования сейчас не отвечает — доступность столов уточняется.
                        Заведения и их контакты по-прежнему доступны.
                    </p>
                @endif

                <div class="mb-4 flex flex-wrap items-center justify-between gap-4">
                    <div class="flex flex-wrap gap-[7px]">
                        @foreach ($activeChips as $chip)
                            <span class="rounded-pill border border-primary bg-primary-soft px-3.5 py-[7px] text-[13px] font-semibold text-primary-hover">
                                {{ $chip }}
                            </span>
                        @endforeach
                    </div>

                    <form method="GET" action="{{ route('catalog.city', $city->slug) }}" class="ml-auto">
                        @foreach ($filters->toQuery() as $name => $value)
                            @if ($name !== 'sort' && ! is_array($value))
                                <input type="hidden" name="{{ $name }}" value="{{ $value }}">
                            @endif
                        @endforeach

                        <select name="sort" class="field h-10 w-auto text-sm" onchange="this.form.submit()">
                            @foreach ($sorts as $key => $label)
                                <option value="{{ $key }}" @selected($filters->sort === $key)>{{ $label }}</option>
                            @endforeach
                        </select>

                        <noscript><button type="submit" class="btn btn-secondary btn-sm ml-2">Применить</button></noscript>
                    </form>
                </div>

                @if ($filters->view === 'map')
                    <div class="mb-6">
                        <x-venue-map :city="$city" :filters="$filters" />
                    </div>
                @endif

                @if ($result->isEmpty())
                    {{-- Пустое состояние (ТЗ §8.3, §17.3) --}}
                    <div class="card p-10 text-center">
                        <h2 class="text-lg font-bold">Ничего не нашлось</h2>
                        <p class="mx-auto mt-2 max-w-md text-sm text-ink-60">
                            @if ($filters->hasActiveFilters())
                                Попробуйте изменить фильтры: например, снять ограничение по свободным столам
                                или расширить диапазон среднего чека.
                            @else
                                В этом городе пока нет заведений, подключённых к «РестоМесто».
                                Каталог наполняется автоматически по мере подключения ресторанов.
                            @endif
                        </p>
                        @if ($filters->hasActiveFilters())
                            <a href="{{ route('catalog.city', $city->slug) }}"
                               class="btn btn-primary mt-5 no-underline hover:no-underline">Сбросить фильтры</a>
                        @endif
                    </div>
                @else
                    <div class="grid gap-3.5">
                        @foreach ($result->venues as $venue)
                            <x-venue-row
                                :venue="$venue"
                                :availability="$result->availabilityFor($venue)"
                                :is-open="app(\App\Domain\Catalog\Services\VenueScheduleService::class)->isOpenAt($venue)"
                                :distance="$venue->distance_km ?? null" />
                        @endforeach
                    </div>

                    <div class="mt-7">
                        {{ $result->venues->withQueryString()->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection