<?php
// Usage: include 'topbar.php'; — set $page_title before including
$tb_patient_id = $_SESSION['patient_id'];
$tb_stmt = $conn->prepare("SELECT full_name, profile_photo FROM patients WHERE id=?");
$tb_stmt->bind_param('i', $tb_patient_id);
$tb_stmt->execute();
$tb_p = $tb_stmt->get_result()->fetch_assoc();

$tb_notifs = $conn->query("SELECT COUNT(*) FROM notifications WHERE user_type='patient' AND user_id=$tb_patient_id AND is_read=0")->fetch_row()[0];
?>
<style>
  .topbar {
    background: linear-gradient(135deg, #0B4ACB, #3B63E6);
    border-bottom: none;
    padding: 0 24px; height: 58px;
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; top: 0; left: 0; right: 0; z-index: 300;
    box-shadow: 0 2px 16px rgba(11,74,203,.3);
  }
  .topbar-left { display:flex; align-items:center; gap:12px; }
  .topbar-right { display:flex; align-items:center; gap:10px; }

  .tb-notif-btn {
    position:relative; width:38px; height:38px; border-radius:10px;
    background:rgba(255,255,255,.15); border:1.5px solid rgba(255,255,255,.25);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:15px; text-decoration:none; transition:all .2s;
  }
  .tb-notif-btn:hover { background:rgba(255,255,255,.25); }
  .tb-notif-dot {
    position:absolute; top:5px; right:5px;
    width:8px; height:8px; border-radius:50%;
    background:#ef4444; border:2px solid #3B63E6;
  }

  .tb-profile {
    display:flex; align-items:center; gap:8px;
    padding:5px 12px 5px 5px; border-radius:12px;
    background:rgba(255,255,255,.15); border:1.5px solid rgba(255,255,255,.25);
    text-decoration:none; transition:all .2s; cursor:pointer;
  }
  .tb-profile:hover { background:rgba(255,255,255,.25); }
  .tb-profile-img {
    width:30px; height:30px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; flex-shrink:0; background:rgba(255,255,255,.2);
  }
  .tb-profile-img img { width:100%; height:100%; object-fit:cover; }
  .tb-profile-img i { color:#fff; font-size:14px; }
  .tb-profile-name { font-size:12px; font-weight:600; color:#fff; }

  /* push page content below topbar */
  .main-content { padding-top: 58px; }

  /* sidebar starts below topbar */
  .sidebar { top: 58px; height: calc(100vh - 58px); }

  @media(max-width:768px) {
    .topbar { padding: 0 12px; left: 0; }
    .tb-profile-name { display:none; }
    .sb-hamburger { top: 10px; }
  }
</style>

<div class="topbar">
  <div class="topbar-left">
    <button class="sb-hamburger" id="sbHamburger" onclick="mobToggle()" style="position:static;box-shadow:none;background:rgba(255,255,255,.15);">
      <i class="fas fa-bars"></i>
    </button>
    <img src="<?= SITE_URL ?>/black.png" alt="HealthLink" style="height:44px;object-fit:contain;">
  </div>
  <div class="topbar-right">
    <a href="notifications.php" class="tb-notif-btn">
      <i class="fas fa-bell"></i>
      <?php if($tb_notifs > 0): ?><span class="tb-notif-dot"></span><?php endif; ?>
    </a>
    <a href="profile.php" class="tb-profile">
      <div class="tb-profile-img">
        <?php if(!empty($tb_p['profile_photo'])): ?>
          <img src="<?= SITE_URL ?>/<?= $tb_p['profile_photo'] ?>" alt="">
        <?php else: ?>
          <i class="fas fa-user"></i>
        <?php endif; ?>
      </div>
      <span class="tb-profile-name"><?= htmlspecialchars(explode(' ', $tb_p['full_name'])[0]) ?></span>
    </a>
  </div>
</div>
