<?php
require_once 'includes/config.php';
if (isLoggedIn()) { header('Location: '.SITE_URL.'/dashboard.php'); exit; }

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_SERVER['HTTP_X_REQUESTED_WITH'])) {
    require_once 'includes/mailer.php';
    $email    = filter_var(trim($_POST['email'] ?? ''), FILTER_SANITIZE_EMAIL);
    $password = $_POST['password'] ?? '';
    if (!$email || !$password) jsonResponse(['success'=>false,'message'=>'Please enter your email and password.']);
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) jsonResponse(['success'=>false,'message'=>'Please enter a valid email address.']);
    $stmt = $pdo->prepare("SELECT * FROM users WHERE email=?"); $stmt->execute([$email]); $user = $stmt->fetch();
    if (!$user || !password_verify($password, $user['password'])) jsonResponse(['success'=>false,'message'=>'Incorrect email or password. Please try again.']);
    if (!$user['is_verified']) {
        $otp = str_pad(rand(0,999999),6,'0',STR_PAD_LEFT);
        $expires = date('Y-m-d H:i:s', strtotime('+'.OTP_EXPIRY_MINUTES.' minutes'));
        $pdo->prepare("UPDATE users SET otp_code=?,otp_expires=? WHERE id=?")->execute([$otp,$expires,$user['id']]);
        sendOTP($email,$user['name'],$otp);
        $_SESSION['pending_verify_id']=$user['id']; $_SESSION['pending_verify_email']=$email;
        jsonResponse(['success'=>true,'redirect'=>SITE_URL.'/verify-otp.php','verify'=>true,'message'=>'Your email is not verified. An OTP has been sent.']);
    }
    if (!empty($user['is_disabled'])) jsonResponse(['success'=>false,'message'=>'Your account has been suspended. Please contact support for assistance.']);
    session_regenerate_id(true);
    $_SESSION['user_id']=$user['id']; $_SESSION['user_name']=$user['name']; $_SESSION['user_email']=$user['email'];
    createDbSession($user['id']);
    jsonResponse(['success'=>true,'redirect'=>SITE_URL.'/dashboard']);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sign In — <?= SITE_NAME ?></title>
