@extends('auth.layout')

@section('title', 'Set up two-step verification')

@section('content')
    <div class="mx-auto w-full max-w-xl space-y-6 rounded-2xl border border-stone-200 bg-white p-6 shadow-xl shadow-stone-900/5 sm:p-8">
        <div>
            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-emerald-700">Account security</p>
            <h1 class="mt-2 text-2xl font-semibold tracking-tight text-stone-950">Enable two-step verification</h1>
            <p class="mt-2 text-sm leading-6 text-stone-600">
                Scan the QR code with your authenticator app, then enter the 6-digit code to confirm.
            </p>
        </div>

        @if (session('status'))
            <div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800" role="status">{{ session('status') }}</div>
        @endif

        <div class="flex flex-col items-center gap-4 rounded-xl border border-stone-200 bg-stone-50 p-4 sm:p-5">
            <div class="max-w-full overflow-hidden [&_svg]:h-auto [&_svg]:max-w-full">{!! $qrSvg !!}</div>
            <div class="max-w-full break-all text-center text-xs text-stone-500">
                Manual key: <code class="font-mono text-stone-700">{{ $secret }}</code>
            </div>
        </div>

        <form method="POST" action="{{ route('two-factor.confirm') }}" class="space-y-4">
            @csrf
            <div>
                <label for="code" class="mb-1.5 block text-sm font-medium text-stone-700">6-digit code</label>
                <input
                    id="code"
                    type="text"
                    name="code"
                    inputmode="numeric"
                    autocomplete="one-time-code"
                    maxlength="6"
                    required
                    class="vm-form-control w-full text-center font-mono text-xl tracking-[0.3em] @error('code') border-rose-400 @enderror"
                    @error('code') aria-invalid="true" aria-describedby="code-error" @enderror
                >
                @error('code')
                    <p id="code-error" class="mt-1.5 text-sm text-rose-600">{{ $message }}</p>
                @enderror
            </div>

            <label class="flex min-h-11 items-center gap-3 text-sm text-stone-600">
                <input type="checkbox" name="remember_device" value="1" class="shrink-0 rounded border-stone-300" checked>
                Remember this device for 30 days
            </label>

            <button type="submit" class="w-full rounded-xl bg-emerald-700 px-5 py-3 font-semibold text-white transition hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-600 focus:ring-offset-2">
                Confirm and enable
            </button>
        </form>

        @if (count($recoveryCodes) > 0)
            <div class="border-t border-stone-200 pt-5">
                <h2 class="font-semibold text-stone-900">Recovery codes</h2>
                <p class="mt-2 text-xs leading-5 text-stone-500">
                    Store these codes in a safe place. Each code can be used only once if you lose access to your authenticator.
                </p>
                <div class="mt-3 grid grid-cols-1 gap-2 font-mono text-sm sm:grid-cols-2">
                    @foreach ($recoveryCodes as $rc)
                        <div class="break-all rounded-lg bg-stone-100 p-2.5 text-stone-700">{{ $rc }}</div>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
@endsection