<?php
session_start();
include 'config.php';

error_reporting(E_ALL);
ini_set('display_errors', 1);

function h($str) { return htmlspecialchars($str ?? '', ENT_QUOTES, 'UTF-8'); }

if (!isset($_SESSION['user_id'])) { header("Location: index.php"); exit(); }

$user_id  = $_SESSION['user_id'];
$username = $_SESSION['username'] ?? '';

/* ── Fetch current user info ────────────────────────────────────────────── */
$uid_safe = mysqli_real_escape_string($conn, $user_id);
$me = mysqli_fetch_assoc(mysqli_query($conn,
    "SELECT id, first_name, last_name, role, division, location FROM users WHERE id = '$uid_safe'"
));
if (!$me) { header("Location: logout.php"); exit(); }

$my_role     = strtolower($me['role']     ?? 'employee');
$my_division = strtolower($me['division'] ?? '');
$my_location = strtolower($me['location'] ?? '');

/* ── Handle mark-as-read / mark-all-read ────────────────────────────────── */
if ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_POST['action'])) {
    if ($_POST['action'] === 'mark_read' && !empty($_POST['notif_id'])) {
        $nid = intval($_POST['notif_id']);
        mysqli_query($conn,
            "INSERT IGNORE INTO empnotification_reads (notification_id, user_id)
             VALUES ($nid, '$uid_safe')"
        );
    }
    if ($_POST['action'] === 'mark_all_read') {
        /* We'll mark all eligible notifications as read in one query below */
        $do_mark_all = true;
    }
    /* Redirect to avoid re-POST on refresh */
    header("Location: view_notifications.php");
    exit();
}

/* ── Build WHERE clause for notifications this user is eligible for ─────── */
/*
 * A user sees a notification if:
 *  target_type = 'all'
 *  OR target_type = 'role'     AND target_value = user's role
 *  OR target_type = 'division' AND LOWER(target_value) = user's division
 *  OR target_type = 'location' AND LOWER(target_value) = user's location
 *  OR target_type = 'user'     AND target_value = user's id
 * AND is_active = 1
 * AND (expires_at IS NULL OR expires_at >= CURDATE())
 */
$mr = mysqli_real_escape_string($conn, $my_role);
$md = mysqli_real_escape_string($conn, $my_division);
$ml = mysqli_real_escape_string($conn, $my_location);

$eligible_where = "
    n.is_active = 1
    AND (n.expires_at IS NULL OR n.expires_at >= CURDATE())
    AND (
        n.target_type = 'all'
        OR (n.target_type = 'role'     AND LOWER(n.target_value) = '$mr')
        OR (n.target_type = 'division' AND LOWER(n.target_value) = '$md')
        OR (n.target_type = 'location' AND LOWER(n.target_value) = '$ml')
        OR (n.target_type = 'user'     AND n.target_value = '$uid_safe')
    )
";

/* ── Fetch notifications ─────────────────────────────────────────────────── */
$notifs_sql = "
    SELECT n.*,
           (r.id IS NOT NULL) AS is_read,
           r.read_at
    FROM empnotification n
    LEFT JOIN empnotification_reads r
          ON r.notification_id = n.id AND r.user_id = '$uid_safe'
    WHERE $eligible_where
    ORDER BY n.created_at DESC
";
$notifs_result = mysqli_query($conn, $notifs_sql);
$all_notifs = [];
$unread_count = 0;
while ($row = mysqli_fetch_assoc($notifs_result)) {
    $all_notifs[] = $row;
    if (!$row['is_read']) $unread_count++;
}

/* ── Mark all read if requested ─────────────────────────────────────────── */
if (!empty($do_mark_all) && !empty($all_notifs)) {
    foreach ($all_notifs as $n) {
        if (!$n['is_read']) {
            $nid = intval($n['id']);
            mysqli_query($conn,
                "INSERT IGNORE INTO empnotification_reads (notification_id, user_id)
                 VALUES ($nid, '$uid_safe')"
            );
        }
    }
    header("Location: view_notifications.php"); exit();
}

