@extends('layouts.app')

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

@section('content')
<div class="max-w-md mx-auto px-4 py-16">
    
    <div class="bg-white rounded-3xl p-8 border border-slate-200/80 shadow-xl space-y-6">
        
        <div class="text-center space-y-2">
            <div class="w-14 h-14 bg-emerald-50 text-emerald-600 rounded-2xl flex items-center justify-center text-2xl mx-auto font-bold shadow-sm">
                <i class="fa-solid fa-shield-halved"></i>
            </div>
            <h1 class="text-2xl font-extrabold text-slate-900 tracking-tight">Enter OTP Code</h1>
            <p class="text-xs text-slate-500 font-medium">We sent a 6-digit OTP code to <strong class="text-slate-800 font-mono">{{ $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

        <form action="{{ route('password.reset.submit') }}" method="POST" class="space-y-4">
            @csrf

            <input type="hidden" name="email" value="{{ $email }}">

            <div>
                <label class="block text-xs font-extrabold text-slate-700 mb-1">6-Digit Verification OTP *</label>
                <input type="text" name="otp" maxlength="6" placeholder="123456" required autofocus class="w-full px-4 py-3 rounded-2xl border border-slate-200 text-center text-lg font-mono font-bold tracking-widest focus:ring-2 focus:ring-brand-500 focus:outline-none">
                @error('otp')
                    <p class="text-xs text-rose-600 mt-1 font-semibold">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block text-xs font-extrabold text-slate-700 mb-1">New Password *</label>
                <input type="password" name="password" placeholder="At least 6 characters" required class="w-full px-4 py-3 rounded-2xl border border-slate-200 text-xs focus:ring-2 focus:ring-brand-500 focus:outline-none">
                @error('password')
                    <p class="text-xs text-rose-600 mt-1 font-semibold">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block text-xs font-extrabold text-slate-700 mb-1">Confirm New Password *</label>
                <input type="password" name="password_confirmation" placeholder="Re-enter new password" required class="w-full px-4 py-3 rounded-2xl border border-slate-200 text-xs focus:ring-2 focus:ring-brand-500 focus:outline-none">
            </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-lock-open text-xs"></i>
                <span>Reset Password</span>
            </button>
        </form>

        <div class="text-center text-xs pt-4 border-t border-slate-100 flex items-center justify-between">
            <a href="{{ route('password.forgot') }}" class="font-semibold text-slate-500 hover:text-slate-800">
                Resend OTP?
            </a>
            <a href="{{ route('login') }}" class="font-bold text-brand-600 hover:underline">
                Back to Sign In
            </a>
        </div>

    </div>
</div>
@endsection