<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Verifikasi Email - OTP</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        body { background: #0b1120; color: #e5e7eb; font-family: 'Inter', system-ui, sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
        .card { background: rgba(17,24,39,0.92); border-radius: 18px; padding: 36px 32px; max-width: 380px; width: 100%; box-shadow: 0 12px 32px #0005; }
        h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 18px; }
        label { font-size: 13px; color: #cbd5e1; }
        input[type="text"], input[type="email"] { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid #334155; background: #1e293b; color: #e5e7eb; margin-bottom: 18px; }
        button { width: 100%; padding: 12px; border-radius: 10px; border: none; background: linear-gradient(135deg, #2563eb, #14b8a6); color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; }
        .errors { background: #ef44441a; color: #fecaca; border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 13px; }
        .info { color: #fbbf24; font-size: 13px; margin-bottom: 12px; }
    </style>
</head>
<body>
    <form class="card" method="POST" action="{{ $formAction ?? route('verification.verify') }}">
        @csrf
        <h1>{{ $title ?? 'Verifikasi Email' }}</h1>
        <div class="info">{{ $info ?? 'Masukkan kode OTP yang telah dikirim ke email Anda.' }}</div>
        @if ($errors->any())
            <div class="errors">
                <ul style="margin:0; padding-left: 18px;">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <label for="email">Email</label>
        <input id="email" type="email" name="email" value="{{ old('email', $email ?? '') }}" required readonly />
        <label for="otp">Kode OTP</label>
        <input id="otp" type="text" name="otp" maxlength="6" pattern="[0-9]{6}" required placeholder="Masukkan 6 digit kode" autofocus />
        <button type="submit">Verifikasi</button>
    </form>
</body>
</html>
