<?php session_start();
if (!isset($_SESSION['admin_logged_in']) || $_SESSION['admin_logged_in'] !== true) {
    header('Location: index.php');
    exit;
}
?>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Forget Password</title>

  <!-- Bootstrap CSS & Icons -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css" rel="stylesheet">

  <style>
    body      { background:#f8f9fa; }
    /* centre the whole form block */
    .auth-wrap { min-height:100vh; }
    /* card styling */
    .login-card       { width:450px; }
    .login-card .logo { width:120px;height:120px;object-fit:contain; }

    /* colours */
    :root {
      --primary:#6c63ff;            /* adjust once for brand */
    }
    .btn-primary      { background:var(--primary);border-color:var(--primary); }
    .btn-primary:hover,
    .btn-primary:focus{ background:#5a52d5;border-color:#5a52d5; }

    /* input focus ring on brand colour */
    .form-control:focus {
      border-color:var(--primary);
      box-shadow:0 0 0 .25rem rgba(108,99,255,.25);
    }

    /* eye icon inside password field */
    .toggle-password {
      cursor:pointer;
      position:absolute;
      top:50%;
      right:1rem;
      transform:translateY(-50%);
      color:#6c757d;
    }
  </style>
</head>
<body>

  <main class="container-fluid auth-wrap d-flex align-items-center justify-content-center">
    <div class="card shadow-sm p-4 login-card">
      
      <!-- Logo -->
      <div class="text-center mb-3">
        <img src="img/CRA.png" alt="MKDS logo" class="logo" style="width: 200px; height: 200px; object-fit: contain;">
        
      </div>

      <!-- Login form -->
      <form id="loginForm" action="change_pass.php" method="post" novalidate>


                <!-- Current Password -->
          <div class="mb-3">
            <label for="current_password" class="form-label">Current Password</label>
            <input type="password" class="form-control" id="current_password" name="current_password" required>
          </div>

          <!-- New Password -->
          <div class="mb-3">
            <label for="new_password" class="form-label">New Password</label>
            <input type="password" class="form-control" id="new_password" name="new_password" required>
          </div>

          <!-- Confirm Password -->
          <div class="mb-3">
            <label for="confirm_password" class="form-label">Confirm Password</label>
            <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
          </div>


        <!-- Submit -->
        <div class="d-grid mb-3">
          <button class="btn btn-primary" type="submit">Change Password</button>
        </div>

      </form>

    </div>
  </main>

  <!-- Bootstrap JS bundle -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>

  
</body>
</html>
