<?php
$patient_id = $_SESSION['patient_id'];
$stmt = $conn->prepare("SELECT full_name, health_id, profile_photo FROM patients WHERE id = ?");
$stmt->bind_param('i', $patient_id);
$stmt->execute();
$sidebar_patient = $stmt->get_result()->fetch_assoc();

$notif_result = $conn->query("SELECT COUNT(*) FROM notifications WHERE user_type='patient' AND user_id=$patient_id AND is_read=0");
$unread_notifs = $notif_result->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: 8px 12px; 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 img { width:100%; height:100%; object-fit:cover; }
  .sb-avatar i { color:#fff; font-size:15px; }
  .sb-user-info { overflow:hidden; }
  .sb-uname { font-size:12px; 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:10px 14px 3px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.4); }

  .sb-nav a {
    display:flex; align-items:center; gap:11px;
    padding:11px 0 11px 14px; color:rgba(255,255,255,.85);
    text-decoration:none; font-size:14px; font-weight:500;
    border-left:3px solid transparent; transition:all .18s;
    white-space:nowrap; position:relative;
  }
  .sb-nav a i { width:20px; text-align:center; font-size:15px; 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:10px 10px 14px; 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:10px; border-radius:10px; background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.2); color:#fff; font-size:13px;
    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:11px; border-radius:10px; background:rgba(239,68,68,.2);
    border:1px solid rgba(239,68,68,.4); color:#fca5a5; font-size:14px;
    font-weight:700; text-decoration:none; transition:all .2s;
  }
  .sb-logout:hover { background:rgba(239,68,68,.35); color:#fff; }

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

<!-- Floating re-open button (desktop only) -->
<button class="sb-reopen" id="sbReopen" onclick="desktopToggle()">
  <i class="fas fa-chevron-right"></i>
</button>

<div class="sidebar" id="mainSidebar">
  <div class="sb-user" style="padding:14px 14px 12px;">
    <div class="sb-avatar" style="width:42px;height:42px;">
      <?php if (!empty($sidebar_patient['profile_photo'])): ?>
        <img src="<?= SITE_URL ?>/<?= $sidebar_patient['profile_photo'] ?>" alt="">
      <?php else: ?>
        <i class="fas fa-user"></i>
      <?php endif; ?>
    </div>
    <div class="sb-user-info">
      <div class="sb-uname" style="font-size:13px;"><?= htmlspecialchars($sidebar_patient['full_name']) ?></div>
      <span class="sb-hid"><?= htmlspecialchars($sidebar_patient['health_id']) ?></span>
    </div>
  </div>

  <nav class="sb-nav">
    <div class="sb-section">Main</div>
    <a href="dashboard.php"      data-tip="Dashboard"       class="<?= $current==='dashboard.php'?'active':'' ?>"><i class="fas fa-home"></i><span> Dashboard</span></a>
    <a href="profile.php"        data-tip="My Profile"      class="<?= $current==='profile.php'?'active':'' ?>"><i class="fas fa-user-circle"></i><span> My Profile</span></a>

    <div class="sb-section">Appointments</div>
    <a href="doctors.php"          data-tip="Find Doctors"      class="<?= $current==='doctors.php'?'active':'' ?>"><i class="fas fa-user-md"></i><span> Find Doctors</span></a>
    <a href="book-appointment.php" data-tip="Book Appointment"  class="<?= $current==='book-appointment.php'?'active':'' ?>"><i class="fas fa-calendar-plus"></i><span> Book Appointment</span></a>
    <a href="appointments.php"     data-tip="My Appointments"   class="<?= $current==='appointments.php'?'active':'' ?>"><i class="fas fa-calendar-check"></i><span> My Appointments</span></a>

    <div class="sb-section">Medical</div>
    <a href="health-records.php"  data-tip="Health Records"   class="<?= $current==='health-records.php'?'active':'' ?>"><i class="fas fa-file-medical"></i><span> Health Records</span></a>
    <a href="prescriptions.php"   data-tip="Prescriptions"    class="<?= $current==='prescriptions.php'?'active':'' ?>"><i class="fas fa-prescription-bottle-alt"></i><span> Prescriptions</span></a>
    <a href="lab-reports.php"     data-tip="Lab Reports"      class="<?= $current==='lab-reports.php'?'active':'' ?>"><i class="fas fa-flask"></i><span> Lab Reports</span></a>
    <a href="medical-history.php" data-tip="Medical History"  class="<?= $current==='medical-history.php'?'active':'' ?>"><i class="fas fa-notes-medical"></i><span> Medical History</span></a>

    <div class="sb-section">Account</div>
    <a href="notifications.php" data-tip="Notifications" class="<?= $current==='notifications.php'?'active':'' ?>">
      <i class="fas fa-bell"></i><span> Notifications</span>
      <?php if ($unread_notifs > 0): ?><span class="sb-badge"><?= $unread_notifs ?></span><?php endif; ?>
    </a>
    <a href="settings.php" data-tip="Settings" class="<?= $current==='settings.php'?'active':'' ?>"><i class="fas fa-cog"></i><span> Settings</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('.main-content');
  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>
