<?php
session_start();
include("conexion.php");


// 🔐 Obtener datos del usuario
$id_usuario = $_SESSION['id_usuario'];
$usuario = $conexion->query("SELECT * FROM usuarios_sistema WHERE id_usuario = $id_usuario")->fetch_assoc();

$rol = $usuario['rol'];
$id_empresa_usuario = $usuario['id_empresa'];
$id_bodega_usuario = $usuario['id_bodega'];
?>

 <!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>nn</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.0.4/tailwind.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

<!-- partial:index.partial.html -->
<div class="relative bg-gray-100 min-h-screen flex" id="app">
 <?php include 'menu.php' ?>

<div class="w-full" style="margin-left: 50px;">
     <?php include 'user.php' ?>
  <div class="px-16 bg-header py-6">
    <!-- EMPRESAS Y BODEGAS COMBINADOS EN UN SOLO DIV -->
    <div class="card filter-menu bg-gray-100 rounded-2xl shadow-md p-4 mb-6">
        <div class="flex justify-between items-center">
            <div class="flex-1">
                <h2 class="text-sm font-semibold text-gray-700 mb-3">1. Selecciona una Empresa</h2>
                <div class="flex gap-2">
                    <?php
                    if ($rol == 'admin_general') {
                        $res_empresas = $conexion->query("SELECT * FROM empresas");
                    } else {
                        $res_empresas = $conexion->query("SELECT * FROM empresas WHERE id_empresa = $id_empresa_usuario");
                    }

                    // Mostrar las empresas en botones
                    while ($empresa = $res_empresas->fetch_assoc()) {
                        echo "<a href='?empresa={$empresa['id_empresa']}' class='inline-block'>
                                <button class='px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-full transition duration-200'>
                                    {$empresa['nombre']}
                                </button>
                              </a>";
                    }
                    ?>
                </div>
            </div>

            <!-- Si una empresa es seleccionada, mostrar las bodegas al lado derecho -->
            <?php if (isset($_GET['empresa'])):
                $id_empresa = intval($_GET['empresa']);

                // Validar si el usuario tiene acceso a esta empresa
                if ($rol != 'admin_general' && $id_empresa != $id_empresa_usuario) {
                    die("<div class='text-red-600 font-medium'>🚫 No tienes permiso para ver esta empresa.</div>");
                }

                // Obtener el nombre de la empresa
                $empresa_nombre = $conexion->query("SELECT nombre FROM empresas WHERE id_empresa = $id_empresa")->fetch_assoc()['nombre'];
            ?>
                <div class="flex gap-2 ml-4">
                    <h2 class="text-sm font-semibold text-gray-700 mb-3">2. Empresa: <?= htmlspecialchars($empresa_nombre) ?></h2>
                    <div class="flex gap-2">
                        <?php
                        // Verificar si el usuario es 'empleado' y tiene una bodega asignada
                        if ($rol == 'empleado' && $id_bodega_usuario) {
                            // Si es un empleado con bodega asignada, mostrar solo su bodega
                            $res_bodegas = $conexion->query("SELECT * FROM bodegas WHERE id_bodega = $id_bodega_usuario AND id_empresa = $id_empresa");
                        } else {
                            // Si es admin o tiene acceso a varias bodegas, mostrar todas las bodegas de la empresa
                            $res_bodegas = $conexion->query("SELECT * FROM bodegas WHERE id_empresa = $id_empresa");
                        }

                        // Mostrar las bodegas correspondientes a la empresa seleccionada en una fila
                        while ($bodega = $res_bodegas->fetch_assoc()) {
                            echo "<a href='?empresa=$id_empresa&bodega={$bodega['id_bodega']}' class='inline-block'>
                                    <button class='px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-full transition duration-200'>
                                        {$bodega['nombre']}
                                    </button>
                                  </a>";
                        }
                        ?>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>


  <header class="h-16  bg-header w-full  rounded-bl-full">
</header>
    <app-klatsch v-bind:klatsch="today"></app-klatsch> 



    <div class="px-16 pt-8 content">
      <div class="h-2 border-gray-200 border-t-2 w-2/3"></div>
  
  </div>
      <div class="klatsch-grid">
    <app-klatsch v-for="kl in upcoming" v-bind:klatsch="kl"></app-klatsch>
       <!-- Sección de Tabla -->
  
    </div>
