<?php
session_start();
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
header("Expires: Sat, 01 Jan 2000 00:00:00 GMT");

if (!isset($_SESSION['usuario'])) {
    header("Location: ../../Controlador/Utilidades/Sesion_Destroy.php");
    exit();
}

// Normaliza valores de sesión
$rol        = isset($_SESSION['rol']) ? $_SESSION['rol'] : '';
$nombre     = isset($_SESSION['nombre']) ? $_SESSION['nombre'] : '';
$idUsuario  = isset($_SESSION['id_usuario']) ? (string)$_SESSION['id_usuario'] : '';
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>TSGJ - Control de Operaciones</title>

  <link rel="icon" type="image/png" href="../../Modelo/Archivos_Media/Color_LogoTipo.png" />
  <link rel="stylesheet" href="../../Modelo/Archivos_CSS/Menu_Navegacion.css" />
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.12/dist/sweetalert2.all.min.js"></script>
  <script src="https://cdn.lordicon.com/lordicon.js"></script>
  <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <!-- n8n chat CSS -->
  <link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
</head>

<body class="responsive-layout">

  <!-- Sidebar -->
  <nav class="sidebar">
    <header>
      <div class="image-text">
        <span class="image">
          <img src="../../Modelo/Archivos_Media/logo_sin.png" alt="Logo" />
        </span>
        <div class="text logo-text">
          <span class="profession">TSGJ - V1 - 2025</span>
        </div>
      </div>
      <i class='bx bx-chevron-left toggle-desktop'></i>
    </header>

    <br>

    <div class="menu-bar">
      <div class="menu">
        <ul class="menu-links">
          <?php if ($rol === 'administrador'): ?>
            <li class="nav-link">
              <a href="#" data-section="InicioAdministrador">
                <i class='bx bx-home icon'></i><span class="text nav-text">Inicio</span>
              </a>
            </li>
            <li class="nav-link">
              <a href="#" data-section="Dashboard">
                <i class='bx bxs-dashboard icon'></i><span class="text nav-text">Dashboard</span>
              </a>
            </li>
            <li class="nav-link">
              <a href="#" data-section="GestionUsuarios">
                <i class='bx bx-user icon'></i><span class="text nav-text">Usuarios</span>
              </a>
            </li>
          <?php endif; ?>

          <?php if ($rol === 'supervisor'): ?>
            <li class="nav-link">
              <a href="#" data-section="InicioSupervisor">
                <i class='bx bx-home icon'></i><span class="text nav-text">Inicio</span>
              </a>
            </li>
          <?php endif; ?>

          <!-- Módulos compartidos -->
          <li class="nav-link">
            <a href="#" data-section="GestionVehicular">
              <i class='bx bx-bus icon'></i><span class="text nav-text">Flota</span>
            </a>
          </li>
          <li class="nav-link">
            <a href="#" data-section="GestionChoferes">
              <i class='bx bxs-id-card icon'></i><span class="text nav-text">Conductores</span>
            </a>
          </li>
          <li class="nav-link">
            <a href="#" data-section="GestionGrifos">
              <i class='bx bxs-gas-pump icon'></i><span class="text nav-text">Grifos</span>
            </a>
          </li>

          <li class="nav-link">
            <a href="#" data-section="GestionGaloneras">
              <i class='bx bx-droplet icon'></i><span class="text nav-text">Galoneras</span>
            </a>
          </li>

          <li class="nav-link">
            <a href="#" data-section="GestionControlCombustible">
              <i class='bx bx-tachometer icon'></i><span class="text nav-text">Abastecimientos</span>
            </a>
          </li>

          <!-- Mant. Aceite existente -->
          <li class="nav-link">
            <a href="#" data-section="MantAceite">
              <i class='bx bx-wrench icon'></i><span class="text nav-text">Mant. Aceite</span>
            </a>
          </li>

          <!-- === NUEVO: Repuestos (Catálogo) === -->
          <li class="nav-link">
            <a href="#" data-section="GestionRepuestos">
              <i class='bx bx-package icon'></i><span class="text nav-text">Repuestos</span>
            </a>
          </li>

          <!-- === NUEVO: Kardex / Movimientos de Repuestos === -->
          <li class="nav-link">
            <a href="#" data-section="GestionRepMovimientos">
              <i class='bx bx-notepad icon'></i><span class="text nav-text">Kardex Repuestos</span>
            </a>
          </li>

          <li class="nav-link">
            <a href="#" data-section="GestionRutas">
              <i class='bx bxs-map icon'></i><span class="text nav-text">Rutas</span>
            </a>
          </li>
          <li class="nav-link">
            <a href="#" data-section="CalcularKilometraje">
              <i class='bx bx-calculator icon'></i><span class="text nav-text">Calcular KM</span>
            </a>
          </li>
        </ul>
      </div>

      <div class="bottom-content">
        <li class="mode">
          <a href="../../Controlador/Utilidades/Sesion_Destroy.php" id="cerrarSesionBtn">
            <i class='bx bx-log-out icon'></i>
            <span class="text nav-text">Cerrar Sesi&oacute;n</span>
          </a>
        </li>
      </div>
    </div>
  </nav>

  <div class="toggle-btn">
    <i class='bx bx-menu toggle toggle-mobile'></i>
  </div>

  <div class="overlay"></div>

  <!-- Bienvenida -->
  <?php
  if (!empty($nombre)) {
      if (!isset($_SESSION['yaMostroBienvenida'])) {
          $_SESSION['yaMostroBienvenida'] = true;
      }
  ?>
      <div id="titulo-container">
          <h2>Bienvenido <?= htmlspecialchars(ucfirst($rol)) ?> - <?= htmlspecialchars($nombre) ?></h2>
      </div>
  <?php
  } else {
      header('Location: ../../Controlador/Utilidades/Sesion_Destroy.php');
      exit;
  }
  ?>

  <!-- Contenedor Iframes -->
  <div id="iframe-container">
    <?php if ($rol === 'administrador'): ?>
      <section id="InicioAdministrador" style="display:none;">
        <iframe src="../Administrador/Adm_Inicio.php" title="Inicio Administrador"></iframe>
      </section>
      <section id="Dashboard" style="display:none;">
        <iframe src="../Administrador/Adm_Dashboard.php" title="Dashboard"></iframe>
      </section>
      <section id="GestionUsuarios" style="display:none;">
        <iframe src="../Administrador/Adm_Gestion_Usuarios.php" title="Gestión de Usuarios"></iframe>
      </section>
    <?php endif; ?>

    <?php if ($rol === 'supervisor'): ?>
      <section id="InicioSupervisor" style="display:none;">
        <iframe src="../Supervisor/Sup_Inicio.php" title="Inicio Supervisor"></iframe>
      </section>
    <?php endif; ?>

    <!-- Ajusta estas rutas si tienes vistas separadas por rol -->
    <section id="GestionVehicular" style="display:none;">
      <iframe src="../Administrador/Adm_Gestion_Vehicular.php" title="Gestión Vehicular"></iframe>
    </section>
    <section id="GestionChoferes" style="display:none;">
      <iframe src="../Administrador/Adm_Gestion_Choferes.php" title="Gestión de Conductores"></iframe>
    </section>
    <section id="GestionGrifos" style="display:none;">
      <iframe src="../Administrador/Adm_Gestion_Grifos.php" title="Gestión de Grifos"></iframe>
    </section>

    <!-- Catálogo de Galoneras -->
    <section id="GestionGaloneras" style="display:none;">
      <iframe src="../Administrador/Adm_Gestion_Galoneras.php" title="Gestión de Galoneras"></iframe>
    </section>

    <section id="GestionControlCombustible" style="display:none;">
      <iframe src="../Administrador/Adm_Gestion_Abastecimientos.php" title="Gestión de Abastecimientos"></iframe>
    </section>

    <!-- Mant. Aceite existente -->
    <section id="MantAceite" style="display:none;">
      <iframe src="../Administrador/Adm_Mant_Aceite.php" title="Mantenimiento de Aceite"></iframe>
    </section>

    <!-- === NUEVO: Repuestos (Catálogo) === -->
    <section id="GestionRepuestos" style="display:none;">
      <iframe src="../Administrador/Adm_Gestion_Repuestos.php" title="Gestión de Repuestos"></iframe>
    </section>

    <!-- === NUEVO: Kardex / Movimientos === -->
    <section id="GestionRepMovimientos" style="display:none;">
      <iframe src="../Administrador/Adm_Gestion_Rep_Movimientos.php" title="Kardex / Movimientos de Repuestos"></iframe>
    </section>

    <section id="GestionRutas" style="display:none;">
      <iframe src="../Administrador/Adm_Gestion_Rutas.php" title="Gestión de Rutas"></iframe>
    </section>
    <section id="CalcularKilometraje" style="display:none;">
      <iframe src="../Administrador/Adm_Gestion_CalcularKM.php" title="Calcular Kilometraje"></iframe>
    </section>
  </div>

  <!-- JS personalizado -->
  <script src="../../Modelo/Archivos_JS/Notifi_Inicio_Session.js"></script>
  <script src="../../Modelo/Archivos_JS/Flecha_Barra_Nav_Adm.js"></script>
  <script src="../../Modelo/Archivos_JS/Notifi_Cerrar_Session.js"></script>
  <script src="../../Modelo/Archivos_JS/Menu_Navegacion_Dashboard.js"></script>

  <script>
    // Navegación y sección inicial por rol
    $(document).ready(function(){
      const rol = "<?= htmlspecialchars($rol) ?>";

      // Sección inicial por rol
      if (rol === 'administrador') {
        mostrarSeccion('InicioAdministrador');
      } else if (rol === 'supervisor') {
        mostrarSeccion('InicioSupervisor');
      }

      // Click en opciones del menú
      $(".nav-link a").on("click", function(e) {
        e.preventDefault();
        const sectionId = $(this).data("section");
        if (!sectionId) return;
        mostrarSeccion(sectionId);
      });
    });

    function mostrarSeccion(sectionId) {
      $("#iframe-container section").hide();
      $("#" + sectionId).show();
    }
  </script>

  <!-- Contenedor requerido por n8n-chat (aunque el modo sea "window") -->
  <div id="n8n-chat"></div>

  <!-- n8n Chat - Selección de webhook por rol + metadata -->
  <script type="module">
    import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';

    const userMeta = {
      id: "<?= htmlspecialchars($idUsuario) ?>",
      nombre: "<?= htmlspecialchars($nombre) ?>",
      rol: "<?= htmlspecialchars($rol) ?>"
    };

    const webhookUrl = "<?= ($rol === 'administrador')
      ? 'https://automatizacion-n8n.yquyby.easypanel.host/webhook/a889d2ae-2159-402f-b326-5f61e90f602e/chat'
      : 'https://automatizacion-n8n.yquyby.easypanel.host/webhook/3a479267-3973-4c25-80f5-1db4916e8538/chat'
    ?>";

    const initialMsgs = <?= ($rol === 'administrador')
      ? json_encode(['¡Hola, Administrador! 👋', '¿Cómo puedo ayudarte hoy?'])
      : json_encode(['¡Hola, Supervisor! 👋', '¿Cómo puedo ayudarte hoy?'])
    ?>;

    createChat({
      webhookUrl,
      webhookConfig: {
        method: 'POST',
        headers: {}
      },
      target: '#n8n-chat',
      mode: 'window',
      chatInputKey: 'chatInput',
      chatSessionKey: 'sessionId',
      loadPreviousSession: true,
      metadata: userMeta,
      showWelcomeScreen: false,
      defaultLanguage: 'es',
      initialMessages: initialMsgs,
      i18n: {
        es: {
          title: '¡Hola! 👋',
          subtitle: 'Estamos disponibles 24/7.',
          footer: '',
          getStarted: 'Pregunta lo que quieras',
          inputPlaceholder: 'Pregunta lo que quieras',
        },
      },
    });
  </script>

</body>
</html>
