<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="<?php echo e(asset('assets/logo_kemenpkp.png')); ?>">
    <title>Verifikasi OTP - Sebaran RTLH</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
</head>
    <style>
        :root {
            --bs-primary: #295F98; /* Blue */
            --bs-secondary: #CDC2A5; /* Gold */
            --bs-body-bg: #EAE4DD; /* Off White */
        }
        body {
            background-color: var(--bs-body-bg) !important;
            font-family: system-ui, -apple-system, sans-serif;
        }
        .text-primary { color: var(--bs-primary) !important; }
        .bg-primary { background-color: var(--bs-primary) !important; }
        
        .btn-primary {
            background-color: var(--bs-primary) !important;
            border-color: var(--bs-primary) !important;
        }
        .btn-primary:hover {
            background-color: #1e4b7a !important;
        }
        .card-otp {
            border: none;
            border-top: 5px solid var(--bs-secondary);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        }
    </style>
</head>
<body class="d-flex align-items-center justify-content-center" style="height: 100vh;">

    <div class="card card-otp bg-white" style="width: 400px;">
        <div class="card-body p-4 text-center">
            
            <div class="mb-4">
                <img src="<?php echo e(asset('assets/logo_kemenpkp.png')); ?>" alt="Logo" height="70" class="mb-2">
            </div>

            <h4 class="fw-bold text-primary mb-2">Verifikasi OTP</h4>
            <p class="text-muted small mb-4">
                Masukkan 6 digit kode yang telah dikirim ke email:<br>
                <strong><?php echo e(session('otp_email')); ?></strong>
            </p>

            <?php if(session('success')): ?>
                <div class="alert alert-success small mb-3 border-0 shadow-sm rounded-3">
                    <i class="bi bi-check-circle-fill me-1"></i> <?php echo e(session('success')); ?>

                </div>
            <?php endif; ?>

            <?php if(session('error')): ?>
                <div class="alert alert-danger small mb-3 border-0 shadow-sm rounded-3">
                     <i class="bi bi-exclamation-triangle-fill me-1"></i> <?php echo e(session('error')); ?>

                </div>
            <?php endif; ?>

            <form action="<?php echo e(route('otp.verify')); ?>" method="POST">
                <?php echo csrf_field(); ?>
                <div class="mb-4">
                    <input type="text" class="form-control form-control-lg text-center fw-bold text-primary" 
                           id="otp" name="otp" required maxlength="6" placeholder="000000" 
                           style="letter-spacing: 8px; font-size: 28px; border: 2px solid var(--bs-secondary);">
                </div>
                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-primary btn-lg fw-bold shadow-sm">
                        Verifikasi <i class="bi bi-check-circle-fill ms-1"></i>
                    </button>
                </div>
            </form>
            
            <div class="mt-4">
                <a href="<?php echo e(route('login')); ?>" class="text-decoration-none small text-danger fw-bold opacity-75 hover-opacity-100">
                    <i class="bi bi-x-circle me-1"></i> Batal / Login Ulang
                </a>
            </div>
        </div>
    </div>

</body>
</html>
<?php /**PATH E:\sebaran RTLH Jateng dan DIY\resources\views/auth/otp.blade.php ENDPATH**/ ?>