<?php
// Call this after auth_guard.php
// $pageTitle must be set before including

// Stats for sidebar
$stats = [];
try {
    $stats['places']    = db()->query("SELECT COUNT(*) FROM places")->fetchColumn();
    $stats['users']     = db()->query("SELECT COUNT(*) FROM users")->fetchColumn();
    $stats['providers'] = db()->query("SELECT COUNT(*) FROM providers WHERE status='pending'")->fetchColumn();
    $stats['messages']  = db()->query("SELECT COUNT(*) FROM messages WHERE is_read=0")->fetchColumn();
} catch(Exception $e) { $stats = ['places'=>0,'users'=>0,'providers'=>0,'messages'=>0]; }

$current = basename($_SERVER['PHP_SELF']);
function nav_active(string $file): string {
    global $current;
    return $current === $file ? 'active' : '';
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= htmlspecialchars($pageTitle ?? 'Admin') ?> — تحويسة</title>
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌴</text></svg>">
  <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
  <style>
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    :root{
      --g:#2D6A4F;--gd:#1B4332;--gm:#3A8A64;--gl:#52B788;--gp:#D8F3DC;
      --gold:#C9A84C;--goldl:#E9C98C;--goldp:#FDF5E0;
      --cream:#FAFAF5;--white:#fff;--dark:#0F1C17;--text:#1E2D26;
      --muted:#6B7C74;--border:#E0EBE4;--error:#DC2626;--errb:#FEE2E2;
      --sh:0 2px 12px rgba(27,67,50,.08);--sh2:0 6px 28px rgba(27,67,50,.12);
      --r:10px;--rl:16px;--font:'Cairo',sans-serif;
      --sidebar:240px;--topbar:58px;
    }
    html,body{height:100%;font-family:var(--font);background:var(--cream);color:var(--text);overflow-x:hidden}
    a{color:inherit;text-decoration:none}
    button{font-family:var(--font);cursor:pointer;border:none;background:none}
    img{max-width:100%;display:block}

    /* ── Topbar ── */
    .topbar{
      position:fixed;top:0;right:0;left:0;height:var(--topbar);
      background:var(--gd);display:flex;align-items:center;
      justify-content:space-between;padding:0 20px;z-index:200;
      box-shadow:0 2px 12px rgba(0,0,0,.2);
    }
    .topbar-logo{font-size:1.2rem;font-weight:900;color:#fff}
    .topbar-logo span{color:var(--gold)}
    .topbar-right{display:flex;align-items:center;gap:12px}
    .topbar-admin{font-size:.78rem;font-weight:700;color:rgba(255,255,255,.7)}
    .topbar-logout{font-size:.78rem;font-weight:700;background:rgba(255,255,255,.12);
      color:#fff;padding:6px 12px;border-radius:100px;transition:.2s}
    .topbar-logout:hover{background:rgba(255,255,255,.2)}
    .hamburger-admin{display:flex;flex-direction:column;gap:4px;cursor:pointer;padding:4px}
    .hamburger-admin span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:.2s}

    /* ── Sidebar ── */
    .sidebar{
      position:fixed;top:var(--topbar);right:0;bottom:0;
      width:var(--sidebar);background:var(--white);
      border-left:1px solid var(--border);overflow-y:auto;
      z-index:150;padding:16px 0;transition:transform .3s ease;
    }
    @media(max-width:768px){
      .sidebar{transform:translateX(100%)}
      .sidebar.open{transform:translateX(0)}
    }

    .nav-section{padding:0 12px;margin-bottom:4px}
    .nav-section-label{font-size:.65rem;font-weight:700;text-transform:uppercase;
      letter-spacing:.12em;color:var(--muted);padding:8px 8px 4px}
    .nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;
      border-radius:var(--r);font-size:.88rem;font-weight:600;color:var(--text);
      transition:.2s;position:relative;cursor:pointer}
    .nav-item:hover{background:var(--gp);color:var(--g)}
    .nav-item.active{background:var(--gp);color:var(--g);font-weight:800}
    .nav-item.active::before{content:'';position:absolute;right:-12px;top:50%;transform:translateY(-50%);
      width:3px;height:20px;background:var(--g);border-radius:3px}
    .nav-icon{font-size:1.1rem;width:24px;text-align:center}
    .nav-badge{margin-right:auto;background:var(--error);color:#fff;
      font-size:.65rem;font-weight:800;min-width:18px;height:18px;
      border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 5px}
    .nav-gold-badge{background:var(--gold)}

    /* ── Main ── */
    .main{
      margin-right:var(--sidebar);margin-top:var(--topbar);
      padding:24px;min-height:calc(100vh - var(--topbar));
    }
    @media(max-width:768px){.main{margin-right:0}}

    /* ── Page header ── */
    .page-header{margin-bottom:24px}
    .page-title{font-size:1.4rem;font-weight:900;color:var(--dark)}
    .page-sub{font-size:.85rem;color:var(--muted);margin-top:3px}

    /* ── Cards / stats ── */
    .stats-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:24px}
    @media(min-width:640px){.stats-row{grid-template-columns:repeat(4,1fr)}}
    .stat-card{background:var(--white);border-radius:var(--rl);padding:16px;box-shadow:var(--sh)}
    .stat-num{font-size:1.6rem;font-weight:900;color:var(--dark)}
    .stat-label{font-size:.75rem;color:var(--muted);font-weight:600;margin-top:2px}
    .stat-icon{font-size:1.4rem;margin-bottom:6px}

    /* ── Table ── */
    .table-wrap{background:var(--white);border-radius:var(--rl);box-shadow:var(--sh);overflow:hidden}
    .table-head{padding:16px 20px;border-bottom:1px solid var(--border);
      display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
    .table-head-title{font-size:.95rem;font-weight:800;color:var(--dark)}
    .tbl{width:100%;border-collapse:collapse;font-size:.85rem}
    .tbl th{text-align:right;padding:10px 16px;font-size:.72rem;font-weight:700;
      text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
      background:var(--cream);border-bottom:1px solid var(--border)}
    .tbl td{padding:12px 16px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
    .tbl tr:last-child td{border-bottom:none}
    .tbl tr:hover td{background:rgba(212,243,220,.3)}
    .tbl-scroll{overflow-x:auto}

    /* ── Badges ── */
    .badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;
      border-radius:100px;font-size:.7rem;font-weight:700}
    .badge-green{background:var(--gp);color:var(--g)}
    .badge-gold{background:var(--goldp);color:#a07820}
    .badge-red{background:var(--errb);color:var(--error)}
    .badge-gray{background:#f1f5f3;color:var(--muted)}

    /* ── Buttons ── */
    .btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;
      border-radius:var(--r);font-family:var(--font);font-size:.82rem;
      font-weight:700;cursor:pointer;border:none;transition:.2s;white-space:nowrap}
    .btn-primary{background:var(--g);color:#fff;box-shadow:0 3px 12px rgba(45,106,79,.25)}
    .btn-primary:hover{background:var(--gd)}
    .btn-gold{background:var(--gold);color:#fff}
    .btn-gold:hover{background:#b8953f}
    .btn-danger{background:var(--errb);color:var(--error)}
    .btn-danger:hover{background:var(--error);color:#fff}
    .btn-ghost{background:var(--cream);color:var(--muted);border:1px solid var(--border)}
    .btn-ghost:hover{background:var(--gp);color:var(--g)}
    .btn-sm{padding:6px 12px;font-size:.76rem}
    .btn-block{width:100%;justify-content:center}

    /* ── Form ── */
    .form-card{background:var(--white);border-radius:var(--rl);padding:24px;box-shadow:var(--sh);margin-bottom:20px}
    .form-title{font-size:1rem;font-weight:800;color:var(--dark);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
    .form-grid{display:grid;gap:14px}
    @media(min-width:640px){.form-grid-2{grid-template-columns:1fr 1fr}}
    label.flabel{display:block;font-size:.75rem;font-weight:700;color:var(--muted);
      text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
    input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],
    select,textarea{
      width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--r);
      font-family:var(--font);font-size:.9rem;outline:none;transition:.2s;background:var(--cream);color:var(--text)
    }
    input:focus,select:focus,textarea:focus{border-color:var(--g);background:#fff;box-shadow:0 0 0 3px rgba(45,106,79,.1)}
    textarea{resize:vertical;min-height:80px}
    select option{font-family:var(--font)}
    .form-check{display:flex;align-items:center;gap:8px;font-size:.88rem}
    .form-check input{width:16px;height:16px;accent-color:var(--g)}
    .err-box{background:var(--errb);color:var(--error);border-radius:var(--r);padding:12px;font-size:.85rem;font-weight:600;margin-bottom:16px}
    .ok-box{background:var(--gp);color:var(--gd);border-radius:var(--r);padding:12px;font-size:.85rem;font-weight:600;margin-bottom:16px}

    /* ── Modal ── */
    .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;
      display:none;align-items:center;justify-content:center;padding:20px}
    .modal-overlay.open{display:flex}
    .modal{background:var(--white);border-radius:var(--rl);width:100%;max-width:500px;
      max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
    .modal-header{padding:20px 20px 0;display:flex;align-items:center;justify-content:space-between}
    .modal-title{font-size:1.05rem;font-weight:800;color:var(--dark)}
    .modal-close{font-size:1.3rem;cursor:pointer;color:var(--muted);line-height:1;padding:4px}
    .modal-body{padding:20px}
    .modal-footer{padding:0 20px 20px;display:flex;gap:8px;justify-content:flex-end}

    /* ── Map ── */
    #adminMap{width:100%;height:220px;border-radius:var(--r);border:1.5px solid var(--border)}

    /* ── Pagination ── */
    .pagination{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px;justify-content:center}
    .page-btn{display:inline-flex;align-items:center;justify-content:center;
      width:34px;height:34px;border-radius:var(--r);border:1.5px solid var(--border);
      font-size:.82rem;font-weight:700;color:var(--muted);transition:.2s;cursor:pointer}
    .page-btn:hover,.page-btn.active{background:var(--g);color:#fff;border-color:var(--g)}

    /* ── Image thumb ── */
    .thumb{width:48px;height:48px;border-radius:var(--r);object-fit:cover;background:var(--gp);
      display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}

    /* ── Overlay for mobile sidebar ── */
    .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:140}
    @media(max-width:768px){.sidebar-overlay.open{display:block}}
  </style>
</head>
<body>

<!-- Topbar -->
<div class="topbar">
  <div style="display:flex;align-items:center;gap:12px">
    <button class="hamburger-admin" id="menuToggle" aria-label="القائمة">
      <span></span><span></span><span></span>
    </button>
    <div class="topbar-logo">تحويسة<span>.</span> <span style="font-size:.7rem;font-weight:600;color:rgba(255,255,255,.6);margin-right:6px">لوحة التحكم</span></div>
  </div>
  <div class="topbar-right">
    <span class="topbar-admin">👤 مدير النظام</span>
    <a href="logout.php" class="topbar-logout">خروج</a>
  </div>
</div>

<!-- Sidebar overlay (mobile) -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>

<!-- Sidebar -->
<aside class="sidebar" id="sidebar">

  <div class="nav-section">
    <div class="nav-section-label">الرئيسية</div>
    <a href="index.php" class="nav-item <?= nav_active('index.php') ?>">
      <span class="nav-icon">📊</span> لوحة التحكم
    </a>
  </div>

  <div class="nav-section">
    <div class="nav-section-label">إدارة المحتوى</div>
    <a href="places.php" class="nav-item <?= nav_active('places.php') ?>">
      <span class="nav-icon">🗺️</span> الأماكن السياحية
      <?php if ($stats['places'] > 0): ?>
        <span class="nav-badge nav-gold-badge"><?= $stats['places'] ?></span>
      <?php endif; ?>
    </a>
    <a href="activities.php" class="nav-item <?= nav_active('activities.php') ?>">
      <span class="nav-icon">🏪</span> مقدمو الخدمات
      <?php if ($stats['providers'] > 0): ?>
        <span class="nav-badge"><?= $stats['providers'] ?></span>
      <?php endif; ?>
    </a>
    <a href="users.php" class="nav-item <?= nav_active('users.php') ?>">
      <span class="nav-icon">👥</span> المستخدمون
    </a>
    <a href="messages.php" class="nav-item <?= nav_active('messages.php') ?>">
      <span class="nav-icon">✉️</span> الرسائل
      <?php if ($stats['messages'] > 0): ?>
        <span class="nav-badge"><?= $stats['messages'] ?></span>
      <?php endif; ?>
    </a>
  </div>

  <div class="nav-section">
    <div class="nav-section-label">الموقع</div>
    <a href="../index.php" target="_blank" class="nav-item">
      <span class="nav-icon">🌐</span> عرض الموقع
    </a>
    <a href="setup.php" class="nav-item <?= nav_active('setup.php') ?>">
      <span class="nav-icon">⚙️</span> إدارة المدراء
    </a>
    <a href="logout.php" class="nav-item" style="color:var(--error)">
      <span class="nav-icon">🚪</span> تسجيل الخروج
    </a>
  </div>

</aside>

<!-- Main content starts here — closed in footer.php -->
<main class="main">
