<?php
// admin/staff_login.php
session_start();
require_once __DIR__ . "/../includes/db.php";

$error = "";

// Optional: remember username for staff
$remembered_user = $_COOKIE['ems_staff_user'] ?? "";

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $username = trim($_POST['username'] ?? '');
  $password = trim($_POST['password'] ?? '');
  $remember = isset($_POST['remember']);

  $stmt = $conn->prepare("SELECT id, username, display_name, password, role, status FROM admins WHERE username=? LIMIT 1");
  $stmt->bind_param("s", $username);
  $stmt->execute();
  $res = $stmt->get_result();

  if ($user = $res->fetch_assoc()) {
    if ($user['role'] !== 'staff') {
      $error = "This portal is only for staff.";
    } elseif ($user['status'] !== 'active') {
      $error = "Account is disabled. Contact administrator.";
    } elseif (!password_verify($password, $user['password'])) {
      $error = "Invalid password.";
    } else {
      // staff-only session (DO NOT set $_SESSION['admin'])
      $_SESSION['staff_id']   = (int)$user['id'];
      $_SESSION['staff_user'] = $user['username'];
      $_SESSION['staff_name'] = $user['display_name'] ?: $user['username'];

      // Update last_login (optional)
      $upd = $conn->prepare("UPDATE admins SET last_login = NOW() WHERE id=?");
      $upd->bind_param("i", $_SESSION['staff_id']);
      $upd->execute();

      // Remember username for 14 days (optional)
      if ($remember) {
        setcookie('ems_staff_user', $username, time()+60*60*24*14, "/", "", false, true);
      } else {
        setcookie('ems_staff_user', "", time()-3600, "/");
      }

      header("Location: add_student.php");
      exit;
    }
  } else {
    $error = "User not found.";
  }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Eden Campus  Staff Login</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="../assets/css/bootstrap.min.css" rel="stylesheet">

  <style>
    :root{
      --brand:#e42424;
      --ink:#101828;
      --muted:#667085;
      --glass: rgba(255,255,255,0.72);
      --glass-border: rgba(255,255,255,0.55);
      --ring: rgba(228,36,36,.18);
    }

    /* Background with soft animated blobs (same as admin login) */
    body{
      min-height:100svh;
      margin:0;
      display:grid;
      place-items:center;
      color:var(--ink);
      font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial;
      background:
        radial-gradient(1200px 600px at -10% -10%, rgba(228,36,36,.06), transparent 60%),
        radial-gradient(900px 600px at 110% 10%, rgba(11,44,97,.08), transparent 60%),
        linear-gradient(180deg,#f7f8fb 0%, #eef1f8 100%);
      overflow-x:hidden;
    }
    .bg-bubbles{ position:fixed; inset:0; pointer-events:none; z-index:-1; }
    .bubble{
      position:absolute; border-radius:999px; filter:blur(30px);
      opacity:.6; transform:translate(-50%,-50%);
      animation: float 16s ease-in-out infinite;
    }
    .bubble.a{ width:340px; height:340px; left:15%; top:18%; background:#ffd6d6; }
    .bubble.b{ width:420px; height:420px; left:85%; top:12%; background:#d7e3ff; animation-duration:20s; }
    .bubble.c{ width:380px; height:380px; left:50%; top:85%; background:#ffe9d7; animation-duration:22s; }
    @keyframes float{ 0%,100%{transform:translate(-50%,-50%) translateY(0)} 50%{transform:translate(-50%,-50%) translateY(-18px)} }
    @media (prefers-reduced-motion:reduce){ .bubble{animation:none} }

    /* Glass card */
    .card-auth{
      width:min(92vw, 440px);
      background:var(--glass);
      backdrop-filter:saturate(160%) blur(16px);
      -webkit-backdrop-filter:saturate(160%) blur(16px);
      border:1px solid var(--glass-border);
      border-radius:22px;
      box-shadow:0 24px 60px rgba(16,24,40,.12);
      padding:22px 22px 20px;
    }

    /* Logo */
    .logo-wrap{ display:flex; justify-content:center; align-items:center; margin-top:6px; margin-bottom:8px; }
    .logo{ width:300px; height:100px; object-fit:contain; }

    .title{ text-align:center; font-weight:800; letter-spacing:.2px; margin:6px 0 2px; }
    .subtitle{ text-align:center; color:var(--muted); font-size:.95rem; margin-bottom:6px; }

    /* Form */
    .field{
      display:flex; align-items:center; gap:.6rem;
      border:1px solid #e6e7eb; border-radius:12px; padding:.6rem .75rem; background:#fff;
      transition: box-shadow .15s ease, border-color .15s ease;
    }
    .field:focus-within{ border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); }
    .field input{ border:0; outline:none; width:100%; background:transparent; font-size:1rem; }
    .icon{ width:20px; height:20px; opacity:.55; }

    .actions{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-top:.25rem; }
    .btn-brand{
      background:var(--brand); color:#fff; border:0; border-radius:12px; padding:.7rem 1rem; width:100%;
      font-weight:700; letter-spacing:.3px; transition: transform .04s ease, opacity .2s ease;
    }
    .btn-brand:hover{ opacity:.95 } .btn-brand:active{ transform: translateY(1px) }

    .toggle{ border:1px solid #e6e7eb; background:#fff; border-radius:10px; padding:.35rem .6rem; font-size:.85rem; }

    .alert-error{
      background:#fff5f5; border:1px solid #ffd0d0; color:#7f1d1d;
      padding:.65rem .8rem; border-radius:12px; margin:.6rem 0 .2rem;
    }

    .foot{ margin-top:10px; text-align:center; color:var(--muted); font-size:.85rem; }

    @media (max-width:360px){
      .logo{ width:130px; height:46px }
      .title{ font-size:1.1rem }
      .subtitle{ font-size:.9rem }
    }
  </style>
</head>
<body>

  <!-- background blobs -->
  <div class="bg-bubbles">
    <div class="bubble a"></div>
    <div class="bubble b"></div>
    <div class="bubble c"></div>
  </div>

  <main class="card-auth" role="main" aria-label="Staff Login">
    <div class="logo-wrap">
      <img class="logo" src="../assets/img/edencampus.png" alt="Eden Campus">
    </div>
    <h1 class="title">EDEN CAMPUS</h1>
    <div class="subtitle"Staff Sign In</div>

    <?php if (!empty($error)): ?>
      <div class="alert-error" role="alert"><?= htmlspecialchars($error) ?></div>
    <?php endif; ?>

    <form method="POST" novalidate>
      <label class="form-label mt-2 mb-1">Username</label>
      <div class="field">
        <svg class="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5m0 2c-4.418 0-8 2.239-8 5v1h16v-1c0-2.761-3.582-5-8-5"/></svg>
        <input type="text" name="username" inputmode="text" autocomplete="username"
               placeholder="Your staff username" value="<?= htmlspecialchars($remembered_user) ?>" required autofocus>
      </div>

      <label class="form-label mt-3 mb-1">Password</label>
      <div class="field">
        <svg class="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17 8V7a5 5 0 0 0-10 0v1H5a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1Zm-8 0V7a3 3 0 0 1 6 0v1Z"/></svg>
        <input type="password" name="password" id="password" autocomplete="current-password"
               placeholder="Your password" required>
        <button type="button" class="toggle" id="togglePw" aria-controls="password" aria-label="Show password">Show</button>
      </div>

      <div class="actions">
        <label style="display:flex; align-items:center; gap:.5rem;">
          <input type="checkbox" name="remember" <?= $remembered_user ? 'checked' : '' ?>>
          <span style="color:var(--muted); font-size:.95rem;">Remember me</span>
        </label>
        <!-- Keep it clean; add "Forgot password?" here if you implement it -->
      </div>

      <button class="btn-brand mt-3" type="submit">Sign In</button>
      <div class="foot">© <?= date('Y') ?> Eden Campus</div>
    </form>
  </main>

  <script src="../assets/js/bootstrap.bundle.min.js"></script>
  <script>
    // Show/Hide password
    (function(){
      const btn=document.getElementById('togglePw');
      const f=document.getElementById('password');
      btn.addEventListener('click', ()=>{
        const isPw = f.type === 'password';
        f.type = isPw ? 'text' : 'password';
        btn.textContent = isPw ? 'Hide' : 'Show';
        btn.setAttribute('aria-label', isPw ? 'Hide password' : 'Show password');
      });
    })();
  </script>
</body>
</html>
