@extends('layouts.app')

{{-- Главная (ТЗ §8.1), разметка по макету `design/new design and ui`. --}}

@section('title', 'РестоМесто — забронировать столик в ресторане онлайн')
@section('description', 'Каталог ресторанов и кафе с онлайн-бронированием. Выберите город, дату и время — и забронируйте столик за минуту.')

@push('meta')
    <link rel="canonical" href="{{ url('/') }}">
@endpush

@section('content')
    {{-- Герой с поиском (ТЗ §8.1) --}}
    <section class="border-b border-primary-line bg-primary-bg">
        <div class="container-page pb-14 pt-12 sm:pt-[72px]">
            <h1 class="max-w-[720px] text-[38px] font-extrabold leading-[1.05] tracking-[-0.035em] sm:text-[52px]">
                Стол на сегодня — за минуту
            </h1>
            <p class="mb-8 mt-4 max-w-[560px] text-[17px] text-ink-60 sm:text-[18px]">
                Рестораны и кафе с онлайн-бронированием. Показываем только реальные свободные слоты.
            </p>

            <form method="GET"
                  action="{{ $currentCity ? route('catalog.city', $currentCity->slug) : route('cities.index') }}"
                  class="rounded-panel border border-primary-line bg-surface p-[18px] shadow-search">
                <div class="grid items-end gap-3.5 sm:grid-cols-2 lg:grid-cols-[2fr_1fr_1fr_0.8fr_auto]">
                    <label class="block">
                        <span class="field-label">Что ищем</span>
                        <input type="search" name="q" value="{{ request('q') }}" placeholder="Название, кухня, район"
                               class="field">
                    </label>

                    <label class="block">
                        <span class="field-label">Дата</span>
                        <input type="date" name="date" value="{{ $defaultFrom->toDateString() }}"
                               min="{{ $defaultFrom->toDateString() }}" class="field">
                    </label>

                    <label class="block">
                        <span class="field-label">Время</span>
                        <input type="time" name="time" value="{{ $defaultFrom->format('H:i') }}" step="1800" class="field">
                    </label>

                    <label class="block">
                        <span class="field-label">Гостей</span>
                        <select name="guests" class="field">
                            @for ($i = 1; $i <= 12; $i++)
                                <option value="{{ $i }}" @selected($i === 2)>{{ $i }}</option>
                            @endfor
                        </select>
                    </label>

                    <button type="submit" class="btn btn-primary h-12 px-8">Найти</button>
                </div>

                <div class="mt-3.5 flex flex-wrap items-center gap-[18px]">
                    <label class="flex cursor-pointer items-center gap-2 text-sm text-ink-70">
                        <input type="checkbox" name="available" value="1" @checked(request()->boolean('available'))
                               class="size-[17px] accent-primary">
                        Только со свободными столами
                    </label>

                    <span class="text-[13px] text-ink-40">
                        @if ($currentCity)
                            {{ $currentCity->name }} · {{ trans_choice(':count заведение принимает|:count заведения принимают|:count заведений принимают', $currentCity->active_venues_count, ['count' => $currentCity->active_venues_count]) }} брони
                        @else
                            Сначала выберите город — поиск откроется в его каталоге
                        @endif
                    </span>
                </div>
            </form>
        </div>
    </section>

    {{-- Свободно сегодня вечером (ТЗ §8.1) --}}
    @if ($popular->isNotEmpty())
        <section class="container-page pb-6 pt-14">
            <div class="mb-1.5 flex flex-wrap items-baseline justify-between gap-4">
                <h2 class="text-[28px] font-bold tracking-[-0.02em]">
                    {{ $currentCity ? 'Свободно сегодня вечером' : 'Топовые заведения' }}
                </h2>

                @if ($currentCity)
                    <a href="{{ route('catalog.city', $currentCity->slug) }}"
                       class="text-[15px] font-semibold text-primary-hover no-underline hover:text-primary hover:no-underline">
                        Весь каталог →
                    </a>
                @endif
            </div>

            <p class="mb-6 text-[15px] text-ink-60">
                {{ $currentCity
                    ? 'Слоты подтверждены заведениями — показываем только реальную доступность'
                    : 'Лучшие рестораны и кафе по оценкам гостей' }}
            </p>

            <div class="grid gap-5 [grid-template-columns:repeat(auto-fill,minmax(280px,1fr))]">
                @foreach ($popular as $venue)
                    <x-venue-card :venue="$venue" />
                @endforeach
            </div>
        </section>
    @endif

    {{-- Города и кухни (ТЗ §8.1) --}}
    <section class="container-page grid gap-10 pb-[72px] pt-6 lg:grid-cols-2">
        <div>
            <h2 class="mb-4 text-[22px] font-bold">Города</h2>

            @if ($cities->isEmpty())
                <p class="card p-6 text-sm text-ink-60">
                    Каталог наполняется: города появятся после первой синхронизации.
                </p>
            @else
                <div class="flex flex-wrap gap-2.5">
                    @foreach ($cities as $city)
                        <a href="{{ route('catalog.city', $city->slug) }}" class="pill no-underline hover:no-underline">
                            {{ $city->name }}
                            <span class="font-mono text-xs text-ink-40">{{ $city->active_venues_count }}</span>
                        </a>
                    @endforeach

                    <a href="{{ route('cities.index') }}"
                       x-on:click.prevent="$store.cityModal.show()"
                       class="pill no-underline hover:no-underline">
                        Все города
                    </a>
                </div>
            @endif
        </div>

        <div>
            <h2 class="mb-4 text-[22px] font-bold">Кухни</h2>

            <div class="flex flex-wrap gap-2.5">
                @foreach ($cuisines as $cuisine)
                    @if ($currentCity)
                        <a href="{{ route('catalog.cuisine', [$currentCity->slug, $cuisine->slug]) }}"
                           class="pill no-underline hover:no-underline">{{ $cuisine->name }}</a>
                    @else
                        <span class="pill">{{ $cuisine->name }}</span>
                    @endif
                @endforeach
            </div>
        </div>
    </section>
@endsection