<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verifikasi Email - Pustaka Nawasena</title>
<link rel="icon" href="{{ asset('images/kartu.png') }}" type="image/png">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<style>
    html, body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
body {
    font-family: 'Inter', sans-serif;
    background: url('{{ asset("images/pojokbaca.jpeg") }}') no-repeat center center fixed;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
}
body::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 0;
}
.card {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.4);
    width: 90%;
    max-width: 420px;
    padding: 40px;
    animation: fadeIn 0.8s ease forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}
.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}
.logo img {
    width: 55px;
    height: 55px;
}
.title-section {
    text-align: center;
    margin-bottom: 25px;
}
.title-section h4 {
    font-weight: 700;
    color: #000;
    margin-bottom: 5px;
}
.title-section p {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}
.otp-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}
.otp-input {
    width: 45px;
    height: 55px;
    text-align: center;
    font-size: 1.5rem;
    border: 2px solid #ccc;
    border-radius: 10px;
    transition: all 0.2s;
}
.otp-input:focus {
    outline: none;
    border-color: #ff7a00;
    box-shadow: 0 0 8px rgba(255,122,0,0.5);
    transform: scale(1.05);
}
.btn-primary {
    background-color: #ff7a00;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background-color: #e86d00;
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(255,122,0,0.3);
}
.btn-outline-primary {
    border-radius: 12px;
    font-weight: 600;
}
.text-small a {
    color: #ff7a00;
    text-decoration: none;
}
.text-small a:hover {
    text-decoration: underline;
}
</style>
</head>
<body>

<div class="card">
    <div class="logo">
        <img src="{{ asset('images/kartu.png') }}" alt="Logo Kartu">
    </div>

    <div class="title-section">
        <h4>Pustaka Nawasena</h4>
        <p>Bakorwil III Malang</p>
    </div>

    <h5 class="text-center fw-bold text-primary mb-3">Verifikasi Email</h5>

    @if(session('success'))
        <div class="alert alert-success text-center small">{{ session('success') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger small">
            {{ $errors->first() }}
        </div>
    @endif

    <p class="text-center small mb-3">
        Kami telah mengirimkan kode OTP ke email <strong>{{ $email }}</strong>.<br>
        Masukkan kode 6 digit di bawah ini untuk verifikasi.
    </p>

    <form method="POST" action="{{ route('verify.email.submit') }}" onsubmit="combineOTP()">
        @csrf
        <input type="hidden" name="email" value="{{ $email }}">
        <input type="hidden" name="otp" id="otp-hidden">

        <div class="otp-container">
            <input type="text" maxlength="1" class="otp-input" required>
            <input type="text" maxlength="1" class="otp-input" required>
            <input type="text" maxlength="1" class="otp-input" required>
            <input type="text" maxlength="1" class="otp-input" required>
            <input type="text" maxlength="1" class="otp-input" required>
            <input type="text" maxlength="1" class="otp-input" required>
        </div>

        <button class="btn btn-primary w-100 py-2">Verifikasi Sekarang</button>
    </form>

    <hr class="my-4">

    <form method="POST" action="{{ route('resend.otp') }}" id="resendForm">
        @csrf
        <input type="hidden" name="email" value="{{ $email }}">
        <button type="submit" id="resendBtn" class="btn btn-outline-primary w-100" disabled>
            Kirim Ulang Kode (<span id="countdown">60</span>s)
        </button>
    </form>
</div>

<script>
const inputs = document.querySelectorAll('.otp-input');
inputs.forEach((input, index) => {
    input.addEventListener('input', (e) => {
        if (e.target.value.length === 1 && index < inputs.length - 1) {
            inputs[index + 1].focus();
        }
    });
    input.addEventListener('keydown', (e) => {
        if (e.key === 'Backspace' && index > 0 && !e.target.value) {
            inputs[index - 1].focus();
        }
    });
});

function combineOTP() {
    const otp = Array.from(inputs).map(i => i.value).join('');
    document.getElementById('otp-hidden').value = otp;
}

let countdown = 60;
let timer = setInterval(() => {
    countdown--;
    document.getElementById('countdown').innerText = countdown;
    if (countdown <= 0) {
        clearInterval(timer);
        const btn = document.getElementById('resendBtn');
        btn.disabled = false;
        btn.innerText = 'Kirim Ulang Kode';
    }
}, 1000);
</script>

</body>
</html>

