<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unsubscribe · A&amp;B Hub</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.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:440px; width:100%;">
    <div class="ab-card-body p-4" id="abUnsubBody">
      <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">Unsubscribe from emails</h2>
      <p class="ab-text-muted mb-4">We're sorry to see you go. Let us know why, and you'll stop receiving marketing emails from A&amp;B Homecare Services and A&amp;B Cleaner Janitorial Services.</p>

      <form id="abUnsubForm">
        <input type="hidden" name="token" value="<?= e($token) ?>">
        <div class="mb-3">
          <label class="form-label">Reason (optional)</label>
          <select class="form-select" name="reason">
            <option value="">Prefer not to say</option>
            <option value="too_frequent">Emails are too frequent</option>
            <option value="not_relevant">Content isn't relevant to me</option>
            <option value="never_signed_up">I never signed up for this</option>
            <option value="other">Other</option>
          </select>
        </div>
        <button type="submit" class="btn btn-primary w-100" id="abUnsubBtn">Confirm Unsubscribe</button>
      </form>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById('abUnsubForm').addEventListener('submit', function (e) {
  e.preventDefault();
  var form = e.target;
  var btn = document.getElementById('abUnsubBtn');
  btn.disabled = true; btn.textContent = 'Processing…';

  fetch('<?= base_url('unsubscribe') ?>', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ token: form.token.value, reason: form.reason.value })
  }).then(function (r) { return r.json(); }).then(function (res) {
    document.getElementById('abUnsubBody').innerHTML =
      '<div class="text-center py-3"><i class="bi bi-check-circle-fill text-success" style="font-size:2.5rem;"></i>' +
      '<h2 class="mt-3">' + (res.success ? 'You\'re unsubscribed' : 'Something went wrong') + '</h2>' +
      '<p class="ab-text-muted">' + res.message + '</p></div>';
  });
});
</script>
</body>
</html>
