Tul xxx Tul

Viewing: admin_header.php

<?php
if (session_status() !== PHP_SESSION_ACTIVE) {
   session_start();
}

require_once __DIR__ . '/admin_roles.php';
ensureAdminRolesSchema($conn);

$adminRole = getRoleBySession($conn);
$_SESSION['admin_role'] = $adminRole;
$current_page = basename($_SERVER['PHP_SELF']);
enforceAdminPermissionForFile($current_page);

$roleLabels = getAvailableAdminRoles();
$currentRoleLabel = $roleLabels[$adminRole] ?? ucfirst($adminRole);

if (!isset($message) || !is_array($message)) {
   $message = [];
}

if (!empty($_SESSION['flash_messages']) && is_array($_SESSION['flash_messages'])) {
   foreach ($_SESSION['flash_messages'] as $flashMessage) {
      $message[] = $flashMessage;
   }
   unset($_SESSION['flash_messages']);
}

if(isset($message) && is_array($message)){
   foreach($message as $msg){
      echo '
      <div class="message">
         <span>'.$msg.'</span>
         <i class="fas fa-times" onclick="this.parentElement.remove();"></i>
      </div>
      ';
   }
}

if (!isset($fetch_profile) || !$fetch_profile) {
   $select_profile = $conn->prepare("SELECT * FROM `admin` WHERE id = ?");
   $select_profile->execute([$admin_id]);
   $fetch_profile = $select_profile->fetch(PDO::FETCH_ASSOC);
}

if (!$fetch_profile) {
   $fetch_profile = ['name' => 'Administrador'];
}
?>
<link rel="icon" href="../images/favicon.png" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
:root {
  --sidebar-width: 240px;
  --topbar-height: 70px;
  --color-primary: #b30000;
  --color-primary-dark: #7a0000;
  --color-highlight: #ffc107;
  --color-muted: rgba(255, 255, 255, 0.65);
  --color-text: #111;
  --color-bg: #f7f7f7;
}

body.admin-panel {
  font-family: 'Montserrat', Arial, sans-serif;
  margin: 0;
  padding-top: var(--topbar-height);
  padding-left: 0;
  transition: padding 0.3s ease;
  min-height: 100vh;
  position: relative;
  background: #f4f4f4;
}

@media (min-width: 992px) {
  body.admin-panel {
    padding-left: var(--sidebar-width);
  }
}

body.admin-panel.sidebar-open {
  overflow: hidden;
}

.admin-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: linear-gradient(185deg, #b30000 0%, #7a0000 74%, #510000 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.1rem 1.8rem;
  box-shadow: 10px 0 26px rgba(179, 0, 0, 0.18);
  z-index: 1050;
  transition: transform 0.3s ease;
}


.admin-sidebar .sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 2.2rem;
  text-align: center;
}

.admin-sidebar .sidebar-brand img {
  width: 120px;
  height: 120px;
  border-radius: 28px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
  object-position: center;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.15rem;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.3px;
  position: relative;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-link i {
  font-size: 1.45rem;
}

.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateX(6px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22);
}

.sidebar-link.active {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.28);
}

.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: -1.2rem;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 12px;
  background: var(--color-highlight);
}

 .sidebar-footer {
   display: none;
 }

.admin-topbar {
  position: fixed;
  top: 0;
  left: 0;
  height: var(--topbar-height);
  background: linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.68) 100%);
  backdrop-filter: saturate(175%) blur(12px);
  -webkit-backdrop-filter: saturate(175%) blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  z-index: 1040;
  transition: left 0.3s ease, width 0.3s ease, background 0.2s ease, box-shadow 0.2s ease, backdrop-filter 0.2s ease;
}

.admin-topbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-highlight) 100%);
  opacity: 0.85;
}

.admin-topbar.scrolled {
  background: rgba(255,255,255,0.95);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.10);
}

@media (min-width: 992px) {
  .admin-topbar {
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
  }
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sidebar-toggle {
  border: none;
  background: rgba(255,255,255,0.7);
  color: var(--color-primary);
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 12px;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  display: none;
}

.sidebar-toggle:hover {
  background: rgba(255,255,255,0.9);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  position: relative;
}

.topbar-avatar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(255,255,255,0.55), rgba(255,255,255,0.35));
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06), inset 0 -2px 10px rgba(0,0,0,0.03);
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.topbar-avatar::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1db954;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(179,0,0,0.25);
}

.topbar-avatar::before {
  content: '';
  position: absolute;
  left: -30%; top: -120%;
  width: 60%; height: 300%;
  transform: rotate(25deg);
  background: linear-gradient(120deg, rgba(255,255,255,0.0), rgba(255,255,255,0.35), rgba(255,255,255,0.0));
  transition: transform .4s ease, opacity .3s ease;
  opacity: 0;
}

.topbar-avatar:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
  background: linear-gradient(120deg, rgba(255,255,255,0.65), rgba(255,255,255,0.45));
  border-color: rgba(255,255,255,0.85);
}