<link rel="icon" type="image/png" href="https://studytrack.edurx.icu/studytrack/images/studytrack.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800;900&family=DM+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="<?= SITE_URL ?>/assets/auth-shared.css">
<style>
/* ── Scroll fix: left fixed, right scrolls ── */
html, body { height: 100%; overflow: hidden; }
body { height: 100vh; overflow: hidden; }
.auth-layout { height: 100vh; overflow: hidden; }
.auth-left { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.auth-right {
  height: 100vh; overflow-y: auto; overflow-x: hidden;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 40px;
  scrollbar-width: thin; scrollbar-color: rgba(99,102,241,.3) transparent;
}
.auth-right::-webkit-scrollbar { width: 5px; }
.auth-right::-webkit-scrollbar-thumb { background: rgba(99,102,241,.3); border-radius: 99px; }
.auth-form-wrap { width: 100%; max-width: 420px; margin: auto 0; }

/* ── Mobile: allow normal page scroll ── */
@media (max-width: 900px) {
  html, body { height: auto; overflow: auto; }
  body { height: auto; overflow-x: hidden; }
  .auth-layout { height: auto; overflow: visible; display: block; }
  .auth-left { display: none; }
  .auth-right {
    height: auto; min-height: 100vh;
    overflow: visible;
    padding: 32px 20px 40px;
  }
  .auth-form-wrap { margin: 0 auto; }
}

/* ── Toast ── */
#auth-toast-wrap {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  z-index: 99999; display: flex; flex-direction: column; align-items: center;
  gap: 10px; pointer-events: none; width: 100%; max-width: 460px; padding: 0 16px;
}
.auth-toast {
  width: 100%; display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 14px; font-size: 13px; font-weight: 500;
  line-height: 1.5; pointer-events: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.45); backdrop-filter: blur(12px);
  animation: toastIn .35s cubic-bezier(.34,1.56,.64,1) both;
  cursor: pointer; border: 1px solid; position: relative; overflow: hidden;
}
.auth-toast::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; border-radius:14px 14px 0 0; }
.auth-toast.hiding { animation: toastOut .3s ease forwards; }
.auth-toast.err { background: rgba(15,5,5,.95); border-color: rgba(239,68,68,.35); color: #fca5a5; }
.auth-toast.err::before { background: linear-gradient(90deg,#ef4444,#f87171); }
.auth-toast.ok  { background: rgba(2,12,10,.95);  border-color: rgba(16,185,129,.35); color: #6ee7b7; }
.auth-toast.ok::before  { background: linear-gradient(90deg,#10b981,#34d399); }
.auth-toast-icon { flex-shrink:0; margin-top:1px; }
.auth-toast-body { flex:1; }
.auth-toast-close { flex-shrink:0; opacity:.5; font-size:13px; cursor:pointer; padding:2px; transition:opacity .15s; }
.auth-toast-close:hover { opacity:1; }
.auth-toast-progress { position:absolute; bottom:0; left:0; height:2px; border-radius:0 0 14px 14px; animation:toastProgress linear forwards; }
.auth-toast.err .auth-toast-progress { background:rgba(239,68,68,.5); }
.auth-toast.ok  .auth-toast-progress { background:rgba(16,185,129,.5); }
@keyframes toastIn { from{opacity:0;transform:translateY(-16px) scale(.94)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes toastOut { from{opacity:1;transform:translateY(0) scale(1);max-height:100px} to{opacity:0;transform:translateY(-10px) scale(.94);max-height:0} }
@keyframes toastProgress { from{width:100%} to{width:0%} }
.auth-alert { display: none !important; }

/* ── Suspended account popup ── */
.sus-overlay {
  position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center;
  background: rgba(5,5,12,.72); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; padding: 16px;
}
.sus-overlay.active { opacity: 1; pointer-events: all; }
.sus-modal {
  width: 100%; max-width: 380px; background: var(--card); border: 1px solid rgba(239,68,68,.3);
  border-radius: 20px; padding: 34px 28px; text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,.55); transform: scale(.92) translateY(8px); transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.sus-overlay.active .sus-modal { transform: scale(1) translateY(0); }
.sus-icon {
  width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center;
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3);
}
.sus-title { font-family:'Sora',sans-serif; font-size: 19px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.sus-text { font-size: 13.5px; color: var(--ink2); line-height: 1.65; margin-bottom: 26px; }
.sus-btn {
  width: 100%; padding: 13px; border-radius: 12px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff;
  font-size: 14px; font-weight: 700; font-family: inherit; transition: transform .15s, opacity .15s;
}
.sus-btn:hover { transform: translateY(-1px); opacity: .94; }
</style>
</head>
<body>

<!-- Toast container -->
<div id="auth-toast-wrap"></div>

<!-- Suspended account popup -->
<div class="sus-overlay" id="susOverlay">
  <div class="sus-modal">
    <div class="sus-icon">
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="4.9" y1="4.9" x2="19.1" y2="19.1"/></svg>
    </div>
    <div class="sus-title">Account Disabled</div>
    <div class="sus-text">Your account has been disabled by an administrator. Please contact support if you think this is a mistake.</div>
    <button class="sus-btn" onclick="closeSuspendedPopup()">OK, Got It</button>
  </div>
</div>

<div class="auth-layout">

  <!-- ── LEFT PANEL ───────────────────────── -->
  <div class="auth-left">
    <div class="auth-left-grid"></div>
    <div class="auth-left-content">

      <!-- Logo -->
      <div class="auth-logo">
        <img class="auth-logo-img" src="https://studytrack.edurx.icu/studytrack/images/studytrack.png" alt="StudyTrack">
        <div>
          <div class="auth-logo-name">StudyTrack</div>
          <div class="auth-logo-tag">by EduRX</div>
        </div>
      </div>

      <!-- Hero -->
      <div class="auth-hero">
        <div class="auth-hero-label">Free A/L Study Tracker</div>
        <h1 class="auth-hero-title">
          Track every hour.<br>
          <span>Ace your A/Ls.</span>
        </h1>
        <p class="auth-hero-sub">
          Join thousands of Sri Lankan students using StudyTrack to organize their study schedule, monitor progress, and hit their targets.
        </p>

        <div class="auth-features">
          <div class="auth-feature">
            <div class="auth-feature-icon" style="background:rgba(99,102,241,.14)">📊</div>
            <span>Real-time study analytics & streaks</span>
          </div>
          <div class="auth-feature">
            <div class="auth-feature-icon" style="background:rgba(6,182,212,.14)">🗓️</div>
            <span>Smart timetable & session planner</span>
          </div>
          <div class="auth-feature">
            <div class="auth-feature-icon" style="background:rgba(16,185,129,.14)">🏆</div>
            <span>Leaderboards, goals & achievements</span>
          </div>
          <div class="auth-feature">
            <div class="auth-feature-icon" style="background:rgba(139,92,246,.14)">🤖</div>
            <span>AI-powered study tips & insights</span>
          </div>
        </div>
      </div>



    </div>
  </div>

  <!-- ── RIGHT PANEL ──────────────────────── -->
  <div class="auth-right">
    <div class="auth-form-wrap">

      <!-- Mobile logo (shown only on small screens) -->
      <div class="auth-mobile-logo">
        <img src="https://studytrack.edurx.icu/studytrack/images/studytrack.png" alt="StudyTrack" style="width:34px;height:34px;border-radius:10px">
        <span style="font-family:'Sora',sans-serif;font-size:18px;font-weight:800;background:linear-gradient(135deg,#e0e7ff,#a5b4fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent">StudyTrack</span>
      </div>

      <h2 class="auth-form-title">Welcome back 👋</h2>
      <p class="auth-form-sub">Sign in to continue tracking your progress</p>

      <div id="msgBox" class="auth-alert" style="display:none"></div>

      <form id="loginForm" novalidate>
        <div class="f-group">
          <label class="f-label">Email Address</label>
          <div class="f-input-wrap">
            <span class="f-icon">✉️</span>
            <input type="email" name="email" class="f-input" placeholder="you@email.com" required autofocus>
          </div>
        </div>

        <div class="f-group">
          <label class="f-label">Password</label>
          <div class="f-input-wrap">
            <span class="f-icon">🔒</span>
            <input type="password" name="password" class="f-input" placeholder="Your password" required id="pwInput">
            <button type="button" class="f-eye" onclick="togglePw('pwInput',this)">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
            </button>
          </div>
        </div>

        <div class="f-forgot"><a href="<?= SITE_URL ?>/forgot-password">Forgot password?</a></div>

        <button type="submit" id="loginBtn" class="btn-auth">Sign In →</button>
      </form>

      <!-- Biometric -->
      <div id="biometricSection" style="display:none;margin-top:12px">
        <button type="button" id="biometricBtn" onclick="startBiometricLogin()" class="btn-bio">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
          Sign in with Biometrics
        </button>
        <p style="text-align:center;font-size:11px;color:var(--ink3);margin-top:7px">Fingerprint or face recognition</p>
      </div>

      <div class="auth-divider"><span>or continue with</span></div>

      <div style="display:flex;flex-direction:column;gap:10px">
        <a href="<?= SITE_URL ?>/google-auth.php" class="btn-social google">
          <svg width="17" height="17" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.18 1.48-4.97 2.31-8.16 2.31-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>
          Continue with Google
        </a>
        <a href="<?= SITE_URL ?>/fb-auth.php" class="btn-social facebook">
          <svg width="17" height="17" viewBox="0 0 24 24" fill="#1877f2"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
          Continue with Facebook
        </a>
      </div>

      <div class="auth-foot">New here? <a href="<?= SITE_URL ?>/register">Create a free account</a></div>

    </div>
  </div>
</div>

<script src="<?= SITE_URL ?>/assets/js/app.js"></script>
<script>
function togglePw(id, btn) {
  const inp = document.getElementById(id);
  inp.type = inp.type === 'password' ? 'text' : 'password';
  btn.innerHTML = inp.type === 'password'
    ? '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>'
    : '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>';
}

(function(){
  'use strict';
  const form = document.getElementById('loginForm');
  const msgBox = document.getElementById('msgBox');
  const btn = document.getElementById('loginBtn');

  function showMsg(msg, type) {
    authToast(msg, type === 'error' ? 'err' : 'ok');
  }

  const p = new URLSearchParams(location.search);
  if (p.get('verified')==='1') { showMsg('Email verified! You can now sign in.','success'); history.replaceState(null,'',location.pathname); }
  if (p.get('kicked')==='1')   { showMsg('You were signed out — another device logged in.','error'); history.replaceState(null,'',location.pathname); }
  const gErr = p.get('google_error');
  if (gErr) { const m={'access_denied':'Google sign-in cancelled.','token_failed':'Google sign-in failed. Try again.','state_mismatch':'Security check failed. Try again.'}; showMsg(m[gErr]||'Google sign-in failed.','error'); history.replaceState(null,'',location.pathname); }
  const fErr = p.get('fb_error');
  if (fErr) { const m={'user_denied':'Facebook sign-in cancelled.','access_denied':'Facebook sign-in cancelled.','token_failed':'Facebook sign-in failed. Try again.'}; showMsg(m[fErr]||'Facebook sign-in failed.','error'); history.replaceState(null,'',location.pathname); }

  form.addEventListener('submit', async function(e) {
    e.preventDefault();
    const email = form.email.value.trim();
    const pass  = form.password.value;
    if (!email || !pass) { showMsg('Please enter your email and password.','error'); return; }
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner"></span> Signing in…';
    msgBox.style.display = 'none';
    try {
      const res = await fetch(location.href, { method:'POST', body:new FormData(form), headers:{'X-Requested-With':'XMLHttpRequest'} });
      const data = await res.json();
      if (data.success) {
        showMsg(data.verify ? data.message : 'Login successful! Redirecting…', 'success');
        btn.innerHTML = '✓ Done';
        setTimeout(() => { window.location.href = data.redirect; }, 900);
      } else {
        showMsg(data.message || 'Login failed. Please try again.', 'error');
        btn.disabled = false; btn.innerHTML = 'Sign In →';
        form.password.value = ''; form.password.focus();
      }
    } catch(err) {
      showMsg('Connection error. Please check your internet.', 'error');
      btn.disabled = false; btn.innerHTML = 'Sign In →';
    }
  });

  form.querySelectorAll('input').forEach(inp => inp.addEventListener('input', () => { msgBox.style.display='none'; }));

  // Biometric
  function b64urlDecode(s){s=s.replace(/-/g,'+').replace(/_/g,'/');while(s.length%4)s+='=';return Uint8Array.from(atob(s),c=>c.charCodeAt(0))}
  function b64urlEncode(b){const bytes=new Uint8Array(b);let s='';bytes.forEach(x=>s+=String.fromCharCode(x));return btoa(s).replace(/\+/g,'-').replace(/\//g,'_').replace(/=+$/,'')}
  async function checkBiometricAvailable(){
    if(!window.PublicKeyCredential) return;
    try{const a=await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();if(a)document.getElementById('biometricSection').style.display='block';}catch(e){}
  }
  checkBiometricAvailable();
  window.startBiometricLogin = async function(){
    const bb=document.getElementById('biometricBtn');
    const email=form.email.value.trim();
    bb.disabled=true; bb.innerHTML='<span class="spinner"></span> Checking biometrics…'; msgBox.style.display='none';
    try{
      const fd=new FormData(); fd.append('action','get-auth-options'); if(email) fd.append('email',email);
      const optRes=await fetch('<?= SITE_URL ?>/webauthn',{method:'POST',body:fd}); const options=await optRes.json();
      if(!options.success) throw new Error(options.message||'Could not start biometric login');
      const credReqOpts={challenge:b64urlDecode(options.challenge),rpId:options.rpId,timeout:options.timeout,userVerification:options.userVerification};
      if(options.allowCredentials?.length>0) credReqOpts.allowCredentials=options.allowCredentials.map(c=>({id:b64urlDecode(c.id),type:c.type}));
      const assertion=await navigator.credentials.get({publicKey:credReqOpts});
      bb.innerHTML='<span class="spinner"></span> Verifying…';
      const payload={id:b64urlEncode(assertion.rawId),clientDataJSON:b64urlEncode(assertion.response.clientDataJSON),authenticatorData:b64urlEncode(assertion.response.authenticatorData),signature:b64urlEncode(assertion.response.signature),userHandle:assertion.response.userHandle?b64urlEncode(assertion.response.userHandle):null};
      const verRes=await fetch('<?= SITE_URL ?>/webauthn?action=verify-auth',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
      const result=await verRes.json();
      if(result.success){showMsg('✅ '+result.message+' Redirecting…','success');bb.innerHTML='✓ Verified!';setTimeout(()=>{window.location.href=result.redirect;},800);}
      else if(result.disabled){window.location.href='<?= SITE_URL ?>/login.php?suspended=1';}
      else throw new Error(result.message||'Biometric verification failed');
    }catch(err){
      bb.disabled=false; bb.innerHTML='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> Sign in with Biometrics';
      if(err.name==='NotAllowedError') showMsg('Biometric login cancelled.','error');
      else if(err.name==='NotFoundError') showMsg('No biometric credentials found. Register in Profile settings first.','error');
      else showMsg(err.message||'Biometric login failed. Try password instead.','error');
    }
  };
})();
</script>
<script>
/* ── Toast System ─────────────────────────────────────────── */
(function() {
  var wrap = document.getElementById('auth-toast-wrap');
  var DURATION = 4500;

  window.authToast = function(msg, type) {
    type = type || 'err';
    var toast = document.createElement('div');
    toast.className = 'auth-toast ' + type;

    var icon = type === 'ok'
      ? '<svg class="auth-toast-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>'
      : '<svg class="auth-toast-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>';

    toast.innerHTML = icon
      + '<div class="auth-toast-body">' + msg + '</div>'
      + '<div class="auth-toast-close" onclick="this.parentElement._dismiss()">&#10005;</div>'
      + '<div class="auth-toast-progress" style="animation-duration:' + DURATION + 'ms"></div>';

    toast._dismiss = function() {
      if (toast._dismissed) return;
      toast._dismissed = true;
      clearTimeout(toast._timer);
      toast.classList.add('hiding');
      setTimeout(function() { if (toast.parentNode) toast.parentNode.removeChild(toast); }, 320);
    };

    wrap.appendChild(toast);
    toast._timer = setTimeout(function() { toast._dismiss(); }, DURATION);
    toast.addEventListener('click', function(e) {
      if (!e.target.classList.contains('auth-toast-close')) toast._dismiss();
    });
  };
})();
</script>
<script>
/* ── Suspended account popup ── */
function closeSuspendedPopup() {
  document.getElementById('susOverlay').classList.remove('active');
  var cleanUrl = window.location.pathname;
  window.history.replaceState({}, document.title, cleanUrl);
}
function showSuspendedPopup() {
  document.getElementById('susOverlay').classList.add('active');
}
<?php if (isset($_GET['suspended'])): ?>
document.addEventListener('DOMContentLoaded', showSuspendedPopup);
<?php endif; ?>
</script>
</body>
</html>