<!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') %> | Portal ISP</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/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">
  <link rel="stylesheet" href="/css/style.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>
    body {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .otp-container {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .otp-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border: none;
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      max-width: 400px;
      width: 100%;
    }
    .otp-header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 30px 20px;
      text-align: center;
    }
    .logo-container {
      width: 80px;
      height: 80px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 15px;
    }
    .logo-container img {
      width: 50px;
      height: 50px;
      object-fit: contain;
    }
    .form-container {
      padding: 30px 25px;
    }
    .form-floating {
      margin-bottom: 20px;
    }
    .form-control {
      border: 2px solid #e9ecef;
      border-radius: 12px;
      padding: 15px 20px;
      font-size: 16px;
      transition: all 0.3s ease;
      text-align: center;
      letter-spacing: 2px;
      font-weight: 600;
    }
    .form-control:focus {
      border-color: #667eea;
      box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }
    .btn-verify {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      border-radius: 12px;
      padding: 15px;
      font-size: 16px;
      font-weight: 600;
      transition: all 0.3s ease;
    }
    .btn-verify:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
    }
    .alert {
      border-radius: 12px;
      border: none;
      padding: 12px 16px;
    }
    .alert-danger {
      background: rgba(220, 53, 69, 0.1);
      color: #dc3545;
      border-left: 4px solid #dc3545;
    }
    .footer-text {
      color: #6c757d;
      font-size: 12px;
      margin-top: 20px;
    }
    .otp-info {
      background: rgba(102, 126, 234, 0.1);
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 20px;
      border-left: 4px solid #667eea;
    }
    @media (max-width: 576px) {
      .otp-container {
        padding: 10px;
      }
      .otp-card {
        border-radius: 15px;
      }
      .form-container {
        padding: 25px 20px;
      }
    }
  </style>
</head>
<body>
  <div class="otp-container">
    <div class="otp-card">
      <div class="otp-header">
        <div class="logo-container">
          <img src="/img/logo.png" alt="Logo">
        </div>
        <h4 class="mb-1 fw-bold">Verifikasi OTP</h4>
        <p class="mb-0 opacity-75">Masukkan kode OTP dari WhatsApp</p>
      </div>
      <div class="form-container">
        <% if (error) { %>
          <div class="alert alert-danger">
            <i class="bi bi-exclamation-triangle me-2"></i><%= error %>
          </div>
        <% } %>
        <div class="otp-info">
          <i class="bi bi-info-circle me-2"></i>
          Kode OTP telah dikirim ke nomor <strong><%= phone %></strong>
        </div>
        <form method="POST" action="/customer/otp">
          <input type="hidden" name="phone" value="<%= phone %>">
          <div class="form-floating">
            <input type="text" class="form-control" id="otp" name="otp" placeholder="Kode OTP" required pattern="[0-9]{<%= otp_length %>}" maxlength="<%= otp_length %>" autofocus>
            <label for="otp">
              <i class="bi bi-shield-lock me-2"></i>Kode OTP (<%= otp_length %> digit)
            </label>
          </div>
          <button type="submit" class="btn btn-primary btn-verify w-100">
            <i class="bi bi-check-circle me-2"></i>Verifikasi
          </button>
        </form>
        <div class="text-center footer-text">
          &copy; <%= new Date().getFullYear() %> ALIJAYA DIGITAL NETWORK
        </div>
      </div>
    </div>
  </div>
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js', { scope: '/customer/' }).catch(() => {});
      });
    }
  </script>
</body>
</html> 
