<?php
require_once '../config.php';

if (!empty($_SESSION['admin_id'])) {
    header('Location: ' . SITE_URL . '/admin/dashboard.php');
    exit;
}

$errors = [];

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

    if (empty($username)) $errors[] = 'Username dalo.';
    if (empty($password)) $errors[] = 'Password dalo.';

    if (empty($errors)) {
        $stmt = $conn->prepare("SELECT id, username, full_name, email, password FROM admin_users WHERE username = ? AND is_active = 1");
        $stmt->bind_param('s', $username);
        $stmt->execute();
        $result = $stmt->get_result();

        if ($admin = $result->fetch_assoc()) {
            if (password_verify($password, $admin['password'])) {
                $_SESSION['admin_id'] = $admin['id'];
                $_SESSION['admin_name'] = $admin['full_name'];
                $_SESSION['admin_username'] = $admin['username'];

                setFlash('success', 'Welcome back, ' . $admin['full_name']);
                header('Location: ' . SITE_URL . '/admin/dashboard.php');
                exit;
            }
        }
        $errors[] = 'Invalid username ya password.';
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Admin Login – HealthLink</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      min-height: 100vh;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Segoe UI', sans-serif;
      background: #060d1f;
      overflow: hidden;
    }

    /* ── Animated background ── */
    .bg-canvas {
      position: fixed; inset: 0; z-index: 0;
      background: radial-gradient(ellipse at 20% 50%, #0b2a6b 0%, transparent 60%),
                  radial-gradient(ellipse at 80% 20%, #1a0b4b 0%, transparent 55%),
                  radial-gradient(ellipse at 60% 80%, #0a1f5c 0%, transparent 50%),
                  #060d1f;
    }

    /* floating orbs */
    .orb {
      position: absolute; border-radius: 50%;
      filter: blur(80px); opacity: .35;
      animation: drift 12s ease-in-out infinite alternate;
    }
    .orb1 { width:420px; height:420px; background:#1e40af; top:-100px; left:-120px; animation-duration:14s; }
    .orb2 { width:320px; height:320px; background:#7c3aed; bottom:-80px; right:-80px; animation-duration:10s; animation-delay:-4s; }
    .orb3 { width:220px; height:220px; background:#0ea5e9; top:40%; left:55%; animation-duration:16s; animation-delay:-7s; }

    @keyframes drift {
      from { transform: translate(0,0) scale(1); }
      to   { transform: translate(40px, 30px) scale(1.08); }
    }

    /* grid lines */
    .grid-lines {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(99,179,237,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,179,237,.04) 1px, transparent 1px);
      background-size: 50px 50px;
    }

    /* floating particles */
    .particles { position: absolute; inset: 0; overflow: hidden; }
    .particle {
      position: absolute; width: 3px; height: 3px;
      background: rgba(147,197,253,.6); border-radius: 50%;
      animation: rise linear infinite;
    }
    @keyframes rise {
      0%   { transform: translateY(100vh) scale(0); opacity: 0; }
      10%  { opacity: 1; }
      90%  { opacity: .6; }
      100% { transform: translateY(-10vh) scale(1.5); opacity: 0; }
    }

    /* ── Card ── */
    .login-wrap {
      position: relative; z-index: 10;
      width: 100%; max-width: 420px;
      padding: 16px;
    }

    .login-card {
      background: rgba(255,255,255,.05);
      backdrop-filter: blur(24px);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 24px;
      padding: 40px 36px 36px;
      box-shadow: 0 25px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);
      animation: cardIn .6s cubic-bezier(.22,1,.36,1) both;
    }
    @keyframes cardIn {
      from { opacity:0; transform: translateY(30px) scale(.97); }
      to   { opacity:1; transform: translateY(0) scale(1); }
    }

    /* logo */
    .logo-ring {
      width: 72px; height: 72px; border-radius: 50%;
      background: linear-gradient(135deg, #1d4ed8, #7c3aed);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 18px;
      box-shadow: 0 0 0 8px rgba(99,102,241,.15), 0 8px 24px rgba(99,102,241,.4);
      animation: pulse-ring 2.5s ease-in-out infinite;
    }
    @keyframes pulse-ring {
      0%,100% { box-shadow: 0 0 0 8px rgba(99,102,241,.15), 0 8px 24px rgba(99,102,241,.4); }
      50%      { box-shadow: 0 0 0 14px rgba(99,102,241,.08), 0 8px 32px rgba(99,102,241,.55); }
    }
    .logo-ring i { color:#fff; font-size: 28px; }

    .card-title { text-align:center; color:#fff; font-size:22px; font-weight:700; margin-bottom:4px; }
    .card-sub   { text-align:center; color:rgba(255,255,255,.45); font-size:13px; margin-bottom:28px; }

    /* inputs */
    .field-wrap { position:relative; margin-bottom:18px; }
    .field-wrap .field-icon {
      position:absolute; left:14px; top:50%; transform:translateY(-50%);
      color:rgba(255,255,255,.35); font-size:14px; pointer-events:none;
    }
    .field-wrap input {
      width:100%; padding:12px 14px 12px 40px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.12);
      border-radius:12px; color:#fff; font-size:14px;
      outline:none; transition:border-color .2s, background .2s;
    }
    .field-wrap input::placeholder { color:rgba(255,255,255,.3); }
    .field-wrap input:focus {
      border-color:rgba(99,179,237,.6);
      background:rgba(255,255,255,.1);
    }
    .field-label { color:rgba(255,255,255,.6); font-size:12px; font-weight:600; margin-bottom:6px; display:block; }

    /* toggle password */
    .toggle-pw {
      position:absolute; right:14px; top:50%; transform:translateY(-50%);
      color:rgba(255,255,255,.35); cursor:pointer; font-size:14px;
      background:none; border:none; padding:0;
    }
    .toggle-pw:hover { color:rgba(255,255,255,.7); }

    /* error */
    .err-box {
      background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.35);
      border-radius:10px; padding:10px 14px; margin-bottom:18px;
      color:#fca5a5; font-size:13px;
    }
    .err-box i { margin-right:6px; }

    /* button */
    .btn-login {
      width:100%; padding:13px;
      background:linear-gradient(135deg,#1d4ed8,#7c3aed);
      border:none; border-radius:12px;
      color:#fff; font-size:15px; font-weight:700;
      cursor:pointer; transition:opacity .2s, transform .15s;
      box-shadow:0 6px 20px rgba(99,102,241,.45);
      margin-top:4px;
    }
    .btn-login:hover  { opacity:.9; transform:translateY(-1px); }
    .btn-login:active { transform:translateY(0); }

    .back-link {
      display:block; text-align:center; margin-top:20px;
      color:rgba(255,255,255,.35); font-size:13px; text-decoration:none;
      transition:color .2s;
    }
    .back-link:hover { color:rgba(255,255,255,.7); }
  </style>
</head>
<body>

<!-- Background -->
<div class="bg-canvas">
  <div class="orb orb1"></div>
  <div class="orb orb2"></div>
  <div class="orb orb3"></div>
  <div class="grid-lines"></div>
  <div class="particles" id="particles"></div>
</div>

<!-- Card -->
<div class="login-wrap">
  <div class="login-card">

    <div class="logo-ring"><i class="fas fa-user-shield"></i></div>
    <div class="card-title">Admin Portal</div>
    <div class="card-sub">HealthLink Control Center</div>

    <?php if (!empty($errors)): ?>
      <div class="err-box"><i class="fas fa-exclamation-circle"></i><?= implode('<br>', array_map('htmlspecialchars', $errors)) ?></div>
    <?php endif; ?>
    <?php displayFlash(); ?>

    <form method="POST">
      <div class="field-wrap">
        <label class="field-label">Username</label>
        <i class="fas fa-user field-icon"></i>
        <input type="text" name="username" placeholder="Enter username" value="<?= htmlspecialchars($_POST['username'] ?? '') ?>" required>
      </div>

      <div class="field-wrap">
        <label class="field-label">Password</label>
        <i class="fas fa-lock field-icon"></i>
        <input type="password" name="password" id="pwField" placeholder="••••••••" required>
        <button type="button" class="toggle-pw" onclick="togglePw()"><i class="fas fa-eye" id="pwIcon"></i></button>
      </div>

      <button type="submit" class="btn-login">
        <i class="fas fa-sign-in-alt me-2"></i>Sign In
      </button>
    </form>

    <a href="<?= SITE_URL ?>/index.php" class="back-link">
      <i class="fas fa-arrow-left me-1"></i>Back to Website
    </a>
  </div>
</div>

<script>
// Particles
(function(){
  var c = document.getElementById('particles');
  for(var i=0;i<35;i++){
    var p = document.createElement('div');
    p.className='particle';
    p.style.cssText='left:'+Math.random()*100+'%;width:'+(Math.random()*3+1)+'px;height:'+(Math.random()*3+1)+'px;animation-duration:'+(Math.random()*15+8)+'s;animation-delay:-'+(Math.random()*15)+'s;';
    c.appendChild(p);
  }
})();

function togglePw(){
  var f=document.getElementById('pwField'), i=document.getElementById('pwIcon');
  if(f.type==='password'){ f.type='text'; i.className='fas fa-eye-slash'; }
  else { f.type='password'; i.className='fas fa-eye'; }
}
</script>
</body>
</html>