{{--
    Форма входа гостя (ТЗ §11.1, §11.2).

    Общая для страницы `/login` и для окна в шапке. Оба шага — обычные POST-формы
    и работают без JavaScript; Alpine добавляет только обратный отсчёт.

    `back` заполнен только в окне: по нему контроллер понимает, что гостя надо
    вернуть на ту же страницу и открыть окно заново.
--}}
@php
    $back ??= null;
    $autofocus ??= true;
    $codeLength = (int) config('restomesto.auth.guest.code_length', 4);
@endphp

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

@if ($errors->any())
    <ul class="mb-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 ($phone === null)
    {{-- Шаг 1: номер телефона --}}
    <form method="POST" action="{{ route('auth.login.send') }}" class="space-y-4">
        @csrf
        @if ($back !== null)
            <input type="hidden" name="back" value="{{ $back }}">
        @endif

        <label class="block">
            <span class="field-label">Телефон</span>
            <input type="tel" name="phone" value="{{ old('phone') }}"
                   inputmode="tel" autocomplete="tel" placeholder="+7 (999) 123-45-67" required
                   @if ($autofocus) autofocus @endif
                   class="field">
        </label>

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

        <button type="submit"
                class="btn btn-primary w-full">
            Получить звонок
        </button>

        <p class="text-center text-xs text-subtle">
            Мы позвоним и сбросим. Код — последние {{ $codeLength }} цифры номера, с которого поступит вызов.
        </p>
    </form>

    @if ($socialProviders !== [])
        <div class="my-6 flex items-center gap-3 text-xs text-subtle">
            <span class="h-px flex-1 bg-border"></span>
            или
            <span class="h-px flex-1 bg-border"></span>
        </div>

        <div class="space-y-2">
            @foreach ($socialProviders as $provider)
                <a href="{{ route('auth.social.redirect', $provider->provider()->value) }}"
                   rel="nofollow"
                   class="block rounded-control border border-border px-4 py-3 text-center text-sm font-semibold text-text transition-colors hover:border-primary hover:text-primary">
                    Войти через {{ $provider->provider()->label() }}
                </a>
            @endforeach
        </div>
    @endif
@else
    {{-- Шаг 2: код из звонка --}}
    <div x-data="loginCode({
            expiresAt: @js($expiresAt?->getTimestamp()),
            resendAt: @js($resendAt),
         })" class="space-y-4">

        <p class="text-sm text-text">
            Звоним на <strong>{{ $phone }}</strong>.
            <a href="{{ route('auth.login', ['change' => 1]) }}" class="text-muted underline hover:text-primary">Изменить</a>
        </p>

        <form method="POST" action="{{ route('auth.login.verify') }}" class="space-y-4">
            @csrf
            <input type="hidden" name="phone" value="{{ $phone }}">
            @if ($back !== null)
                <input type="hidden" name="back" value="{{ $back }}">
            @endif

            <label class="block">
                <span class="field-label">
                    Последние {{ $codeLength }} цифры номера
                </span>
                <input type="text" name="code"
                       inputmode="numeric" autocomplete="one-time-code"
                       maxlength="{{ $codeLength }}"
                       pattern="\d*" required
                       @if ($autofocus) autofocus @endif
                       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="btn btn-primary w-full">
                Войти
            </button>
        </form>

        <p class="text-center text-xs text-subtle" x-show="secondsLeft > 0" x-cloak>
            Код действует ещё <span x-text="formatted"></span>
        </p>

        <form method="POST" action="{{ route('auth.login.send') }}" class="text-center">
            @csrf
            <input type="hidden" name="phone" value="{{ $phone }}">
            <input type="hidden" name="consent" value="1">
            @if ($back !== null)
                <input type="hidden" name="back" value="{{ $back }}">
            @endif

            <button type="submit"
                    x-bind:disabled="resendIn > 0"
                    class="text-sm text-muted underline transition-colors hover:text-primary disabled:cursor-not-allowed disabled:no-underline disabled:opacity-50">
                <span x-show="resendIn <= 0">Позвонить ещё раз</span>
                <span x-show="resendIn > 0" x-cloak>Позвонить ещё раз через <span x-text="resendIn"></span> с</span>
            </button>
        </form>
    </div>
@endif