<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forgot Password · A&amp;B Hub</title>
<?= \App\Core\Csrf::metaTag() ?>
<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.css">
<link rel="stylesheet" href="<?= asset('css/style.css') ?>">
</head>
<body style="background:var(--ab-canvas);">
<div class="d-flex align-items-center justify-content-center" style="min-height:100vh;">
  <div class="ab-card ab-fade-in" style="max-width:420px; width:100%;">
    <div class="ab-card-body p-4">
      <div class="d-flex align-items-center gap-2 mb-4">
        <div class="ab-logo-mark" style="background:var(--ab-primary-100); color:var(--ab-primary);">AB</div>
        <div class="fw-bold fs-5">A&amp;B Hub</div>
      </div>
      <h2 class="mb-1">Forgot your password?</h2>
      <p class="ab-text-muted mb-4">Enter your work email and we'll send you a reset link.</p>

      <div id="abAlertBox" class="alert d-none" role="alert"></div>

      <form id="abForgotForm" novalidate>
        <div class="mb-3">
          <label class="form-label ab-req">Email</label>
          <input type="email" name="email" class="form-control" placeholder="you@abhomecare.com" required>
        </div>
        <button type="submit" class="btn btn-primary w-100" id="abSubmitBtn">Send Reset Link</button>
      </form>
      <div class="text-center mt-3"><a href="<?= base_url('login') ?>" class="small fw-semibold"><i class="bi bi-arrow-left me-1"></i>Back to sign in</a></div>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="<?= asset('js/app-data.js') ?>"></script>
<script>
document.getElementById('abForgotForm').addEventListener('submit', function (e) {
  e.preventDefault();
  var btn = document.getElementById('abSubmitBtn');
  btn.disabled = true; btn.textContent = 'Sending…';

  abFetch('<?= base_url('forgot-password') ?>', { method: 'POST', body: { email: e.target.email.value } })
    .then(function (res) {
      var box = document.getElementById('abAlertBox');
      box.className = 'alert alert-success';
      box.textContent = res.message;
      box.classList.remove('d-none');
      e.target.reset();
    })
    .catch(function (err) {
      var box = document.getElementById('abAlertBox');
      box.className = 'alert alert-danger';
      box.textContent = err.message || 'Something went wrong.';
      box.classList.remove('d-none');
    })
    .finally(function () { btn.disabled = false; btn.textContent = 'Send Reset Link'; });
});
</script>
</body>
</html>
