<?php
require_once __DIR__ . "/../includes/config.php";
session_start_secure();
require_role("admin");
$user  = current_user();
$lang  = $user["lang_pref"]  ?? "ar";
$theme = $user["theme_pref"] ?? "light";

// Fetch pending vet applications for PHP injection
$pendingVets = db()->query(
    "SELECT u.id, u.name, u.phone, u.wilaya, u.created_at,
            vp.license_no, vp.verification_status, vp.submitted_at,
            COUNT(vd.id) as doc_count
     FROM baitari_users u
     JOIN baitari_vet_profiles vp ON vp.vet_id = u.id
     LEFT JOIN baitari_vet_documents vd ON vd.vet_id = u.id
     WHERE u.role = 'vet' AND vp.verification_status IN ('docs_submitted','under_review','pending_docs')
     GROUP BY u.id
     ORDER BY vp.submitted_at DESC
     LIMIT 20"
)->fetchAll();

$pendingVetsJson = json_encode($pendingVets, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG);
?>
<!DOCTYPE html>
<html lang="<?php echo htmlspecialchars($lang); ?>" dir="rtl" data-theme="<?php echo htmlspecialchars($theme); ?>">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="theme-color" content="#1a7f5a">
<title>VetNet — لوحة الإدارة</title>
<link rel="stylesheet" href="../assets/css/baitari.css">
<style>
:root{
  --green-50:#f0faf5;--green-100:#d6f2e5;--green-200:#aae3cb;
  --green-400:#4aba8a;--green-500:#1a9f6a;--green-600:#1a7f5a;--green-700:#155f44;
  --green-800:#0e3f2e;
  --blue-50:#eff6ff;--blue-400:#60a5fa;--blue-500:#3b82f6;--blue-600:#2563eb;
  --red-50:#fff5f5;--red-400:#f87171;--red-500:#ef4444;--red-600:#dc2626;
  --amber-400:#fbbf24;--amber-500:#f59e0b;--amber-50:#fffbeb;
  --purple-500:#8b5cf6;--purple-50:#faf5ff;
  --bg:#f0f4f2;--bg-card:#fff;--bg-sidebar:#0e2d20;
  --bg-input:#f3f7f5;--border:#e0ece7;
  --text-primary:#0e2d20;--text-sec:#4a7060;--text-muted:#8aaa9a;
  --shadow-sm:0 1px 4px rgba(0,60,30,.06);--shadow-md:0 4px 20px rgba(0,60,30,.10);
  --shadow-lg:0 8px 40px rgba(0,60,30,.15);
  --radius-sm:10px;--radius-md:16px;--radius-lg:24px;
  --transition:.22s cubic-bezier(.4,0,.2,1);
  --sidebar-w:260px;
}
[data-theme="dark"]{
  --bg:#080f0a;--bg-card:#0f1e12;--bg-sidebar:#060e08;
  --bg-input:#142018;--border:#1a2e1e;
  --text-primary:#e0f2e9;--text-sec:#8abfa0;--text-muted:#3a5a44;
  --green-50:#0a1a0e;--blue-50:#090f18;--red-50:#1a0808;--amber-50:#1a1200;--purple-50:#110a1f;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Tajawal',sans-serif;background:var(--bg);color:var(--text-primary);min-height:100dvh;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}
img{max-width:100%;display:block;}

/* ── LAYOUT ── */
.admin-layout{display:flex;min-height:100dvh;}

/* ── SIDEBAR ── */
.admin-sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--bg-sidebar);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100dvh;overflow-y:auto;
  transition:var(--transition);
}
@media(max-width:900px){
  .admin-sidebar{
    position:fixed;inset-y:0;right:0;z-index:200;
    transform:translateX(100%);
    box-shadow:var(--shadow-lg);
  }
  .admin-sidebar.open{transform:translateX(0);}
  .admin-main{margin-right:0!important;}
}
.sb-logo{
  display:flex;align-items:center;gap:12px;
  padding:24px 20px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sb-logo-mark{
  width:40px;height:40px;
  background:linear-gradient(135deg,var(--green-500),var(--green-400));
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:20px;
}
.sb-logo-text{font-size:20px;font-weight:900;color:#fff;}
.sb-logo-badge{
  font-size:10px;color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.1);
  border-radius:20px;padding:2px 8px;margin-top:2px;
  font-weight:600;
}
.sb-nav{padding:16px 0;flex:1;}
.sb-section-label{
  font-size:10px;color:rgba(255,255,255,.35);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:8px 20px 4px;
}
.sb-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 20px;margin:2px 10px;
  border-radius:var(--radius-sm);
  cursor:pointer;transition:var(--transition);
  color:rgba(255,255,255,.6);font-size:14px;font-weight:600;
}
.sb-item:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.9);}
.sb-item.active{background:rgba(255,255,255,.12);color:#fff;}
.sb-item.active .sb-icon{
  background:var(--green-600);
}
.sb-icon{
  width:32px;height:32px;border-radius:8px;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;transition:var(--transition);
}
.sb-badge{
  margin-right:auto;
  background:var(--red-500);color:#fff;
  border-radius:20px;padding:2px 8px;
  font-size:11px;font-weight:800;
}
.sb-footer{
  padding:16px 20px;border-top:1px solid rgba(255,255,255,.08);
}
.sb-user{display:flex;align-items:center;gap:10px;}
.sb-avatar{
  width:36px;height:36px;border-radius:10px;
  background:var(--green-600);
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.sb-user-name{font-size:13px;font-weight:700;color:#fff;}
.sb-user-role{font-size:11px;color:rgba(255,255,255,.5);}

/* ── MAIN ── */
.admin-main{flex:1;overflow:auto;}

/* ── TOP BAR ── */
.admin-topbar{
  background:var(--bg-card);
  border-bottom:1px solid var(--border);
  padding:0 24px;
  height:64px;display:flex;align-items:center;gap:16px;
  position:sticky;top:0;z-index:100;
  box-shadow:var(--shadow-sm);
}
.topbar-title{font-size:18px;font-weight:800;flex:1;color:var(--text-primary);}
.topbar-actions{display:flex;gap:10px;}
.icon-btn{
  width:40px;height:40px;border-radius:12px;
  background:var(--bg-input);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--text-sec);cursor:pointer;
  transition:var(--transition);position:relative;
}
.icon-btn:hover{background:var(--green-100);color:var(--green-700);}
.notif-dot{
  position:absolute;top:6px;right:6px;
  width:8px;height:8px;background:var(--red-500);
  border-radius:50%;border:2px solid var(--bg-card);
}
.hamburger{display:none;}
@media(max-width:900px){.hamburger{display:flex;}}

/* ── CONTENT ── */
.admin-content{padding:24px;}
@media(max-width:600px){.admin-content{padding:16px;}}

/* ── STAT CARDS ── */
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  margin-bottom:24px;
}
@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:500px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:10px;}}

