{{--
    Форма бронирования (ТЗ §9.1).

    Обычная форма POST: без JavaScript она отправляется и работает — сетка
    слотов на выбранную по умолчанию дату отрисована сервером. Alpine только
    подгружает слоты при смене даты, числа гостей или продолжительности, чтобы
    не перезагружать страницу.
--}}
@props(['venue', 'city', 'slots', 'defaultFrom'])

@php
    $durations = (array) config('restomesto.booking.allowed_durations_minutes', [120]);
    $defaultDuration = (int) config('restoplace.availability.default_duration_minutes', 120);
    $minGuests = (int) config('restomesto.booking.min_guests', 1);
    $maxGuests = (int) config('restomesto.booking.max_guests', 20);

    /*
     * Время по умолчанию — первый свободный слот заведения, а не «ближайший
     * получас»: сетка приходит из Restoplace и начинается с открытия. Иначе в
     * поле оказалось бы время, которого нет среди вариантов, и форма уходила
     * бы на заведомый отказ.
     */
    $firstAvailable = $slots->availableSlots()[0] ?? null;

    $initialTime = old('time') ?? (
        $firstAvailable !== null
            ? $firstAvailable->startsAt->setTimezone($venue->timezone)->format('H:i')
            : $defaultFrom->format('H:i')
    );
@endphp

