<?php
// forgot-password.php — Step 1 of the password-reset flow.
//
// The user enters their registered email address. We POST it (via AJAX) to
// send-otp.php (purpose=password_reset). On success the user is redirected
// to reset-password-verify.php to enter the 6-digit code.
//
// UI matches signin.php (same card, fields, button, palette).

session_start();

if (isset($_SESSION['user_id']) && ($_SESSION['role'] ?? '') === 'customer') {
    header('Location: dashboard.php');
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>Forgot password — Dabil</title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#225AE3;--primary-dark:#1a47b8;--primary-bg:#EEF3FD;
  --text:#0F172A;--text-muted:#64748B;--text-light:#94A3B8;
  --bg:#EDF0F5;--border:#E2E8F0;--field-bg:#F7F9FC;
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}
a{text-decoration:none}
.auth-wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top) + 20px) 16px calc(env(safe-area-inset-bottom) + 24px)}
.auth-card{width:100%;max-width:420px;background:#fff;border-radius:24px;padding:28px 22px;box-shadow:0 12px 40px rgba(15,23,42,.08)}
.auth-card h1{font-size:1.7rem;font-weight:800;letter-spacing:-.03em;margin-bottom:6px}
.auth-sub{font-size:.9rem;color:var(--text-muted);margin-bottom:22px;line-height:1.5}
.auth-sub a{color:var(--primary);font-weight:700}

.field{position:relative;margin-bottom:14px}
.field .f-ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-light);display:flex}
.field input{width:100%;height:54px;border:1.5px solid var(--border);background:var(--field-bg);border-radius:14px;padding:0 16px 0 46px;font-size:max(16px,.95rem);font-family:var(--font);color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.field input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(34,90,227,.1)}
.field input::placeholder{color:var(--text-light)}

.btn-primary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;border:none;border-radius:16px;background:var(--primary);color:#fff;font-family:var(--font);font-weight:700;font-size:1rem;cursor:pointer;box-shadow:0 8px 22px rgba(34,90,227,.3);transition:background .15s,transform .12s,opacity .15s;margin-top:6px}
.btn-primary:active{background:var(--primary-dark);transform:scale(.99)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}

.spinner{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;display:none}
@keyframes spin{to{transform:rotate(360deg)}}

.signin-row{text-align:center;font-size:.88rem;color:var(--text-muted);margin-top:18px}
.signin-row a{color:var(--primary);font-weight:700}

.banner{font-size:.85rem;border-radius:12px;padding:12px 14px;margin-bottom:16px;text-align:center;display:none}
.banner.err{background:#FEF2F2;border:1px solid #FECACA;color:#B91C1C}
.banner.ok{background:#EEF3FD;border:1px solid #BFD3F7;color:#1a47b8}
</style>
</head>
<body>

<div class="auth-wrap">
  <div class="auth-card">
    <h1>Forgot password</h1>
    <p class="auth-sub">Enter the email linked to your account and we'll send a 6-digit code. Remembered it? <a href="signin.php">Sign in</a></p>

    <div class="banner err" id="msgError" role="alert"></div>
    <div class="banner ok"  id="msgInfo"  role="status"></div>

    <div class="field">
      <span class="f-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2z"/><polyline points="22 6 12 13 2 6"/></svg></span>
      <input type="email" id="email" name="email" placeholder="Email address" autocomplete="email" inputmode="email" required>
    </div>

    <button type="button" class="btn-primary" id="sendBtn" onclick="sendOtp()">
      <div class="spinner" id="spinner"></div>
      <span id="btnLabel">Send reset code</span>
    </button>

    <p class="signin-row">Remembered your password? <a href="signin.php">Sign in</a></p>
  </div>
</div>

<script>
  const emailInput = document.getElementById('email');
  const sendBtn    = document.getElementById('sendBtn');
  const spinner    = document.getElementById('spinner');
  const btnLabel   = document.getElementById('btnLabel');
  const msgError   = document.getElementById('msgError');
  const msgInfo    = document.getElementById('msgInfo');

  emailInput.focus();

  function showError(msg) {
    msgError.textContent = msg;
    msgError.style.display = 'block';
    msgInfo.style.display  = 'none';
  }
  function showInfo(msg) {
    msgInfo.textContent = msg;
    msgInfo.style.display  = 'block';
    msgError.style.display = 'none';
  }
  function setLoading(on) {
    sendBtn.disabled      = on;
    spinner.style.display = on ? 'block' : 'none';
    btnLabel.textContent  = on ? 'Sending…' : 'Send reset code';
  }

  async function sendOtp() {
    msgError.style.display = 'none';
    msgInfo.style.display  = 'none';

    const email = emailInput.value.trim();
    if (!email) { showError('Please enter your email address.'); return; }

    const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRe.test(email)) { showError('Please enter a valid email address.'); return; }

    setLoading(true);
    try {
      const fd = new FormData();
      fd.append('email',   email);
      fd.append('purpose', 'password_reset');

      const res  = await fetch('send-otp.php', { method: 'POST', body: fd });
      const data = await res.json();

      if (res.ok) {
        window.location.href = 'reset-password-verify.php?email=' + encodeURIComponent(email);
        return;
      }
      if (res.status === 429) {
        showInfo(data.message);
      } else {
        showError(data.message || 'Something went wrong. Please try again.');
      }
    } catch (e) {
      showError('Network error. Please check your connection and try again.');
    } finally {
      setLoading(false);
    }
  }

  emailInput.addEventListener('keydown', e => {
    if (e.key === 'Enter') { e.preventDefault(); sendOtp(); }
  });
</script>

</body>
</html>
