<?php
require_once __DIR__ . '/../config/constants.php';
require_once __DIR__ . '/../config/database.php';
require_once __DIR__ . '/../includes/auth.php';
require_once __DIR__ . '/../includes/rbac.php';

startSecureSession();
if (!isLoggedIn()) {
    header('Location: ' . BASE_URL . '/public/index.php?mode=login&path=admin');
    exit;
}
requireRole('admin');

$error = '';
$success = '';
$createdEmail = '';
$createdPassword = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $full_name   = trim($_POST['full_name']   ?? '');
    $email       = trim($_POST['email']       ?? '');
    $phone       = trim($_POST['phone']       ?? '');
    $court       = trim($_POST['court']       ?? '');
    $password    = $_POST['password']          ?? '';
    $password2   = $_POST['password2']         ?? '';
    $status      = $_POST['status']            ?? 'active';
    $notes       = trim($_POST['notes']        ?? '');

    if (!$full_name || !$email || !$phone || !$court || !$password || !$password2) {
        $error = 'يرجى ملء جميع الحقول الإلزامية';
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $error = 'البريد الإلكتروني غير صالح';
    } elseif (strlen($password) < 8) {
        $error = 'كلمة المرور يجب أن تكون 8 أحرف على الأقل';
    } elseif ($password !== $password2) {
        $error = 'كلمتا المرور غير متطابقتين';
    } else {
        $result = createClerkAccount([
            'full_name' => $full_name,
            'email'     => $email,
            'phone'     => $phone,
            'court'     => $court,
            'password'  => $password,
            'status'    => $status,
            'notes'     => $notes,
        ]);
        if ($result['success']) {
            $success         = 'تم إنشاء حساب أمين الضبط بنجاح!';
            $createdEmail    = $email;
            $createdPassword = $password;
        } else {
            $error = $result['message'];
        }
    }
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>إنشاء حساب أمين ضبط — <?= APP_NAME ?></title>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Amiri:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.rtl.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
/* ══ CSS VARIABLES — LIGHT MODE ══ */
:root {
  --navy:#0A1628;--navy2:#1A2B40;--navy3:#253550;
  --gold:#C9A84C;--gold2:#E8C97A;
  --bg:#F7F4EF;--surface:#FFFFFF;--border:#E0D8CC;
  --txt:#0A1628;--txt2:#5A6A7C;--txt3:#8A9AAC;
  --inp-bg:#FFFFFF;--inp-border:#CFC8BC;
  --card-bg:#FFFFFF;--card-border:#E0D8CC;
  --badge-bg:rgba(201,168,76,.1);--badge-txt:#7A5A10;--badge-border:rgba(201,168,76,.3);
  --success-bg:rgba(26,122,74,.08);--success-txt:#155A30;--success-border:rgba(26,122,74,.22);
  --err-bg:rgba(181,38,38,.07);--err-txt:#922020;--err-border:rgba(181,38,38,.2);
  --hdr-bg:#0A1628;--hdr-border:rgba(255,255,255,.08);
}
/* ══ DARK MODE ══ */
[data-theme="dark"] {
  --bg:#080F1C;--surface:#0D1828;--border:rgba(255,255,255,.08);
  --txt:rgba(240,237,232,.9);--txt2:rgba(240,237,232,.52);--txt3:rgba(240,237,232,.28);
  --inp-bg:rgba(255,255,255,.05);--inp-border:rgba(255,255,255,.11);
  --card-bg:rgba(10,20,40,.96);--card-border:rgba(201,168,76,.14);
  --badge-bg:rgba(201,168,76,.11);--badge-txt:#E8C97A;--badge-border:rgba(201,168,76,.24);
  --success-bg:rgba(26,122,74,.12);--success-txt:#4ade80;--success-border:rgba(26,122,74,.25);
  --err-bg:rgba(181,38,38,.11);--err-txt:#f87171;--err-border:rgba(181,38,38,.24);
  --hdr-bg:#050C18;--hdr-border:rgba(255,255,255,.06);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Cairo',sans-serif;min-height:100vh;background:var(--bg);color:var(--txt);direction:rtl;transition:background .3s,color .3s}

/* ══ TOPBAR ══ */
.tb{background:var(--hdr-bg);padding:13px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--hdr-border);flex-wrap:wrap;gap:10px;position:sticky;top:0;z-index:100}
.tb-left{display:flex;align-items:center;gap:12px}
.tb-ico{width:38px;height:38px;background:linear-gradient(135deg,var(--gold),var(--gold2));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--navy);flex-shrink:0}
.tb-name{font-family:'Amiri',serif;font-size:19px;font-weight:700;color:#fff;line-height:1}
.tb-sub{font-size:10px;color:rgba(255,255,255,.38);line-height:1;margin-top:2px}
.tb-right{display:flex;align-items:center;gap:6px}
.tb-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:6px 13px;border-radius:7px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.07);color:rgba(255,255,255,.65);cursor:pointer;transition:all .2s;font-family:'Cairo',sans-serif;text-decoration:none}
.tb-btn:hover,.tb-btn.active{background:rgba(201,168,76,.15);border-color:rgba(201,168,76,.3);color:var(--gold)}
.lang-btns{display:flex;gap:4px}
.lang-btn{font-size:11px;padding:5px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);cursor:pointer;transition:all .2s;font-family:'Cairo',sans-serif}
.lang-btn.active{background:rgba(201,168,76,.14);border-color:rgba(201,168,76,.28);color:var(--gold);font-weight:700}
.dark-btn{width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);color:rgba(255,255,255,.65);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s}
.dark-btn:hover{border-color:rgba(201,168,76,.3);color:var(--gold)}