<section id="booking" class="card p-[22px]">
    <h2 class="mb-[18px] text-xl font-bold">Забронировать стол</h2>

    @if (session('booking_error'))
        {{-- Стол заняли между просмотром и отправкой (ТЗ §9.2): показываем
             понятное сообщение и сразу предлагаем альтернативу. --}}
        <div class="mt-3 rounded-control bg-danger-light px-4 py-3 text-sm text-danger" role="alert">
            {{ session('booking_error') }}

            @if (session('booking_alternatives'))
                <p class="mt-2 font-medium text-text">Ближайшее свободное время:</p>
                <ul class="mt-1 flex flex-wrap gap-2">
                    @foreach (session('booking_alternatives') as $slot)
                        <li class="rounded-control bg-surface px-2.5 py-1 font-semibold text-text">{{ $slot }}</li>
                    @endforeach
                </ul>
            @endif
        </div>
    @endif

    @if ($errors->any())
        <ul class="mt-3 space-y-1 rounded-control bg-danger-light px-4 py-3 text-sm text-danger" role="alert">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    @endif

    @if ($slots->unavailable)
        <p class="mt-3 rounded-control bg-warning-light px-4 py-3 text-sm text-warning">
            Сервис бронирования сейчас не отвечает. Попробуйте через минуту
            @if ($phone = $venue->publicPhone())
                или позвоните: <a href="tel:{{ preg_replace('/\D+/', '', $phone) }}" class="font-semibold underline">{{ $phone }}</a>
            @endif.
        </p>
    @endif

    <form method="POST"
          action="{{ route('booking.store', [$city->slug, $venue->slug]) }}"
          x-data="bookingForm({
              slotsUrl: @js(route('booking.slots', [$city->slug, $venue->slug])),
              initial: @js([
                  'slots' => collect($slots->slots)->map(fn ($slot) => [
                      'value' => $slot->startsAt->setTimezone($venue->timezone)->format('H:i'),
                      'label' => $slot->startsAt->setTimezone($venue->timezone)->format('H:i'),
                      'available' => $slot->available,
                  ])->values(),
                  'tables' => collect($slots->tablesFor(2))->map(fn ($table) => [
                      'id' => $table->id,
                      'name' => $table->name,
                      'hall_id' => $table->hallId,
                      'hall_name' => $table->hallName,
                  ])->values(),
                  'halls' => $slots->halls(2),
                  'allows_table_choice' => $slots->allowsTableChoice(),
              ]),
              date: @js(old('date', $defaultFrom->toDateString())),
              time: @js($initialTime),
              guests: @js((int) old('guests', 2)),
              duration: @js((int) old('duration', $defaultDuration)),
              hallId: @js(old('hall_id')),
              itemId: @js(old('item_id')),
          })"
          class="mt-4 space-y-4">
        @csrf

        <div class="grid gap-3 sm:grid-cols-3">
            <label class="block">
                <span class="field-label">Дата</span>
                <input type="date" name="date" x-model="date" x-on:change="reload()"
                       min="{{ now($venue->timezone)->toDateString() }}"
                       max="{{ now($venue->timezone)->addMonths(3)->toDateString() }}"
                       required
                       class="field h-11 text-sm">
            </label>

            <label class="block">
                <span class="field-label">Гостей</span>
                <select name="guests" x-model.number="guests" x-on:change="reload()" required
                        class="field h-11 text-sm">
                    @for ($i = $minGuests; $i <= $maxGuests; $i++)
                        <option value="{{ $i }}">{{ $i }}</option>
                    @endfor
                </select>
            </label>

            @if (count($durations) > 1)
                <label class="block">
                    <span class="field-label">На сколько</span>
                    <select name="duration" x-model.number="duration" x-on:change="reload()"
                            class="field h-11 text-sm">
                        @foreach ($durations as $minutes)
                            <option value="{{ $minutes }}">
                                {{ $minutes % 60 === 0 ? intdiv($minutes, 60).' ч' : $minutes.' мин' }}
                            </option>
                        @endforeach
                    </select>
                </label>
            @else
                <input type="hidden" name="duration" value="{{ $defaultDuration }}">
            @endif
        </div>

        {{-- Время: сервер отрисовал сетку на дату по умолчанию, Alpine
             обновляет её при смене параметров. --}}
        <div>
            <span class="field-label">Время</span>

            <input type="hidden" name="time" x-model="time" required>

            <div x-show="loading" x-cloak class="flex gap-2">
                <template x-for="i in 6" :key="i">
                    <span class="skeleton h-9 w-full"></span>
                </template>
            </div>

            <div x-show="! loading" class="grid grid-cols-4 gap-[7px]">
                <template x-for="slot in slots" :key="slot.value">
                    <button type="button"
                            x-text="slot.label"
                            x-bind:disabled="! slot.available"
                            x-on:click="time = slot.value"
                            x-bind:class="{
                                'slot-selected': time === slot.value && slot.available,
                                'slot-busy': ! slot.available,
                            }"
                            class="slot"></button>
                </template>
            </div>

            <p x-show="! loading && slots.length === 0" x-cloak class="text-sm text-muted">
                На эту дату свободных слотов нет. Попробуйте другой день.
            </p>
        </div>

        {{-- Зал и стол — только если ресторан разрешает выбор (ТЗ §9.1) --}}
        <div x-show="allowsTableChoice" x-cloak class="grid gap-3 sm:grid-cols-2">
            <label class="block" x-show="Object.keys(halls).length > 1">
                <span class="field-label">Зал</span>
                <select name="hall_id" x-model="hallId" x-on:change="itemId = ''"
                        class="field h-11 text-sm">
                    <option value="">Любой</option>
                    <template x-for="(name, id) in halls" :key="id">
                        <option x-bind:value="id" x-text="name"></option>
                    </template>
                </select>
            </label>

            <label class="block">
                <span class="field-label">Стол</span>
                <select name="item_id" x-model="itemId"
                        class="field h-11 text-sm">
                    <option value="">На усмотрение ресторана</option>
                    <template x-for="table in visibleTables()" :key="table.id">
                        <option x-bind:value="table.id" x-text="table.name"></option>
                    </template>
                </select>
            </label>
        </div>

        {{--
            Вошедшему гостю поля подставляются из профиля (ТЗ §12.1), но
            остаются доступными для правки: бронировать можно и на чужое имя.
        --}}
        <div class="grid gap-3 sm:grid-cols-2">
            <label class="block">
                <span class="field-label">Имя</span>
                <input type="text" name="name" value="{{ old('name', ($currentGuest ?? null)?->name) }}" required maxlength="160"
                       autocomplete="given-name"
                       class="field h-11 text-sm">
            </label>

            <label class="block">
                <span class="field-label">Телефон</span>
                <input type="tel" name="phone" value="{{ old('phone', ($currentGuest ?? null)?->phone) }}" required
                       placeholder="+7 (999) 123-45-67" autocomplete="tel"
                       class="field h-11 text-sm">
            </label>

            <label class="block sm:col-span-2">
                <span class="field-label">
                    Email <span class="font-normal text-subtle">— необязательно</span>
                </span>
                <input type="email" name="email" value="{{ old('email', ($currentGuest ?? null)?->email) }}" maxlength="255" autocomplete="email"
                       class="field h-11 text-sm">
            </label>

            <label class="block sm:col-span-2">
                <span class="field-label">Пожелания</span>
                <textarea name="comment" rows="2" maxlength="1000" placeholder="Например: стол у окна"
                          class="field h-11 text-sm">{{ old('comment') }}</textarea>
            </label>
        </div>

        {{-- Согласие на обработку ПДн обязательно (ТЗ §22) --}}
        <label class="flex cursor-pointer items-start gap-2 text-sm text-muted">
            <input type="checkbox" name="consent" value="1" required @checked(old('consent'))
                   class="mt-0.5 size-4 shrink-0 rounded border-border text-primary focus:ring-primary">
            <span>
                Согласен с <a href="{{ route('static-page', 'terms') }}" target="_blank" class="text-primary hover:underline">условиями</a>
                и <a href="{{ route('static-page', 'consent') }}" target="_blank" class="text-primary hover:underline">обработкой персональных данных</a>
            </span>
        </label>

        <button type="submit" x-bind:disabled="! time || loading"
                class="btn btn-primary btn-lg w-full">
            Забронировать
        </button>

        <p class="text-center text-xs text-subtle">
            Статус брони появится на её странице сразу после подтверждения заведением.
        </p>
    </form>
</section>