<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Your 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">Welcome to A&amp;B Hub</h2>
      <p class="ab-text-muted mb-4">Set a password to activate your account.</p>

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

      <form id="abInviteForm" novalidate>
        <input type="hidden" name="token" value="<?= e($token) ?>">
        <div class="mb-3">
          <label class="form-label ab-req">Password</label>
          <input type="password" name="password" class="form-control" required>
        </div>
        <div class="mb-3">
          <label class="form-label ab-req">Confirm Password</label>
          <input type="password" name="password_confirmation" class="form-control" required>
        </div>
        <button type="submit" class="btn btn-primary w-100" id="abSubmitBtn">Activate Account</button>
      </form>
    </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('abInviteForm').addEventListener('submit', function (e) {
  e.preventDefault();
  var form = e.target;
  var btn = document.getElementById('abSubmitBtn');
  btn.disabled = true; btn.textContent = 'Activating…';

  abFetch('<?= base_url('accept-invitation') ?>', {
    method: 'POST',
    body: {
      token: form.token.value,
      password: form.password.value,
      password_confirmation: form.password_confirmation.value
    }
  }).then(function (res) {
    window.location.href = res.data.redirect;
  }).catch(function (err) {
    var box = document.getElementById('abAlertBox');
    box.className = 'alert alert-danger';
    box.textContent = (err.errors && err.errors.password) ? err.errors.password.join(' ') : (err.message || 'Activation failed.');
    box.classList.remove('d-none');
    btn.disabled = false; btn.textContent = 'Activate Account';
  });
});
</script>
</body>
</html>