.stat-card{
  background:var(--bg-card);border-radius:var(--radius-lg);
  padding:20px;border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
  transition:var(--transition);
}
.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.sc-icon{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:14px;
}
.sc-num{font-size:32px;font-weight:900;color:var(--text-primary);line-height:1;}
.sc-label{font-size:13px;color:var(--text-sec);font-weight:600;margin-top:4px;}
.sc-trend{
  display:flex;align-items:center;gap:4px;
  font-size:12px;font-weight:700;margin-top:8px;
}
.sc-trend.up{color:#16a34a;}
.sc-trend.down{color:var(--red-500);}
/* Accent corner */
.stat-card::after{
  content:'';position:absolute;bottom:-20px;left:-20px;
  width:80px;height:80px;border-radius:50%;
  opacity:.06;
}
.stat-card.green::after{background:var(--green-500);}
.stat-card.blue::after{background:var(--blue-500);}
.stat-card.red::after{background:var(--red-500);}
.stat-card.amber::after{background:var(--amber-500);}

/* ── GRID 2 COLS ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;}
@media(max-width:900px){.grid-2{grid-template-columns:1fr;}}

/* ── TABLE CARD ── */
.table-card{
  background:var(--bg-card);border-radius:var(--radius-lg);
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.table-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--border);
}
.table-title{font-size:16px;font-weight:800;color:var(--text-primary);}
.table-action{
  font-size:13px;color:var(--green-600);font-weight:700;cursor:pointer;
}
.data-table{width:100%;border-collapse:collapse;}
.data-table th{
  padding:12px 16px;text-align:right;
  font-size:12px;color:var(--text-muted);font-weight:700;
  background:var(--bg-input);letter-spacing:.02em;
  border-bottom:1px solid var(--border);
}
[dir="ltr"] .data-table th{text-align:left;}
.data-table td{
  padding:14px 16px;
  font-size:14px;color:var(--text-primary);
  border-bottom:1px solid var(--border);
}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:var(--bg-input);}
.table-wrap{overflow-x:auto;}

/* Badges */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:20px;
  font-size:11px;font-weight:700;white-space:nowrap;
}
.badge-green{background:var(--green-50);color:var(--green-700);}
.badge-red{background:var(--red-50);color:var(--red-600);}
.badge-amber{background:var(--amber-50);color:#92400e;}
.badge-blue{background:var(--blue-50);color:var(--blue-600);}
.badge-purple{background:var(--purple-50);color:var(--purple-500);}

/* Action buttons in table */
.tbl-btn{
  padding:5px 12px;border-radius:8px;
  font-size:12px;font-weight:700;cursor:pointer;
  transition:var(--transition);
  display:inline-flex;align-items:center;gap:4px;
}
.tbl-btn-approve{background:var(--green-50);color:var(--green-700);border:1px solid var(--green-200);}
.tbl-btn-approve:hover{background:var(--green-100);}
.tbl-btn-reject{background:var(--red-50);color:var(--red-600);border:1px solid #fecaca;}
.tbl-btn-reject:hover{background:#fee2e2;}
.tbl-btn-view{background:var(--bg-input);color:var(--text-sec);border:1px solid var(--border);}
.tbl-btn-view:hover{background:var(--border);}
.tbl-btns{display:flex;gap:6px;flex-wrap:wrap;}

/* User avatar in table */
.user-cell{display:flex;align-items:center;gap:10px;}
.user-cell-avatar{
  width:34px;height:34px;border-radius:10px;
  background:var(--green-50);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;
}
.user-cell-name{font-size:14px;font-weight:700;}
.user-cell-sub{font-size:12px;color:var(--text-muted);}

/* ── CHARTS ── */
.chart-card{
  background:var(--bg-card);border-radius:var(--radius-lg);
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
  padding:20px;margin-bottom:24px;
}
.chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.chart-title{font-size:16px;font-weight:800;}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;}
.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-sec);font-weight:600;}
.legend-dot{width:10px;height:10px;border-radius:50%;}

/* Bar chart */
.bar-chart{display:flex;align-items:flex-end;gap:8px;height:140px;padding-top:10px;}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;}
.bar-fill{
  width:100%;border-radius:6px 6px 0 0;
  transition:height .6s cubic-bezier(.4,0,.2,1);
  min-height:4px;cursor:pointer;
}
.bar-fill:hover{opacity:.8;}
.bar-label{font-size:10px;color:var(--text-muted);font-weight:600;white-space:nowrap;}
.bar-value{font-size:11px;font-weight:800;color:var(--text-primary);}

/* Donut chart (CSS) */
.donut-wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.donut{
  width:120px;height:120px;flex-shrink:0;
  border-radius:50%;
  background:conic-gradient(
    var(--green-500) 0% 62%,
    var(--blue-500) 62% 82%,
    var(--amber-400) 82% 93%,
    var(--red-400) 93% 100%
  );
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.donut::after{
  content:'';position:absolute;inset:24px;
  background:var(--bg-card);border-radius:50%;
}
.donut-center{
  position:relative;z-index:1;text-align:center;
}
.donut-num{font-size:22px;font-weight:900;color:var(--text-primary);}
.donut-sub{font-size:10px;color:var(--text-muted);font-weight:600;}
.donut-legend{flex:1;min-width:140px;}
.dl-item{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border);}
.dl-item:last-child{border:none;}
.dl-left{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;}
.dl-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
.dl-pct{font-size:13px;font-weight:800;color:var(--text-primary);}

/* ── EMERGENCY LOG ── */
.emg-log-item{
  display:flex;gap:14px;align-items:flex-start;
  padding:14px;border-bottom:1px solid var(--border);
  cursor:pointer;transition:var(--transition);
}
.emg-log-item:last-child{border:none;}
.emg-log-item:hover{background:var(--bg-input);}
.emg-dot{
  width:10px;height:10px;border-radius:50%;
  flex-shrink:0;margin-top:5px;
}
.emg-content{flex:1;}
.emg-title{font-size:14px;font-weight:700;}
.emg-sub{font-size:12px;color:var(--text-sec);margin-top:2px;}
.emg-time{font-size:11px;color:var(--text-muted);}
.emg-status-badge{flex-shrink:0;}

/* ── SEARCH & FILTER ── */
.filter-row{
  display:flex;gap:10px;align-items:center;
  padding:12px 20px;border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.search-mini{
  display:flex;align-items:center;gap:8px;
  background:var(--bg-input);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);padding:8px 12px;flex:1;min-width:180px;
}
.search-mini input{
  background:none;border:none;outline:none;
  font-size:14px;color:var(--text-primary);
  font-family:'Tajawal',sans-serif;width:100%;
}
.search-mini input::placeholder{color:var(--text-muted);}
.filter-select{
  background:var(--bg-input);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);padding:8px 12px;
  font-size:13px;font-weight:600;color:var(--text-sec);
  font-family:'Tajawal',sans-serif;cursor:pointer;outline:none;
}