/* ══ BREADCRUMB ══ */
.bc{padding:12px 28px;display:flex;align-items:center;gap:7px;font-size:12px;color:var(--txt3);background:var(--surface);border-bottom:1px solid var(--border)}
.bc a{color:var(--txt2);text-decoration:none;transition:color .2s}
.bc a:hover{color:var(--gold)}
.bc-sep{color:var(--txt3);font-size:11px}

/* ══ PAGE WRAPPER ══ */
.page{max-width:860px;margin:0 auto;padding:28px 24px 60px}

/* ══ PAGE HEADER ══ */
.ph{margin-bottom:22px}
.ph-badge{display:inline-flex;align-items:center;gap:6px;background:var(--badge-bg);border:1px solid var(--badge-border);border-radius:99px;padding:4px 13px;font-size:11px;font-weight:700;color:var(--badge-txt);margin-bottom:10px}
.ph-title{font-family:'Amiri',serif;font-size:26px;font-weight:700;color:var(--txt);line-height:1.2}
.ph-sub{font-size:13px;color:var(--txt2);margin-top:5px;line-height:1.65;max-width:560px}

/* ══ STATS ══ */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.stat-box{background:var(--card-bg);border:1px solid var(--card-border);border-radius:13px;padding:14px 16px;display:flex;align-items:center;gap:12px;transition:border-color .2s}
.stat-box:hover{border-color:var(--gold)}
.stat-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.si-gold{background:rgba(201,168,76,.12);color:var(--gold)}
.si-green{background:rgba(26,122,74,.1);color:#1A7A4A}
[data-theme="dark"] .si-green{color:#4ade80}
.si-blue{background:rgba(26,95,138,.12);color:#1A5F8A}
[data-theme="dark"] .si-blue{color:#60a5fa}
.stat-num{font-size:22px;font-weight:900;color:var(--txt);line-height:1}
.stat-lbl{font-size:11px;color:var(--txt3);margin-top:1px}

/* ══ INFO BOX ══ */
.info-box{background:var(--card-bg);border:1px solid var(--card-border);border-radius:13px;padding:14px 18px;margin-bottom:20px}
.info-row{display:flex;align-items:flex-start;gap:9px;font-size:12px;color:var(--txt2);padding:5px 0;line-height:1.55}
.info-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0;margin-top:4px}

/* ══ ALERTS ══ */
.alert-box{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:11px;font-size:13px;margin-bottom:18px;line-height:1.5}
.alert-err{background:var(--err-bg);border:1px solid var(--err-border);color:var(--err-txt)}
.alert-suc{background:var(--success-bg);border:1px solid var(--success-border);color:var(--success-txt)}
.alert-ico{font-size:16px;flex-shrink:0;margin-top:1px}

/* ══ CARD ══ */
.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:18px;overflow:hidden;margin-bottom:20px}
.card-hd{padding:18px 24px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:11px}
.card-hd-ico{width:36px;height:36px;background:linear-gradient(135deg,var(--gold),var(--gold2));border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--navy);flex-shrink:0}
.card-hd-title{font-size:15px;font-weight:800;color:var(--txt)}
.card-hd-sub{font-size:11px;color:var(--txt3);margin-top:1px}
.card-body{padding:24px}

/* ══ FORM ══ */
.sect-hd{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;color:var(--txt3);text-transform:uppercase;letter-spacing:.7px;margin-bottom:15px;padding-bottom:9px;border-bottom:1px solid var(--border)}
.sect-hd:not(:first-child){margin-top:24px}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.f-grid.g1{grid-template-columns:1fr}
.f-group{display:flex;flex-direction:column;gap:5px}
.f-label{font-size:11px;font-weight:700;color:var(--txt2);display:flex;align-items:center;gap:4px}
.req{color:var(--gold);font-size:14px;line-height:1}
.f-row{display:flex;align-items:stretch}
.f-pre{padding:9px 12px;background:var(--inp-bg);border:1px solid var(--inp-border);border-left:none;border-radius:9px 0 0 9px;color:var(--txt3);font-size:14px;display:flex;align-items:center;flex-shrink:0;transition:border-color .2s}
.f-inp{flex:1;padding:9px 12px;border:1px solid var(--inp-border);border-right:none;background:var(--inp-bg);color:var(--txt);font-size:13px;font-family:'Cairo',sans-serif;outline:none;border-radius:0 9px 9px 0;transition:border-color .2s,background .2s}
.f-inp:focus,.f-inp:focus+.f-pre,.f-row:focus-within .f-pre{border-color:rgba(201,168,76,.45)}
.f-inp:focus{background:var(--surface)}
.f-inp-solo{width:100%;padding:9px 13px;border:1px solid var(--inp-border);background:var(--inp-bg);color:var(--txt);font-size:13px;font-family:'Cairo',sans-serif;outline:none;border-radius:9px;transition:border-color .2s,background .2s}
.f-inp-solo:focus{border-color:rgba(201,168,76,.45);background:var(--surface)}
.f-inp-solo.sel option{background:var(--surface);color:var(--txt)}
.f-hint{font-size:10px;color:var(--txt3);line-height:1.45;margin-top:1px}
.pw-wrap{position:relative}
.pw-tog{position:absolute;left:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--txt3);cursor:pointer;font-size:15px;padding:2px;transition:color .2s}
.pw-tog:hover{color:var(--gold)}
.pw-inp{padding-left:36px!important}
.pw-str{display:flex;gap:4px;margin-top:6px}
.pw-bar{height:3px;border-radius:2px;flex:1;background:var(--border);transition:background .3s}
.pw-bar.w{background:#e74c3c}.pw-bar.m{background:#f39c12}.pw-bar.s{background:#27ae60}

/* ══ FORM FOOTER ══ */
.form-footer{padding:18px 24px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.form-note{font-size:11px;color:var(--txt3);display:flex;align-items:center;gap:5px}
.btn-prim{display:inline-flex;align-items:center;gap:8px;padding:11px 28px;border-radius:10px;border:none;background:var(--gold);color:var(--navy);font-size:14px;font-weight:800;font-family:'Cairo',sans-serif;cursor:pointer;transition:all .2s}
.btn-prim:hover{background:var(--gold2);transform:translateY(-1px);box-shadow:0 6px 18px rgba(201,168,76,.3)}
.btn-prim:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:9px;border:1px solid var(--border);background:transparent;color:var(--txt2);font-size:13px;font-family:'Cairo',sans-serif;cursor:pointer;transition:all .2s;text-decoration:none}
.btn-ghost:hover{border-color:rgba(201,168,76,.4);color:var(--txt)}

/* ══ SUCCESS CARD ══ */
.success-card{background:var(--success-bg);border:1px solid var(--success-border);border-radius:16px;padding:28px;text-align:center;margin-bottom:20px;<?= $success ? '' : 'display:none' ?>}
.s-ico{font-size:40px;margin-bottom:12px}
.s-title{font-family:'Amiri',serif;font-size:22px;font-weight:700;color:var(--success-txt);margin-bottom:6px}
.s-sub{font-size:13px;color:var(--txt2);line-height:1.65;margin-bottom:16px}
.s-cred{background:var(--card-bg);border:1px solid var(--card-border);border-radius:11px;padding:14px 18px;font-size:12px;color:var(--txt2);text-align:right;line-height:1.8}
.s-cred strong{color:var(--txt);font-weight:800}

/* ══ RESPONSIVE ══ */
@media(max-width:640px){
  .stats-row{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr}
  .tb{padding:11px 16px}
  .page{padding:20px 14px 50px}
  .bc{padding:10px 16px}
  .form-footer{flex-direction:column;align-items:stretch}
  .form-footer .d-flex{flex-direction:column}
  .btn-prim,.btn-ghost{width:100%;justify-content:center}
}
</style>
</head>
<body>

<!-- ══ TOPBAR ══ -->
<div class="tb">
  <div class="tb-left">
    <div class="tb-ico"><i class="bi bi-balance-scale"></i></div>
    <div>
      <div class="tb-name"><?= APP_NAME ?></div>
      <div class="tb-sub" id="tb-sub">نظام إدارة القضايا</div>
    </div>
  </div>
  <div class="tb-right">
    <div class="lang-btns">
      <button class="lang-btn active" onclick="setLang('ar')">عربي</button>
      <button class="lang-btn" onclick="setLang('fr')">FR</button>
      <button class="lang-btn" onclick="setLang('en')">EN</button>
    </div>
    <button class="dark-btn" onclick="toggleDark()" id="darkBtn" title="تبديل الوضع">
      <i class="bi bi-moon" id="darkIco"></i>
    </button>
    <a href="<?= BASE_URL ?>/admin/dashboard.php" class="tb-btn">
      <i class="bi bi-speedometer2"></i>
      <span id="tb-dash">لوحة التحكم</span>
    </a>
    <a href="<?= BASE_URL ?>/admin/users.php" class="tb-btn">
      <i class="bi bi-people"></i>
      <span id="tb-users">المستخدمون</span>
    </a>
  </div>
</div>

<!-- ══ BREADCRUMB ══ -->
<div class="bc">
  <a href="<?= BASE_URL ?>/admin/dashboard.php" id="bc1">لوحة التحكم</a>
  <span class="bc-sep"><i class="bi bi-chevron-left"></i></span>
  <a href="<?= BASE_URL ?>/admin/users.php" id="bc2">إدارة المستخدمين</a>
  <span class="bc-sep"><i class="bi bi-chevron-left"></i></span>
  <span id="bc3">إنشاء حساب أمين ضبط</span>
</div>

<div class="page">

  <!-- PAGE HEADER -->
  <div class="ph">
    <div class="ph-badge" id="ph-badge"><i class="bi bi-shield-lock"></i> مدير النظام</div>
    <div class="ph-title" id="ph-title">إنشاء حساب أمين ضبط جديد</div>
    <div class="ph-sub" id="ph-sub">يمكن للمدير فقط إنشاء حسابات أمناء الضبط — لا يملكون رابط تسجيل ذاتي</div>
  </div>

  <!-- STATS -->
  <div class="stats-row">
    <div class="stat-box">
      <div class="stat-ico si-gold"><i class="bi bi-people-fill"></i></div>
      <div>
        <div class="stat-num">12</div>
        <div class="stat-lbl" id="st1">أمناء الضبط النشطين</div>
      </div>
    </div>
    <div class="stat-box">
      <div class="stat-ico si-green"><i class="bi bi-person-check-fill"></i></div>
      <div>
        <div class="stat-num">8</div>
        <div class="stat-lbl" id="st2">حسابات هذا الشهر</div>
      </div>
    </div>
    <div class="stat-box">
      <div class="stat-ico si-blue"><i class="bi bi-shield-check"></i></div>
      <div>
        <div class="stat-num">100%</div>
        <div class="stat-lbl" id="st3">معدل الأمان</div>
      </div>
    </div>
  </div>

  <!-- INFO BOX -->
  <div class="info-box">
    <div class="info-row"><div class="info-dot"></div><span id="info1">أمناء الضبط لا يملكون رابط تسجيل — يجب على المدير إنشاء حساباتهم يدوياً</span></div>
    <div class="info-row"><div class="info-dot"></div><span id="info2">سيتم إرسال بيانات الدخول تلقائياً إلى البريد الإلكتروني المُدخل</span></div>
    <div class="info-row"><div class="info-dot"></div><span id="info3">يمكن للمدير تعطيل أو حذف أي حساب في أي وقت من لوحة التحكم</span></div>
  </div>

  <!-- SUCCESS BANNER -->
  <?php if ($success): ?>
  <div class="success-card">
    <div class="s-ico"><i class="bi bi-check-circle-fill" style="color:var(--success-txt)"></i></div>
    <div class="s-title" id="s-title">تم إنشاء الحساب بنجاح!</div>
    <div class="s-sub" id="s-sub">تم إنشاء حساب أمين الضبط وإرسال بيانات الدخول إلى البريد الإلكتروني</div>
    <div class="s-cred">
      <div><strong id="s-emlbl">البريد الإلكتروني:</strong> <?= htmlspecialchars($createdEmail) ?></div>
      <div style="margin-top:4px"><strong id="s-pwlbl">كلمة المرور:</strong> <span style="font-family:monospace;letter-spacing:.5px"><?= htmlspecialchars($createdPassword) ?></span></div>
    </div>
    <a href="<?= BASE_URL ?>/admin/create_clerk.php" class="btn-ghost" style="margin-top:16px;display:inline-flex" id="s-newbtn">
      <i class="bi bi-plus-circle"></i> إنشاء حساب آخر
    </a>
  </div>
  <?php endif; ?>

  <!-- FORM CARD -->
  <div class="card">
    <div class="card-hd">
      <div class="card-hd-ico"><i class="bi bi-person-plus-fill"></i></div>
      <div>
        <div class="card-hd-title" id="form-title">بيانات الحساب الجديد</div>
        <div class="card-hd-sub" id="form-sub">جميع الحقول المُشار إليها بـ * إلزامية</div>
      </div>
    </div>
    <div class="card-body">

      <?php if ($error): ?>
      <div class="alert-box alert-err">
        <span class="alert-ico"><i class="bi bi-exclamation-triangle-fill"></i></span>
        <span><?= htmlspecialchars($error) ?></span>
      </div>
      <?php endif; ?>

      <form method="POST" id="mainForm" novalidate>

        <!-- SECTION 1: PERSONAL -->
        <div class="sect-hd" id="sect1"><i class="bi bi-person"></i> البيانات الشخصية</div>
        <div class="f-grid">
          <div class="f-group">
            <label class="f-label"><span id="lbl-fname">الاسم الكامل</span><span class="req">*</span></label>
            <div class="f-row">
              <span class="f-pre"><i class="bi bi-person"></i></span>
              <input type="text" name="full_name" class="f-inp" id="inp-fname"
                     value="<?= htmlspecialchars($_POST['full_name']??'') ?>"
                     placeholder="أحمد بن يوسف" required>
            </div>
          </div>
          <div class="f-group">
            <label class="f-label"><span id="lbl-phone">رقم الهاتف</span><span class="req">*</span></label>
            <div class="f-row">
              <span class="f-pre"><i class="bi bi-telephone"></i></span>
              <input type="tel" name="phone" class="f-inp" id="inp-phone"
                     value="<?= htmlspecialchars($_POST['phone']??'') ?>"
                     placeholder="0661234567" required>
            </div>
          </div>
          <div class="f-group">
            <label class="f-label"><span id="lbl-email">البريد الإلكتروني</span><span class="req">*</span></label>
            <div class="f-row">
              <span class="f-pre"><i class="bi bi-envelope"></i></span>
              <input type="email" name="email" class="f-inp" id="inp-email"
                     value="<?= htmlspecialchars($_POST['email']??'') ?>"
                     placeholder="clerk@court.dz" required>
            </div>
          </div>
          <div class="f-group">
            <label class="f-label"><span id="lbl-court">المحكمة</span><span class="req">*</span></label>
            <div class="f-row">
              <span class="f-pre"><i class="bi bi-bank"></i></span>
              <select name="court" class="f-inp sel" id="inp-court" required style="border-radius:0 9px 9px 0">
                <option value="" id="court-ph">اختر المحكمة</option>
                <?php
                $courts = ['محكمة الجزائر المدنية','محكمة الجزائر الجنائية','محكمة بابا حسن','محكمة الحراش','محكمة وهران','محكمة قسنطينة','محكمة عنابة','محكمة تيزي وزو','محكمة البليدة','محكمة سطيف'];
                foreach($courts as $c): ?>
                <option value="<?= $c ?>" <?= ($_POST['court']??'')===$c?'selected':'' ?>><?= $c ?></option>
                <?php endforeach; ?>
              </select>
            </div>
          </div>
        </div>

        <!-- SECTION 2: ACCOUNT -->
        <div class="sect-hd" id="sect2"><i class="bi bi-lock"></i> بيانات الحساب</div>
        <div class="f-grid">
          <div class="f-group">
            <label class="f-label"><span id="lbl-pw">كلمة المرور</span><span class="req">*</span></label>
            <div class="pw-wrap">
              <input type="password" name="password" class="f-inp-solo pw-inp" id="inp-pw"
                     placeholder="••••••••" required oninput="checkPw(this.value)">
              <button type="button" class="pw-tog" onclick="togglePw('inp-pw',this)">
                <i class="bi bi-eye" id="eye1"></i>
              </button>
            </div>
            <div class="pw-str">
              <div class="pw-bar" id="pb1"></div><div class="pw-bar" id="pb2"></div>
              <div class="pw-bar" id="pb3"></div><div class="pw-bar" id="pb4"></div>
            </div>
            <div class="f-hint" id="pw-hint">8 أحرف على الأقل، أرقام وأحرف كبيرة وصغيرة</div>
          </div>
          <div class="f-group">
            <label class="f-label"><span id="lbl-pw2">تأكيد كلمة المرور</span><span class="req">*</span></label>
            <div class="pw-wrap">
              <input type="password" name="password2" class="f-inp-solo pw-inp" id="inp-pw2"
                     placeholder="••••••••" required>
              <button type="button" class="pw-tog" onclick="togglePw('inp-pw2',this)">
                <i class="bi bi-eye" id="eye2"></i>
              </button>
            </div>
            <div class="f-hint" id="pw2-hint">أعد كتابة كلمة المرور للتأكيد</div>
          </div>
          <div class="f-group">
            <label class="f-label" id="lbl-gen">توليد تلقائي</label>
            <button type="button" class="btn-ghost" onclick="genPw()" id="gen-btn"
                    style="width:100%;justify-content:center;padding:9px">
              <i class="bi bi-shuffle"></i> <span id="gen-txt">توليد كلمة مرور آمنة</span>
            </button>
            <div class="f-hint" id="gen-hint">يولد كلمة مرور قوية ويملأ الحقلين تلقائياً</div>
          </div>
          <div class="f-group">
            <label class="f-label" id="lbl-status">الحالة الأولية</label>
            <select name="status" class="f-inp-solo sel" id="inp-status">
              <option value="active" id="s-act" <?= ($_POST['status']??'active')==='active'?'selected':'' ?>>نشط — يمكنه الدخول فوراً</option>
              <option value="inactive" id="s-ina" <?= ($_POST['status']??'')==='inactive'?'selected':'' ?>>معلق — بانتظار التفعيل</option>
            </select>
          </div>
        </div>

        <!-- SECTION 3: EXTRA -->
        <div class="sect-hd" id="sect3"><i class="bi bi-card-text"></i> معلومات إضافية</div>
        <div class="f-grid g1">
          <div class="f-group">
            <label class="f-label" id="lbl-notes">ملاحظات</label>
            <textarea name="notes" class="f-inp-solo" id="inp-notes" rows="3"
                      style="resize:vertical" id="inp-notes-ta"
                      placeholder="ملاحظات خاصة بهذا الحساب (اختياري)..."><?= htmlspecialchars($_POST['notes']??'') ?></textarea>
            <div class="f-hint" id="notes-hint">اختياري — تُحفظ في سجل التدقيق</div>
          </div>
        </div>

      </form>
    </div>
    <div class="form-footer">
      <div class="form-note"><i class="bi bi-lock-fill" style="color:var(--gold)"></i><span id="sec-note">تشفير bcrypt — جلسة آمنة</span></div>
      <div class="d-flex gap-2 flex-wrap">
        <a href="<?= BASE_URL ?>/admin/users.php" class="btn-ghost" id="btn-cancel">
          <i class="bi bi-x-lg"></i> <span id="cancel-txt">إلغاء</span>
        </a>
        <button type="submit" form="mainForm" class="btn-prim" id="btn-submit">
          <i class="bi bi-person-check-fill"></i> <span id="submit-txt">إنشاء الحساب</span>
        </button>
      </div>
    </div>
  </div>

</div><!-- /page -->

<script>
/* ══ LANGUAGE STRINGS ══ */
const L = {
  ar:{
    dir:'rtl',tbSub:'نظام إدارة القضايا',tbDash:'لوحة التحكم',tbUsers:'المستخدمون',
    bc1:'لوحة التحكم',bc2:'إدارة المستخدمين',bc3:'إنشاء حساب أمين ضبط',
    badge:'مدير النظام',title:'إنشاء حساب أمين ضبط جديد',
    sub:'يمكن للمدير فقط إنشاء حسابات أمناء الضبط — لا يملكون رابط تسجيل ذاتي',
    st1:'أمناء الضبط النشطين',st2:'حسابات هذا الشهر',st3:'معدل الأمان',
    info1:'أمناء الضبط لا يملكون رابط تسجيل — يجب على المدير إنشاء حساباتهم يدوياً',
    info2:'سيتم إرسال بيانات الدخول تلقائياً إلى البريد الإلكتروني المُدخل',
    info3:'يمكن للمدير تعطيل أو حذف أي حساب في أي وقت من لوحة التحكم',
    formTitle:'بيانات الحساب الجديد',formSub:'جميع الحقول المُشار إليها بـ * إلزامية',
    sect1:'البيانات الشخصية',sect2:'بيانات الحساب',sect3:'معلومات إضافية',
    fname:'الاسم الكامل',phone:'رقم الهاتف',email:'البريد الإلكتروني',court:'المحكمة',
    pw:'كلمة المرور',pw2:'تأكيد كلمة المرور',gen:'توليد تلقائي',genTxt:'توليد كلمة مرور آمنة',status:'الحالة الأولية',notes:'ملاحظات',
    pwHint:'8 أحرف على الأقل، أرقام وأحرف كبيرة وصغيرة',pw2Hint:'أعد كتابة كلمة المرور للتأكيد',
    genHint:'يولد كلمة مرور قوية ويملأ الحقلين تلقائياً',notesHint:'اختياري — تُحفظ في سجل التدقيق',
    sAct:'نشط — يمكنه الدخول فوراً',sIna:'معلق — بانتظار التفعيل',
    courtPh:'اختر المحكمة',cancel:'إلغاء',submit:'إنشاء الحساب',
    secNote:'تشفير bcrypt — جلسة آمنة',
    sTitle:'تم إنشاء الحساب بنجاح!',sSub:'تم إنشاء حساب أمين الضبط وإرسال بيانات الدخول إلى البريد الإلكتروني',
    sEmLbl:'البريد الإلكتروني:',sPwLbl:'كلمة المرور:',sNew:'إنشاء حساب آخر',
  },
  fr:{
    dir:'rtl',tbSub:'Gestion des affaires judiciaires',tbDash:'Tableau de bord',tbUsers:'Utilisateurs',
    bc1:'Tableau de bord',bc2:'Gestion des utilisateurs',bc3:'Créer un greffier',
    badge:'Administrateur',title:'Créer un compte greffier',
    sub:'Seul l\'administrateur peut créer des comptes greffiers — ils ne peuvent pas s\'inscrire eux-mêmes',
    st1:'Greffiers actifs',st2:'Comptes ce mois',st3:'Taux de sécurité',
    info1:'Les greffiers n\'ont pas de lien d\'inscription — l\'administrateur doit créer leurs comptes',
    info2:'Les identifiants seront envoyés automatiquement à l\'adresse e-mail saisie',
    info3:'L\'administrateur peut désactiver ou supprimer tout compte à tout moment',
    formTitle:'Informations du nouveau compte',formSub:'Tous les champs marqués * sont obligatoires',
    sect1:'Informations personnelles',sect2:'Informations du compte',sect3:'Informations complémentaires',
    fname:'Nom complet',phone:'Téléphone',email:'Adresse e-mail',court:'Tribunal',
    pw:'Mot de passe',pw2:'Confirmer le mot de passe',gen:'Générer',genTxt:'Générer un mot de passe sécurisé',status:'Statut initial',notes:'Notes',
    pwHint:'Min. 8 caractères, avec chiffres et majuscules',pw2Hint:'Retapez le mot de passe pour confirmer',
    genHint:'Génère automatiquement un mot de passe sécurisé',notesHint:'Optionnel — enregistré dans le journal d\'audit',
    sAct:'Actif — connexion immédiate',sIna:'Suspendu — en attente d\'activation',
    courtPh:'Choisir le tribunal',cancel:'Annuler',submit:'Créer le compte',
    secNote:'Chiffrement bcrypt — session sécurisée',
    sTitle:'Compte créé avec succès!',sSub:'Le compte greffier a été créé et les identifiants envoyés par e-mail',
    sEmLbl:'E-mail:',sPwLbl:'Mot de passe:',sNew:'Créer un autre compte',
  },
  en:{
    dir:'rtl',tbSub:'Case Management System',tbDash:'Dashboard',tbUsers:'Users',
    bc1:'Dashboard',bc2:'User Management',bc3:'Create Clerk Account',
    badge:'System Administrator',title:'Create New Clerk Account',
    sub:'Only the administrator can create clerk accounts — clerks cannot self-register',
    st1:'Active Clerks',st2:'Accounts This Month',st3:'Security Rate',
    info1:'Clerks do not have a registration link — the admin must create their accounts manually',
    info2:'Login credentials will be automatically sent to the entered email address',
    info3:'The admin can disable or delete any account at any time from the dashboard',
    formTitle:'New Account Details',formSub:'All fields marked with * are required',
    sect1:'Personal Information',sect2:'Account Credentials',sect3:'Additional Information',
    fname:'Full Name',phone:'Phone Number',email:'Email Address',court:'Court',
    pw:'Password',pw2:'Confirm Password',gen:'Generate',genTxt:'Generate secure password',status:'Initial Status',notes:'Notes',
    pwHint:'Min. 8 characters, with numbers and uppercase letters',pw2Hint:'Retype the password to confirm',
    genHint:'Automatically fills both password fields with a strong password',notesHint:'Optional — saved in audit log',
    sAct:'Active — can login immediately',sIna:'Suspended — pending activation',
    courtPh:'Select court',cancel:'Cancel',submit:'Create Account',
    secNote:'bcrypt encryption — secure session',
    sTitle:'Account Created Successfully!',sSub:'The clerk account has been created and credentials sent via email',
    sEmLbl:'Email:',sPwLbl:'Password:',sNew:'Create Another Account',
  }
};

let curLang='ar', isDark=false;

function setLang(l){
  curLang=l;
  const T=L[l];
  document.documentElement.setAttribute('lang', l==='ar'?'ar':l==='fr'?'fr':'en');
  const setText=(id,v)=>{const el=document.getElementById(id);if(el)el.textContent=v};
  setText('tb-sub',T.tbSub); setText('tb-dash',T.tbDash); setText('tb-users',T.tbUsers);
  setText('bc1',T.bc1); setText('bc2',T.bc2); setText('bc3',T.bc3);
  setText('ph-badge',''); document.getElementById('ph-badge').innerHTML='<i class="bi bi-shield-lock"></i> '+T.badge;
  setText('ph-title',T.title); setText('ph-sub',T.sub);
  setText('st1',T.st1); setText('st2',T.st2); setText('st3',T.st3);
  setText('info1',T.info1); setText('info2',T.info2); setText('info3',T.info3);
  setText('form-title',T.formTitle); setText('form-sub',T.formSub);
  document.getElementById('sect1').innerHTML='<i class="bi bi-person"></i> '+T.sect1;
  document.getElementById('sect2').innerHTML='<i class="bi bi-lock"></i> '+T.sect2;
  document.getElementById('sect3').innerHTML='<i class="bi bi-card-text"></i> '+T.sect3;
  setText('lbl-fname',T.fname); setText('lbl-phone',T.phone); setText('lbl-email',T.email); setText('lbl-court',T.court);
  setText('lbl-pw',T.pw); setText('lbl-pw2',T.pw2); setText('lbl-gen',T.gen); setText('gen-txt',T.genTxt);
  setText('lbl-status',T.status); setText('lbl-notes',T.notes);
  setText('pw-hint',T.pwHint); setText('pw2-hint',T.pw2Hint); setText('gen-hint',T.genHint); setText('notes-hint',T.notesHint);
  setText('s-act',T.sAct); setText('s-ina',T.sIna);
  setText('court-ph',T.courtPh); setText('cancel-txt',T.cancel); setText('submit-txt',T.submit);
  setText('sec-note',T.secNote);
  if(document.getElementById('s-title')) setText('s-title',T.sTitle);
  if(document.getElementById('s-sub')) setText('s-sub',T.sSub);
  if(document.getElementById('s-emlbl')) setText('s-emlbl',T.sEmLbl);
  if(document.getElementById('s-pwlbl')) setText('s-pwlbl',T.sPwLbl);
  if(document.getElementById('s-newbtn')) setText('s-newbtn',T.sNew);
  document.querySelectorAll('.lang-btn').forEach(b=>b.classList.remove('active'));
  document.querySelectorAll('.lang-btn')[['ar','fr','en'].indexOf(l)].classList.add('active');
}

function toggleDark(){
  isDark=!isDark;
  document.documentElement.setAttribute('data-theme', isDark?'dark':'');
  document.getElementById('darkIco').className = isDark?'bi bi-sun':'bi bi-moon';
}

function togglePw(id, btn){
  const inp=document.getElementById(id);
  const visible=inp.type==='password';
  inp.type=visible?'text':'password';
  btn.querySelector('i').className=visible?'bi bi-eye-slash':'bi bi-eye';
}

function checkPw(v){
  const bars=['pb1','pb2','pb3','pb4'].map(id=>document.getElementById(id));
  bars.forEach(b=>{b.className='pw-bar'});
  if(!v.length)return;
  let score=0;
  if(v.length>=8)score++;
  if(/[A-Z]/.test(v))score++;
  if(/[0-9]/.test(v))score++;
  if(/[^A-Za-z0-9]/.test(v))score++;
  const cls=score<=1?'w':score<=2?'m':'s';
  for(let i=0;i<score;i++)bars[i].classList.add(cls);
}

function genPw(){
  const pool='abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789@#$!';
  let pw='';
  for(let i=0;i<14;i++) pw+=pool[Math.floor(Math.random()*pool.length)];
  const p1=document.getElementById('inp-pw'), p2=document.getElementById('inp-pw2');
  p1.value=pw; p2.value=pw;
  p1.type='text'; p2.type='text';
  document.getElementById('eye1').className='bi bi-eye-slash';
  document.getElementById('eye2').className='bi bi-eye-slash';
  checkPw(pw);
}
</script>
</body>
</html>
