<!DOCTYPE html>
<html lang="<%= lang || 'id' %>">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= t('customer.otp_title', 'Verifikasi OTP') %> | <%= settings.company_header || 'ISP Portal' %>
    </title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="manifest" href="/manifest.webmanifest">
    <meta name="theme-color" content="#0f172a">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <link rel="apple-touch-icon" href="/img/logo.png">
    <link rel="icon" href="/img/logo.png">
    <style>
        :root {
            --primary-color: #4361ee;
            --accent-color: #4895ef;
            --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        }

        body {
            background: var(--bg-gradient);
            min-height: 100vh;
            display: flex;
            align-items: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #f8fafc;
        }

        .login-card {
            background: rgba(30, 41, 59, 0.7);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            width: 100%;
            max-width: 420px;
            margin: auto;
        }

        .form-control {
            background: rgba(15, 23, 42, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
            padding: 12px 15px;
            border-radius: 10px;
        }

        .form-control:focus {
            background: rgba(15, 23, 42, 0.8);
            border-color: var(--primary-color);
            color: white;
            box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.15);
        }

        .btn-primary {
            background: var(--primary-color);
            border: none;
            padding: 12px;
            border-radius: 10px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .btn-primary:hover {
            background: var(--accent-color);
            transform: translateY(-2px);
        }

        .otp-input {
            letter-spacing: 12px;
            font-size: 24px;
            font-weight: 700;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="login-card">
            <div class="text-center mb-4">
                <div class="mb-3">
                    <i class="bi bi-shield-lock-fill text-primary" style="font-size: 3rem;"></i>
                </div>
                <h2 class="fw-bold">Verifikasi OTP</h2>
                <p class="text-secondary">Kode verifikasi telah dikirim ke nomor WhatsApp Anda: <br><strong>
                        <%= phone %>
                    </strong></p>
            </div>

            <% if (error) { %>
                <div class="alert alert-danger border-0 bg-danger bg-opacity-10 text-danger" role="alert">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i>
                    <%= error %>
                </div>
                <% } %>

                    <form action="/customer/login-otp" method="POST">
                        <div class="mb-4">
                            <label for="otp" class="form-label text-secondary small text-uppercase fw-bold">Masukkan 4
                                Digit Kode OTP</label>
                            <input type="text" class="form-control otp-input" id="otp" name="otp" maxlength="4"
                                pattern="\d{4}" required autocomplete="one-time-code" autofocus placeholder="0000">
                        </div>

                        <button type="submit" class="btn btn-primary w-100 mb-3">
                            <i class="bi bi-check-circle-fill me-2"></i> Verifikasi & Masuk
                        </button>

                        <div class="text-center">
                            <a href="/customer/login" class="text-secondary text-decoration-none small">
                                <i class="bi bi-arrow-left me-1"></i> Kembali ke Login
                            </a>
                        </div>
                    </form>
        </div>
    </div>
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js', { scope: '/customer/' }).catch(() => {});
            });
        }
    </script>
</body>

</html>