/* ── MOBILE OVERLAY ── */
.sidebar-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:199;display:none;
}
.sidebar-overlay.show{display:block;}

/* Toast */
#toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--bg-card);border-radius:var(--radius-md);
  padding:14px 20px;display:flex;align-items:center;gap:10px;
  box-shadow:var(--shadow-lg);border:1px solid var(--border);
  font-size:13px;font-weight:700;z-index:9999;
  opacity:0;pointer-events:none;transition:opacity .3s;
  width:90%;max-width:380px;
}
#toast.show{opacity:1;pointer-events:auto;}

/* Toggle switch */
.toggle{width:44px;height:24px;background:var(--border);border-radius:12px;position:relative;cursor:pointer;transition:var(--transition);}
.toggle.on{background:var(--green-500);}
.toggle::after{content:'';position:absolute;top:3px;right:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:var(--transition);box-shadow:0 1px 4px rgba(0,0,0,.2);}
[dir="ltr"] .toggle::after{right:auto;left:3px;}
.toggle.on::after{right:23px;}
[dir="ltr"] .toggle.on::after{right:auto;left:23px;}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;padding:16px;}
.page-btn{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;cursor:pointer;transition:var(--transition);background:var(--bg-input);color:var(--text-sec);border:1px solid var(--border);}
.page-btn.active{background:var(--green-600);color:#fff;border-color:var(--green-600);}
.page-btn:hover:not(.active){background:var(--green-50);color:var(--green-700);}
</style>
</head>
<body>

<div id="toast"><span id="ti">✅</span><span id="tm"></span></div>
<div class="sidebar-overlay" id="overlay" onclick="toggleSidebar()"></div>

<div class="admin-layout">

  <!-- ══ SIDEBAR ══ -->
  <aside class="admin-sidebar" id="sidebar">
    <div class="sb-logo">
      <div class="sb-logo-mark">🐾</div>
      <div>
        <div class="sb-logo-text">بيطري</div>
        <div class="sb-logo-badge">Admin Panel</div>
      </div>
    </div>

    <nav class="sb-nav">
      <div class="sb-section-label">الرئيسية</div>
      <div class="sb-item active" onclick="showSection('dashboard', this)">
        <div class="sb-icon">📊</div> لوحة التحكم
      </div>
      <div class="sb-item" onclick="showSection('emergencies', this)">
        <div class="sb-icon">🚨</div> الطوارئ
        <span class="sb-badge">3</span>
      </div>

      <div class="sb-section-label" style="margin-top:8px;">الإدارة</div>
      <div class="sb-item" onclick="showSection('vets', this)">
        <div class="sb-icon">👨‍⚕️</div> الأطباء البيطريون
        <span class="sb-badge" style="background:var(--amber-500);">5</span>
      </div>
      <div class="sb-item" onclick="showSection('users', this)">
        <div class="sb-icon">👥</div> المستخدمون
      </div>
      <div class="sb-item" onclick="showSection('appointments', this)">
        <div class="sb-icon">📅</div> المواعيد
      </div>

      <div class="sb-section-label" style="margin-top:8px;">النظام</div>
      <div class="sb-item" onclick="showSection('reports', this)">
        <div class="sb-icon">📋</div> التقارير
      </div>
      <div class="sb-item" onclick="showSection('settings', this)">
        <div class="sb-icon">⚙️</div> الإعدادات
      </div>
    </nav>

    <div class="sb-footer">
      <div class="sb-user">
        <div class="sb-avatar">🛡️</div>
        <div>
          <div class="sb-user-name">أمين بلقاسم</div>
          <div class="sb-user-role">مسؤول النظام</div>
        </div>
        <button style="margin-right:auto;color:rgba(255,255,255,.5);font-size:16px;cursor:pointer;" onclick="toggleTheme()">🌙</button>
      </div>
    </div>
  </aside>

  <!-- ══ MAIN ══ -->
  <main class="admin-main">

    <!-- TOP BAR -->
    <div class="admin-topbar">
      <button class="icon-btn hamburger" onclick="toggleSidebar()">☰</button>
      <div class="topbar-title" id="topbar-title">لوحة التحكم</div>
      <div class="topbar-actions">
        <div class="icon-btn">
          🔔
          <span class="notif-dot"></span>
        </div>
        <div class="icon-btn" title="تسجيل الخروج" onclick="window.location.href='../login.php'">🚪</div>
      </div>
    </div>

    <!-- ══ SECTION: DASHBOARD ══ -->
    <div id="sec-dashboard" class="admin-content">

      <!-- Stats -->
      <div class="stats-grid">
        <div class="stat-card green" onclick="showSection('users',null)">
          <div class="sc-icon" style="background:var(--green-50);">👥</div>
          <div class="sc-num">1,248</div>
          <div class="sc-label">إجمالي المستخدمين</div>
          <div class="sc-trend up">↑ +12% هذا الشهر</div>
        </div>
        <div class="stat-card blue" onclick="showSection('vets',null)">
          <div class="sc-icon" style="background:var(--blue-50);">👨‍⚕️</div>
          <div class="sc-num">87</div>
          <div class="sc-label">أطباء بيطريون</div>
          <div class="sc-trend up">↑ +5 جديد</div>
        </div>
        <div class="stat-card amber" onclick="showSection('appointments',null)">
          <div class="sc-icon" style="background:var(--amber-50);">📅</div>
          <div class="sc-num">342</div>
          <div class="sc-label">مواعيد هذا الشهر</div>
          <div class="sc-trend up">↑ +18%</div>
        </div>
        <div class="stat-card red" onclick="showSection('emergencies',null)">
          <div class="sc-icon" style="background:var(--red-50);">🚨</div>
          <div class="sc-num">3</div>
          <div class="sc-label">طلبات طوارئ نشطة</div>
          <div class="sc-trend down">↑ يحتاج تدخل</div>
        </div>
      </div>

      <!-- Charts row -->
      <div class="grid-2">
        <!-- Bar chart -->
        <div class="chart-card">
          <div class="chart-header">
            <div class="chart-title">المواعيد اليومية</div>
            <div class="chart-legend">
              <div class="legend-item"><div class="legend-dot" style="background:var(--green-500);"></div>مواعيد</div>
              <div class="legend-item"><div class="legend-dot" style="background:var(--blue-400);"></div>طوارئ</div>
            </div>
          </div>
          <div class="bar-chart" id="bar-chart"></div>
        </div>

        <!-- Donut chart -->
        <div class="chart-card">
          <div class="chart-header">
            <div class="chart-title">توزيع المستخدمين</div>
          </div>
          <div class="donut-wrap">
            <div class="donut">
              <div class="donut-center">
                <div class="donut-num">1,248</div>
                <div class="donut-sub">مستخدم</div>
              </div>
            </div>
            <div class="donut-legend">
              <div class="dl-item"><div class="dl-left"><div class="dl-dot" style="background:var(--green-500);"></div>أصحاب حيوانات</div><div class="dl-pct">62%</div></div>
              <div class="dl-item"><div class="dl-left"><div class="dl-dot" style="background:var(--blue-500);"></div>مربيون</div><div class="dl-pct">20%</div></div>
              <div class="dl-item"><div class="dl-left"><div class="dl-dot" style="background:var(--amber-400);"></div>أطباء</div><div class="dl-pct">11%</div></div>
              <div class="dl-item"><div class="dl-left"><div class="dl-dot" style="background:#f87171;"></div>غير مكتمل</div><div class="dl-pct">7%</div></div>
            </div>
          </div>
        </div>
      </div>

      <!-- Recent Vet Applications -->
      <div class="table-card" style="margin-bottom:24px;">
        <div class="table-header">
          <div class="table-title">طلبات اعتماد أطباء (جديدة)</div>
          <div class="table-action" onclick="showSection('vets',null)">عرض الكل</div>
        </div>
        <div class="table-wrap">
          <table class="data-table" id="pending-vets-table"></table>
        </div>
      </div>

      <!-- Recent Emergencies -->
      <div class="table-card">
        <div class="table-header">
          <div class="table-title">آخر طلبات الطوارئ</div>
          <div class="table-action" onclick="showSection('emergencies',null)">عرض الكل</div>
        </div>
        <div id="emg-log"></div>
      </div>

    </div><!-- /sec-dashboard -->

    <!-- ══ SECTION: VETS ══ -->
    <div id="sec-vets" class="admin-content" style="display:none;">
      <div class="table-card">
        <div class="table-header">
          <div class="table-title">الأطباء البيطريون</div>
          <div class="table-action">+ إضافة طبيب</div>
        </div>
        <div class="filter-row">
          <div class="search-mini">
            <span>🔍</span>
            <input placeholder="ابحث بالاسم أو الولاية..." oninput="filterVets(this.value)">
          </div>
          <select class="filter-select" onchange="filterVetStatus(this.value)">
            <option value="">كل الحالات</option>
            <option value="verified">معتمد</option>
            <option value="pending">بانتظار الاعتماد</option>
            <option value="suspended">موقوف</option>
          </select>
        </div>
        <div class="table-wrap">
          <table class="data-table" id="vets-table"></table>
        </div>
        <div class="pagination" id="vets-pagination"></div>
      </div>
    </div>

    <!-- ══ SECTION: USERS ══ -->
    <div id="sec-users" class="admin-content" style="display:none;">
      <div class="table-card">
        <div class="table-header">
          <div class="table-title">المستخدمون</div>
          <span style="font-size:13px;color:var(--text-muted);">1,248 مستخدم</span>
        </div>
        <div class="filter-row">
          <div class="search-mini">
            <span>🔍</span>
            <input placeholder="ابحث بالاسم أو الهاتف...">
          </div>
          <select class="filter-select">
            <option>كل الأنواع</option>
            <option>أصحاب حيوانات</option>
            <option>مربيون</option>
          </select>
        </div>
        <div class="table-wrap">
          <table class="data-table" id="users-table"></table>
        </div>
        <div class="pagination">
          <div class="page-btn active">1</div>
          <div class="page-btn">2</div>
          <div class="page-btn">3</div>
          <div class="page-btn">→</div>
        </div>
      </div>
    </div>

    <!-- ══ SECTION: EMERGENCIES ══ -->
    <div id="sec-emergencies" class="admin-content" style="display:none;">
      <div class="table-card">
        <div class="table-header">
          <div class="table-title">🚨 طلبات الطوارئ</div>
          <div class="badge badge-red">3 نشطة</div>
        </div>
        <div id="emg-full-log"></div>
      </div>
    </div>

    <!-- ══ SECTION: APPOINTMENTS ══ -->
    <div id="sec-appointments" class="admin-content" style="display:none;">
      <div class="table-card">
        <div class="table-header">
          <div class="table-title">المواعيد</div>
        </div>
        <div class="filter-row">
          <div class="search-mini">
            <span>🔍</span><input placeholder="بحث...">
          </div>
          <select class="filter-select">
            <option>كل الحالات</option>
            <option>مؤكد</option>
            <option>بانتظار</option>
            <option>مكتمل</option>
            <option>ملغى</option>
          </select>
        </div>
        <div class="table-wrap">
          <table class="data-table" id="appts-table"></table>
        </div>
      </div>
    </div>

    <!-- ══ SECTION: SETTINGS ══ -->
    <div id="sec-settings" class="admin-content" style="display:none;">
      <div class="table-card" style="max-width:600px;">
        <div class="table-header"><div class="table-title">⚙️ إعدادات النظام</div></div>
        <div style="padding:20px;display:flex;flex-direction:column;gap:16px;">
          <div style="display:flex;align-items:center;justify-content:space-between;padding:14px;background:var(--bg-input);border-radius:var(--radius-sm);">
            <div>
              <div style="font-weight:700;">الوضع الليلي</div>
              <div style="font-size:12px;color:var(--text-muted);">تبديل المظهر</div>
            </div>
            <div class="toggle" id="theme-toggle" onclick="toggleTheme();this.classList.toggle('on')"></div>
          </div>
          <div style="display:flex;align-items:center;justify-content:space-between;padding:14px;background:var(--bg-input);border-radius:var(--radius-sm);">
            <div>
              <div style="font-weight:700;">إشعارات الطوارئ</div>
              <div style="font-size:12px;color:var(--text-muted);">إشعارات فورية عند وصول طلب طوارئ</div>
            </div>
            <div class="toggle on" onclick="this.classList.toggle('on')"></div>
          </div>
          <div style="display:flex;align-items:center;justify-content:space-between;padding:14px;background:var(--bg-input);border-radius:var(--radius-sm);">
            <div>
              <div style="font-weight:700;">التسجيل المفتوح</div>
              <div style="font-size:12px;color:var(--text-muted);">السماح بتسجيل مستخدمين جدد</div>
            </div>
            <div class="toggle on" onclick="this.classList.toggle('on')"></div>
          </div>
          <div style="display:flex;align-items:center;justify-content:space-between;padding:14px;background:var(--bg-input);border-radius:var(--radius-sm);">
            <div>
              <div style="font-weight:700;">وضع الصيانة</div>
              <div style="font-size:12px;color:var(--text-muted);">إيقاف المنصة مؤقتاً للصيانة</div>
            </div>
            <div class="toggle" onclick="this.classList.toggle('on');showToast('info','تم تغيير وضع الصيانة')"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- ══ SECTION: REPORTS ══ -->
    <div id="sec-reports" class="admin-content" style="display:none;">
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
        <div class="chart-card" style="cursor:pointer;" onclick="showToast('info','جارٍ تنزيل التقرير...')">
          <div style="font-size:32px;margin-bottom:10px;">📊</div>
          <div style="font-size:16px;font-weight:800;margin-bottom:6px;">تقرير المواعيد الشهري</div>
          <div style="font-size:13px;color:var(--text-sec);">تصدير Excel بتفاصيل كاملة</div>
          <div style="margin-top:14px;background:var(--green-600);color:#fff;border-radius:8px;padding:8px 16px;display:inline-block;font-size:13px;font-weight:700;">📥 تنزيل</div>
        </div>
        <div class="chart-card" style="cursor:pointer;" onclick="showToast('info','جارٍ تنزيل التقرير...')">
          <div style="font-size:32px;margin-bottom:10px;">👥</div>
          <div style="font-size:16px;font-weight:800;margin-bottom:6px;">تقرير المستخدمين</div>
          <div style="font-size:13px;color:var(--text-sec);">إحصائيات التسجيل والنشاط</div>
          <div style="margin-top:14px;background:var(--blue-600);color:#fff;border-radius:8px;padding:8px 16px;display:inline-block;font-size:13px;font-weight:700;">📥 تنزيل</div>
        </div>
        <div class="chart-card" style="cursor:pointer;" onclick="showToast('info','جارٍ تنزيل التقرير...')">
          <div style="font-size:32px;margin-bottom:10px;">🚨</div>
          <div style="font-size:16px;font-weight:800;margin-bottom:6px;">تقرير حالات الطوارئ</div>
          <div style="font-size:13px;color:var(--text-sec);">تفاصيل جميع طلبات الطوارئ</div>
          <div style="margin-top:14px;background:var(--red-600);color:#fff;border-radius:8px;padding:8px 16px;display:inline-block;font-size:13px;font-weight:700;">📥 تنزيل</div>
        </div>
        <div class="chart-card" style="cursor:pointer;" onclick="showToast('info','جارٍ تنزيل التقرير...')">
          <div style="font-size:32px;margin-bottom:10px;">💰</div>
          <div style="font-size:16px;font-weight:800;margin-bottom:6px;">التقرير المالي</div>
          <div style="font-size:13px;color:var(--text-sec);">الإيرادات والمعاملات</div>
          <div style="margin-top:14px;background:var(--amber-500);color:#fff;border-radius:8px;padding:8px 16px;display:inline-block;font-size:13px;font-weight:700;">📥 تنزيل</div>
        </div>
      </div>
    </div>

  </main>
</div>

<script>
// ── THEME ──
let theme = localStorage.getItem('baitari_theme') || 'light';
document.documentElement.setAttribute('data-theme', theme);
function toggleTheme() {
  theme = theme === 'light' ? 'dark' : 'light';
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem('baitari_theme', theme);
}

// ── SIDEBAR MOBILE ──
function toggleSidebar() {
  document.getElementById('sidebar').classList.toggle('open');
  document.getElementById('overlay').classList.toggle('show');
}

// ── SECTION ROUTER ──
const sectionTitles = {
  dashboard:'لوحة التحكم', vets:'الأطباء البيطريون',
  users:'المستخدمون', appointments:'المواعيد',
  emergencies:'طلبات الطوارئ', reports:'التقارير', settings:'الإعدادات'
};

function showSection(name, el) {
  document.querySelectorAll('[id^="sec-"]').forEach(s => s.style.display = 'none');
  const sec = document.getElementById(`sec-${name}`);
  if (sec) sec.style.display = '';
  document.querySelectorAll('.sb-item').forEach(i => i.classList.remove('active'));
  if (el) el.classList.add('active');
  document.getElementById('topbar-title').textContent = sectionTitles[name] || name;
  // Mobile: close sidebar
  document.getElementById('sidebar').classList.remove('open');
  document.getElementById('overlay').classList.remove('show');
}

// ── MOCK DATA ──
const MOCK_PENDING_VETS = [
  { id:1, name:'د. سهام بوخلوف', wilaya:'وهران', phone:'0556001122', license:'VET-2024-0011', date:'2024-06-01', emoji:'👩‍⚕️' },
  { id:2, name:'د. رضا بن سالم',  wilaya:'قسنطينة', phone:'0661223344', license:'VET-2024-0012', date:'2024-06-02', emoji:'👨‍⚕️' },
  { id:3, name:'د. نورة حمدي',    wilaya:'عنابة', phone:'0770334455', license:'VET-2024-0013', date:'2024-06-03', emoji:'👩‍⚕️' },
];
const MOCK_ALL_VETS = [
  ...MOCK_PENDING_VETS,
  { id:4, name:'د. كريم حداد',   wilaya:'الجزائر', phone:'0550554455', license:'VET-2023-0001', status:'verified', emoji:'👨‍⚕️', rating:4.9, appts:128 },
  { id:5, name:'د. أمينة زروق',  wilaya:'الجزائر', phone:'0661002233', license:'VET-2023-0002', status:'verified', emoji:'👩‍⚕️', rating:4.7, appts:89 },
];
const MOCK_USERS = [
  { id:1, name:'سارة بن علي', phone:'0661112233', role:'pet_owner', wilaya:'الجزائر', pets:2, joined:'2024-03-15', active:true, emoji:'👩' },
  { id:2, name:'محمد فرحات',  phone:'0770003344', role:'farm_owner', wilaya:'البليدة', pets:0, joined:'2024-02-10', active:true, emoji:'👨' },
  { id:3, name:'ليلى رحال',   phone:'0555778899', role:'pet_owner', wilaya:'وهران', pets:1, joined:'2024-05-20', active:false, emoji:'👩' },
  { id:4, name:'خالد مراد',   phone:'0660998877', role:'pet_owner', wilaya:'الجزائر', pets:3, joined:'2024-04-01', active:true, emoji:'👨' },
];
const MOCK_EMERGENCIES = [
  { id:1, user:'سارة بن علي', animal:'قط', problem:'توقف عن الأكل منذ يومين', loc:'الجزائر العاصمة', time:'منذ 5 دق', status:'assigned', vet:'د. كريم حداد', emoji:'🐱' },
  { id:2, user:'محمد فرحات', animal:'بقرة', problem:'ولادة عسيرة — طوارئ', loc:'البليدة', time:'منذ 12 دق', status:'pending', vet:null, emoji:'🐄' },
  { id:3, user:'خالد مراد', animal:'كلب', problem:'كسر في الرجل الأمامية', loc:'حيدرة', time:'منذ 20 دق', status:'assigned', vet:'د. نور الدين عيساوي', emoji:'🐕' },
  { id:4, user:'فاطمة حمدي', animal:'خروف', problem:'حمى مرتفعة', loc:'تيبازة', time:'منذ ساعة', status:'resolved', vet:'د. سليم بوعلام', emoji:'🐑' },
];
const MOCK_APPTS = [
  { id:1, client:'سارة بن علي', vet:'د. كريم حداد', pet:'لولو (قط)', date:'2024-06-15 10:00', type:'clinic', status:'confirmed', fee:'2,000 دج' },
  { id:2, client:'محمد فرحات',  vet:'د. أمينة زروق', pet:'قطيع الأبقار', date:'2024-06-16 09:00', type:'home', status:'pending', fee:'3,500 دج' },
  { id:3, client:'خالد مراد',   vet:'د. كريم حداد', pet:'ريكس (كلب)', date:'2024-06-17 14:00', type:'clinic', status:'completed', fee:'2,500 دج' },
  { id:4, client:'ليلى رحال',   vet:'د. نور الدين', pet:'بيبي (قط)', date:'2024-06-18 11:00', type:'emergency', status:'cancelled', fee:'0 دج' },
];

// ── RENDER FUNCTIONS ──
function renderAll() {
  renderBarChart();
  renderPendingVets();
  renderEmgLog('emg-log', MOCK_EMERGENCIES.slice(0,3));
  renderVetsTable();
  renderUsersTable();
  renderEmgLog('emg-full-log', MOCK_EMERGENCIES);
  renderApptsTable();
}

function renderBarChart() {
  const days = ['السبت','الأحد','الإث','الثلا','الأرب','الخمس','الجمعة'];
  const appts = [12,8,15,20,18,22,6];
  const emgs  = [1,0,2,1,3,1,0];
  const max = Math.max(...appts);
  const c = document.getElementById('bar-chart');
  days.forEach((d,i) => {
    const col = document.createElement('div');
    col.className = 'bar-col';
    col.innerHTML = `
      <div class="bar-value">${appts[i]}</div>
      <div class="bar-fill" style="height:${(appts[i]/max)*100}%;background:var(--green-500);"></div>
      <div class="bar-fill" style="height:${(emgs[i]/max)*40}%;background:var(--blue-400);margin-top:2px;border-radius:4px;"></div>
      <div class="bar-label">${d}</div>`;
    c.appendChild(col);
  });
}

function renderPendingVets() {
  const t = document.getElementById('pending-vets-table');
  t.innerHTML = `<thead><tr>
    <th>الطبيب</th><th>الولاية</th><th>رقم الترخيص</th><th>تاريخ الطلب</th><th>الإجراء</th>
  </tr></thead>`;
  const body = document.createElement('tbody');
  MOCK_PENDING_VETS.forEach(v => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td><div class="user-cell"><div class="user-cell-avatar">${v.emoji}</div><div><div class="user-cell-name">${v.name}</div><div class="user-cell-sub">${v.phone}</div></div></div></td>
      <td>${v.wilaya}</td>
      <td><code style="font-size:12px;background:var(--bg-input);padding:2px 8px;border-radius:6px;">${v.license}</code></td>
      <td>${v.date}</td>
      <td><div class="tbl-btns">
        <button class="tbl-btn tbl-btn-approve" onclick="approveVet(${v.id})">✅ اعتماد</button>
        <button class="tbl-btn tbl-btn-reject" onclick="rejectVet(${v.id})">✕ رفض</button>
        <button class="tbl-btn tbl-btn-view">👁 عرض</button>
      </div></td>`;
    body.appendChild(tr);
  });
  t.appendChild(body);
}

function renderVetsTable() {
  const t = document.getElementById('vets-table');
  t.innerHTML = `<thead><tr>
    <th>الطبيب</th><th>الولاية</th><th>الحالة</th><th>التقييم</th><th>المواعيد</th><th>الإجراء</th>
  </tr></thead>`;
  const body = document.createElement('tbody');
  MOCK_ALL_VETS.forEach(v => {
    const statusBadge = v.status === 'verified'
      ? '<span class="badge badge-green">✅ معتمد</span>'
      : '<span class="badge badge-amber">⏳ انتظار</span>';
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td><div class="user-cell"><div class="user-cell-avatar">${v.emoji}</div><div><div class="user-cell-name">${v.name}</div><div class="user-cell-sub">${v.phone}</div></div></div></td>
      <td>${v.wilaya}</td>
      <td>${statusBadge}</td>
      <td>${v.rating ? `⭐ ${v.rating}` : '—'}</td>
      <td>${v.appts ?? '—'}</td>
      <td><div class="tbl-btns">
        ${!v.status ? `<button class="tbl-btn tbl-btn-approve" onclick="approveVet(${v.id})">✅ اعتماد</button>` : ''}
        <button class="tbl-btn tbl-btn-reject" onclick="suspendVet(${v.id})">⛔ إيقاف</button>
        <button class="tbl-btn tbl-btn-view">👁</button>
      </div></td>`;
    body.appendChild(tr);
  });
  t.appendChild(body);

  // Pagination
  const pg = document.getElementById('vets-pagination');
  pg.innerHTML = `<div class="page-btn active">1</div><div class="page-btn">2</div><div class="page-btn">→</div>`;
}

