<?php
declare(strict_types=1);

if (session_status() !== PHP_SESSION_ACTIVE) {
    session_start();
}

function h($s): string
{
    return htmlspecialchars((string)$s, ENT_QUOTES, 'UTF-8');
}

function csrf_token(): string
{
    if (empty($_SESSION['csrf_forgot'])) {
        $_SESSION['csrf_forgot'] = bin2hex(random_bytes(32));
    }
    return (string)$_SESSION['csrf_forgot'];
}
?>
<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>نسيت كلمة المرور</title>
  <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap" rel="stylesheet">
  <style>
    :root{
      --hlg-dark:#00424f;
      --hlg-teal:#006a7a;
      --bg:#e3f0f2;
      --card:#ffffff;
      --muted:#6b7a7f;
      --border:#dbe7ea;
      --shadow:0 18px 45px rgba(0,0,0,.10);
      --radius:22px;
      --input-h:52px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      min-height:100vh;
      font-family:'Tajawal',sans-serif;
      background:linear-gradient(135deg,#d9eaee 0%, #0a5f6c 45%, #00424f 100%);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
    }
    .wrap{
      width:100%;
      max-width:520px;
    }
    .card{
      background:rgba(255,255,255,.94);
      border:1px solid rgba(255,255,255,.45);
      border-radius:28px;
      box-shadow:var(--shadow);
      padding:26px;
    }
    .title{
      margin:0 0 8px;
      color:var(--hlg-dark);
      font-size:32px;
      font-weight:800;
    }
    .sub{
      margin:0 0 20px;
      color:var(--muted);
      font-size:15px;
      line-height:1.8;
    }
    .field{margin-bottom:16px}
    label{
      display:block;
      margin-bottom:8px;
      color:var(--hlg-dark);
      font-weight:700;
      font-size:15px;
    }
    input, textarea{
      width:100%;
      border:1px solid var(--border);
      border-radius:16px;
      background:#eef4f7;
      padding:14px 16px;
      font-family:'Tajawal',sans-serif;
      font-size:16px;
      outline:none;
    }
    input{
      height:var(--input-h);
    }
    textarea{
      min-height:110px;
      resize:vertical;
    }
    input:focus, textarea:focus{
      border-color:var(--hlg-teal);
      box-shadow:0 0 0 4px rgba(0,106,122,.12);
      background:#fff;
    }
    .btn{
      width:100%;
      height:54px;
      border:none;
      border-radius:16px;
      background:linear-gradient(90deg,var(--hlg-dark),var(--hlg-teal));
      color:#fff;
      font-family:'Tajawal',sans-serif;
      font-size:18px;
      font-weight:800;
      cursor:pointer;
      margin-top:6px;
    }
    .msg{
      padding:14px 16px;
      border-radius:14px;
      margin-bottom:16px;
      font-size:15px;
      line-height:1.8;
    }
    .msg.ok{
      background:#ecfdf3;
      color:#0f6b3f;
      border:1px solid #b7e4c7;
    }
    .msg.err{
      background:#fff1f1;
      color:#9f1d1d;
      border:1px solid #f3c2c2;
    }
    .back{
      display:inline-block;
      margin-top:16px;
      color:#006a7a;
      text-decoration:none;
      font-weight:700;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="card">
      <h1 class="title">نسيت كلمة المرور</h1>
      <p class="sub">اكتب اسم المستخدم أو البريد الإلكتروني، وسيتم إرسال طلب إعادة التعيين إلى الإدارة.</p>

      <?php if (!empty($_SESSION['forgot_ok'])): ?>
        <div class="msg ok"><?= h($_SESSION['forgot_ok']) ?></div>
        <?php unset($_SESSION['forgot_ok']); ?>
      <?php endif; ?>

      <?php if (!empty($_SESSION['forgot_err'])): ?>
        <div class="msg err"><?= h($_SESSION['forgot_err']) ?></div>
        <?php unset($_SESSION['forgot_err']); ?>
      <?php endif; ?>

      <form action="forgot_password_submit.php" method="post">
        <input type="hidden" name="csrf" value="<?= h(csrf_token()) ?>">

        <div class="field">
          <label for="login">اسم المستخدم أو البريد الإلكتروني</label>
          <input type="text" id="login" name="login" required>
        </div>

        <div class="field">
          <label for="note">ملاحظة للإدارة</label>
          <textarea id="note" name="note" placeholder="مثال: لا أستطيع الدخول إلى النظام"></textarea>
        </div>

        <button class="btn" type="submit">إرسال الطلب</button>
      </form>

      <a class="back" href="index.php">العودة إلى تسجيل الدخول</a>
    </div>
  </div>
</body>
</html>