@extends('layouts.app')

@section('content')
<div class="container d-flex justify-content-center align-items-center min-vh-100">
    <div class="card shadow-lg p-4" style="max-width: 400px; width: 100%;">
        <h2 class="text-center mb-3 text-primary">Verify Your Account</h2>
        <p class="text-center text-muted">Enter the OTP sent to your email.</p>

        <!-- Show warning messages if they exist -->
        @if(isset($message))
            <div class="alert alert-{{ $status ? 'success' : 'danger' }} text-center">
                {{ $message }}
            </div>
        @endif

        <form action="{{ route('verify-otp') }}" method="POST" class="needs-validation">
            @csrf
            <input type="hidden" name="email" value="{{ $email ?? request()->email }}">

            <div class="mb-3">
                <label for="otp" class="form-label">OTP Code</label>
                <input type="text" name="otp" id="otp" class="form-control text-center" placeholder="Enter OTP" required>
                @error('otp')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>

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

<style>
    body {
        background: linear-gradient(135deg, #ffffff, #31bdff);
    }
    .card {
        border-radius: 10px;
    }
</style>
@endsection