function renderUsersTable() {
  const t = document.getElementById('users-table');
  t.innerHTML = `<thead><tr>
    <th>المستخدم</th><th>النوع</th><th>الولاية</th><th>الحيوانات</th><th>الحالة</th><th>الإجراء</th>
  </tr></thead>`;
  const body = document.createElement('tbody');
  const roleLabel = { pet_owner:'صاحب حيوان', farm_owner:'مربي' };
  MOCK_USERS.forEach(u => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td><div class="user-cell"><div class="user-cell-avatar">${u.emoji}</div><div><div class="user-cell-name">${u.name}</div><div class="user-cell-sub">${u.phone}</div></div></div></td>
      <td><span class="badge badge-blue">${roleLabel[u.role] || u.role}</span></td>
      <td>${u.wilaya}</td>
      <td>${u.pets || '—'}</td>
      <td>${u.active ? '<span class="badge badge-green">نشط</span>' : '<span class="badge badge-amber">غير نشط</span>'}</td>
      <td><div class="tbl-btns">
        <button class="tbl-btn tbl-btn-view">👁</button>
        <button class="tbl-btn tbl-btn-reject" onclick="showToast('info','تم إيقاف الحساب')">⛔</button>
      </div></td>`;
    body.appendChild(tr);
  });
  t.appendChild(body);
}

function renderEmgLog(containerId, data) {
  const c = document.getElementById(containerId);
  if (!c) return;
  c.innerHTML = '';
  const statusMap = {
    pending:  { cls:'badge-red',   label:'⏳ انتظار',  dot:'#ef4444' },
    assigned: { cls:'badge-amber', label:'🚗 في الطريق', dot:'#f59e0b' },
    resolved: { cls:'badge-green', label:'✅ تم الحل',   dot:'#22c55e' },
  };
  data.forEach(e => {
    const s = statusMap[e.status];
    const el = document.createElement('div');
    el.className = 'emg-log-item';
    el.innerHTML = `
      <div class="emg-dot" style="background:${s.dot};margin-top:6px;"></div>
      <div class="emg-content">
        <div class="emg-title">${e.emoji} ${e.user} — ${e.animal}</div>
        <div class="emg-sub">⚠️ ${e.problem}</div>
        <div class="emg-sub">📍 ${e.loc} ${e.vet ? '• 🩺 '+e.vet : ''}</div>
        <div class="emg-time">${e.time}</div>
      </div>
      <div class="emg-status-badge"><span class="badge ${s.cls}">${s.label}</span></div>`;
    c.appendChild(el);
  });
}

function renderApptsTable() {
  const t = document.getElementById('appts-table');
  t.innerHTML = `<thead><tr>
    <th>العميل</th><th>الطبيب</th><th>الحيوان</th><th>التاريخ</th><th>النوع</th><th>الحالة</th><th>الرسوم</th>
  </tr></thead>`;
  const body = document.createElement('tbody');
  const typeBadge = { clinic:'🏥 عيادة', home:'🏠 منزلي', emergency:'🚨 طوارئ', teleconsult:'💻 أونلاين' };
  const stMap = { confirmed:'badge-green', pending:'badge-amber', completed:'badge-blue', cancelled:'badge-red' };
  const stLabel = { confirmed:'مؤكد', pending:'انتظار', completed:'مكتمل', cancelled:'ملغى' };
  MOCK_APPTS.forEach(a => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td><b>${a.client}</b></td>
      <td>${a.vet}</td>
      <td>${a.pet}</td>
      <td style="font-size:12px;">${a.date}</td>
      <td>${typeBadge[a.type] || a.type}</td>
      <td><span class="badge ${stMap[a.status]}">${stLabel[a.status]}</span></td>
      <td style="font-weight:800;color:var(--green-700);">${a.fee}</td>`;
    body.appendChild(tr);
  });
  t.appendChild(body);
}

