@extends('layouts.app')

@section('title', 'Verify Email OTP - ' . ($shopSettings['shop_name'] ?? 'Orange Groceries'))
@section('meta_robots', 'noindex, nofollow')

@section('content')
<div class="max-w-md mx-auto my-12 px-4">
    <div class="bg-white rounded-3xl p-8 border border-slate-200/80 shadow-xl shadow-slate-200/50 space-y-6">
        
        <div class="text-center space-y-2">
            <div class="w-16 h-16 bg-emerald-50 text-emerald-600 rounded-2xl flex items-center justify-center text-2xl mx-auto font-bold shadow-inner">
                <i class="fa-solid fa-envelope-circle-check"></i>
            </div>
            <h2 class="text-2xl font-extrabold text-slate-900 tracking-tight">Verify Your Email</h2>
            <p class="text-xs text-slate-500 font-medium leading-relaxed">
                We sent a 6-digit verification OTP code to<br>
                <strong class="text-slate-800 font-mono text-sm">{{ $email ?? session('reg_data.email') }}</strong>
            </p>
        </div>

        @if(session('success'))
            <div class="p-4 bg-emerald-50 border-l-4 border-emerald-500 rounded-r-2xl text-emerald-800 text-xs font-bold flex items-center gap-2">
                <i class="fa-solid fa-circle-check text-emerald-600 text-base"></i>
                <span>{{ session('success') }}</span>
            </div>
        @endif

        @if($errors->any())
            <div class="p-4 bg-rose-50 border-l-4 border-rose-500 rounded-r-2xl text-rose-800 text-xs font-bold space-y-1">
                @foreach($errors->all() as $error)
                    <p><i class="fa-solid fa-triangle-exclamation mr-1"></i> {{ $error }}</p>
                @endforeach
            </div>
        @endif

        <form action="{{ route('register.verify.otp') }}" method="POST" class="space-y-5">
            @csrf

            <div>
                <label class="block text-xs font-extrabold text-slate-700 uppercase tracking-wider mb-2 text-center">
                    Enter 6-Digit OTP Code
                </label>
                <input type="text" 
                       name="otp" 
                       maxlength="6" 
                       placeholder="123456" 
                       required 
                       autofocus 
                       class="w-full px-4 py-3.5 rounded-2xl border border-slate-200 text-center text-2xl font-mono font-black tracking-[0.4em] focus:ring-2 focus:ring-brand-500 focus:border-brand-500 focus:outline-none text-slate-900 bg-slate-50/50">
            </div>

            <button type="submit" class="w-full bg-brand-600 hover:bg-brand-700 text-white font-extrabold text-sm py-3.5 rounded-2xl transition shadow-lg shadow-brand-600/30 flex items-center justify-center gap-2">
                <i class="fa-solid fa-shield-check text-base"></i>
                <span>Verify Email & Create Account</span>
            </button>
        </form>

        <div class="pt-4 border-t border-slate-100 flex items-center justify-between text-xs">
            <form action="{{ route('register.resend.otp') }}" method="POST">
                @csrf
                <button type="submit" class="font-extrabold text-brand-600 hover:text-brand-700 flex items-center gap-1 hover:underline">
                    <i class="fa-solid fa-rotate-right text-[10px]"></i> Resend OTP Code
                </button>
            </form>
            <a href="{{ route('register') }}" class="font-semibold text-slate-400 hover:text-slate-700">
                Change Details
            </a>
        </div>

    </div>
</div>
@endsection