<?php
$pending_doctors  = $conn->query("SELECT COUNT(*) FROM doctors WHERE verification_status='pending'")->fetch_row()[0];
$today_apts       = $conn->query("SELECT COUNT(*) FROM appointments WHERE appointment_date=CURDATE()")->fetch_row()[0];
$current = basename($_SERVER['PHP_SELF']);
?>
<style>
  :root { --sb-full: 260px; }

  .sidebar {
    width: var(--sb-full); height: calc(100vh - 58px);
    background: linear-gradient(160deg, #0B4ACB 0%, #245CDB 40%, #3B63E6 75%, #1A49C8 100%);
    position: fixed; top: 58px; left: 0; z-index: 200;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 4px 0 20px rgba(11,74,203,.25);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
  }
  .sidebar.collapsed { transform: translateX(-100%); }

  .sb-user { padding: 10px 14px 8px; border-bottom: 1px solid rgba(255,255,255,.15); display:flex; align-items:center; gap:9px; overflow:hidden; white-space:nowrap; }
  .sb-avatar { width:36px; height:36px; border-radius:50%; flex-shrink:0; background:rgba(255,255,255,.2); border:2px solid rgba(255,255,255,.4); display:grid; place-items:center; overflow:hidden; }
  .sb-avatar i { color:#fff; font-size:18px; }
  .sb-uname { font-size:13px; font-weight:700; color:#fff; line-height:1.3; }
  .sb-hid { font-size:9px; font-weight:600; color:#fff; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); border-radius:20px; padding:1px 7px; display:inline-block; margin-top:2px; }

  .sb-nav { padding:4px 0; flex:1; overflow-y:auto; overflow-x:hidden; }
  .sb-nav::-webkit-scrollbar { display:none; }
  .sb-nav { scrollbar-width:none; }
  .sb-section { padding:6px 14px 2px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.4); }

  .sb-nav a {
    display:flex; align-items:center; gap:9px;
    padding:7px 0 7px 14px; color:rgba(255,255,255,.85);
    text-decoration:none; font-size:12px; font-weight:500;
    border-left:3px solid transparent; transition:all .18s;
    white-space:nowrap; position:relative;
  }
  .sb-nav a i { width:18px; text-align:center; font-size:13px; flex-shrink:0; }
  .sb-nav a:hover { color:#fff; background:rgba(255,255,255,.13); border-left-color:rgba(255,255,255,.7); }
  .sb-nav a.active { color:#fff; background:rgba(255,255,255,.2); border-left-color:#fff; font-weight:700; }
  .sb-badge { margin-left:auto; background:#ef4444; color:#fff; font-size:10px; font-weight:700; padding:2px 6px; border-radius:20px; flex-shrink:0; }

  .sb-bottom { padding:7px 10px 10px; border-top:1px solid rgba(255,255,255,.15); display:flex; flex-direction:column; gap:8px; }

  .sb-collapse-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:7px; border-radius:10px; background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.2); color:#fff; font-size:12px;
    font-weight:600; cursor:pointer; transition:all .2s; width:100%;
  }
  .sb-collapse-btn:hover { background:rgba(255,255,255,.2); }

  .sb-logout {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:8px; border-radius:10px; background:rgba(239,68,68,.2);
    border:1px solid rgba(239,68,68,.4); color:#fca5a5; font-size:12px;
    font-weight:700; text-decoration:none; transition:all .2s;
  }
  .sb-logout:hover { background:rgba(239,68,68,.35); color:#fff; }

  /* Main content */
  .admin-main { margin-left:var(--sb-full); min-height:100vh; background:#f0f4ff; transition:margin-left .25s cubic-bezier(.4,0,.2,1); overflow-x:hidden; }
  .admin-main.expanded { margin-left:0; }

  /* Floating re-open button */
  .sb-reopen {
    position:fixed; top:50%; left:0; transform:translateY(-50%);
    width:22px; height:52px; background:linear-gradient(160deg,#0B4ACB,#3B63E6);
    border:none; border-radius:0 10px 10px 0; color:#fff; font-size:12px;
    cursor:pointer; z-index:201; display:none; align-items:center; justify-content:center;
    box-shadow:3px 0 10px rgba(11,74,203,.4); transition:width .2s;
  }
  .sb-reopen.visible { display:flex; }
  .sb-reopen:hover { width:28px; }

  /* Mobile hamburger */
  .sb-hamburger {
    display:none; width:38px; height:38px; border-radius:10px;
    background:rgba(255,255,255,.15); border:1.5px solid rgba(255,255,255,.25);
    color:#fff; font-size:16px; cursor:pointer;
    align-items:center; justify-content:center;
  }
  .sb-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:199; }

  @media(max-width:768px) {
    .sidebar { top:58px; left:-100%; width:var(--sb-full) !important; transition:left .25s; height:calc(100vh - 58px); }
    .sidebar.collapsed { transform:none; left:-100%; }
    .sidebar.mob-open { left:0; }
    .admin-main, .admin-main.expanded { margin-left:0 !important; }
    .sb-hamburger { display:flex; }
    .sb-reopen { display:none !important; }
    .sb-overlay.active { display:block; }
  }
</style>

<div class="sb-overlay" id="sbOverlay" onclick="mobToggle()"></div>

<button class="sb-reopen" id="sbReopen" onclick="desktopToggle()">
  <i class="fas fa-chevron-right"></i>
</button>

<div class="sidebar" id="mainSidebar">
  <nav class="sb-nav">
    <div class="sb-section">Main</div>
    <a href="dashboard.php" class="<?= $current==='dashboard.php'?'active':'' ?>"><i class="fas fa-tachometer-alt"></i><span> Dashboard</span></a>

    <div class="sb-section">Users</div>
    <a href="patients.php" class="<?= $current==='patients.php'?'active':'' ?>"><i class="fas fa-users"></i><span> Patients</span></a>
    <a href="doctors.php"  class="<?= $current==='doctors.php'?'active':'' ?>"><i class="fas fa-user-md"></i><span> Doctors</span></a>
    <a href="doctor-verification.php" class="<?= $current==='doctor-verification.php'?'active':'' ?>">
      <i class="fas fa-user-check"></i><span> Verification</span>
      <?php if ($pending_doctors > 0): ?><span class="sb-badge"><?= $pending_doctors ?></span><?php endif; ?>
    </a>
    <a href="admin-users.php" class="<?= $current==='admin-users.php'?'active':'' ?>"><i class="fas fa-users-cog"></i><span> Staff</span></a>

    <div class="sb-section">Operations</div>
    <a href="appointments.php" class="<?= $current==='appointments.php'?'active':'' ?>">
      <i class="fas fa-calendar-alt"></i><span> Appointments</span>
      <?php if ($today_apts > 0): ?><span class="sb-badge"><?= $today_apts ?></span><?php endif; ?>
    </a>
    <a href="payments.php"      class="<?= $current==='payments.php'?'active':'' ?>"><i class="fas fa-money-bill-wave"></i><span> Payments</span></a>
    <a href="notifications.php" class="<?= $current==='notifications.php'?'active':'' ?>"><i class="fas fa-bell"></i><span> Notifications</span></a>
    <a href="support.php"       class="<?= $current==='support.php'?'active':'' ?>"><i class="fas fa-headset"></i><span> Support</span></a>

    <div class="sb-section">Reports</div>
    <a href="reports.php"   class="<?= $current==='reports.php'?'active':'' ?>"><i class="fas fa-chart-bar"></i><span> Reports</span></a>
    <a href="analytics.php" class="<?= $current==='analytics.php'?'active':'' ?>"><i class="fas fa-chart-line"></i><span> Analytics</span></a>

    <div class="sb-section">System</div>
    <a href="settings.php"         class="<?= $current==='settings.php'?'active':'' ?>"><i class="fas fa-cog"></i><span> Settings</span></a>
    <a href="security.php"         class="<?= $current==='security.php'?'active':'' ?>"><i class="fas fa-shield-alt"></i><span> Security</span></a>
    <a href="system-setup.php"     class="<?= $current==='system-setup.php'?'active':'' ?>"><i class="fas fa-cogs"></i><span> System Setup</span></a>
    <a href="website-content.php"  class="<?= $current==='website-content.php'?'active':'' ?>"><i class="fas fa-globe"></i><span> Website Content</span></a>
  </nav>

  <div class="sb-bottom">
    <button class="sb-collapse-btn" onclick="desktopToggle()">
      <i class="fas fa-chevron-left"></i>
      <span>Collapse</span>
    </button>
    <a href="logout.php" class="sb-logout">
      <i class="fas fa-sign-out-alt"></i>
      <span>Logout</span>
    </a>
  </div>
</div>

<script>
function desktopToggle() {
  var sb = document.getElementById('mainSidebar');
  var mc = document.querySelector('.admin-main');
  var btn = document.getElementById('sbReopen');
  var collapsed = sb.classList.toggle('collapsed');
  if(mc) mc.classList.toggle('expanded', collapsed);
  if(btn) btn.classList.toggle('visible', collapsed);
}
function mobToggle() {
  var sb = document.getElementById('mainSidebar');
  var ov = document.getElementById('sbOverlay');
  sb.classList.toggle('mob-open');
  ov.classList.toggle('active');
}
</script>