// ── ACTIONS ──
function approveVet(id) {
  showToast('success', `تم اعتماد الطبيب رقم ${id} ✅`);
}
function rejectVet(id) {
  showToast('error', `تم رفض طلب الطبيب رقم ${id}`);
}
function suspendVet(id) {
  showToast('info', `تم إيقاف حساب الطبيب رقم ${id} مؤقتاً`);
}

function filterVets(q) {
  // In production: AJAX call
  showToast('info', `بحث: "${q}"`);
}
function filterVetStatus(s) {
  if (s) showToast('info', `فلتر: ${s}`);
}

// ── TOAST ──
function showToast(type, msg) {
  const icons = { success:'✅', error:'❌', info:'ℹ️' };
  document.getElementById('ti').textContent = icons[type];
  document.getElementById('tm').textContent = msg;
  const t = document.getElementById('toast');
  t.classList.add('show');
  setTimeout(() => t.classList.remove('show'), 3500);
}


// ── REAL VET DATA FROM PHP ──
const PHP_PENDING_VETS = <?php echo $pendingVetsJson ?? '[]'; ?>;

// Override mock with real data on dashboard
if (PHP_PENDING_VETS.length > 0) {
  // Re-render pending vets table with real data
  setTimeout(() => {
    const t = document.getElementById('pending-vets-table');
    if (!t) return;
    t.innerHTML = `<thead><tr>
      <th>الطبيب</th><th>الولاية</th><th>الوثائق</th><th>الحالة</th><th>تاريخ الإرسال</th><th>الإجراء</th>
    </tr></thead>`;
    const body = document.createElement('tbody');
    const statusLabel = {
      pending_docs: '<span class="badge badge-amber">⏳ لم يُرسل وثائق</span>',
      docs_submitted: '<span class="badge badge-blue">📎 وثائق مُرسلة</span>',
      under_review: '<span class="badge badge-purple" style="background:var(--purple-50);color:var(--purple-500);">🔍 قيد المراجعة</span>',
    };
    PHP_PENDING_VETS.forEach(v => {
      const tr = document.createElement('tr');
      const submittedDate = v.submitted_at ? v.submitted_at.split(' ')[0] : '—';
      tr.innerHTML = `
        <td><div class="user-cell"><div class="user-cell-avatar">👨‍⚕️</div><div>
          <div class="user-cell-name">${escHtml(v.name)}</div>
          <div class="user-cell-sub">${escHtml(v.phone)}</div>
        </div></div></td>
        <td>${escHtml(v.wilaya||'—')}</td>
        <td><span class="badge badge-green">${v.doc_count} وثائق</span></td>
        <td>${statusLabel[v.verification_status] || v.verification_status}</td>
        <td style="font-size:12px;">${submittedDate}</td>
        <td><div class="tbl-btns">
          <button class="tbl-btn tbl-btn-view" onclick="openVetReview(${v.id},'${escHtml(v.name)}')">👁 مراجعة</button>
          ${v.verification_status !== 'pending_docs' ? `
          <button class="tbl-btn tbl-btn-approve" onclick="quickApprove(${v.id})">✅ اعتماد</button>
          <button class="tbl-btn tbl-btn-reject" onclick="openRejectModal(${v.id})">✕ رفض</button>` : ''}
        </div></td>`;
      body.appendChild(tr);
    });
    t.appendChild(body);
    document.querySelector('.sb-badge')?.textContent && (document.querySelector('.sb-badge').textContent = PHP_PENDING_VETS.length);
  }, 100);
}

