@extends('layouts.restaurant')

{{--
    Вход в кабинет заведения (ТЗ §15.1).

    Два шага одной формой, без пароля. Ответ на первый шаг одинаков для любого
    адреса — форма не должна отвечать на вопрос «а это заведение подключено?».
--}}

@section('title', 'Вход в кабинет заведения — РестоМесто')

@section('content')
    <div class="container-page max-w-md py-10">
        <div class="card p-6">
            <h1 class="text-2xl font-extrabold tracking-tight text-ink">Кабинет заведения</h1>
            <p class="mt-1 text-sm text-muted">
                Вход по адресу электронной почты, указанному контактным у заведения. Пароль не нужен.
            </p>

            @if (session('restaurant_message'))
                <p class="mt-4 rounded-control bg-success-light px-4 py-3 text-sm text-success" role="status">
                    {{ session('restaurant_message') }}
                </p>
            @endif

            @if ($errors->any())
                <ul class="mt-4 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 ($email === null)
                <form method="POST" action="{{ route('restaurant.login.send') }}" class="mt-6 space-y-4">
                    @csrf

                    <label class="block">
                        <span class="field-label">Email заведения</span>
                        <input type="email" name="email" value="{{ old('email') }}"
                               autocomplete="email" required autofocus
                               class="field">
                    </label>

                    <button type="submit"
                            class="w-full rounded-control bg-primary px-4 py-3 font-semibold text-primary-contrast hover:bg-primary-hover">
                        Получить код
                    </button>

                    <p class="text-center text-xs text-subtle">
                        Не знаете, какой адрес указан контактным? Посмотрите его в системе бронирования заведения.
                    </p>
                </form>
            @else
                <div class="mt-6 space-y-4">
                    <p class="text-sm text-text">
                        Код отправлен на <strong>{{ $email }}</strong>.
                        <a href="{{ route('restaurant.login', ['change' => 1]) }}" class="text-muted underline hover:text-primary">Изменить</a>
                    </p>

                    <form method="POST" action="{{ route('restaurant.login.verify') }}" class="space-y-4">
                        @csrf
                        <input type="hidden" name="email" value="{{ $email }}">

                        <label class="block">
                            <span class="field-label">Код из письма</span>
                            <input type="text" name="code" inputmode="numeric" autocomplete="one-time-code"
                                   maxlength="6" pattern="\d*" required autofocus
                                   class="w-full rounded-control border border-border bg-surface px-3 py-3 text-center text-2xl font-bold tracking-[0.4em] text-text focus:border-primary">
                        </label>

                        <button type="submit"
                                class="w-full rounded-control bg-primary px-4 py-3 font-semibold text-primary-contrast hover:bg-primary-hover">
                            Войти
                        </button>
                    </form>

                    <form method="POST" action="{{ route('restaurant.login.send') }}" class="text-center">
                        @csrf
                        <input type="hidden" name="email" value="{{ $email }}">
                        <button type="submit" class="text-sm text-muted underline hover:text-primary">
                            Отправить код ещё раз
                        </button>
                    </form>
                </div>
            @endif
        </div>
    </div>
@endsection