<?php
session_start();

// Clear any existing session data when login page loads
if (isset($_SESSION['admin_logged_in'])) {
    session_unset();
    session_destroy();
    session_start();
}

// Prevent browser caching of this page - critical for security after logout
header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');
header('Pragma: no-cache');
header('Expires: 0');
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <title>Admin Console - Secure Login</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Fonts & Icons -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=JetBrains+Mono:wght@300;400;500&family=Manrope:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <style>
    /* ══ CSS VARIABLES ══ */
    :root {
      --yellow:        #f5c518;
      --yellow-bright: #ffe566;
      --yellow-glass:  rgba(245,197,24,0.09);

      --dark-900: #0b0c0e;
      --dark-800: #101214;
      --dark-700: #161a20;
      
      --text-1: #edf0f7;
      --text-2: #8a90a6;
      --text-3: #4a5068;

      --red: #ef4f4a;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Manrope', sans-serif;
      
      /* 👇 YAHAN BACKGROUND IMAGE ADD KI GAYI HAI 👇 */
      /* linear-gradient se image ke upar ek dark shadow (opacity) daali hai taaki form clearly dikhe */
      background: linear-gradient(rgba(11, 12, 14, 0.75), rgba(11, 12, 14, 0.95)), 
                  url('https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?q=80&w=1920&auto=format&fit=crop') no-repeat center center;
      background-size: cover;
      background-attachment: fixed;
      
      color: var(--text-1);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      position: relative;
      overflow: hidden;
    }

    /* Dot grid texture background (Image ke upar premium feel ke liye) */
    body::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(245,197,24,0.055) 1px, transparent 1px);
      background-size: 26px 26px;
      z-index: 0;
    }

    /* Center Glow Orb */
    .glow-orb {
      position: absolute;
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(245,197,24,0.15) 0%, transparent 60%);
      border-radius: 50%;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      z-index: 0;
      pointer-events: none;
    }

    .login-wrapper {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 420px;
      padding: 20px;
    }

    /* Brand Header */
    .brand { text-align: center; margin-bottom: 35px; }
    .brand i { color: var(--yellow); font-size: 2.2rem; margin-bottom: 12px; filter: drop-shadow(0 0 10px rgba(245,197,24,0.3)); }
    .brand h2 { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.9rem; letter-spacing: -0.5px; color: var(--text-1); }
    .brand span { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--text-2); text-transform: uppercase; letter-spacing: 3px; display: block; margin-top: 6px; }

    /* Login Box */
    .login-box {
      background: rgba(22, 26, 32, 0.65); /* Thoda transparent kiya hai taaki bg image dikhe */
      padding: 40px 35px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 30px 60px rgba(0,0,0,0.8);
      backdrop-filter: blur(15px); /* Premium blur effect */
      -webkit-backdrop-filter: blur(15px);
    }

    /* Form Fields */
    .form-group { margin-bottom: 24px; }
    .form-label {
      display: block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-2);
      margin-bottom: 8px;
      font-weight: 500;
    }

    .input-wrapper { position: relative; }
    .input-wrapper i {
      position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
      color: var(--text-3); font-size: 0.9rem; transition: 0.3s;
    }
    
    .form-control {
        width: 100%;
        padding: 14px 16px 14px 45px;
        background: rgba(16, 18, 20, 0.8);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 8px;
        color: var(--text-1);
        font-size: 0.95rem;
        font-family: 'Manrope', sans-serif;
        transition: 0.3s;
    }
    .form-control:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-glass); background: var(--dark-800); }
    .form-control:focus + i, .input-wrapper:focus-within i { color: var(--yellow); }
    .form-control::placeholder { color: rgba(255,255,255,0.2); }

    /* Submit Button */
    .btn-login {
      width: 100%;
      background: var(--yellow);
      color: var(--dark-900);
      padding: 14px;
      border: none;
      border-radius: 8px;
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex; justify-content: center; align-items: center; gap: 10px;
      margin-top: 15px;
    }
    .btn-login:hover { background: var(--yellow-bright); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(245,197,24,0.25); }

    /* Error Alert */
    .alert-error {
      background: rgba(239,79,74,0.1);
      border: 1px solid rgba(239,79,74,0.2);
      color: var(--red);
      padding: 12px 16px;
      border-radius: 8px;
      margin-bottom: 24px;
      font-size: 0.85rem;
      display: flex; align-items: center; gap: 10px;
      font-weight: 500;
    }
  </style>
</head>
<body>

<!-- Ambient Background Glow -->
<div class="glow-orb"></div>

<div class="login-wrapper">
  
  <!-- Logo & Branding -->
  <div class="brand">
    <i class="fas fa-chart-line"></i>
    <h2>BrokerPortal</h2>
    <span>Secure Admin Console</span>
  </div>

  <div class="login-box">
    
    <!-- Error Handling -->
    <?php if (isset($_SESSION['error'])): ?>
      <div class="alert-error">
        <i class="fas fa-exclamation-triangle"></i> <?= $_SESSION['error']; unset($_SESSION['error']); ?>
      </div>
    <?php endif; ?>

    <!-- Login Form -->
    <form action="index.php" method="post">
      
      <div class="form-group">
        <label class="form-label">Admin Username</label>
        <div class="input-wrapper">
          <input type="text" name="username" class="form-control" placeholder="Enter your username" required autocomplete="off">
          <i class="fas fa-user"></i>
        </div>
      </div>

      <div class="form-group">
        <label class="form-label">Master Password</label>
        <div class="input-wrapper">
          <input type="password" name="password" class="form-control" placeholder="Enter your password" required>
          <i class="fas fa-lock"></i>
        </div>
      </div>

      <button type="submit" name="login" class="btn-login">
        Secure Login <i class="fas fa-arrow-right"></i>
      </button>

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

</body>
</html>