// ── VET REVIEW MODAL ──
function openVetReview(vetId, vetName) {
  // Create and open a review modal
  const existing = document.getElementById('vet-review-modal');
  if (existing) existing.remove();

  const modal = document.createElement('div');
  modal.id = 'vet-review-modal';
  modal.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px);';
  modal.innerHTML = `
    <div style="background:var(--bg-card);border-radius:24px;width:100%;max-width:580px;max-height:90dvh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);">
      <div style="background:linear-gradient(135deg,var(--green-700),var(--green-500));padding:20px 24px;border-radius:24px 24px 0 0;display:flex;align-items:center;gap:12px;">
        <span style="font-size:28px;">👨‍⚕️</span>
        <div style="flex:1;">
          <div style="font-size:18px;font-weight:800;color:#fff;">${escHtml(vetName)}</div>
          <div style="font-size:13px;color:rgba(255,255,255,.8);">مراجعة الوثائق</div>
        </div>
        <button onclick="document.getElementById('vet-review-modal').remove()"
          style="width:34px;height:34px;background:rgba(255,255,255,.2);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;cursor:pointer;border:none;">✕</button>
      </div>
      <div id="vet-review-body" style="padding:20px;">
        <div style="text-align:center;padding:32px;color:var(--text-muted);">
          <div style="font-size:32px;margin-bottom:8px;">⏳</div>
          جارٍ التحميل...
        </div>
      </div>
    </div>`;
  document.body.appendChild(modal);
  modal.addEventListener('click', e => { if (e.target === modal) modal.remove(); });

  // Load vet details
  fetch(`../api/admin_vets.php?action=get_vet_details&vet_id=${vetId}`)
    .then(r => r.json())
    .then(data => {
      if (!data.vet) { document.getElementById('vet-review-body').innerHTML = '<p style="color:red;padding:20px;">خطأ في التحميل</p>'; return; }
      const v = data.vet;
      const docs = data.documents;

      const docTypes = { national_id:'🪪 بطاقة التعريف', diploma:'🎓 شهادة الدكتوراه', license:'📋 ترخيص المهنة', professional_card:'🩺 البطاقة المهنية', other:'📄 أخرى' };

      document.getElementById('vet-review-body').innerHTML = `
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;">
          <div style="background:var(--bg-input);border-radius:10px;padding:12px;">
            <div style="font-size:11px;color:var(--text-muted);font-weight:700;margin-bottom:4px;">الهاتف</div>
            <div style="font-weight:800;">${escHtml(v.phone)}</div>
          </div>
          <div style="background:var(--bg-input);border-radius:10px;padding:12px;">
            <div style="font-size:11px;color:var(--text-muted);font-weight:700;margin-bottom:4px;">الولاية</div>
            <div style="font-weight:800;">${escHtml(v.wilaya||'—')}</div>
          </div>
          <div style="background:var(--bg-input);border-radius:10px;padding:12px;">
            <div style="font-size:11px;color:var(--text-muted);font-weight:700;margin-bottom:4px;">رقم الترخيص</div>
            <div style="font-weight:800;font-family:monospace;">${escHtml(v.license_no)}</div>
          </div>
          <div style="background:var(--bg-input);border-radius:10px;padding:12px;">
            <div style="font-size:11px;color:var(--text-muted);font-weight:700;margin-bottom:4px;">تاريخ الإرسال</div>
            <div style="font-weight:800;">${v.submitted_at ? v.submitted_at.split(' ')[0] : '—'}</div>
          </div>
        </div>

        <div style="font-size:15px;font-weight:800;margin-bottom:10px;color:var(--text-primary);">الوثائق المرفوعة (${docs.length})</div>
        <div style="display:flex;flex-direction:column;gap:8px;margin-bottom:20px;">
          ${docs.length === 0 ? '<div style="padding:20px;text-align:center;color:var(--text-muted);">لا توجد وثائق مرفوعة</div>' :
            docs.map(d => `
              <div style="background:var(--bg-input);border-radius:10px;padding:12px;display:flex;align-items:center;gap:12px;">
                <span style="font-size:22px;">${docTypes[d.doc_type]?.split(' ')[0] || '📄'}</span>
                <div style="flex:1;min-width:0;">
                  <div style="font-size:13px;font-weight:800;">${docTypes[d.doc_type] || d.doc_type}</div>
                  <div style="font-size:11px;color:var(--text-muted);">${escHtml(d.file_name)} · ${Math.round(d.file_size/1024)} KB</div>
                </div>
                <a href="../uploads/vet_docs/${escHtml(d.file_path)}" target="_blank"
                  style="padding:6px 14px;background:var(--blue-50);color:var(--blue-600);border-radius:8px;font-size:12px;font-weight:700;text-decoration:none;border:1px solid #bfdbfe;">
                  👁 عرض
                </a>
              </div>`).join('')}
        </div>

        <div style="display:flex;gap:10px;">
          <button onclick="quickApprove(${vetId});document.getElementById('vet-review-modal').remove();"
            style="flex:2;background:linear-gradient(135deg,var(--green-700),var(--green-500));color:#fff;border:none;border-radius:10px;padding:13px;font-size:15px;font-weight:800;cursor:pointer;font-family:'Tajawal',sans-serif;">
            ✅ اعتماد الطبيب
          </button>
          <button onclick="openRejectModal(${vetId});document.getElementById('vet-review-modal').remove();"
            style="flex:1;background:var(--red-50);color:var(--red-600);border:1.5px solid #fecaca;border-radius:10px;padding:13px;font-size:14px;font-weight:800;cursor:pointer;font-family:'Tajawal',sans-serif;">
            ✕ رفض
          </button>
        </div>`;
    })
    .catch(() => {
      document.getElementById('vet-review-body').innerHTML = '<p style="color:red;padding:20px;">خطأ في الاتصال بالخادم</p>';
    });
}

