@extends('layouts.portal')

@section('title', 'Verify OTP - Two-Factor Authentication')
@section('page_title', 'Verify OTP')
@section('page_subtitle', 'Enter your one-time password')

@section('content')
<div class="max-w-md mx-auto p-6 mt-12">
    <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
        
        <!-- Header -->
        <div class="bg-gradient-to-r from-red-600 to-red-700 p-6 text-white text-center">
            <div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-lock text-white text-2xl"></i>
            </div>
            <h1 class="text-2xl font-bold">Verify OTP</h1>
            <p class="text-red-100 mt-2">Enter the 6-digit code sent to your email</p>
        </div>

        <!-- Content -->
        <div class="p-6">
            
            @if ($errors->any())
                <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl">
                    @foreach ($errors->all() as $error)
                        <p class="text-red-700 text-sm"><i class="fas fa-exclamation-circle mr-2"></i>{{ $error }}</p>
                    @endforeach
                </div>
            @endif

            <form action="{{ route('admin.2fa.verify.submit') }}" method="POST">
                @csrf

                <div class="mb-6">
                    <label class="block text-sm font-semibold text-gray-700 mb-3">6-Digit OTP Code</label>
                    <input 
                        type="text" 
                        name="otp" 
                        maxlength="6" 
                        pattern="[0-9]{6}"
                        inputmode="numeric"
                        required 
                        autofocus
                        placeholder="000000"
                        class="w-full px-4 py-4 text-3xl text-center font-bold tracking-widest border-2 border-gray-300 rounded-xl focus:border-red-500 focus:ring-2 focus:ring-red-200 outline-none transition-all"
                    >
                    <p class="text-xs text-gray-500 mt-2 text-center">Check your email for the code</p>
                </div>

                <!-- Info -->
                <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6">
                    <p class="text-sm text-blue-800">
                        <i class="fas fa-info-circle mr-2"></i>
                        <strong>Expires in 10 minutes.</strong> If the code expires, you'll need to request a new one.
                    </p>
                </div>

                <button 
                    type="submit" 
                    class="w-full py-3 px-4 bg-gradient-to-r from-red-600 to-red-700 text-white font-semibold rounded-xl hover:from-red-700 hover:to-red-800 transition-all shadow-lg"
                >
                    <i class="fas fa-check-circle mr-2"></i>Verify OTP
                </button>
            </form>

            <!-- Divider -->
            <div class="relative my-6">
                <div class="absolute inset-0 flex items-center">
                    <div class="w-full border-t border-gray-200"></div>
                </div>
                <div class="relative flex justify-center text-sm">
                    <span class="px-2 bg-white text-gray-500">or</span>
                </div>
            </div>

            <!-- Back Link -->
            <a 
                href="{{ route('admin.2fa.settings') }}" 
                class="block w-full text-center py-3 px-4 border-2 border-gray-300 text-gray-700 font-semibold rounded-xl hover:bg-gray-50 transition-all"
            >
                <i class="fas fa-arrow-left mr-2"></i>Back to Settings
            </a>
        </div>

        <!-- Footer -->
        <div class="bg-gray-50 px-6 py-4 border-t border-gray-200">
            <p class="text-xs text-gray-600 text-center">
                <i class="fas fa-shield-alt mr-1"></i>
                Your OTP is secure and will only be valid for 10 minutes.
            </p>
        </div>
    </div>
</div>
@endsection