<div class="mx-4 py-3 px-8 bg-white shadow-lg ml-16 rounded-lg" style="border-left: 8px solid #572073;">
    <div class="w-full"> <div class="font-extrabold text-xl text-gray-900 mb-4">Lista Series</div>
        <div class="flex justify-between items-center mb-4">

            <!-- Buscador -->
            <div class="flex items-center">
                <input type="text" placeholder="Buscar..." id="searchSerie" class="px-4 py-2 border border-gray-300 rounded-lg text-sm w-64 focus:outline-none focus:ring-2 focus:ring-indigo-500">
            </div>
            
            <!-- Botones Exportar con íconos -->
            <div class="flex items-center">
                <!-- Botón Exportar Excel -->
                <a href="exportar_excel_seriado.php"  class="flex items-center bg-green-500 text-white py-2 px-6 rounded-lg hover:bg-green-700 focus:outline-none mr-2">
                    <!-- Ícono de Excel -->
                    <i class="fas fa-file-excel h-4 w-4 mr-3"></i>
                    Exportar Excel
                </a>
             <!-- Botón para abrir el modal -->
<button class="bg-blue-600 text-white py-2 px-6 rounded-lg hover:bg-blue-500 transition flex items-center" id="abrirModalBtn">
    <!-- Ícono de modelo -->
    <i class="fas fa-box h-4 w-4 mr-3"></i>
    Agregar Equipo
</button>
<!-- Botón para redirigir a la página 'for_seriado.php' en una nueva pestaña -->
<!-- <a href="https://qodifica.com/sistema_nov/for_seriado.php" target="_blank">
    <button class="px-4 py-2 bg-yellow-600 text-white rounded hover:bg-yellow-700">
        Agregar Series
    </button>
</a>
        -->     </div>
        </div>

 

