<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Member Login</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(249,129,30,.12);
      border-radius: 18px;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 20px;
    }
    .brand-icon i { font-size: 30px; color: var(--primary); }

    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: 24px; }

    /* ── Form controls ── */
    .form-label { font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; }
    .form-control, .form-select {
      border: 2px solid var(--border);
      border-radius: 10px;
      padding: 11px 14px;
      font-size: 15px;
      font-family: inherit;
      color: var(--text-dark);
      transition: border-color .2s;
    }
    .form-control:focus, .form-select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(249,129,30,.12);
      outline: none;
    }
    .form-control.is-invalid { border-color: #dc3545; }
    .input-group .form-select {
      border-radius: 10px 0 0 10px;
      border-right: none;
      max-width: 115px;
      padding: 11px 8px;
      font-size: 13px;
      background-color: #f8f9fc;
    }
    .input-group .form-control {
      border-radius: 0 10px 10px 0;
    }
    .input-group .form-select:focus { z-index: 2; }

    /* ── CAPTCHA row ── */
    .captcha-wrap {
      display: flex; gap: 10px; align-items: center;
    }
    .captcha-img {
      height: 48px; border-radius: 10px;
      border: 2px solid var(--border);
      background: #f8f9fc;
      cursor: pointer;
      flex-shrink: 0;
      display: block;
    }
    .captcha-refresh {
      background: none; border: none; padding: 0;
      color: var(--primary); font-size: 20px; cursor: pointer;
      flex-shrink: 0; line-height: 1;
      transition: transform .3s;
    }
    .captcha-refresh:hover { transform: rotate(180deg); }
    .captcha-input { flex: 1; letter-spacing: 4px; font-weight: 700; text-transform: uppercase; }

    /* ── 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: 20px;
      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); box-shadow: 0 6px 22px rgba(249,129,30,.45); }
    .btn-submit:active { transform: translateY(0); }
    .btn-submit .spinner { display: none; width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); 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); } }

    /* ── Error messages ── */
    .field-error { font-size: 12px; color: #dc3545; margin-top: 5px; display: flex; align-items: center; gap: 4px; }
    .field-error i { font-size: 12px; }

    /* ── Footer note ── */
    .auth-footer { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 18px; }
    .auth-footer a { color: var(--primary); font-weight: 600; text-decoration: none; }

    /* ── Divider ── */
    .or-divider { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; }
    .or-divider::before, .or-divider::after { content:''; flex:1; height:1px; background:#eee; }
    .or-divider span { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
  </style>
</head>
<body>

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

    <!-- Brand -->
    <div class="brand-icon"><i class="bi bi-phone-fill"></i></div>
    <h4 class="title">Welcome Back</h4>
    <p class="subtitle">Enter your registered mobile number to continue</p>

    <!-- Global flash error -->
    <?php if ($error = 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($error) ?>
    </div>
    <?php endif; ?>

    <form action="<?= site_url('member/send-otp') ?>" method="post" id="loginForm" novalidate>
      <?= csrf_field() ?>

      <!-- Mobile Number -->
      <div class="mb-3">
        <label class="form-label">Mobile Number <span class="text-danger">*</span></label>
        <div class="input-group">
          <!-- Country code select -->
          <select name="country_code" class="form-select" id="countryCode">
            <?php
            $codes = [
              '+91'=>'🇮🇳 +91','+1'=>'🇺🇸 +1','+44'=>'🇬🇧 +44','+61'=>'🇦🇺 +61',
              '+971'=>'🇦🇪 +971','+966'=>'🇸🇦 +966','+65'=>'🇸🇬 +65',
              '+60'=>'🇲🇾 +60','+880'=>'🇧🇩 +880','+92'=>'🇵🇰 +92',
              '+94'=>'🇱🇰 +94','+977'=>'🇳🇵 +977','+33'=>'🇫🇷 +33',
              '+49'=>'🇩🇪 +49','+81'=>'🇯🇵 +81','+86'=>'🇨🇳 +86',
            ];
            $selected = old('country_code', '+91');
            foreach ($codes as $code => $label):
            ?>
            <option value="<?= $code ?>" <?= $selected === $code ? 'selected' : '' ?>><?= $label ?></option>
            <?php endforeach; ?>
          </select>
          <input type="tel" name="mobile" id="mobileInput"
                 class="form-control <?= session()->getFlashdata('error_mobile') ? 'is-invalid' : '' ?>"
                 placeholder="98765 43210" maxlength="15" autocomplete="tel"
                 value="<?= esc(old('mobile')) ?>">
        </div>
        <?php if ($err = session()->getFlashdata('error_mobile')): ?>
        <div class="field-error"><i class="bi bi-exclamation-circle"></i> <?= esc($err) ?></div>
        <?php else: ?>
        <div class="field-error" id="mobileErr" style="display:none"><i class="bi bi-exclamation-circle"></i> Please enter a valid mobile number.</div>
        <?php endif; ?>
      </div>

      <!-- CAPTCHA -->
      <div class="mb-1">
        <label class="form-label">Security Code <span class="text-danger">*</span></label>
        <div class="captcha-wrap mb-2">
          <img src="<?= site_url('member/captcha') ?>?v=<?= time() ?>"
               id="captchaImg" class="captcha-img" alt="CAPTCHA"
               title="Click to refresh" onclick="refreshCaptcha()">
          <button type="button" class="captcha-refresh" onclick="refreshCaptcha()" title="Refresh CAPTCHA">
            <i class="bi bi-arrow-clockwise" id="refreshIcon"></i>
          </button>
          <input type="text" name="captcha" id="captchaInput"
                 class="form-control captcha-input <?= session()->getFlashdata('error_captcha') ? 'is-invalid' : '' ?>"
                 placeholder="Enter code" maxlength="5" autocomplete="off">
        </div>
        <?php if ($err = session()->getFlashdata('error_captcha')): ?>
        <div class="field-error"><i class="bi bi-exclamation-circle"></i> <?= esc($err) ?></div>
        <?php else: ?>
        <div class="field-error" id="captchaErr" style="display:none"><i class="bi bi-exclamation-circle"></i> Please enter the security code.</div>
        <?php endif; ?>
      </div>

      <!-- Submit -->
      <button type="submit" class="btn-submit" id="submitBtn">
        <span class="btn-text"><i class="bi bi-send-fill"></i> Send OTP</span>
        <span class="spinner"></span>
      </button>
    </form>

    <div class="auth-footer">
      <p>By continuing, you agree to our <a href="#">Terms of Service</a></p>
    </div>

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

<script>
// ── Refresh CAPTCHA ──────────────────────────────────────────
function refreshCaptcha() {
  var img  = document.getElementById('captchaImg');
  var icon = document.getElementById('refreshIcon');
  icon.style.transition = 'transform .4s';
  icon.style.transform  = 'rotate(360deg)';
  setTimeout(function() { icon.style.transform = ''; icon.style.transition = ''; }, 420);
  img.src = '<?= site_url('member/captcha') ?>?v=' + Date.now();
  document.getElementById('captchaInput').value = '';
  document.getElementById('captchaInput').focus();
}

// ── Front-end validation ─────────────────────────────────────
document.getElementById('loginForm').addEventListener('submit', function(e) {
  var mobile  = document.getElementById('mobileInput').value.replace(/\D/g,'');
  var captcha = document.getElementById('captchaInput').value.trim();
  var valid   = true;

  var mErr = document.getElementById('mobileErr');
  var cErr = document.getElementById('captchaErr');
  if (mErr) mErr.style.display = 'none';
  if (cErr) cErr.style.display = 'none';
  document.getElementById('mobileInput').classList.remove('is-invalid');
  document.getElementById('captchaInput').classList.remove('is-invalid');

  if (!mobile || mobile.length < 7) {
    document.getElementById('mobileInput').classList.add('is-invalid');
    if (mErr) mErr.style.display = 'flex';
    valid = false;
  }
  if (!captcha) {
    document.getElementById('captchaInput').classList.add('is-invalid');
    if (cErr) cErr.style.display = 'flex';
    valid = false;
  }
  if (!valid) { e.preventDefault(); return; }

  // Show loading
  var btn = document.getElementById('submitBtn');
  btn.classList.add('loading');
  btn.disabled = true;
});

// ── Auto-refresh captcha if server said it was wrong ──────────
<?php if (session()->getFlashdata('error_captcha')): ?>
refreshCaptcha();
<?php endif; ?>
</script>

</body>
</html>
