<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reset Password – MJPOS SYSTEMS</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
  *{box-sizing:border-box}
  body{margin:0;min-height:100vh;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
       background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 45%,#0891b2 100%);
       display:flex;flex-direction:column;align-items:center;justify-content:center;
       padding:20px;overflow-x:hidden}

  body::before{
    content:'';position:fixed;top:-100px;right:-100px;width:340px;height:340px;
    background:radial-gradient(circle,rgba(255,255,255,.07),transparent 70%);
    border-radius:50%;pointer-events:none;
  }
  body::after{
    content:'';position:fixed;bottom:-120px;left:-80px;width:300px;height:300px;
    background:radial-gradient(circle,rgba(34,211,238,.1),transparent 70%);
    border-radius:50%;pointer-events:none;
  }

  .rp-card{
    width:100%;max-width:440px;background:#fff;border-radius:18px;
    box-shadow:0 20px 50px rgba(0,0,0,.25);overflow:hidden;position:relative;z-index:2;
  }
  .rp-header{
    background:linear-gradient(135deg,#15803d,#16a34a);color:#fff;
    padding:32px 32px 26px;text-align:center;
  }
  .rp-icon{
    width:56px;height:56px;background:rgba(255,255,255,.15);border-radius:14px;
    display:flex;align-items:center;justify-content:center;font-size:24px;
    margin:0 auto 14px;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(4px);
  }
  .rp-header h5{font-weight:800;margin-bottom:4px}
  .rp-header p{opacity:.85;font-size:.82rem;margin:0}
  .rp-body{padding:28px 32px 30px}

  .form-label-modern{font-size:.8rem;font-weight:700;color:#334155;margin-bottom:6px;display:block}
  .input-modern{
    border:1.5px solid #e2e8f0;border-radius:10px;padding:11px 14px;font-size:.92rem;
    width:100%;transition:border-color .15s,box-shadow .15s;background:#f8fafc;
  }
  .input-modern:focus{outline:none;border-color:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.12);background:#fff}
  .input-group-modern{position:relative}
  .input-group-modern i.input-leading{
    position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:.95rem;z-index:2
  }
  .input-group-modern .input-modern{padding-left:40px;padding-right:40px}
  .toggle-pwd{
    position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;
    border:none;color:#94a3b8;cursor:pointer;padding:4px;z-index:2
  }
  .toggle-pwd:hover{color:#475569}

  .btn-rp{
    background:linear-gradient(135deg,#15803d,#16a34a);border:none;border-radius:10px;
    padding:12px;font-weight:700;font-size:.95rem;color:#fff;width:100%;
    transition:transform .12s,box-shadow .15s;
  }
  .btn-rp:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(22,163,74,.35);color:#fff}

  .strength-bar{height:5px;border-radius:3px;transition:all .3s;background:#e2e8f0}

  .expiry-banner{
    background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:10px;
    padding:10px 14px;font-size:.8rem;color:#1d4ed8;margin-bottom:20px;
    display:flex;align-items:center;gap:8px;
  }

  .alert-modern{border-radius:10px;border:none;font-size:.85rem;padding:12px 16px;margin-bottom:18px}

  .back-link{
    display:inline-flex;align-items:center;gap:6px;color:#fff;opacity:.85;
    text-decoration:none;font-size:.85rem;font-weight:600;margin-top:22px;
    position:relative;z-index:2;
  }
  .back-link:hover{opacity:1;color:#fff}
</style>
</head>
<body>

<div class="rp-card">

  <div class="rp-header">
    <div class="rp-icon"><i class="bi bi-shield-lock-fill"></i></div>
    <h5>Set New Password</h5>
    <p>
      For account: <strong><?= e($reset['username']) ?></strong>
      (<?= e($reset['name']) ?>)
    </p>
  </div>

  <div class="rp-body">

    <?php
    if (!empty($_SESSION['flash'])):
      foreach ($_SESSION['flash'] as $type => $msgs):
        foreach ($msgs as $msg):
          $cls = $type === 'error' ? 'danger' : 'success';
    ?>
    <div class="alert alert-<?= $cls ?> alert-modern">
      <i class="bi bi-<?= $cls==='danger'?'x-circle':'check-circle' ?> me-1"></i>
      <?= e($msg) ?>
    </div>
    <?php endforeach; endforeach;
      unset($_SESSION['flash']);
    endif; ?>

    <div class="expiry-banner">
      <i class="bi bi-clock-history"></i>
      Link expires: <strong><?= date('d M Y, H:i', strtotime($reset['expires_at'])) ?></strong>
    </div>

    <form method="POST"
          action="<?= APP_URL ?>/auth/reset-password/<?= e($token) ?>"
          onsubmit="return validateForm()">
      <?= Auth::csrfField() ?>

      <div class="mb-3">
        <label class="form-label-modern" for="newPwd">New Password</label>
        <div class="input-group-modern">
          <i class="bi bi-lock input-leading"></i>
          <input type="password" name="password" id="newPwd"
                 class="input-modern"
                 placeholder="Min. 6 characters"
                 oninput="checkStrength(this.value)"
                 minlength="6" required autocomplete="new-password">
          <button class="toggle-pwd" type="button" onclick="togglePwd('newPwd','icon1')">
            <i class="bi bi-eye" id="icon1"></i>
          </button>
        </div>
        <div class="mt-2 d-flex gap-1">
          <div class="strength-bar flex-grow-1" id="sb1"></div>
          <div class="strength-bar flex-grow-1" id="sb2"></div>
          <div class="strength-bar flex-grow-1" id="sb3"></div>
          <div class="strength-bar flex-grow-1" id="sb4"></div>
        </div>
        <div class="small mt-1" id="strengthLabel" style="min-height:18px"></div>
      </div>

      <div class="mb-4">
        <label class="form-label-modern" for="confirmPwd">Confirm New Password</label>
        <div class="input-group-modern">
          <i class="bi bi-lock-fill input-leading"></i>
          <input type="password" name="confirm_password" id="confirmPwd"
                 class="input-modern"
                 placeholder="Re-enter password"
                 oninput="checkMatch()"
                 required autocomplete="new-password">
          <button class="toggle-pwd" type="button" onclick="togglePwd('confirmPwd','icon2')">
            <i class="bi bi-eye" id="icon2"></i>
          </button>
        </div>
        <div class="small mt-1" id="matchMsg" style="min-height:18px"></div>
      </div>

      <button type="submit" class="btn-rp">
        <i class="bi bi-check-circle me-1"></i>Set New Password
      </button>
    </form>

  </div>
</div>

<a href="<?= APP_URL ?>/auth/login" class="back-link">
  <i class="bi bi-arrow-left"></i> Back to Login
</a>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
function togglePwd(id, iconId) {
  const el = document.getElementById(id);
  const ic = document.getElementById(iconId);
  if (el.type === 'password') {
    el.type = 'text'; ic.className = 'bi bi-eye-slash';
  } else {
    el.type = 'password'; ic.className = 'bi bi-eye';
  }
}

function checkStrength(val) {
  const bars   = [1,2,3,4].map(n => document.getElementById('sb'+n));
  const label  = document.getElementById('strengthLabel');
  const colors = ['#dc2626','#d97706','#0891b2','#16a34a'];
  const labels = ['Weak','Fair','Good','Strong'];

  let score = 0;
  if (val.length >= 6)                        score++;
  if (val.length >= 10)                       score++;
  if (/[A-Z]/.test(val) && /[0-9]/.test(val)) score++;
  if (/[^A-Za-z0-9]/.test(val))               score++;

  bars.forEach((b,i) => {
    b.style.background = i < score ? colors[score-1] : '#e2e8f0';
  });
  label.textContent = val.length > 0 ? 'Strength: ' + (labels[score-1] || 'Weak') : '';
  label.style.color = score <= 1 ? '#dc2626' : score <= 2 ? '#d97706' : '#16a34a';
}

function checkMatch() {
  const p1  = document.getElementById('newPwd').value;
  const p2  = document.getElementById('confirmPwd').value;
  const msg = document.getElementById('matchMsg');
  if (!p2) { msg.textContent = ''; return; }
  if (p1 === p2) {
    msg.innerHTML = '<i class="bi bi-check-circle-fill me-1" style="color:#16a34a"></i><span style="color:#16a34a">Passwords match</span>';
  } else {
    msg.innerHTML = '<i class="bi bi-x-circle-fill me-1" style="color:#dc2626"></i><span style="color:#dc2626">Passwords do not match</span>';
  }
}

function validateForm() {
  const p1 = document.getElementById('newPwd').value;
  const p2 = document.getElementById('confirmPwd').value;
  if (p1.length < 6) {
    alert('Password must be at least 6 characters.');
    return false;
  }
  if (p1 !== p2) {
    alert('Passwords do not match.');
    return false;
  }
  return true;
}
</script>
</body>
</html>