@extends('layouts.admin-guest')

@section('content')
    @if (session('status'))
        <div class="mb-6 rounded-xl border border-yellow-200 bg-yellow-50 px-4 py-3 text-yellow-900">
            <p class="text-sm font-medium">{{ session('status') }}</p>
        </div>
    @endif

    @if (session('two_factor_dev_code'))
        <div class="mb-6 rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-gray-800">
            <p class="text-sm font-semibold">Local security code: {{ session('two_factor_dev_code') }}</p>
        </div>
    @endif

    <form method="POST" action="{{ route('login.two-factor.store') }}" class="space-y-6">
        @csrf

        <div>
            <h2 class="text-xl font-bold text-gray-950">Security Check</h2>
            <p class="mt-2 text-sm leading-6 text-gray-600">
                Enter the 6-digit code sent to your admin email address.
            </p>
        </div>

        <div>
            <label for="code" class="mb-2 block text-sm font-semibold text-gray-700">
                <i class="fas fa-shield-halved mr-2 text-yellow-600"></i>
                Security Code
            </label>
            <input id="code"
                   type="text"
                   name="code"
                   value="{{ old('code') }}"
                   required
                   autofocus
                   inputmode="numeric"
                   pattern="[0-9]{6}"
                   maxlength="6"
                   autocomplete="one-time-code"
                   class="block w-full rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-center text-2xl font-bold tracking-[0.35em] text-gray-950 placeholder-gray-400 transition-all duration-200 focus:border-transparent focus:bg-white focus:outline-none focus:ring-2 focus:ring-yellow-500"
                   placeholder="000000">
            @error('code')
                <p class="mt-2 flex items-center text-sm text-red-600">
                    <i class="fas fa-exclamation-circle mr-1"></i>
                    {{ $message }}
                </p>
            @enderror
        </div>

        <button type="submit"
                class="group relative flex w-full justify-center rounded-xl border border-transparent bg-gradient-to-r from-yellow-300 to-yellow-600 px-4 py-3 text-sm font-semibold text-black shadow-lg transition-all duration-200 hover:from-yellow-400 hover:to-yellow-700 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2">
            <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                <i class="fas fa-lock text-black/60 group-hover:text-black"></i>
            </span>
            Verify and Continue
        </button>

        <div class="flex flex-col items-center gap-3 text-center">
            <button type="submit" form="two-factor-resend" class="text-sm font-semibold text-yellow-700 transition-colors duration-200 hover:text-yellow-800">
                Resend security code
            </button>
            <a href="{{ route('login') }}" class="text-sm font-medium text-gray-500 transition-colors duration-200 hover:text-gray-700">
                Back to sign in
            </a>
        </div>
    </form>

    <form id="two-factor-resend" method="POST" action="{{ route('login.two-factor.resend') }}" class="hidden">
        @csrf
    </form>
@endsection