@extends('layouts.app')

@section('content')
<div class="container d-flex justify-content-center align-items-center" style="min-height: 80vh;">
    <div class="w-100" style="max-width: 400px; background: #ffffff; padding: 30px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.05);">
        
        <h3 class="text-center mb-4">Verify Your Email</h3>

        <p class="text-center">An OTP has been sent to your email: 
            <strong>{{ session('email') }}</strong>
        </p>

        @if ($errors->any())
            <div class="alert alert-danger mt-3">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li style="font-size: 14px;">{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger mt-3">{{ session('error') }}</div>
        @endif

        <form method="POST" action="{{ route('doctor.otp.verify') }}" class="mt-4">
            @csrf
            <input type="hidden" name="email" value="{{ session('email') }}" />

            <div class="form-group mb-3">
                <label for="otp" class="form-label">Enter OTP</label>
                <input id="otp" type="text" name="otp" class="form-control" maxlength="6" placeholder="Enter 6-digit OTP" required autofocus>
            </div>

            <div class="d-grid">
                <button type="submit" class="btn btn-primary btn-block w-100">Verify OTP</button>
            </div>
        </form>

    </div>
</div>
@endsection