async function quickApprove(vetId) {
  try {
    const res = await fetch('../api/admin_vets.php', {
      method: 'POST',
      headers: {'Content-Type':'application/x-www-form-urlencoded'},
      body: new URLSearchParams({ action: 'approve_vet', vet_id: vetId }),
    });
    const data = await res.json();
    if (data.success) { showToast('success', '✅ تم اعتماد الطبيب وإشعاره'); setTimeout(() => location.reload(), 1500); }
    else showToast('error', data.error || 'فشل الاعتماد');
  } catch(e) { showToast('error', 'خطأ في الاتصال'); }
}

function openRejectModal(vetId) {
  const reason = prompt('أدخل سبب الرفض (سيُرسل للطبيب):');
  if (!reason) return;
  fetch('../api/admin_vets.php', {
    method: 'POST',
    headers: {'Content-Type':'application/x-www-form-urlencoded'},
    body: new URLSearchParams({ action: 'reject_vet', vet_id: vetId, reason }),
  }).then(r => r.json()).then(data => {
    if (data.success) { showToast('error', 'تم رفض الطلب وإشعار الطبيب'); setTimeout(() => location.reload(), 1500); }
    else showToast('error', data.error);
  });
}

function escHtml(s) {
  return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

// ── BOOT ──
renderAll();
// Apply theme toggle state
if (theme === 'dark') {
  const tt = document.getElementById('theme-toggle');
  if (tt) tt.classList.add('on');
}
</script>
</body>
</html>
