<?php
require __DIR__ . '/security_headers.php';
require __DIR__ . '/auth_guard.php';
require_student();
require __DIR__ . '/db.php';

$student = $_SESSION['student'] ?? null;
if (!$student || empty($student['id'])) {
  header('Location: /index.php'); exit;
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $current = $_POST['current_password'] ?? '';
  $new     = $_POST['new_password'] ?? '';
  $confirm = $_POST['confirm_password'] ?? '';

  if ($new !== $confirm) {
    header("Location: /student_change_password.php?msg=" . urlencode("❌ New passwords do not match."));
    exit;
  }

  $stmt = $pdo->prepare("SELECT password_hash FROM students WHERE id = ?");
  $stmt->execute([$student['id']]);
  $row = $stmt->fetch(PDO::FETCH_ASSOC);

  if (!$row || !password_verify($current, $row['password_hash'])) {
    header("Location: /student_change_password.php?msg=" . urlencode("❌ Current password is incorrect."));
    exit;
  }

  $hash = password_hash($new, PASSWORD_BCRYPT);
  $upd = $pdo->prepare("UPDATE students SET password_hash=? WHERE id=?");
  $upd->execute([$hash, $student['id']]);

  header("Location: /student_dashboard.php?msg=" . urlencode("✅ Password updated successfully."));
  exit;
}

$msg = $_GET['msg'] ?? null;
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Change Password</title>
  <link rel="stylesheet" href="/public/css/styles.css">
  <link rel="stylesheet" href="/public/css/admin.css">
</head>
<body>
  <main class="portal" style="max-width:600px; margin:40px auto;">
    <div class="card">
      <h2>Change Password</h2>

      <?php if ($msg): ?>
        <div class="alert" style="margin-bottom:15px;">
          <?php echo htmlspecialchars($msg); ?>
        </div>
      <?php endif; ?>

      <form method="post" class="form-grid">
        <div class="field row-span">
          <label for="current_password">Current Password</label>
          <div class="pw-wrap">
            <input type="password" id="current_password" name="current_password" required>
            <button type="button" class="pw-eye" data-target="current_password" aria-label="Show password">
              <svg class="icon-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12Z"/><circle cx="12" cy="12" r="3"/></svg>
              <svg class="icon-eye-off" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.91 21.91 0 0 1 5.06-5.94M9.9 4.24A10.94 10.94 0 0 1 12 4c7 0 11 7 11 7a21.83 21.83 0 0 1-3.17 4.33"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
            </button>
          </div>
        </div>

        <div class="field row-span">
          <label for="new_password">New Password</label>
          <div class="pw-wrap">
            <input type="password" id="new_password" name="new_password" required>
            <button type="button" class="pw-eye" data-target="new_password" aria-label="Show password">
              <svg class="icon-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12Z"/><circle cx="12" cy="12" r="3"/></svg>
              <svg class="icon-eye-off" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.91 21.91 0 0 1 5.06-5.94M9.9 4.24A10.94 10.94 0 0 1 12 4c7 0 11 7 11 7a21.83 21.83 0 0 1-3.17 4.33"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
            </button>
          </div>
        </div>

        <div class="field row-span">
          <label for="confirm_password">Confirm New Password</label>
          <div class="pw-wrap">
            <input type="password" id="confirm_password" name="confirm_password" required>
            <button type="button" class="pw-eye" data-target="confirm_password" aria-label="Show password">
              <svg class="icon-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12Z"/><circle cx="12" cy="12" r="3"/></svg>
              <svg class="icon-eye-off" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.91 21.91 0 0 1 5.06-5.94M9.9 4.24A10.94 10.94 0 0 1 12 4c7 0 11 7 11 7a21.83 21.83 0 0 1-3.17 4.33"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
            </button>
          </div>
        </div>

        <div class="actions-bar">
          <a class="btn" href="/student_dashboard.php">Cancel</a>
          <button type="submit" class="btn-primary">Update Password</button>
        </div>
      </form>
    </div>
  </main>

  <!-- JS for toggle -->
  <script src="/public/js/pw-toggle.js" defer></script>
</body>
</html>
