<?php
// login.php
session_start();

// optional: pull and clear flash message
$flash = $_SESSION['flash'] ?? '';
unset($_SESSION['flash']);
?>
<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Team ARA | Login</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
  <meta name="color-scheme" content="light dark" />
  <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
  <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
  <meta name="supported-color-schemes" content="light dark" />

  <link rel="preload" href="./css/adminlte.css" as="style" />

  <!-- Fonts -->
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
        crossorigin="anonymous" media="print" onload="this.media='all'"/>

  <!-- Bootstrap Icons -->
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
        crossorigin="anonymous"/>

  <!-- AdminLTE -->
  <link rel="stylesheet" href="./css/adminlte.css" />

  <style>
    :root{
      --ara-bg: #cacb9d;          /* your project background vibe */
      --ara-accent: #b32d24;      /* button accent */
      --ara-accent2: #7a1f1a;
      --ara-card: rgba(255,255,255,.92);
      --ara-border: rgba(0,0,0,.12);
    }

    body.auth-page{
      min-height: 100vh;
      background: var(--ara-bg);
    }

    .auth-wrap{
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem 1rem;
    }

    .auth-card{
      width: 100%;
      max-width: 460px;
      background: var(--ara-card);
      border: 1px solid var(--ara-border);
      border-radius: 18px;
      box-shadow: 0 14px 34px rgba(0,0,0,.14);
      overflow: hidden;
    }

    .auth-card .auth-header{
      padding: 1.25rem 1.25rem .75rem;
      text-align: center;
    }

    .auth-logo{
      width: 96px;
      height: 96px;
      object-fit: contain;
      display: inline-block;
    }

    .auth-title{
      margin: .75rem 0 .25rem;
      font-weight: 800;
      letter-spacing: .2px;
    }

    .auth-subtitle{
      margin: 0;
      opacity: .75;
      font-size: .95rem;
    }

    .auth-body{
      padding: 1.25rem 1.25rem 1.25rem;
    }

    .btn-ara{
      background: var(--ara-accent);
      border-color: var(--ara-accent);
      color: #fff;
      font-weight: 700;
    }
    .btn-ara:hover{
      background: var(--ara-accent2);
      border-color: var(--ara-accent2);
      color: #fff;
    }

    .form-control:focus{
      box-shadow: 0 0 0 .25rem rgba(179,45,36,.18);
      border-color: rgba(179,45,36,.5);
    }

    .auth-footer{
      padding: 0 1.25rem 1.25rem;
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      font-size: .95rem;
    }
  </style>
</head>

<body class="auth-page bg-body-tertiary">

  <div class="auth-wrap">
    <div class="auth-card">

      <div class="auth-header">
        <!-- swap to your logo if desired -->
        <img src="images/logoARA-lg3.png" class="auth-logo" alt="ARA Logo">
        <h1 class="h4 auth-title">Team ARA</h1>
        <p class="auth-subtitle">Login to your dashboard</p>
      </div>

      <div class="auth-body">

        <?php if ($flash !== ''): ?>
          <div class="alert alert-warning py-2" role="alert">
            <i class="bi bi-exclamation-triangle me-1"></i>
            <?php echo htmlspecialchars($flash, ENT_QUOTES); ?>
          </div>
        <?php endif; ?>

        <form action="dashboard.php" "loginProcess.php" method="post" novalidate>
          <div class="mb-3">
            <label class="form-label" for="email">Email</label>
            <div class="input-group">
              <span class="input-group-text"><i class="bi bi-envelope"></i></span>
              <input type="email" class="form-control" id="email" name="email" required autocomplete="email">
            </div>
          </div>

          <div class="mb-3">
            <label class="form-label" for="password">Password</label>
            <div class="input-group">
              <span class="input-group-text"><i class="bi bi-lock"></i></span>
              <input type="password" class="form-control" id="password" name="password" required autocomplete="current-password">
              <button class="btn btn-outline-secondary" type="button" id="togglePw" aria-label="Show/Hide password">
                <i class="bi bi-eye"></i>
              </button>
            </div>
          </div>

          <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="remember" name="remember" value="1">
              <label class="form-check-label" for="remember">Remember me</label>
            </div>
            <a href="forgot.php" class="text-decoration-none">Forgot password?</a>
          </div>

          <div class="d-grid">
            <button type="submit" class="btn btn-ara btn-lg">
              <i class="bi bi-box-arrow-in-right me-1"></i> Login
            </button>
          </div>
        </form>
      </div>

      <div class="auth-footer">
        <div>
          New here?
          <a class="text-decoration-none" href="register.php">Create an account</a>
        </div>
        <div>
          <a class="text-decoration-none" href="index.php">Back to Home</a>
        </div>
      </div>

    </div>
  </div>

  <!-- Required JS -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
  <script src="./js/adminlte.js"></script>

  <script>
    // show/hide password
    document.getElementById('togglePw').addEventListener('click', function(){
      const pw = document.getElementById('password');
      const icon = this.querySelector('i');
      if(pw.type === 'password'){
        pw.type = 'text';
        icon.classList.remove('bi-eye');
        icon.classList.add('bi-eye-slash');
      }else{
        pw.type = 'password';
        icon.classList.remove('bi-eye-slash');
        icon.classList.add('bi-eye');
      }
    });
  </script>
</body>
</html>