@extends('layouts.verify-layout')

@section('content')

<div class="glass entrance w-full max-w-lg rounded-3xl p-12 shadow-2xl">

    <h2 class="text-4xl font-bold text-center mb-6 tracking-wide">
        Enter Verification Code
    </h2>

    <p class="text-gray-300 text-center mb-10 leading-relaxed">
        We’ve sent a 6-digit code to your email.
    </p>

    {{-- Validation Errors --}}
    @if ($errors->any())
        <div class="bg-red-600/20 border border-red-500 text-red-400 text-sm p-4 rounded-lg mb-6 text-center">
            {{ $errors->first() }}
        </div>
    @endif

    {{-- Session Error (Invalid Code) --}}
    @if (session('error'))
        <div class="bg-red-600/20 border border-red-500 text-red-400 text-sm p-4 rounded-lg mb-6 text-center">
            {{ session('error') }}
        </div>
    @endif

    {{-- Success Message --}}
    @if (session('success'))
        <div class="bg-green-600/20 border border-green-500 text-green-400 text-sm p-4 rounded-lg mb-6 text-center">
            {{ session('success') }}
        </div>
    @endif

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

        <input 
            type="text"
            name="code"
            maxlength="6"
            required
            inputmode="numeric"
            pattern="[0-9]*"
            placeholder="------"
            class="w-full px-5 py-4 rounded-xl bg-black/60 border border-gray-700 
                   focus:border-green-600 focus:ring-2 focus:ring-green-600/40 
                   outline-none text-white tracking-[0.5em] text-center text-xl transition duration-300"
        >

        <button type="submit"
            class="w-full bg-green-600 hover:bg-green-700 transition 
                   py-4 rounded-xl font-semibold tracking-wide 
                   shadow-lg shadow-green-900/40">
            Verify Code
        </button>
    </form>

    <div class="text-center mt-6">
        <form method="POST" action="{{ route('resend.code') }}">
            @csrf
            <button type="submit"
                class="text-gray-400 text-sm hover:text-white transition">
                Resend Code
            </button>
        </form>
    </div>

</div>

@endsection