<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign In · 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>

<div class="ab-auth-wrap">
  <div class="ab-auth-side d-none d-lg-flex">
    <div class="d-flex align-items-center gap-2" style="z-index:2;">
      <div class="ab-logo-mark" style="background:#fff;">AB</div>
      <div class="fw-bold fs-5 text-white">A&amp;B Hub</div>
    </div>
    <div style="z-index:2; max-width:420px;">
      <span class="ab-badge mb-3" style="background:rgba(255,255,255,.14); color:#fff;"><i class="bi bi-shield-check"></i>Trusted by 2 growing service brands</span>
      <h1 class="text-white fw-bold mb-3" style="font-size:2.1rem; line-height:1.2;">One command center for Homecare and Janitorial operations.</h1>
      <p class="text-white-50 mb-0">Manage leads, staff, and security — for both A&amp;B Homecare Services and A&amp;B Cleaner Janitorial Services — from a single, secure dashboard.</p>
    </div>
    <div class="text-white-50 small" style="z-index:2;">&copy; <?= date('Y') ?> A&amp;B Homecare Services Inc. &amp; A&amp;B Cleaner Janitorial Services.</div>
  </div>

  <div class="ab-auth-form">
    <div class="ab-auth-form-inner ab-fade-in">
      <div class="d-flex d-lg-none 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>

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

      <!-- STEP 1: email + password -->
      <div id="abLoginStep">
        <h2 class="mb-1">Welcome back</h2>
        <p class="ab-text-muted mb-4">Sign in to manage both brands from one hub.</p>

        <form id="abLoginForm" novalidate>
          <div class="mb-3">
            <label class="form-label ab-req">Work email</label>
            <input type="email" name="email" class="form-control" placeholder="you@abhomecare.com" required autofocus>
          </div>
          <div class="mb-2">
            <label class="form-label ab-req">Password</label>
            <div class="input-group">
              <input type="password" name="password" class="form-control border-end-0" placeholder="••••••••" required>
              <button class="btn btn-light-soft" type="button" id="abTogglePw" style="border-radius:0 9px 9px 0;"><i class="bi bi-eye"></i></button>
            </div>
          </div>
          <div class="d-flex justify-content-between align-items-center mb-4">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="remember" id="abRemember" checked>
              <label class="form-check-label small ab-text-muted" for="abRemember">Keep me signed in</label>
            </div>
            <a href="<?= base_url('forgot-password') ?>" class="small fw-semibold">Forgot password?</a>
          </div>
          <button type="submit" class="btn btn-primary w-100 mb-3" id="abLoginBtn">Sign In <i class="bi bi-arrow-right ms-1"></i></button>
        </form>
      </div>

      <!-- STEP 2: 2FA challenge (hidden until requires_2fa comes back) -->
      <div id="ab2faStep" class="d-none">
        <h2 class="mb-1">Two-factor verification</h2>
        <p class="ab-text-muted mb-4">Enter the 6-digit code from your authenticator app.</p>
        <form id="ab2faForm" novalidate>
          <div class="mb-3">
            <label class="form-label ab-req">Authentication code</label>
            <input type="text" name="code" class="form-control text-center" style="font-size:1.4rem; letter-spacing:.3rem;" maxlength="10" required autofocus>
          </div>
          <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" name="is_recovery_code" id="abIsRecovery">
            <label class="form-check-label small ab-text-muted" for="abIsRecovery">This is a recovery code</label>
          </div>
          <button type="submit" class="btn btn-primary w-100 mb-2">Verify &amp; Sign In</button>
          <button type="button" class="btn btn-light-soft w-100" id="abBackToLogin">Back</button>
        </form>
      </div>

      <div class="alert alert-light border mt-4 small d-flex gap-2" style="border-radius:12px;">
        <i class="bi bi-info-circle text-primary"></i>
        <div>New here? Ask your administrator to send you an invitation.</div>
      </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>
function abShowAlert(message, type) {
  var box = document.getElementById('abAlertBox');
  box.className = 'alert alert-' + (type || 'danger');
  box.textContent = message;
  box.classList.remove('d-none');
}

document.getElementById('abTogglePw').addEventListener('click', function () {
  var input = this.closest('.input-group').querySelector('input');
  input.type = input.type === 'password' ? 'text' : 'password';
  this.querySelector('i').className = input.type === 'password' ? 'bi bi-eye' : 'bi bi-eye-slash';
});

document.getElementById('abLoginForm').addEventListener('submit', function (e) {
  e.preventDefault();
  var form = e.target;
  var btn = document.getElementById('abLoginBtn');
  btn.disabled = true; btn.textContent = 'Signing in…';

  abFetch('<?= base_url('login') ?>', {
    method: 'POST',
    body: {
      email: form.email.value,
      password: form.password.value,
      remember: form.remember.checked ? 1 : 0
    }
  }).then(function (res) {
    if (res.data.requires_2fa) {
      document.getElementById('abLoginStep').classList.add('d-none');
      document.getElementById('ab2faStep').classList.remove('d-none');
      document.getElementById('abAlertBox').classList.add('d-none');
      btn.disabled = false; btn.textContent = 'Sign In';
      return;
    }
    if (res.data.password_expired) {
      abShowAlert('Your password has expired. Please reset it to continue.', 'warning');
      setTimeout(function () { window.location.href = '<?= base_url('forgot-password') ?>'; }, 1800);
      return;
    }
    window.location.href = res.data.redirect;
  }).catch(function (err) {
    abShowAlert(err.message || 'Sign in failed.');
    btn.disabled = false; btn.textContent = 'Sign In';
  });
});

document.getElementById('ab2faForm').addEventListener('submit', function (e) {
  e.preventDefault();
  var form = e.target;

  abFetch('<?= base_url('login/2fa') ?>', {
    method: 'POST',
    body: { code: form.code.value, is_recovery_code: form.is_recovery_code.checked ? 1 : 0 }
  }).then(function (res) {
    window.location.href = res.data.redirect;
  }).catch(function (err) {
    abShowAlert(err.message || 'Verification failed.');
  });
});

document.getElementById('abBackToLogin').addEventListener('click', function () {
  document.getElementById('ab2faStep').classList.add('d-none');
  document.getElementById('abLoginStep').classList.remove('d-none');
});

<?php if ($verification = \App\Core\Session::getFlash('_verification_result')): ?>
abShowAlert(<?= json_encode($verification['message']) ?>, <?= $verification['success'] ? "'success'" : "'danger'" ?>);
<?php endif; ?>
</script>
</body>
</html>
