<?php
// register.php
session_start();
$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 | Register</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)" />

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

  <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'"/>

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

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

  <style>
    :root{
      --ara-bg: #cacb9d;
      --ara-accent: #b32d24;
      --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:520px; 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-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; }
    .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">
        <img src="images/logoARA-lg3.png" class="auth-logo" alt="ARA Logo">
        <h1 class="h4 auth-title">Create Account</h1>
        <p class="auth-subtitle">Register to access Team ARA</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="registerProcess.php" method="post" novalidate>

          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label" for="first_name">First Name</label>
              <input type="text" class="form-control" id="first_name" name="first_name" required autocomplete="given-name">
            </div>
            <div class="col-md-6">
              <label class="form-label" for="last_name">Last Name</label>
              <input type="text" class="form-control" id="last_name" name="last_name" required autocomplete="family-name">
            </div>

            <div class="col-12">
              <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="col-md-6">
              <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="new-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 class="form-text">Use 8+ chars. Mix letters & numbers if possible.</div>
            </div>

            <div class="col-md-6">
              <label class="form-label" for="password2">Confirm Password</label>
              <div class="input-group">
                <span class="input-group-text"><i class="bi bi-shield-lock"></i></span>
                <input type="password" class="form-control" id="password2" name="password2" required autocomplete="new-password">
              </div>
            </div>

            <div class="col-12">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="terms" name="terms" value="1" required>
                <label class="form-check-label" for="terms">
                  I agree to the terms and conditions
                </label>
              </div>
            </div>
          </div>

          <div class="d-grid mt-4">
            <button type="submit" class="btn btn-ara btn-lg">
              <i class="bi bi-person-plus me-1"></i> Create Account
            </button>
          </div>

        </form>
      </div>

      <div class="auth-footer">
        <div>
          Already have an account?
          <a class="text-decoration-none" href="login.php">Login</a>
        </div>
        <div>
          <a class="text-decoration-none" href="index.php">Back to Home</a>
        </div>
      </div>

    </div>
  </div>

  <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>
    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');
      }
    });

    // client-side confirm password check (optional)
    document.querySelector('form').addEventListener('submit', function(e){
      const p1 = document.getElementById('password').value;
      const p2 = document.getElementById('password2').value;
      if(p1 !== p2){
        e.preventDefault();
        alert("Passwords do not match.");
      }
    });
  </script>
</body>
</html>