<?php
// Simple reset form. Token passed via GET parameter.
$token = isset($_GET['token']) ? trim($_GET['token']) : '';
?>
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <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">
  <title>Reset Password</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="css/responsive-system.css">
  <style>body{padding:28px;background:var(--bg);} .card{max-width:520px;margin:36px auto;padding:18px;background:#fff;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,0.06);} .hint{color:var(--muted);}</style>
</head>
<body>
  <div class="card">
    <h2>Reset Your Password</h2>
    <p class="hint">Enter a new password for your account.</p>
    <form id="resetForm" style="display:flex;flex-direction:column;gap:10px;margin-top:12px;">
      <input type="hidden" id="token" value="<?php echo htmlspecialchars($token); ?>">
      <input type="password" id="newPass" placeholder="New password" autocomplete="new-password" required style="padding:10px;border:1px solid #e6e6e6;border-radius:6px;">
      <input type="password" id="newPass2" placeholder="Confirm password" autocomplete="new-password" required style="padding:10px;border:1px solid #e6e6e6;border-radius:6px;">
      <button class="btn" type="submit">Set New Password</button>
    </form>
    <div id="resetMsg" style="margin-top:12px; display:none;"></div>
  </div>

<script>
document.getElementById('resetForm')?.addEventListener('submit', async (e) => {
  e.preventDefault();
  const t = document.getElementById('token').value;
  const p1 = document.getElementById('newPass').value;
  const p2 = document.getElementById('newPass2').value;
  const el = document.getElementById('resetMsg'); el.style.display='none';
  if (p1 !== p2) { el.style.display='block'; el.style.color='#b00'; el.textContent = 'Passwords do not match'; return; }
  const form = new FormData(); form.append('token', t); form.append('password', p1);
  try {
    const res = await fetch('api_reset_password.php', { method:'POST', body: form });
    const data = await res.json();
    el.style.display='block'; el.style.color = data.success ? '#080' : '#b00';
    el.textContent = data.message || (data.success ? 'Password updated' : 'Error');
    if (data.success) setTimeout(() => { window.location.href = 'index.php'; }, 1200);
  } catch (err) {
    el.style.display='block'; el.style.color='#b00'; el.textContent='Network error. Try again.';
  }
});
</script>
</body>
</html>
