<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Verify OTP</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --primary:    #f9811e;
      --secondary:  #00a854;
      --bg:         #f4f2ee;
      --card-bg:    #ffffff;
      --text-dark:  #191919;
      --text-muted: #666666;
      --border:     #e2e8f0;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--bg);
      color: var(--text-dark);
      min-height: 100vh;
      display: flex; align-items: center; justify-content: center;
    }
    .app-shell { width: 100%; max-width: 480px; padding: 16px; }

    /* ── Card ── */
    .auth-card {
      background: var(--card-bg);
      border-radius: 20px;
      padding: 36px 28px 28px;
      box-shadow: 0 4px 32px rgba(0,0,0,.09);
    }

    /* ── Brand icon ── */
    .brand-icon {
      width: 64px; height: 64px;
      background: rgba(0,168,84,.1);
      border-radius: 18px;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 20px;
    }
    .brand-icon i { font-size: 30px; color: var(--secondary); }

    h4.title { font-size: 22px; font-weight: 700; color: var(--text-dark); text-align: center; margin-bottom: 4px; }
    p.subtitle { font-size: 14px; color: var(--text-muted); text-align: center; margin-bottom: 8px; }
    .phone-badge {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(249,129,30,.08); color: var(--primary);
      font-weight: 700; font-size: 14px;
      padding: 5px 14px; border-radius: 20px;
      margin: 0 auto 24px; display: flex; justify-content: center; width: fit-content;
    }

    /* ── OTP boxes ── */
    .otp-row {
      display: flex; gap: 10px; justify-content: center; margin-bottom: 6px;
    }
    .otp-box {
      width: 48px; height: 58px;
      text-align: center;
      font-size: 22px; font-weight: 700;
      border: 2px solid var(--border);
      border-radius: 12px;
      color: var(--text-dark);
      outline: none;
      transition: border-color .2s, box-shadow .2s;
      font-family: inherit;
    }
    .otp-box:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(249,129,30,.15);
    }
    .otp-box.filled { border-color: var(--secondary); background: rgba(0,168,84,.04); }
    .otp-box.error  { border-color: #dc3545; background: rgba(220,53,69,.04); animation: shake .4s ease; }
    @keyframes shake {
      0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 60%{transform:translateX(6px)}
    }

    /* ── Error / success ── */
    .field-error {
      font-size: 12px; color: #dc3545;
      display: flex; align-items: center; justify-content: center; gap: 4px;
      min-height: 18px; margin-bottom: 4px;
    }
    .field-success {
      font-size: 12px; color: var(--secondary);
      display: flex; align-items: center; justify-content: center; gap: 4px;
      min-height: 18px; margin-bottom: 4px;
    }

    /* ── Submit button ── */
    .btn-submit {
      width: 100%; padding: 14px;
      background: var(--primary); color: #fff;
      border: none; border-radius: 12px;
      font-family: inherit; font-size: 16px; font-weight: 700;
      cursor: pointer; margin-top: 14px;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      box-shadow: 0 4px 16px rgba(249,129,30,.35);
      transition: all .25s;
    }
    .btn-submit:hover { background: #e57316; transform: translateY(-1px); }
    .btn-submit:active { transform: translateY(0); }
    .btn-submit:disabled { opacity: .7; cursor: not-allowed; transform: none; }
    .btn-submit .spinner {
      display: none; width: 18px; height: 18px;
      border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff;
      border-radius: 50%; animation: spin .7s linear infinite;
    }
    .btn-submit.loading .spinner { display: inline-block; }
    .btn-submit.loading .btn-text { display: none; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Timer ── */
    .timer-row { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 16px; }
    .timer-count { font-weight: 700; color: var(--primary); }
    .timer-expired { display: none; }

    /* ── Bottom links ── */
    .bottom-links { text-align: center; margin-top: 16px; }
    .btn-link-style {
      background: none; border: none; padding: 0;
      font-family: inherit; font-size: 13px;
      color: var(--primary); font-weight: 600; cursor: pointer;
      text-decoration: none; transition: opacity .2s;
    }
    .btn-link-style:hover { opacity: .75; }
    .btn-change {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 13px; color: var(--text-muted); font-weight: 500;
      background: none; border: 1px solid var(--border);
      border-radius: 8px; padding: 6px 14px; cursor: pointer;
      font-family: inherit; transition: all .2s; text-decoration: none;
      margin-top: 10px;
    }
    .btn-change:hover { border-color: var(--primary); color: var(--primary); }
  </style>
</head>
<body>

<div class="app-shell">
  <div class="auth-card">

    <!-- Brand -->
    <div class="brand-icon"><i class="bi bi-shield-check"></i></div>
    <h4 class="title">Verify OTP</h4>
    <p class="subtitle">Enter the 6-digit code sent to</p>
    <div class="phone-badge"><i class="bi bi-phone"></i> <?= esc($maskedMobile) ?></div>

    <!-- Flash messages -->
    <?php if ($err = session()->getFlashdata('error_otp')): ?>
    <div class="field-error mb-2" id="otpErrorMsg">
      <i class="bi bi-exclamation-circle"></i> <?= esc($err) ?>
    </div>
    <?php endif; ?>
    <?php if ($ok = session()->getFlashdata('success_otp')): ?>
    <div class="field-success mb-2">
      <i class="bi bi-check-circle-fill"></i> <?= esc($ok) ?>
    </div>
    <?php endif; ?>
    <?php if ($err = session()->getFlashdata('error')): ?>
    <div class="alert alert-danger py-2 px-3 mb-3 rounded-3 d-flex align-items-center gap-2" style="font-size:13px">
      <i class="bi bi-exclamation-triangle-fill"></i> <?= esc($err) ?>
    </div>
    <?php endif; ?>

    <!-- OTP Form -->
    <form action="<?= site_url('member/verify') ?>" method="post" id="otpForm" novalidate>
      <?= csrf_field() ?>

      <div class="otp-row" id="otpRow">
        <?php for ($i = 1; $i <= 6; $i++): ?>
        <input type="text" inputmode="numeric" pattern="[0-9]"
               id="otp-<?= $i ?>" name="otp_<?= $i ?>"
               class="otp-box" maxlength="1"
               autocomplete="<?= $i === 1 ? 'one-time-code' : 'off' ?>"
               aria-label="OTP digit <?= $i ?>">
        <?php endfor; ?>
      </div>

      <div class="field-error" id="otpFrontError" style="display:none">
        <i class="bi bi-exclamation-circle"></i> Please enter all 6 digits.
      </div>

      <button type="submit" class="btn-submit" id="submitBtn" disabled>
        <span class="btn-text"><i class="bi bi-check-circle-fill"></i> Verify &amp; Continue</span>
        <span class="spinner"></span>
      </button>
    </form>

    <!-- Timer + Resend -->
    <div class="timer-row" id="timerRow">
      Resend OTP in <span class="timer-count" id="timerCount">5:00</span>
    </div>
    <div class="timer-expired" id="timerExpired">
      <form action="<?= site_url('member/resend-otp') ?>" method="post" style="text-align:center;margin-top:12px">
        <?= csrf_field() ?>
        <button type="submit" class="btn-link-style">
          <i class="bi bi-arrow-clockwise me-1"></i>Resend OTP
        </button>
      </form>
    </div>

    <!-- Change number -->
    <div class="bottom-links">
      <a href="<?= site_url('member/login') ?>" class="btn-change">
        <i class="bi bi-arrow-left"></i> Change Number
      </a>
    </div>

  </div><!-- /auth-card -->
</div><!-- /app-shell -->

<script>
// ── OTP box navigation ───────────────────────────────────────
var otpBoxes = Array.from(document.querySelectorAll('.otp-box'));
var submitBtn = document.getElementById('submitBtn');

otpBoxes.forEach(function(box, idx) {
  box.addEventListener('input', function() {
    // Allow only digits
    this.value = this.value.replace(/\D/g, '').slice(-1);
    if (this.value) {
      this.classList.add('filled');
      if (idx < otpBoxes.length - 1) otpBoxes[idx + 1].focus();
    } else {
      this.classList.remove('filled');
    }
    checkAllFilled();
  });

  box.addEventListener('keydown', function(e) {
    if (e.key === 'Backspace' && !this.value && idx > 0) {
      otpBoxes[idx - 1].value = '';
      otpBoxes[idx - 1].classList.remove('filled');
      otpBoxes[idx - 1].focus();
      checkAllFilled();
    }
    // Allow paste
    if ((e.ctrlKey || e.metaKey) && e.key === 'v') return;
  });

  box.addEventListener('focus', function() {
    this.select();
  });
});

// Handle paste — distribute digits across boxes
document.getElementById('otp-1').addEventListener('paste', function(e) {
  e.preventDefault();
  var pasted = (e.clipboardData || window.clipboardData).getData('text').replace(/\D/g, '');
  pasted.split('').slice(0, 6).forEach(function(ch, i) {
    if (otpBoxes[i]) {
      otpBoxes[i].value = ch;
      otpBoxes[i].classList.add('filled');
    }
  });
  var next = Math.min(pasted.length, 5);
  otpBoxes[next].focus();
  checkAllFilled();
});

function checkAllFilled() {
  var allFilled = otpBoxes.every(function(b) { return b.value.length === 1; });
  submitBtn.disabled = !allFilled;
}

// ── Front-end validation on submit ──────────────────────────
document.getElementById('otpForm').addEventListener('submit', function(e) {
  var filled = otpBoxes.every(function(b) { return b.value.length === 1; });
  if (!filled) {
    e.preventDefault();
    document.getElementById('otpFrontError').style.display = 'flex';
    otpBoxes.forEach(function(b) { if (!b.value) b.classList.add('error'); });
    return;
  }
  submitBtn.classList.add('loading');
  submitBtn.disabled = true;
});

// ── Mark boxes as error if server returned error ─────────────
<?php if (session()->getFlashdata('error_otp')): ?>
otpBoxes.forEach(function(b) { b.classList.add('error'); b.value = ''; });
otpBoxes[0].focus();
<?php endif; ?>

// ── Countdown timer (5:00) ───────────────────────────────────
var total = 300; // seconds
var timerEl = document.getElementById('timerCount');
var timerRow = document.getElementById('timerRow');
var expiredRow = document.getElementById('timerExpired');

var interval = setInterval(function() {
  total--;
  if (total <= 0) {
    clearInterval(interval);
    timerRow.style.display = 'none';
    expiredRow.style.display = 'block';
    return;
  }
  var m = Math.floor(total / 60);
  var s = total % 60;
  timerEl.textContent = m + ':' + (s < 10 ? '0' : '') + s;
}, 1000);

// Focus first box on load
otpBoxes[0].focus();
</script>

</body>
</html>
