<?php
session_start();
require_once 'db.php';

// Already logged in
if (isset($_SESSION['admin_id'])) {
    header("Location: admin_dashboard.php");
    exit;
}

$error = '';

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

    if (empty($username) || empty($password)) {
        $error = 'Please enter username and password.';
    } elseif (strlen($password) < 4) {
        $error = 'Password must be at least 4 characters.';
    } else {
        $stmt = $conn->prepare("SELECT id, password, name FROM admin_users WHERE username = ?");
        $stmt->bind_param("s", $username);
        $stmt->execute();
        $stmt->store_result();
        $stmt->bind_result($admin_id, $hashed, $admin_name);
        $stmt->fetch();

        if ($stmt->num_rows > 0 && password_verify($password, $hashed)) {
            $_SESSION['admin_id']   = $admin_id;
            $_SESSION['admin_name'] = $admin_name;
            header("Location: admin_dashboard.php");
            exit;
        } else {
            $error = 'Invalid username or password.';
        }
        $stmt->close();
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Login - WFM</title>
<style>
  *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

  body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    min-height: 100vh;
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  .card {
    background: #fff;
    border-radius: 20px;
    padding: 44px 38px 38px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  }

  .logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 6px;
  }

  .logo-row svg { width: 44px; height: 44px; }

  .brand {
    font-size: 22px;
    font-weight: 800;
    color: #1a3a4a;
    letter-spacing: 1px;
  }

  .subtitle {
    text-align: center;
    color: #888;
    font-size: 13px;
    margin-bottom: 30px;
    margin-top: 4px;
  }

  label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .input-wrap {
    position: relative;
    margin-bottom: 18px;
  }

  .input-wrap svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #aaa;
  }

  .input-wrap input {
    width: 100%;
    height: 50px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    padding: 0 14px 0 42px;
    font-size: 14px;
    color: #333;
    font-family: inherit;
    outline: none;
    transition: border-color .2s;
  }

  .input-wrap input:focus { border-color: #2c7be5; }

  .error-box {
    background: #fde8e8;
    color: #c0392b;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    text-align: center;
    margin-bottom: 18px;
  }

  .btn-login {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(90deg, #2c7be5, #1a5cbf);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.3px;
    box-shadow: 0 6px 20px rgba(44,123,229,0.35);
    transition: opacity .15s;
    margin-top: 6px;
  }

  .btn-login:hover { opacity: 0.92; }
  .btn-login:active { transform: scale(0.99); }

  .back-link {
    display: block;
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
    color: #888;
    text-decoration: none;
  }

  .back-link:hover { color: #2c7be5; }
</style>
</head>
<body>

<div class="card">
  <div class="logo-row">
    <!-- WFM mini globe -->
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id="g2" cx="40%" cy="38%" r="60%">
          <stop offset="0%" stop-color="#5bc8d8"/>
          <stop offset="100%" stop-color="#1a5a8a"/>
        </radialGradient>
      </defs>
      <circle cx="50" cy="50" r="46" fill="url(#g2)"/>
      <ellipse cx="38" cy="42" rx="18" ry="11" fill="#2db88a" opacity="0.75" transform="rotate(-20 38 42)"/>
      <ellipse cx="62" cy="56" rx="12" ry="8" fill="#3ecf8e" opacity="0.65" transform="rotate(15 62 56)"/>
      <text x="50" y="56" text-anchor="middle" font-family="'Segoe UI',Arial,sans-serif" font-weight="900" font-size="20" fill="#fff">WFM</text>
    </svg>
    <span class="brand">Admin Panel</span>
  </div>
  <p class="subtitle">Sign in to manage the platform</p>

  <?php if ($error): ?>
    <div class="error-box"><?= htmlspecialchars($error) ?></div>
  <?php endif; ?>

  <form method="POST">
    <div>
      <label for="username">Username</label>
      <div class="input-wrap">
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.7 0 5-2.3 5-5S14.7 2 12 2 7 4.3 7 7s2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v2h20v-2c0-3.3-6.7-5-10-5z"/></svg>
        <input type="text" id="username" name="username" placeholder="Enter username"
               value="<?= htmlspecialchars($_POST['username'] ?? '') ?>" autocomplete="username">
      </div>
    </div>

    <div>
      <label for="password">Password</label>
      <div class="input-wrap">
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 8h-1V6A5 5 0 0 0 7 6v2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2zm-6 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm3.1-9H8.9V6a3.1 3.1 0 1 1 6.2 0v2z"/></svg>
        <input type="password" id="password" name="password" placeholder="Enter password"
               minlength="4" autocomplete="current-password">
      </div>
    </div>

    <button type="submit" class="btn-login">Sign In</button>
  </form>

  <a href="login.php" class="back-link">← Back to User Login</a>
</div>

</body>
</html>