.topbar-avatar:hover::before { 
  transform: rotate(25deg) translateX(160%); 
  opacity: 1; 
}

.topbar-avatar img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  border: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(179,0,0,0.55), 0 10px 20px rgba(179,0,0,0.18);
}

.topbar-avatar span {
  font-weight: 700;
  color: var(--color-text);
  background: linear-gradient(90deg, var(--color-primary) 0%, #222 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.profile {
  position: absolute;
  top: calc(100% + 12px);
  right: 2rem;
  min-width: 240px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 1.1rem 1.4rem;
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 1055;
}

.profile::before {
  content: '';
  position: absolute;
  top: -10px;
  right: 36px;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  background: #fff;
  border-left: 1px solid rgba(0,0,0,0.05);
  border-top: 1px solid rgba(0,0,0,0.05);
}

.profile.active {
  display: flex;
  animation: fadeInProfile 0.25s ease;
}

.profile p {
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.profile .btn,
.profile .delete-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.6rem 0.85rem;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.profile .btn {
  background: linear-gradient(115deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(179, 0, 0, 0.22);
}

.profile .btn:hover {
  box-shadow: 0 14px 34px rgba(179, 0, 0, 0.28);
}

.profile .delete-btn {
  background: #fff5f5;
  color: var(--color-primary) !important;
  border: 1px solid rgba(179, 0, 0, 0.2);
}

.profile .delete-btn:hover {
  background: var(--color-primary);
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(179, 0, 0, 0.25);
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1035;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.show {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 991.98px) {
  .admin-sidebar {
    transform: translateX(-100%);
  }

  .admin-sidebar.show {
    transform: translateX(0);
  }

  .admin-topbar {
    left: 0;
    width: 100%;
    padding: 0 1.1rem;
  }

  .profile {
    right: 1rem;
  }
  .sidebar-toggle {
    display: inline-flex;
  }
}

@media (max-width: 575.98px) {
  .topbar-avatar span {
    display: none;
  }
}

@keyframes fadeInProfile {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>

<aside class="admin-sidebar" id="admin-sidebar" aria-label="Menú principal">
  <div class="sidebar-brand">
    <img src="../images/favicon.png" alt="D´ Lili Burguer">
  </div>
  <nav class="sidebar-nav">
    <?php if (adminCanAccess($adminRole, 'dashboard')): ?>
    <a href="dashboard.php" class="sidebar-link <?= $current_page === 'dashboard.php' ? 'active' : ''; ?>">
      <i class="fas fa-chart-line"></i>
      <span>Inicio</span>
    </a>
    <?php endif; ?>
<!--     <a href="messages.php" class="sidebar-link <?= $current_page === 'messages.php' ? 'active' : ''; ?>">
      <i class="fas fa-receipt"></i>
      <span>Pedidos</span>
    </a> -->
    <?php if (adminCanAccess($adminRole, 'dine_in_orders')): ?>
    <a href="dine_in_orders.php" class="sidebar-link <?= $current_page === 'dine_in_orders.php' ? 'active' : ''; ?>">
      <i class="fas fa-clipboard-list"></i>
      <span>Comandas</span>
    </a>
    <?php endif; ?>
    <?php if (adminCanAccess($adminRole, 'delivery_orders')): ?>
    <a href="delivery_orders.php" class="sidebar-link <?= $current_page === 'delivery_orders.php' ? 'active' : ''; ?>">
      <i class="fas fa-motorcycle"></i>
      <span>Pedidos a Domicilio</span>
    </a>
    <?php endif; ?>
    <?php if (adminCanAccess($adminRole, 'profit_reports')): ?>
    <a href="profit_reports.php" class="sidebar-link <?= $current_page === 'profit_reports.php' ? 'active' : ''; ?>">
      <i class="fas fa-sack-dollar"></i>
      <span>Reporte de Ganancias</span>
    </a>
    <?php endif; ?>
    <?php if (adminCanAccess($adminRole, 'delivery_zones')): ?>
    <a href="delivery_zones.php" class="sidebar-link <?= $current_page === 'delivery_zones.php' ? 'active' : ''; ?>">
      <i class="fas fa-location-dot"></i>
      <span>Zonas de Entrega</span>
    </a>
    <?php endif; ?>
    <?php if (adminCanAccess($adminRole, 'products')): ?>
    <a href="products.php" class="sidebar-link <?= $current_page === 'products.php' ? 'active' : ''; ?>">
      <i class="fas fa-utensils"></i>
      <span>Comidas</span>
    </a>
    <?php endif; ?>
    <?php if (adminCanAccess($adminRole, 'product_preparers')): ?>
    <a href="product_preparers.php" class="sidebar-link <?= $current_page === 'product_preparers.php' ? 'active' : ''; ?>">
      <i class="fas fa-user-check"></i>
      <span>Asignar preparadores</span>
    </a>
    <?php endif; ?>
    <?php if (adminCanAccess($adminRole, 'preparers')): ?>
    <a href="preparers.php" class="sidebar-link <?= $current_page === 'preparers.php' ? 'active' : ''; ?>">
      <i class="fas fa-user-tie"></i>
      <span>Preparadores</span>
    </a>
    <?php endif; ?>
    <?php if (adminCanAccess($adminRole, 'gallery')): ?>
    <a href="gallery.php" class="sidebar-link <?= $current_page === 'gallery.php' ? 'active' : ''; ?>">
      <i class="fas fa-images"></i>
      <span>Galería</span>
    </a>
    <?php endif; ?>
    <?php if (adminCanAccess($adminRole, 'admin_accounts')): ?>
    <a href="admin_accounts.php" class="sidebar-link <?= $current_page === 'admin_accounts.php' ? 'active' : ''; ?>">
      <i class="fas fa-user-gear"></i>
      <span>Usuarios</span>
    </a>
    <?php endif; ?>
  </nav>
  <div class="sidebar-footer">
    <a href="../index.php" target="_blank" rel="noopener">
      <i class="fas fa-external-link-alt"></i>
      <span>Ver Sitio</span>
    </a>
  </div>
</aside>

<div class="sidebar-overlay" id="sidebar-overlay" role="presentation"></div>

<header class="admin-topbar" id="admin-topbar">
  <div class="topbar-left">
    <button id="sidebar-toggle" class="sidebar-toggle" aria-label="Alternar menú">
      <i class="fas fa-bars"></i>
    </button>
  </div>
  <div class="topbar-right">
    <div class="topbar-avatar" id="user-btn" role="button" aria-haspopup="true" aria-expanded="false">
      <img src="../images/favicon.png" alt="Avatar administrador">
      <span><?= htmlspecialchars($fetch_profile['name'] ?? 'Administrador'); ?> · <?= htmlspecialchars($currentRoleLabel); ?></span>
      <i class="fas fa-chevron-down"></i>
    </div>
    <div class="profile" id="profile-box" role="menu">
      <p><i class="fas fa-user-circle"></i> <?= htmlspecialchars($fetch_profile['name'] ?? 'Administrador'); ?></p>
      <p><i class="fas fa-user-shield"></i> <?= htmlspecialchars($currentRoleLabel); ?></p>
      <a href="update_profile.php" class="btn" role="menuitem"><i class="fas fa-user-edit"></i> Actualizar Perfil</a>
      <a href="../index.php" class="delete-btn" role="menuitem" onclick="return confirm('Seguro que desea salir?');"><i class="fas fa-sign-out-alt"></i> Cerrar Sesión</a>
    </div>
  </div>
</header>

<script>
document.body.classList.add('admin-panel');

const sidebar = document.getElementById('admin-sidebar');
const sidebarToggle = document.getElementById('sidebar-toggle');
const sidebarOverlay = document.getElementById('sidebar-overlay');
const userBtn = document.getElementById('user-btn');
const profileBox = document.getElementById('profile-box');
const topbar = document.getElementById('admin-topbar');

function closeSidebar() {
  if (!sidebar) return;
  sidebar.classList.remove('show');
  sidebarOverlay?.classList.remove('show');
  document.body.classList.remove('sidebar-open');
}

sidebarToggle?.addEventListener('click', () => {
  const opening = sidebar?.classList.toggle('show');
  sidebarOverlay?.classList.toggle('show', !!opening);
  document.body.classList.toggle('sidebar-open', !!opening);
});

sidebarOverlay?.addEventListener('click', closeSidebar);

userBtn?.addEventListener('click', (event) => {
  event.stopPropagation();
  const expanded = profileBox?.classList.toggle('active');
  userBtn.setAttribute('aria-expanded', expanded ? 'true' : 'false');
});

document.addEventListener('click', (event) => {
  if (profileBox && !profileBox.contains(event.target) && !userBtn?.contains(event.target)) {
    profileBox.classList.remove('active');
    userBtn?.setAttribute('aria-expanded', 'false');
  }

  if (window.innerWidth < 992 && sidebar && !sidebar.contains(event.target) && !sidebarToggle?.contains(event.target)) {
    closeSidebar();
  }
});

window.addEventListener('resize', () => {
  if (window.innerWidth >= 992) {
    sidebar?.classList.remove('show');
    sidebarOverlay?.classList.remove('show');
    document.body.classList.remove('sidebar-open');
  }
  if (profileBox) {
    profileBox.classList.remove('active');
    userBtn?.setAttribute('aria-expanded', 'false');
  }
});

function updateTopbarScrolled() {
  if (!topbar) return;
  if (window.scrollY > 6) {
    topbar.classList.add('scrolled');
  } else {
    topbar.classList.remove('scrolled');
  }
}

updateTopbarScrolled();
window.addEventListener('scroll', updateTopbarScrolled);
</script>
User / IP	: 216.73.217.33
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64