118 lines
5.0 KiB
PHP

<?php
/**
* topbar.php — Barra superior del sistema
* Variables esperadas: $pageTitle, $breadcrumbs (array)
*/
$db = getDB();
$stmt = $db->prepare("SELECT COUNT(*) FROM notificaciones WHERE usuario_id=? AND leida=0");
$stmt->execute([$_SESSION['usuario_id'] ?? 0]);
$notifCount = (int)$stmt->fetchColumn();
$stmt2 = $db->prepare(
"SELECT n.*, o.numero_oficio FROM notificaciones n
LEFT JOIN oficios o ON o.id = n.oficio_id
WHERE n.usuario_id = ? AND n.leida = 0
ORDER BY n.created_at DESC LIMIT 8"
);
$stmt2->execute([$_SESSION['usuario_id'] ?? 0]);
$notifList = $stmt2->fetchAll();
$tipoIconos = [
'vencimiento' => ['icon'=>'fa-clock', 'color'=>'#ef4444'],
'derivacion' => ['icon'=>'fa-reply', 'color'=>'#3b82f6'],
'escalacion' => ['icon'=>'fa-arrow-up', 'color'=>'#f59e0b'],
'sistema' => ['icon'=>'fa-bell', 'color'=>'#6f42c1'],
'tarea' => ['icon'=>'fa-check-circle', 'color'=>'#10b981'],
];
?>
<div class="main-content" id="mainContent">
<!-- Topbar -->
<header class="topbar">
<!-- Hamburger (móvil) -->
<button class="btn-icon" id="sidebarToggle" aria-label="Menú">
<i class="fa-solid fa-bars"></i>
</button>
<!-- Title -->
<div class="topbar-title" id="topbarTitle">
<?= htmlspecialchars($pageTitle ?? 'Dashboard') ?>
</div>
<!-- Actions -->
<div class="topbar-actions">
<!-- Búsqueda global -->
<div class="search-bar" style="display:none;" id="globalSearchWrap">
<i class="fa-solid fa-search"></i>
<input type="text" class="form-control" placeholder="Buscar oficios…" id="globalSearch" style="width:220px">
</div>
<button class="btn-icon" id="toggleSearch" title="Buscar">
<i class="fa-solid fa-search"></i>
</button>
<!-- Toggle modo oscuro -->
<button class="btn-icon" id="themeToggle" title="Cambiar tema">
<i class="fa-solid fa-moon" id="themeIcon"></i>
</button>
<!-- Notificaciones -->
<div style="position:relative">
<button class="btn-icon" id="notifToggle" title="Notificaciones">
<i class="fa-solid fa-bell"></i>
<?php if ($notifCount): ?>
<span class="notif-dot"></span>
<?php endif; ?>
</button>
<!-- Dropdown notificaciones -->
<div class="notif-dropdown" id="notifDropdown">
<div style="padding:.875rem 1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between">
<strong style="font-size:.88rem">Notificaciones</strong>
<?php if ($notifCount): ?>
<span class="badge badge-danger"><?= $notifCount ?> nuevas</span>
<?php endif; ?>
</div>
<?php if (empty($notifList)): ?>
<div style="padding:1.5rem;text-align:center;color:var(--text-muted);font-size:.83rem">
<i class="fa-solid fa-bell-slash" style="font-size:1.5rem;margin-bottom:.5rem;display:block;opacity:.4"></i>
Sin notificaciones pendientes
</div>
<?php else: ?>
<?php foreach ($notifList as $n):
$ic = $tipoIconos[$n['tipo']] ?? $tipoIconos['sistema'];
?>
<a href="<?= APP_URL ?>/views/oficios/detalle.php?id=<?= $n['oficio_id'] ?>&notif=<?= $n['id'] ?>"
class="notif-item <?= $n['leida'] ? '' : 'unread' ?>">
<div class="notif-icon" style="background:<?= $ic['color'] ?>20;color:<?= $ic['color'] ?>">
<i class="fa-solid <?= $ic['icon'] ?>"></i>
</div>
<div style="flex:1;min-width:0">
<div style="font-weight:600;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
<?= htmlspecialchars($n['titulo']) ?>
</div>
<div style="font-size:.73rem;color:var(--text-muted);margin-top:.15rem">
<?= htmlspecialchars(mb_strimwidth($n['mensaje'], 0, 70, '…')) ?>
</div>
<div style="font-size:.7rem;color:var(--text-muted);margin-top:.2rem">
<?= date('d/m/Y H:i', strtotime($n['created_at'])) ?>
</div>
</div>
</a>
<?php endforeach; ?>
<a href="<?= APP_URL ?>/views/notificaciones.php" style="display:block;padding:.75rem;text-align:center;font-size:.8rem;color:var(--primary);text-decoration:none;border-top:1px solid var(--border)">
Ver todas las notificaciones
</a>
<?php endif; ?>
</div>
</div>
<!-- Avatar usuario -->
<a href="<?= APP_URL ?>/views/usuarios/perfil.php" class="btn-icon" title="Mi perfil">
<div style="width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));display:grid;place-items:center;color:#fff;font-weight:700;font-size:.75rem">
<?= implode('', array_map(fn($p) => strtoupper($p[0]), array_slice(explode(' ', $_SESSION['usuario_nombre'] ?? 'U'), 0, 2))) ?>
</div>
</a>
</div>
</header>