<!-- FERRETERÍA (productos) -->
<div id="productos"></div>
<!-- SERIES -->
<?php
if (isset($_GET['bodega'])) {
    $id_bodega = intval($_GET['bodega']);

    // Validar acceso a la bodega
    $verifica_bodega = $conexion->query("SELECT * FROM bodegas WHERE id_bodega = $id_bodega")->fetch_assoc();

    if ($rol != 'admin_general' && $verifica_bodega['id_empresa'] != $id_empresa_usuario) {
        die("<div class='bg-white shadow-md rounded p-4 text-red-600 border border-red-300'><p>🚫 No tienes permiso para ver esta bodega.</p></div>");
    }

    if ($rol == 'empleado' && $id_bodega_usuario != $id_bodega) {
        die("<div class='bg-white shadow-md rounded p-4 text-red-600 border border-red-300'><p>🚫 Esta bodega no está asignada a ti.</p></div>");
    }

    echo "<div class='bg-white shadow-md rounded p-6 mb-4'>
            <h2 class='text-2xl font-semibold text-blue-700 mb-4'>3. Bodega: {$verifica_bodega['nombre']}</h2>";

    // Consulta para obtener las series
    $sql = "SELECT s.serie, s.modelo, s.tipo, s.stock, e.nombre AS empresa, u.nom_completo AS registrado_por
            FROM series s
            INNER JOIN empresas e ON s.id_empresa = e.id_empresa
            INNER JOIN usuarios_sistema u ON s.id_usuario = u.id_usuario
            WHERE s.id_bodega = $id_bodega";
    $res = $conexion->query($sql);

    // Mostrar las series
    if ($res->num_rows > 0) {
        echo "<div class='overflow-x-auto'>
                <table class='min-w-full bg-white border border-gray-200'>
                    <thead class='bg-blue-100'>
                        <tr>
                            <th class='text-left px-4 py-2 border-b'>cod_sap</th>
                            <th class='text-left px-4 py-2 border-b'>Denominacion</th>
                            <th class='text-left px-4 py-2 border-b'>nombre</th>
                            <th class='text-left px-4 py-2 border-b'>Stock</th>
                            <th class='text-left px-4 py-2 border-b'>Empresa</th>
                            <th class='text-left px-4 py-2 border-b'>Registrado por</th>
                        </tr>
                    </thead>
                    <tbody>";
        while ($row = $res->fetch_assoc()) {
            echo "<tr class='hover:bg-gray-100'>
                    <td class='px-4 py-2 border-b'>{$row['serie']}</td>
                    <td class='px-4 py-2 border-b'>{$row['modelo']}</td>
                    <td class='px-4 py-2 border-b'>{$row['tipo']}</td>
                    <td class='px-4 py-2 border-b'>{$row['stock']}</td>
                    <td class='px-4 py-2 border-b'>{$row['empresa']}</td>
                    <td class='px-4 py-2 border-b'>{$row['registrado_por']}</td>
                </tr>";
        }
        echo "</tbody></table></div>";
    } else {
        echo "<p class='text-gray-600 italic'>❗ No hay series registradas en esta bodega.</p>";
    }

    echo "</div>";

  // Mostrar datos adicionales de series
  $sql_datos = "SELECT sd.id_dato, sd.serie, sd.fecha_creacion, sd.estado, s.tipo
                FROM series_datos sd
                INNER JOIN series s ON sd.id_serie = s.id_serie
                WHERE s.id_bodega = $id_bodega";

  $res_datos = $conexion->query($sql_datos);

  echo "<div class='bg-white shadow-md rounded p-6 mt-6'>
          <h2 class='text-2xl font-semibold text-green-700 mb-4'>📦 Detalles por Serie</h2>

          <input type='text' id='buscadorSeries' placeholder='🔍 Buscar por nombre, estado o serie...' class='mb-4 p-2 border border-gray-300 rounded w-full' onkeyup='filtrarYPaginar()'>

          <div class='overflow-x-auto'>
              <table id='tablaSeries' class='min-w-full bg-white border border-gray-200'>
                  <thead class='bg-green-100'>
                      <tr>
                          <th class='text-left px-4 py-2 border-b'>ID</th>
                          <th class='text-left px-4 py-2 border-b'>SN</th>
                          <th class='text-left px-4 py-2 border-b'>Nombre</th>
                          <th class='text-left px-4 py-2 border-b'>Fecha de creación</th>
                          <th class='text-left px-4 py-2 border-b'>Estado</th>
                          <th class='text-left px-4 py-2 border-b'>Accion</th>
                      </tr>
                  </thead>
                  <tbody>";

  if ($res_datos->num_rows > 0) {
      while ($dato = $res_datos->fetch_assoc()) {
          $estado_color = '';
          $estado_texto = '';
          $boton_tcnico = '';

          // Cambiar los textos y colores según el estado
          if ($dato['estado'] == 'usado') {
              $estado_color = 'text-yellow-600 font-medium';
              $estado_texto = 'Tecnico';
              $boton_tcnico = "<button class='bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600' onclick='verTecnico({$dato['id_dato']})'>Ver Técnico</button>";
          } elseif ($dato['estado'] == 'no_suado') {
              $estado_color = 'text-blue-600 font-medium';
              $estado_texto = 'Pendiente';
          } elseif ($dato['estado'] == 'devuelto') {
              $estado_color = 'text-red-600 font-medium';
              $estado_texto = 'Devuelto';
          } else {
              $estado_color = 'text-green-600 font-medium';
              $estado_texto = 'Disponible';
          }

          echo "<tr class='hover:bg-gray-100 fila-serie'>
                  <td class='px-4 py-2 border-b'>{$dato['id_dato']}</td>
                  <td class='px-4 py-2 border-b'>{$dato['serie']}</td>
                  <td class='px-4 py-2 border-b'>{$dato['tipo']}</td>
                  <td class='px-4 py-2 border-b'>{$dato['fecha_creacion']}</td>
                  <td class='px-4 py-2 border-b {$estado_color}'>
                      {$estado_texto} 
                     
                  </td>
                    <td class='px-4 py-2 border-b'>
                     $boton_tcnico
                      </td>
              </tr>";
      }
  } else {
      echo "<tr><td colspan='5' class='px-4 py-2 text-gray-600 italic'>❗ No hay datos registrados para las series de esta bodega.</td></tr>";
  }

  echo "</tbody></table>
        <div id='paginacionSeries' class='mt-4 flex flex-wrap gap-2'></div>
        </div>

        <script>
          const filasPorPagina = 10;
          let paginaActual = 1;

          function filtrarYPaginar() {
              const input = document.getElementById('buscadorSeries');
              const filter = input.value.toLowerCase();
              const filas = document.querySelectorAll('.fila-serie');
              let visibles = [];

              filas.forEach(fila => {
                  if ([...fila.cells].some(td => td.innerText.toLowerCase().includes(filter))) {
                      fila.style.display = '';
                      visibles.push(fila);
                  } else {
                      fila.style.display = 'none';
                  }
              });

              aplicarPaginacion(visibles);
          }

          function aplicarPaginacion(filas) {
              const paginacion = document.getElementById('paginacionSeries');
              paginacion.innerHTML = '';
              const totalPaginas = Math.ceil(filas.length / filasPorPagina);

              filas.forEach((fila, i) => {
                  fila.style.display = (i >= (paginaActual - 1) * filasPorPagina && i < paginaActual * filasPorPagina) ? '' : 'none';
              });

              for (let i = 1; i <= totalPaginas; i++) {
                  const btn = document.createElement('button');
                  btn.textContent = i;
                  btn.className = 'px-3 py-1 border rounded bg-green-200 hover:bg-green-300';
                  if (i === paginaActual) btn.classList.add('bg-green-500', 'text-white');

                  btn.addEventListener('click', () => {
                      paginaActual = i;
                      aplicarPaginacion(filas);
                  });

                  paginacion.appendChild(btn);
              }
          }

          document.addEventListener('DOMContentLoaded', () => {
              filtrarYPaginar(); // Ejecutar al inicio
          });

         
        </script>
      </div>";
}
?>