/* ── Active filter ───────────────────────────────────────────────────────── */
$filter = $_GET['filter'] ?? 'all'; // all | unread | general | announcement | alert | reminder | urgent

$type_icons = [
    'general'      => ['icon'=>'fa-info-circle',         'cls'=>'general'],
    'announcement' => ['icon'=>'fa-bullhorn',             'cls'=>'announcement'],
    'alert'        => ['icon'=>'fa-triangle-exclamation', 'cls'=>'alert'],
    'reminder'     => ['icon'=>'fa-clock',                'cls'=>'reminder'],
    'urgent'       => ['icon'=>'fa-circle-exclamation',   'cls'=>'urgent'],
];

$type_labels = [
    'general'=>'General','announcement'=>'Announcement',
    'alert'=>'Alert','reminder'=>'Reminder','urgent'=>'Urgent',
];

/* Relative time helper */
function relTime($dt) {
    $diff = time() - strtotime($dt);
    if ($diff < 60)   return 'Just now';
    if ($diff < 3600) return floor($diff/60) . 'm ago';
    if ($diff < 86400) return floor($diff/3600) . 'h ago';
    if ($diff < 604800) return floor($diff/86400) . 'd ago';
    return date('d M Y', strtotime($dt));
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>MPC · My Notifications</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ink: #0f172a; --ink-2: #334155; --muted: #94a3b8; --border: #e2e8f0;
  --surface: #ffffff; --bg: #f1f5f9; --sidebar-bg: #0f172a; --sidebar-w: 260px;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(15,23,42,.06), 0 4px 16px rgba(15,23,42,.06);
  --shadow-md: 0 4px 6px rgba(15,23,42,.07), 0 12px 32px rgba(15,23,42,.10);
  font-family: 'Sora', system-ui, sans-serif;
}
html, body { height: 100%; }
body { background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.layout { display: flex; min-height: 100vh; }

/* SIDEBAR */
.sidebar { width:var(--sidebar-w); background:var(--sidebar-bg); position:fixed; inset:0 auto 0 0; z-index:200; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; transition:transform .3s cubic-bezier(.4,0,.2,1); scrollbar-width:none; }
.sidebar::-webkit-scrollbar { display:none; }
.sidebar.hidden { transform:translateX(-100%); }
.sidebar-brand { padding:24px 20px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:8px; }
.brand-logo { width:36px; height:36px; background:linear-gradient(135deg,#3b82f6,#6366f1); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:#fff; flex-shrink:0; }
.brand-name { font-size:15px; font-weight:700; color:#fff; }
.brand-sub  { font-size:10px; color:rgba(255,255,255,.4); letter-spacing:1.5px; text-transform:uppercase; margin-top:1px; }
.nav-section { padding:0 12px 6px; }
.nav-item { list-style:none; }
.nav-link { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color:rgba(255,255,255,.65); text-decoration:none; font-size:13px; font-weight:500; transition:background .15s,color .15s; }
.nav-link:hover { background:rgba(255,255,255,.07); color:#fff; }
.nav-link.active { background:rgba(59,130,246,.2); color:#60a5fa; }
.nav-link i { width:16px; text-align:center; font-size:13px; }
.sidebar-footer { margin-top:auto; padding:12px; border-top:1px solid rgba(255,255,255,.06); }

/* CONTENT / TOPBAR */
.content { flex:1; margin-left:var(--sidebar-w); min-width:0; display:flex; flex-direction:column; transition:margin .3s; }
.content.expanded { margin-left:0; }
.topbar { height:60px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; padding:0 24px; position:sticky; top:0; z-index:100; }
.hamburger-btn { width:36px; height:36px; border-radius:8px; border:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-2); font-size:15px; flex-shrink:0; transition:background .15s; }
.hamburger-btn:hover { background:var(--bg); }
.topbar-breadcrumb { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.topbar-breadcrumb .current { color:var(--ink); font-weight:600; }
.topbar-spacer { flex:1; }
.topbar-user { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); font-weight:500; }
.topbar-avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#3b82f6,#6366f1); display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; }

/* PAGE */
.page { padding:24px; flex:1; }
.page-header { margin-bottom:20px; display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.page-title  { font-size:22px; font-weight:700; color:var(--ink); letter-spacing:-.4px; }
.page-subtitle { font-size:13px; color:var(--muted); margin-top:2px; }

.btn-mark-all { height:36px; padding:0 14px; border-radius:8px; border:1px solid var(--border); background:var(--surface); font-size:12px; font-weight:600; font-family:'Sora',sans-serif; color:var(--ink-2); cursor:pointer; display:flex; align-items:center; gap:6px; transition:all .15s; }
.btn-mark-all:hover { background:#d1fae5; color:#059669; border-color:#6ee7b7; }

/* FILTER CHIPS */
.filter-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; align-items:center; }
.filter-chip { height:32px; padding:0 14px; border-radius:20px; border:1.5px solid var(--border); background:var(--surface); font-size:12px; font-weight:600; font-family:'Sora',sans-serif; color:var(--ink-2); cursor:pointer; display:flex; align-items:center; gap:5px; text-decoration:none; transition:all .15s; }
.filter-chip:hover { border-color:#94a3b8; color:var(--ink); }
.filter-chip.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.filter-chip .chip-count { background:rgba(255,255,255,.2); border-radius:20px; padding:0 6px; font-size:10px; }
.filter-chip:not(.active) .chip-count { background:var(--bg); color:var(--muted); }

/* TWO COLUMN */
.layout-split { display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start; }

/* CARD */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.card-head { padding:14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.card-head-title { font-size:14px; font-weight:700; color:var(--ink); flex:1; }

/* NOTIFICATION ITEMS */
.notif-feed { display:flex; flex-direction:column; }
.notif-row {
  padding:16px 18px; border-bottom:1px solid var(--border); display:grid;
  grid-template-columns:40px 1fr auto; gap:12px; align-items:start;
  transition:background .15s; cursor:default; position:relative;
}
.notif-row:last-child { border-bottom:none; }
.notif-row:hover { background:#f8fafc; }
.notif-row.unread { background:linear-gradient(90deg, #eff6ff 0px, transparent 4px); }
.notif-row.unread::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:4px 0 0 4px; }
.notif-row.unread-general      { background:linear-gradient(90deg, #f0fdf4 0px, transparent 4px); }
.notif-row.unread-general::before      { background:#059669; }
.notif-row.unread-announcement { background:linear-gradient(90deg, #eff6ff 0px, transparent 4px); }
.notif-row.unread-announcement::before { background:#1d4ed8; }
.notif-row.unread-alert        { background:linear-gradient(90deg, #fff7ed 0px, transparent 4px); }
.notif-row.unread-alert::before        { background:#ea580c; }
.notif-row.unread-reminder     { background:linear-gradient(90deg, #faf5ff 0px, transparent 4px); }
.notif-row.unread-reminder::before     { background:#7c3aed; }
.notif-row.unread-urgent       { background:linear-gradient(90deg, #fef2f2 0px, transparent 4px); }
.notif-row.unread-urgent::before       { background:#dc2626; }

.notif-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.notif-icon.general      { background:#d1fae5; color:#059669; }
.notif-icon.announcement { background:#dbeafe; color:#1d4ed8; }
.notif-icon.alert        { background:#ffedd5; color:#c2410c; }
.notif-icon.reminder     { background:#ede9fe; color:#7c3aed; }
.notif-icon.urgent       { background:#fee2e2; color:#dc2626; box-shadow:0 0 0 2px #fca5a5; }

.notif-content { min-width:0; }
.notif-title   { font-size:13px; font-weight:700; color:var(--ink); margin-bottom:3px; }
.notif-row.is-read .notif-title { font-weight:600; color:var(--ink-2); }
.notif-body    { font-size:13px; color:var(--ink-2); line-height:1.55; margin-bottom:6px; }
.notif-row.is-read .notif-body { color:var(--muted); }
.notif-foot    { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.notif-time    { font-size:11px; color:var(--muted); }
.type-tag      { display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:20px; font-size:10px; font-weight:700; }
.type-tag.general      { background:#d1fae5; color:#065f46; }
.type-tag.announcement { background:#dbeafe; color:#1d4ed8; }
.type-tag.alert        { background:#ffedd5; color:#c2410c; }
.type-tag.reminder     { background:#ede9fe; color:#7c3aed; }
.type-tag.urgent       { background:#fee2e2; color:#dc2626; }
.read-tick { width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; }
.read-tick.unread { background:#dbeafe; color:#1d4ed8; cursor:pointer; transition:background .15s; }
.read-tick.unread:hover { background:#93c5fd; }
.read-tick.done   { background:#d1fae5; color:#059669; }
.unread-dot { width:8px; height:8px; border-radius:50%; background:#3b82f6; flex-shrink:0; align-self:center; }

/* EMPTY */
.empty-state { text-align:center; padding:60px 20px; color:var(--muted); }
.empty-state i { font-size:40px; opacity:.25; display:block; margin-bottom:14px; }
.empty-state h3 { font-size:15px; font-weight:700; color:var(--ink-2); margin-bottom:4px; }
.empty-state p  { font-size:13px; }

/* SIDEBAR WIDGET */
.widget { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin-bottom:14px; }
.widget-head { padding:12px 14px; border-bottom:1px solid var(--border); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.widget-body { padding:14px; }
.summary-item { display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--border); font-size:13px; }
.summary-item:last-child { border-bottom:none; }
.summary-label { color:var(--ink-2); display:flex; align-items:center; gap:7px; }
.summary-num   { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:14px; color:var(--ink); }
.unread-banner { background:linear-gradient(135deg,#3b82f6,#6366f1); border-radius:10px; padding:16px; color:#fff; text-align:center; margin-bottom:14px; }
.unread-banner .big-num { font-size:40px; font-weight:700; font-family:'JetBrains Mono',monospace; line-height:1; }
.unread-banner .label   { font-size:12px; opacity:.8; margin-top:4px; }

@media(max-width:1100px) { .layout-split { grid-template-columns:1fr; } }
@media(max-width:768px)  { .sidebar { transform:translateX(-100%); } .sidebar:not(.hidden) { transform:none; } .content { margin-left:0; } .page { padding:16px; } }
</style>
</head>
<body>
<div class="layout">

<!-- SIDEBAR -->
<nav class="sidebar" id="sidebar">
  <div class="sidebar-brand">
    <div class="brand-logo">M</div>
    <div>
      <div class="brand-name">MPC</div>
      <div class="brand-sub"><?php echo ucfirst($my_role); ?> Portal</div>
    </div>
  </div>
  <nav class="nav-section">
    <ul style="list-style:none">
      <?php if ($my_role === 'admin' || $my_role === 'manager'): ?>
      <li class="nav-item"><a href="dashboard_admin.php" class="nav-link"><i class="fas fa-sitemap"></i> Organisation Chart</a></li>
      <?php else: ?>
      <li class="nav-item"><a href="dashboard_employee.php" class="nav-link"><i class="fas fa-home"></i> Dashboard</a></li>
      <?php endif; ?>
      <li class="nav-item"><a href="view_notifications.php" class="nav-link active"><i class="fas fa-bell"></i> Notifications
        <?php if ($unread_count > 0): ?>
        <span style="background:#ef4444;color:#fff;border-radius:20px;padding:0 6px;font-size:10px;margin-left:auto"><?php echo $unread_count; ?></span>
        <?php endif; ?>
      </a></li>
    </ul>
  </nav>
  <div class="sidebar-footer">
    <a href="logout.php" class="nav-link" style="color:#f87171;"><i class="fas fa-sign-out-alt"></i> Logout</a>
  </div>
</nav>

<!-- CONTENT -->
<div class="content" id="content">
  <div class="topbar">
    <button class="hamburger-btn" onclick="toggleSidebar()"><i class="fas fa-bars"></i></button>
    <div class="topbar-breadcrumb">
      <span>My Account</span>
      <i class="fas fa-chevron-right" style="font-size:10px;color:var(--border)"></i>
      <span class="current">Notifications</span>
    </div>
    <div class="topbar-spacer"></div>
    <div class="topbar-user">
      <div class="topbar-avatar"><?php echo strtoupper(substr($username ?: 'U', 0, 1)); ?></div>
      <?php echo h($username); ?>
    </div>
  </div>

  <div class="page">
    <div class="page-header">
      <div>
        <div class="page-title">
          🔔 My Notifications
          <?php if ($unread_count > 0): ?>
          <span style="display:inline-flex;align-items:center;justify-content:center;background:#ef4444;color:#fff;border-radius:20px;padding:2px 10px;font-size:13px;margin-left:8px;vertical-align:middle"><?php echo $unread_count; ?> new</span>
          <?php endif; ?>
        </div>
        <div class="page-subtitle">Notifications addressed to you, your role, or your team</div>
      </div>
      <?php if ($unread_count > 0): ?>
      <form method="POST">
        <input type="hidden" name="action" value="mark_all_read">
        <button type="submit" class="btn-mark-all"><i class="fas fa-check-double"></i> Mark all as read</button>
      </form>
      <?php endif; ?>
    </div>

    <!-- Filter Chips -->
    <?php
    $type_counts = [];
    foreach ($all_notifs as $n) {
        $type_counts[$n['type']] = ($type_counts[$n['type']] ?? 0) + 1;
    }
    $unread_by_type = [];
    foreach ($all_notifs as $n) {
        if (!$n['is_read']) $unread_by_type[$n['type']] = ($unread_by_type[$n['type']] ?? 0) + 1;
    }
    ?>
    <div class="filter-row">
      <a href="?filter=all"      class="filter-chip<?php echo $filter==='all'      ?' active':''; ?>">All <span class="chip-count"><?php echo count($all_notifs); ?></span></a>
      <?php if ($unread_count > 0): ?>
      <a href="?filter=unread"   class="filter-chip<?php echo $filter==='unread'   ?' active':''; ?>" style="<?php echo $filter!=='unread'?'border-color:#ef4444;color:#dc2626':''; ?>">Unread <span class="chip-count"><?php echo $unread_count; ?></span></a>
      <?php endif; ?>
      <?php foreach ($type_labels as $tk => $tl): if (empty($type_counts[$tk])) continue; ?>
      <a href="?filter=<?php echo $tk; ?>" class="filter-chip<?php echo $filter===$tk?' active':''; ?>"><?php echo $tl; ?> <span class="chip-count"><?php echo $type_counts[$tk]; ?></span></a>
      <?php endforeach; ?>
    </div>

    <div class="layout-split">

      <!-- Main Feed -->
      <div>
        <div class="card">
          <?php
          $filtered = array_filter($all_notifs, function($n) use ($filter) {
              if ($filter === 'all')    return true;
              if ($filter === 'unread') return !$n['is_read'];
              return $n['type'] === $filter;
          });
          ?>
          <?php if (empty($filtered)): ?>
          <div class="empty-state">
            <i class="fas fa-bell-slash"></i>
            <h3>No notifications here</h3>
            <p>You're all caught up!</p>
          </div>
          <?php else: ?>
          <div class="notif-feed">
            <?php foreach ($filtered as $n):
              $ti    = $type_icons[$n['type']] ?? ['icon'=>'fa-bell','cls'=>'general'];
              $unread_cls = $n['is_read'] ? 'is-read' : ('unread unread-' . h($n['type']));
              $time  = relTime($n['created_at']);
              $full_dt = date('d M Y, g:i a', strtotime($n['created_at']));
            ?>
            <div class="notif-row <?php echo $unread_cls; ?>" id="nrow-<?php echo $n['id']; ?>">
              <div class="notif-icon <?php echo h($ti['cls']); ?>">
                <i class="fas <?php echo h($ti['icon']); ?>"></i>
              </div>
              <div class="notif-content">
                <div class="notif-title"><?php echo h($n['title']); ?></div>
                <div class="notif-body"><?php echo nl2br(h($n['message'])); ?></div>
                <div class="notif-foot">
                  <span class="type-tag <?php echo h($n['type']); ?>"><?php echo h($type_labels[$n['type']] ?? $n['type']); ?></span>
                  <span class="notif-time" title="<?php echo h($full_dt); ?>"><i class="far fa-clock" style="margin-right:3px"></i><?php echo $time; ?></span>
                  <?php if ($n['is_read'] && $n['read_at']): ?>
                  <span class="notif-time"><i class="fas fa-check" style="color:#059669;margin-right:3px"></i>Read <?php echo relTime($n['read_at']); ?></span>
                  <?php endif; ?>
                </div>
              </div>
              <div>
                <?php if (!$n['is_read']): ?>
                <form method="POST" style="display:inline">
                  <input type="hidden" name="action" value="mark_read">
                  <input type="hidden" name="notif_id" value="<?php echo $n['id']; ?>">
                  <button type="submit" class="read-tick unread" title="Mark as read">
                    <i class="fas fa-check"></i>
                  </button>
                </form>
                <?php else: ?>
                <div class="read-tick done" title="Read"><i class="fas fa-check"></i></div>
                <?php endif; ?>
              </div>
            </div>
            <?php endforeach; ?>
          </div>
          <?php endif; ?>
        </div>
      </div>

      <!-- Sidebar Summary -->
      <div>
        <?php if ($unread_count > 0): ?>
        <div class="unread-banner">
          <div class="big-num"><?php echo $unread_count; ?></div>
          <div class="label">unread notification<?php echo $unread_count != 1 ? 's' : ''; ?></div>
        </div>
        <?php endif; ?>

        <div class="widget">
          <div class="widget-head"><i class="fas fa-chart-pie"></i> Summary</div>
          <div class="widget-body">
            <div class="summary-item">
              <span class="summary-label"><i class="fas fa-bell" style="color:#3b82f6;width:14px"></i>Total</span>
              <span class="summary-num"><?php echo count($all_notifs); ?></span>
            </div>
            <div class="summary-item">
              <span class="summary-label"><i class="fas fa-envelope" style="color:#dc2626;width:14px"></i>Unread</span>
              <span class="summary-num" style="color:#dc2626"><?php echo $unread_count; ?></span>
            </div>
            <div class="summary-item">
              <span class="summary-label"><i class="fas fa-check-double" style="color:#059669;width:14px"></i>Read</span>
              <span class="summary-num"><?php echo count($all_notifs) - $unread_count; ?></span>
            </div>
            <?php foreach ($type_labels as $tk => $tl): if (empty($type_counts[$tk])) continue; ?>
            <div class="summary-item">
              <span class="summary-label">
                <i class="fas <?php echo $type_icons[$tk]['icon']; ?> notif-icon <?php echo $tk; ?>" style="width:14px;font-size:12px"></i>
                <?php echo $tl; ?>
              </span>
              <span class="summary-num"><?php echo $type_counts[$tk]; ?></span>
            </div>
            <?php endforeach; ?>
          </div>
        </div>

        <!-- Urgent ones highlighted -->
        <?php
        $urgents = array_filter($all_notifs, fn($n) => $n['type'] === 'urgent' && !$n['is_read']);
        if (!empty($urgents)):
        ?>
        <div class="widget">
          <div class="widget-head" style="color:#dc2626"><i class="fas fa-circle-exclamation"></i> Urgent – Action Needed</div>
          <div class="widget-body" style="padding:0">
            <?php foreach ($urgents as $n): ?>
            <div style="padding:12px 14px;border-bottom:1px solid var(--border);">
              <div style="font-size:13px;font-weight:700;color:var(--ink);margin-bottom:2px"><?php echo h($n['title']); ?></div>
              <div style="font-size:12px;color:var(--muted)"><?php echo relTime($n['created_at']); ?></div>
            </div>
            <?php endforeach; ?>
          </div>
        </div>
        <?php endif; ?>
      </div>

    </div>
  </div><!-- /page -->
</div><!-- /content -->
</div><!-- /layout -->

<script>
function toggleSidebar() { document.getElementById('sidebar').classList.toggle('hidden'); document.getElementById('content').classList.toggle('expanded'); }
</script>
</body>
</html>