<?php
// Obtener el nombre del archivo actual (sin la ruta)
$current_page = basename($_SERVER['PHP_SELF']);
?>

<nav class="w-16 bg-white shadow-lg flex flex-col items-center fixed top-0 left-0 h-full py-4">
  <!-- Logo -->
  <a href="personal.php" class="flex items-center text-3xl font-black mt-2 mb-8">
    <img src="https://cybernovasystems.com/prueba/pago/imagenes/logocofi.jpg" alt="Logo" class="w-12 h-12 mr-2">
  </a>

  <!-- Menú de navegación -->
  <?php
    $menu_items = [
        ['href' => 'personal.php', 'title' => 'Personal', 'icon' => 'fas fa-user'],
        ['href' => 'series.php', 'title' => 'Series', 'icon' => 'fas fa-tv'],
        ['href' => 'trabajos.php', 'title' => 'Trabajos', 'icon' => 'fas fa-briefcase'],
        ['href' => 'lista_trabajos_liquidados.php', 'title' => 'Trabajos Liquidados', 'icon' => 'fas fa-check-circle'],
        ['href' => 'trabajos_bloqueado.php', 'title' => 'Bloqueados', 'icon' => 'fas fa-ban'],
        ['href' => 'sistema_usuario.php', 'title' => 'Sistema Usuario', 'icon' => 'fas fa-cogs'], // Agregado aquí
    ];

    foreach ($menu_items as $item) {
        $active_class = ($current_page == basename($item['href'])) ? 'active' : '';
        echo '<a href="' . $item['href'] . '" title="' . $item['title'] . '" class="nav-link ' . $active_class . '">
                <i class="' . $item['icon'] . ' text-3xl opacity-25 hover:opacity-100 mb-10 cursor-pointer transition-opacity duration-300"></i>
              </a>';
    }
  ?>

  <!-- Cerrar sesión -->
  <a href="logout.php" title="Cerrar sesión" class="mt-auto mb-4 nav-link <?php echo ($current_page == 'logout.php') ? 'active' : ''; ?>">
    <i class="fas fa-sign-out-alt text-3xl opacity-25 hover:opacity-100 cursor-pointer transition-opacity duration-300"></i>
  </a>
</nav>

<style>
  .active {
    opacity: 1 !important; /* Resalta la opción activa */
    color: #007bff; /* Cambia el color de la opción activa */
  }

 link:hover {
    background-color: #f0f0f0; /* Color de fondo al pasar el mouse */
  }

  /* Estilo general */
  .text-3xl {
    font-size: 2rem;
  }

  .opacity-25 {
    opacity: 0.25;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .transition-opacity {
    transition: opacity 0.3s;
  }
</style>
