@extends('layouts.public')

@section('title', 'Verify your registration')

@section('content')
    <section class="hero-wash relative overflow-hidden text-white">
        <x-geo-pattern id="geo-reg3" />
        <div class="relative mx-auto max-w-7xl px-4 pb-10 pt-32 sm:px-6 sm:pb-14 sm:pt-40 lg:px-8">
            <x-steps :current="3" class="mb-10 max-w-xl" />
            <div class="max-w-3xl animate-fade-up">
                <h1 class="font-display text-3xl font-semibold tracking-tight sm:text-5xl">Verify your details</h1>
                <p class="mt-3 max-w-2xl text-base text-white/80 sm:text-lg">
                    Hi {{ $registration->firstName() }}, enter the 6-digit code we sent to <strong class="text-white">{{ $maskedPhone }}</strong>. It expires in {{ $otpTtlMinutes }} minutes.
                </p>
            </div>
        </div>
    </section>

    <section class="mesh-light py-10 sm:py-14">
        <div class="mx-auto max-w-lg space-y-6 px-4 sm:px-6">
            <form method="POST" action="{{ route('registration.verify.submit') }}" class="surface space-y-5 p-6 sm:p-8"
                  x-data="{ busy: false }" @submit="busy = true" novalidate>
                @csrf

                <fieldset>
                    <legend class="label">Code sent by</legend>
                    <div class="mt-1 grid grid-cols-2 gap-2">
                        <label class="flex cursor-pointer items-center justify-center gap-2 rounded-xl border border-navy-100 bg-white px-3 py-2.5 text-sm font-medium has-[:checked]:border-emerald-500 has-[:checked]:bg-emerald-50 has-[:checked]:text-emerald-700">
                            <input type="radio" name="channel" value="sms" class="sr-only" @checked(old('channel', 'sms') === 'sms')> SMS
                        </label>
                        <label class="flex cursor-pointer items-center justify-center gap-2 rounded-xl border border-navy-100 bg-white px-3 py-2.5 text-sm font-medium has-[:checked]:border-emerald-500 has-[:checked]:bg-emerald-50 has-[:checked]:text-emerald-700">
                            <input type="radio" name="channel" value="email" class="sr-only" @checked(old('channel') === 'email')> E-mail
                        </label>
                    </div>
                    <p class="mt-1 text-xs text-navy-500">Choose E-mail if you requested a code to {{ $maskedEmail }}.</p>
                </fieldset>

                <div>
                    <label for="code" class="label">Verification code</label>
                    <input id="code" name="code" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="6" autocomplete="one-time-code" autofocus required
                           class="field text-center font-display text-3xl tracking-[0.5em]" placeholder="••••••" aria-describedby="code-hint">
                    <p id="code-hint" class="mt-1 text-xs text-navy-500">
                        @if ($attemptsRemaining !== null)
                            {{ $attemptsRemaining }} attempt{{ $attemptsRemaining === 1 ? '' : 's' }} remaining.
                        @else
                            Enter the code exactly as received.
                        @endif
                    </p>
                    <x-input-error :messages="$errors->get('code')" class="mt-2" />
                    <x-input-error :messages="$errors->get('channel')" class="mt-2" />
                </div>

                <button type="submit" class="btn-primary w-full sm:py-4 sm:text-base" :disabled="busy" :class="busy && 'opacity-70'">
                    <span x-show="!busy">Verify &amp; complete registration</span>
                    <span x-cloak x-show="busy">Verifying…</span>
                </button>
            </form>

            <div class="surface p-6">
                <h2 class="font-display text-lg font-semibold text-navy-900">Didn't get a code?</h2>
                <p class="mt-1 text-sm text-navy-500">Request a new one. Codes can only be sent a limited number of times.</p>
                <div class="mt-4 flex flex-col gap-3 sm:flex-row">
                    <form method="POST" action="{{ route('registration.verify.resend') }}" class="flex-1">
                        @csrf
                        <input type="hidden" name="channel" value="sms">
                        <button type="submit" class="btn-ghost w-full">Resend by SMS</button>
                    </form>
                    <form method="POST" action="{{ route('registration.verify.resend') }}" class="flex-1">
                        @csrf
                        <input type="hidden" name="channel" value="email">
                        <button type="submit" class="btn-ghost w-full">Send to e-mail</button>
                    </form>
                </div>
            </div>

            <p class="text-center text-sm text-navy-500">Wrong number? <a href="{{ route('registration.create') }}" class="font-semibold text-emerald-600 underline">Start again</a></p>
        </div>
    </section>
@endsection