<!-- Modal de detalles del técnico -->
<div id="modalTecnico" class="fixed inset-0 bg-gray-600 bg-opacity-50 z-50 hidden">
  <div class="flex justify-center items-center min-h-screen">
    <div class="bg-white p-6 rounded shadow-lg w-11/12 sm:w-1/2 md:w-1/3">
      <h2 class="text-2xl font-semibold text-gray-800 mb-4">Detalles del Técnico</h2>
      <div id="contenidoModal" class="text-gray-700">
        <!-- Los detalles del técnico se insertarán aquí mediante JavaScript -->
      </div>
      <button onclick="cerrarModaltecnico()" class="mt-4 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600">
        Cerrar
      </button>
    </div>
  </div>
</div>

<script>
    function verTecnico(idDato) {
        fetch('detalle_tecnico.php?id_dato=' + idDato)
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    console.error(data.error);
                    alert(data.error);
                    return;
                }

                // Ahora, se espera que 'data' contenga los detalles del técnico.
                const modalContenido = document.getElementById('contenidoModal');
                modalContenido.innerHTML = `
                    <p><strong>ID del Técnico:</strong> ${data.id}</p>
                    <p><strong>Nombre:</strong> ${data.nombres} ${data.apellido_paterno} ${data.apellido_materno}</p>
                    <p><strong>Tipo de Documento:</strong> ${data.tipo_documento}</p>
                `;
                document.getElementById('modalTecnico').classList.remove('hidden');
            })
            .catch(error => {
                console.error('Error al obtener el detalle del técnico:', error);
            });
    }
        function cerrarModaltecnico() {
        // Encuentra el modal y lo oculta
        const modal = document.getElementById('modalTecnico');
        modal.classList.add('hidden');
    }
</script>


    </div>
</div>


  </div>

</div> 

    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Crear Nueva Serie</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<!-- Modal para mostrar el formulario -->
<div class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50 hidden" id="modalFormulario">
    <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-md">
        <h2 class="text-2xl font-semibold text-center mb-6">Crear Equipo</h2>
        <form id="formulario" method="POST" action="agregar_serie.php" class="space-y-4">
            <div>
                <label for="serie" class="block text-sm font-medium text-gray-700">Codigo_sap:</label>
                <input type="text" name="serie" id="serie" class="mt-1 block w-full p-2 border border-gray-300 rounded-md" required>
            </div>

            <div>
                <label for="modelo" class="block text-sm font-medium text-gray-700">Denominacion:</label>
                <input type="text" name="modelo" id="modelo" class="mt-1 block w-full p-2 border border-gray-300 rounded-md" required>
            </div>

            <div>
                <label for="tipo" class="block text-sm font-medium text-gray-700">Nombre:</label>
                <input type="text" name="tipo" id="tipo" class="mt-1 block w-full p-2 border border-gray-300 rounded-md" required>
            </div>

            <div>
                <label for="id_empresa" class="block text-sm font-medium text-gray-700">Empresa:</label>
                <select name="id_empresa" id="id_empresa" class="mt-1 block w-full p-2 border border-gray-300 rounded-md" required>
                    <?php
                    if ($rol == 'admin_general') {
                        $res_empresas = $conexion->query("SELECT * FROM empresas");
                    } else if ($rol == 'admin_empresa') {
                        // Si el usuario es admin_empresa, solo muestro su empresa
                        $res_empresas = $conexion->query("SELECT * FROM empresas WHERE id_empresa = $id_empresa_usuario");
                    }

                    while ($empresa = $res_empresas->fetch_assoc()) {
                        $selected = ($rol == 'admin_empresa' && $empresa['id_empresa'] == $id_empresa_usuario) ? 'selected' : '';
                        echo "<option value='{$empresa['id_empresa']}' {$selected}>{$empresa['nombre']}</option>";
                    }
                    ?>
                </select>
            </div>

            <div>
                <label for="id_bodega" class="block text-sm font-medium text-gray-700">Selecciona la Bodega:</label>
                <select name="id_bodega" id="id_bodega" class="mt-1 block w-full p-2 border border-gray-300 rounded-md" required>
                    <option value="">Selecciona una bodega</option>
                </select>
            </div>

            <button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-500 transition">Agregar Serie</button>
        </form>

        <!-- Botón para cerrar el modal -->
        <button class="absolute top-2 right-2 text-gray-500 hover:text-gray-700" id="cerrarModalBtn">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>
    </div>
