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

$error = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (login($_POST['username'] ?? '', $_POST['password'] ?? '')) {
        header('Location: ' . BASE_URL . '/dashboard.php');
        exit;
    }
    $error = 'Invalid username or password.';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Login – <?= APP_NAME ?></title>
<link rel="icon" type="image/x-icon" href="<?= BASE_URL ?>/assets/img/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="<?= BASE_URL ?>/assets/img/apple-touch-icon.png">
<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/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap" rel="stylesheet">
<style>
  :root {
    --pc-brand: #0b2a5c;
    --pc-brand-mid: #1670c9;
    --pc-accent: #12934e;
  }
  * { font-family: 'Inter', 'Segoe UI', sans-serif; }
  body {
    background:
      radial-gradient(circle at 15% 15%, rgba(18,147,78,.25), transparent 45%),
      linear-gradient(135deg, #0b2a5c 0%, #123a7a 55%, #1670c9 100%);
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding: 20px;
  }
  .login-card { background:#fff; border-radius:18px; padding:40px; width:100%; max-width:420px; box-shadow:0 25px 70px rgba(6,20,45,.45); }
  .login-logo { width:96px; margin:0 auto 14px; display:block; }
  .login-title { font-family:'Poppins',sans-serif; font-weight:800; letter-spacing:-0.3px; color:var(--pc-brand); }
  .login-tagline { letter-spacing:.3px; }
  .form-control:focus { border-color:var(--pc-brand-mid); box-shadow:0 0 0 .2rem rgba(22,112,201,.18); }
  .btn-login { background:var(--pc-brand); color:#fff; border:none; padding:12px; font-size:15px; font-weight:600; border-radius:8px; transition:background .15s; }
  .btn-login:hover { background:var(--pc-brand-mid); color:#fff; }
  .input-group-text { background:#f7f9fc; border-color:#dee2e6; }
</style>
</head>
<body>
<div class="login-card">
  <img src="<?= BASE_URL ?>/assets/img/logo-mark-128.png" alt="<?= APP_NAME ?>" class="login-logo">
  <h4 class="text-center login-title mb-1">Seyalix HRMS</h4>
  <p class="text-center text-muted small login-tagline mb-4">Empowering People. Simplifying HR.</p>
  <?php if ($error): ?>
    <div class="alert alert-danger py-2 small"><?= $error ?></div>
  <?php endif; ?>
  <form method="POST" action="">
    <?= csrfField() ?>
    <div class="mb-3">
      <label class="form-label fw-semibold small">Username</label>
      <div class="input-group">
        <span class="input-group-text"><i class="ti ti-user"></i></span>
        <input type="text" name="username" class="form-control" placeholder="Enter username" required autofocus>
      </div>
    </div>
    <div class="mb-4">
      <label class="form-label fw-semibold small">Password</label>
      <div class="input-group">
        <span class="input-group-text"><i class="ti ti-lock"></i></span>
        <input type="password" name="password" class="form-control" id="pwdInput" placeholder="Enter password" required>
        <button type="button" class="btn btn-outline-secondary" onclick="togglePwd()">
          <i class="ti ti-eye" id="pwdIcon"></i>
        </button>
      </div>
    </div>
    <button type="submit" class="btn btn-login w-100">
      <i class="ti ti-login me-2"></i>Sign In
    </button>
  </form>
  <div class="text-center mt-4">
    <small class="text-muted">Default password for all users: <code>Gmhpl_2025</code></small>
  </div>
</div>
<script>
function togglePwd() {
  const inp = document.getElementById('pwdInput');
  const icon = document.getElementById('pwdIcon');
  if (inp.type === 'password') {
    inp.type = 'text'; icon.className = 'ti ti-eye-off';
  } else {
    inp.type = 'password'; icon.className = 'ti ti-eye';
  }
}
</script>
</body>
</html>