</div>

<script>
// Al cambiar la empresa, actualizamos las bodegas
document.getElementById('id_empresa').addEventListener('change', function() {
    const id_empresa = this.value;
    
    // Verificamos si hay una empresa seleccionada
    if (id_empresa) {
        // Usamos fetch para obtener las bodegas de esa empresa
        fetch(`bodegas.php?empresa_id=${id_empresa}`)
            .then(response => response.json())
            .then(data => {
                const bodegaSelect = document.getElementById('id_bodega');
                bodegaSelect.innerHTML = '<option value="">Selecciona una bodega</option>'; // Limpiar bodegas actuales
                
                // Si hay bodegas, agregarlas al select
                if (data && Array.isArray(data)) {
                    data.forEach(bodega => {
                        const option = document.createElement('option');
                        option.value = bodega.id_bodega;
                        option.textContent = bodega.nombre;
                        bodegaSelect.appendChild(option);
                    });
                } else {
                    bodegaSelect.innerHTML = '<option value="">No hay bodegas disponibles</option>';
                }
            })
            .catch(error => {
                console.error('Error al cargar las bodegas:', error);
            });
    }
});

// Si el rol es admin_empresa, automáticamente filtra las bodegas
if (document.getElementById('id_empresa').value == <?php echo $id_empresa_usuario; ?> && '<?php echo $rol; ?>' === 'admin_empresa') {
    // Pre-cargar las bodegas asociadas a la empresa del usuario
    fetch(`bodegas.php?empresa_id=<?php echo $id_empresa_usuario; ?>`)
        .then(response => response.json())
        .then(data => {
            const bodegaSelect = document.getElementById('id_bodega');
            bodegaSelect.innerHTML = '<option value="">Selecciona una bodega</option>'; // Limpiar bodegas actuales
            
            // Si hay bodegas, agregarlas al select
            if (data && Array.isArray(data)) {
                data.forEach(bodega => {
                    const option = document.createElement('option');
                    option.value = bodega.id_bodega;
                    option.textContent = bodega.nombre;
                    bodegaSelect.appendChild(option);
                });
            } else {
                bodegaSelect.innerHTML = '<option value="">No hay bodegas disponibles</option>';
            }
        })
        .catch(error => {
            console.error('Error al cargar las bodegas:', error);
        });
}

    // Mostrar el modal cuando se haga clic en el botón
    $("#abrirModalBtn").click(function() {
        $("#modalFormulario").removeClass("hidden");
    });

    // Cerrar el modal si se hace clic fuera de la ventana modal
    $("#cerrarModalBtn").click(function() {
        $("#modalFormulario").addClass("hidden");
    });

    // Enviar el formulario mediante AJAX
    $("#formulario").submit(function(e) {
        e.preventDefault();
        
        // Recoger los datos del formulario
        var data = $(this).serialize() + '&ajax=1';

        // Enviar los datos del formulario por AJAX a agregar_serie.php
        $.post('agregar_modelo.php', data, function(response) {
            // Mostrar la respuesta
            alert(response);
            // Cerrar el modal
            $("#modalFormulario").addClass("hidden");
        });
    });
</script>


</html>