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

// Verificar si el usuario está logueado
if (!isset($_SESSION['id_usuario'])) {
    // Redirigir al usuario a la página de login si no está autenticado
    header("Location: login.php");
    exit(); // Asegúrate de que el script se detenga después de la redirección
}

$id_usuario = $_SESSION['id_usuario'];
$usuario = $conexion->query("SELECT * FROM usuarios_sistema WHERE id_usuario = $id_usuario")->fetch_assoc();
$rol_actual = $usuario['rol'];
$id_empresa_usuario = $usuario['id_empresa'];
?>


 <!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 flex items-center">
     
<!-- EMPRESAS -->
<div class="card filter-menu h-12 px-4 py-3 rounded-full bg-gray-200 w-1/2 flex justify-between items-center mt-4">
    <h2 class="text-xs text-white">1. Selecciona una Empresa</h2>
    <div class="options flex items-center py-2">
        <?php
        if ($rol_actual == 'admin_general') {
            $res_empresas = $conexion->query("SELECT * FROM empresas");
        } else {
            $res_empresas = $conexion->query("SELECT * FROM empresas WHERE id_empresa = $id_empresa_usuario");
        }

        while ($empresa = $res_empresas->fetch_assoc()) {
            echo "<a href='javascript:void(0)' onclick='seleccionarEmpresa({$empresa['id_empresa']})'><button class='boton text-xs font-thin p-1 border-2 text-white rounded-full w-24 hover:bg-white hover:text-black mr-4'>{$empresa['nombre']}</button></a>";
        }
        ?>
    </div>
</div>

<!-- BODEGAS -->
<div class="card filter-menu h-12 px-4 py-3 rounded-full bg-gray-200 w-1/2 flex justify-between items-center mt-4">
    <div class="options flex items-center py-2" id="bodegas"></div>
</div>

 


    </div>
   
  <header class="h-16  bg-header w-full  rounded-bl-full">
</header>
  

    <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 Guias Movimientos</div>
        <div class="flex justify-between items-center mb-4">

            <!-- Buscador -->
            <div class="flex items-center">
                <input type="text" placeholder="Buscar..." id="searchProveedor" 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: Agregar Material -->
 <!-- Botón para abrir el modal -->
<button onclick="document.getElementById('modalMovimiento').classList.remove('hidden')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
  Realizar movimientos
</button>

            </div>
        </div>

 

 <!-- Tabla de guías -->
<div id="contenedorGuias"></div>
<div id="pagination" class="mt-4"></div>

   
    </div>
</div>


  </div>

</div> 

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

  <style>
    /* Estilo para el contenedor con desplazamiento */
    #contenedorInputs {
      max-height: 150px;  /* Ajusta según sea necesario */
      overflow-y: auto;   /* Habilita desplazamiento vertical */
    }
  </style>

<!-- Modal -->
<div id="modalMovimiento" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="max-w-7xl mx-auto bg-white shadow-md rounded-lg p-6">
  <h2 class="text-2xl font-semibold mb-6 text-center text-gray-800">Movimientos</h2>
<!-- Close Button (X) -->
    <button id="closeModal" class="absolute top-2 right-2 text-2xl text-gray-600 hover:text-gray-800">
      &times;
    </button>
  <!-- GRID PRINCIPAL: 4 columnas -->
  <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">

    <!-- 🧾 FORMULARIO PRINCIPAL (columnas 1 y 2) -->
    <form id="formSeries" class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6">

      <!-- Empresa -->
      <div class="col-span-2">
        <?php if ($rol_actual === 'admin_empresa') {
          $empresa = $conexion->query("SELECT nombre FROM empresas WHERE id_empresa = $id_empresa_usuario")->fetch_assoc();
          $nombre_empresa = $empresa['nombre'];
        ?>
          <label class="block text-sm font-medium text-gray-700 mb-1">Empresa</label>
          <select class="w-full h-12 p-3 text-base border border-gray-300 rounded-lg bg-gray-100" disabled>
            <option selected><?php echo htmlspecialchars($nombre_empresa); ?></option>
          </select>
          <input type="hidden" id="empresa" name="empresa" value="<?php echo $id_empresa_usuario; ?>">
        <?php } else { ?>
          <label for="empresa" class="block text-sm font-medium text-gray-700 mb-1">Empresa</label>
          <select id="empresa" name="empresa"
            class="w-full h-12 p-3 text-base border border-gray-300 rounded-lg" required>
            <option value="">Seleccione empresa</option>
          </select>
        <?php } ?>
      </div>

      <!-- Tipo de guía -->
      <div>
        <label for="tipo_guia" class="block text-sm font-medium text-gray-700 mb-1">Tipo de Guía</label>
        <select id="tipo_guia" name="tipo_guia"
          class="w-full h-12 p-3 text-base border border-gray-300 rounded-lg">
          <option value="">-- Selecciona --</option>
          <option value="boleta">Boleta</option>
          <option value="factura">Factura</option>
          <option value="guía de remisión">Guía de Remisión</option>
          <option value="nota de entrega">Nota de Entrega</option>
        </select>
      </div>

      <!-- Número de guía -->
      <div>
        <label for="numero_guia" class="block text-sm font-medium text-gray-700 mb-1">Número de Guía</label>
        <input type="text" id="numero_guia" name="numero_guia"
          class="w-full h-12 p-3 text-base border border-gray-300 rounded-lg"
          placeholder="Ej: 001-123456">
      </div>

      <!-- Fecha -->
      <div>
        <label for="fecha_guia" class="block text-sm font-medium text-gray-700 mb-1">Fecha de la Guía</label>
        <input type="date" id="fecha_guia" name="fecha_guia"
          class="w-full h-12 p-3 text-base border border-gray-300 rounded-lg">
      </div>

      <!-- Proveedor -->
      <div>
        <label for="proveedor" class="block text-sm font-medium text-gray-700 mb-1">Proveedor</label>
        <select id="proveedor" name="proveedor"
          class="w-full h-12 p-3 text-base border border-gray-300 rounded-lg">
          <option value="">-- Selecciona proveedor --</option>
        </select>
      </div>

      <!-- Bodega -->
      <div>
        <label for="bodega" class="block text-sm font-medium text-gray-700 mb-1">Bodega</label>
        <select id="bodega"
          class="w-full h-12 p-3 text-base border border-gray-300 rounded-lg bg-gray-100"
          required disabled>
          <option value="">Seleccione bodega</option>
        </select>
      </div>

      <!-- Botón -->
      <div class="col-span-2 text-center mt-4">
        <button type="submit"
          class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg transition-all">
          Guardar
        </button>
      </div>

    </form>

    <!-- 🧰 COLUMNA 3: Seriado + Agregar otro tipo -->
    <div class="space-y-4">
      <h3 class="text-xl font-semibold text-gray-800 mb-4">Detalle del Seriado</h3>

      <!-- Serie -->
      <div>
        <label for="serie" class="block text-sm font-medium text-gray-700 mb-1">Serie</label>
        <select id="serie"
          class="w-full h-12 p-3 text-base border border-gray-300 rounded-lg bg-gray-100"
          required disabled>
          <option value="">Seleccione serie</option>
        </select>
      </div>

      <!-- Cantidad -->
      <div>
        <label for="cantidad" class="block text-sm font-medium text-gray-700 mb-1">Cantidad</label>
        <input type="number" min="1" id="cantidad"
          class="w-full h-12 p-3 text-base border border-gray-300 rounded-lg bg-gray-100"
          placeholder="Ingrese cantidad" required disabled>
      </div>

      <!-- Códigos -->
      <div id="contenedorInputs" class="space-y-4"></div>

      <!-- Otro seriado -->
      <h4 class="text-lg font-semibold mt-6">Otro tipo de seriado</h4>
      <div id="contenedorInputsExtra" class="space-y-4"></div>
      <button type="button" id="agregarOtroSeriado"
        class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-3 rounded-lg transition-all w-full">
        Agregar otro tipo de seriado
      </button>
      <div id="nuevoSeriado" class="mt-4"></div>

    </div>

    <!-- 🔧 COLUMNA 4: Ferretería -->
    <div class="space-y-4">
      <h3 class="text-xl font-semibold text-gray-800 mb-4">Ferretería</h3>
      <div id="ferreteriaInputs" class="space-y-4"></div>
    </div>

  </div>
</div>

</div>
<script>
  // Obtener el modal y el botón de cierre
  const modal = document.getElementById('modalMovimiento');
  const closeButton = document.getElementById('closeModal');

 

  // Cerrar el modal cuando se haga clic en la X
  closeButton.addEventListener('click', () => {
    modal.classList.add('hidden');
  });

  // También se puede cerrar el modal si se hace clic fuera del contenido
  modal.addEventListener('click', (e) => {
    if (e.target === modal) {
      modal.classList.add('hidden');
    }
  });
</script>

<script>
document.addEventListener("DOMContentLoaded", () => {
  const empresa = document.getElementById('empresa');
  const bodega = document.getElementById('bodega');
  const serie = document.getElementById('serie');
  const cantidad = document.getElementById('cantidad');
  const contenedorInputs = document.getElementById('contenedorInputs');
  const agregarOtroSeriado = document.getElementById('agregarOtroSeriado');
  const nuevoSeriado = document.getElementById('nuevoSeriado');
  const rolUsuario = '<?php echo $rol_actual; ?>';
  const idEmpresaUsuario = '<?php echo $id_empresa_usuario; ?>';

  const maxSeriados = 5; // Máximo número de seriados permitidos
  let contadorSeriados = 0;

 if (rolUsuario === 'admin_empresa') {
  cargarBodegas(idEmpresaUsuario);
  cargarProveedores(idEmpresaUsuario);  // Cargar proveedores al iniciar para admin_empresa
} else {
  fetch('get_empresas.php')
    .then(res => res.json())
    .then(data => {
      data.forEach(emp => {
        empresa.innerHTML += `<option value="${emp.id_empresa}">${emp.nombre}</option>`;
      });
    });
}

  empresa?.addEventListener('change', () => {
    bodega.disabled = true;
    serie.disabled = true;
    cantidad.disabled = true;
    contenedorInputs.innerHTML = '';
    bodega.innerHTML = '<option value="">Seleccione bodega</option>';
    if (empresa.value) cargarBodegas(empresa.value);
  });

  bodega.addEventListener('change', () => {
    serie.disabled = true;
    cantidad.disabled = true;
    contenedorInputs.innerHTML = '';
    serie.innerHTML = '<option value="">Seleccione serie</option>';
    if (bodega.value) {
      fetch(`get_series.php?id_bodega=${bodega.value}`)
        .then(res => res.json())
        .then(data => {
          serie.disabled = false;
          data.forEach(s => {
            serie.innerHTML += `<option value="${s.id_serie}">${s.serie} - ${s.modelo}</option>`;
          });
        });
    }
  });
  bodega?.addEventListener('change', () => {
  const bodegaId = bodega.value;
  if (!bodegaId) return;

  // Limpiar inputs y contador si se cambia de bodega
  ferreteriaInputs.innerHTML = '';
  contadorFerreteria = 0;
  productos = [];

  // Agregar automáticamente un grupo de producto
  agregarGrupoFerreteria(bodegaId);

  // Habilitar campos si quieres hacerlo aquí también
  serie.disabled = false;
  cantidad.disabled = false;
});

function agregarGrupoFerreteria(bodegaId) {
  if (contadorFerreteria >= maxFerreteria) {
    alert("No se pueden agregar más productos.");
    return;
  }

  const nombreBodega = bodega.options[bodega.selectedIndex].text;
  contadorFerreteria++;
  const id = Date.now();
  const nuevoGrupo = document.createElement('div');
  nuevoGrupo.className = "bg-gray-100 p-4 rounded-md grupo-ferreteria";
  nuevoGrupo.setAttribute('data-id', id);
  nuevoGrupo.innerHTML = `
    <h4 class="font-medium text-gray-700 mb-2">Ferretería de la Bodega: ${nombreBodega}</h4>
    <div class="mb-3">
      <label class="block text-sm">Producto</label>
      <select id="producto${id}" class="w-full border border-gray-300 rounded-md p-2 producto" required>
        <option value="">Seleccione producto</option>
      </select>
    </div>
    <div class="mb-3">
      <label class="block text-sm">Cantidad</label>
      <input type="number" min="1" id="cantidadProducto${id}" class="w-full border border-gray-300 rounded-md p-2 cantidad" required>
    </div>
  `;
  ferreteriaInputs.appendChild(nuevoGrupo);

  // Llenar productos ferretería dinámicamente
  fetch(`get_productos_ferreteria.php?id_bodega=${bodegaId}`)
    .then(res => res.json())
    .then(data => {
      const selectProducto = document.getElementById(`producto${id}`);
      data.forEach(p => {
        selectProducto.innerHTML += `<option value="${p.id_producto}" data-nombre="${p.nombre_producto}" data-codigo="${p.codigo}">${p.nombre_producto} - ${p.codigo}</option>`;
      });
    })
    .catch(error => {
      console.error('Error al cargar los productos:', error);
      alert('Hubo un error al cargar los productos.');
    });
}



  serie.addEventListener('change', () => {
    cantidad.disabled = !serie.value;
    contenedorInputs.innerHTML = '';
  });

  cantidad.addEventListener('input', () => {
    contenedorInputs.innerHTML = '';
    let cant = parseInt(cantidad.value);
    if (cant > 0 && serie.value) {
      for (let i = 1; i <= cant; i++) {
        contenedorInputs.innerHTML += `
          <div class="mb-2">
            <label class="block text-sm text-gray-700">Código Serial ${i}</label>
            <input type="text" name="seriales[]" class="w-full border border-gray-300 rounded-md p-2 seriales-${serie.value}" required>
          </div>`;
      }
    }
  });

  agregarOtroSeriado.addEventListener('click', () => {
    if (contadorSeriados >= maxSeriados) {
      alert("No se pueden agregar más seriados.");
      return;
    }
    
    // Incrementa el contador y agrega un nuevo seriado fuera del contenedor con desplazamiento
    contadorSeriados++;

    const id = Date.now();
    const nuevo = document.createElement('div');
    nuevo.className = "mb-4 p-4 bg-gray-100 rounded-md";
    nuevo.innerHTML = `
      <h4 class="text-gray-700 font-semibold mb-2">Otro tipo de seriado</h4>
      <div class="mb-3">
        <label class="block text-sm">Serie</label>
        <select id="serie${id}" class="w-full border border-gray-300 rounded-md p-2" required>
          <option value="">Seleccione serie</option>
        </select>
      </div>
      <div class="mb-3">
        <label class="block text-sm">Cantidad</label>
        <input type="number" min="1" id="cantidad${id}" class="w-full border border-gray-300 rounded-md p-2" required disabled>
      </div>
<div id="contenedorInputs${id}" class="max-h-[100px] overflow-y-auto"></div>

    `;
    nuevoSeriado.appendChild(nuevo);

    const selectSerie = document.getElementById(`serie${id}`);
    const inputCantidad = document.getElementById(`cantidad${id}`);
    const inputContenedor = document.getElementById(`contenedorInputs${id}`);

    fetch(`get_series.php?id_bodega=${bodega.value}`)
      .then(res => res.json())
      .then(data => {
        data.forEach(s => {
          selectSerie.innerHTML += `<option value="${s.id_serie}">${s.serie} - ${s.modelo}</option>`;
        });
      });

    selectSerie.addEventListener('change', () => {
      inputCantidad.disabled = !selectSerie.value;
      inputContenedor.innerHTML = '';
    });

    inputCantidad.addEventListener('input', () => {
      inputContenedor.innerHTML = '';
      let cant = parseInt(inputCantidad.value);
      if (cant > 0 && selectSerie.value) {
        for (let i = 1; i <= cant; i++) {
          inputContenedor.innerHTML += `
            <div class="mb-2">
              <label class="block text-sm text-gray-700">Código Serial ${i}</label>
              <input type="text" name="seriales[]" class="w-full border border-gray-300 rounded-md p-2 seriales-${selectSerie.value}" required>
            </div>`;
        }
      }
    });
  });
// AJAX para cargar proveedores según la empresa seleccionada
document.getElementById('empresa').addEventListener('change', function () {
  var empresaId = this.value;

  if (empresaId) {
    // Realizamos la llamada AJAX para obtener proveedores
    fetch('proveedores.php?empresa_id=' + empresaId)
      .then(response => response.json())
      .then(data => {
        const proveedorSelect = document.getElementById('id_proveedor');
        proveedorSelect.innerHTML = '<option value="">-- Selecciona Proveedor --</option>'; // Resetear el select

        // Llenar los proveedores en el select
        data.forEach(proveedor => {
          const option = document.createElement('option');
          option.value = proveedor.id_proveedor;
          option.textContent = proveedor.nombre;
          proveedorSelect.appendChild(option);
        });
      })
      .catch(error => {
        console.error('Error al cargar los proveedores:', error);
      });
  }
});

const ferreteriaInputs = document.getElementById('ferreteriaInputs');
const btnAgregarFerreteria = document.getElementById('agregarProductoFerreteria');
let contadorFerreteria = 0;
const maxFerreteria = 10;
let productos = [];

// Crear botón "Agregar al carrito"
const btnGuardarFerreteria = document.createElement('button');
btnGuardarFerreteria.textContent = "Agregar al carrito";
btnGuardarFerreteria.className = "bg-green-600 text-white px-4 py-2 rounded-md mt-4";
btnGuardarFerreteria.style.display = "block";
btnGuardarFerreteria.style.marginTop = "1rem";
ferreteriaInputs.insertAdjacentElement('afterend', btnGuardarFerreteria);

// Crear contenedor para mostrar los productos en el carrito
const carritoContainer = document.createElement('div');
carritoContainer.className = "mt-4";
carritoContainer.innerHTML = "<h3 class='font-medium text-lg'>Productos en el carrito:</h3><ul id='carritoList'></ul>";
ferreteriaInputs.insertAdjacentElement('afterend', carritoContainer);


// Lógica del botón "Agregar al carrito"
btnGuardarFerreteria.addEventListener('click', () => {
  const grupos = document.querySelectorAll('.grupo-ferreteria');

  grupos.forEach(grupo => {
    const id = grupo.getAttribute('data-id');
    const select = grupo.querySelector(`#producto${id}`);
    const inputCantidad = grupo.querySelector(`#cantidadProducto${id}`);

    const id_producto = select.value;
    const nombre_producto = select.options[select.selectedIndex]?.dataset.nombre || '';
    const codigo = select.options[select.selectedIndex]?.dataset.codigo || '';
    const cantidad = parseInt(inputCantidad.value);

    // Verificar si el producto ya está en el carrito
    if (id_producto && cantidad > 0) {
      // Comprobar si el producto ya está en el carrito
      const productoExistente = productos.find(p => p.id_producto === id_producto);

      if (productoExistente) {
        // Si el producto ya existe, sumamos la cantidad
        productoExistente.cantidad += cantidad;
      } else {
        // Si el producto no existe, lo agregamos
        productos.push({
          id_producto,
          nombre_producto,
          codigo,
          cantidad
        });
      }
    }
  });

  // Mostrar los productos en el carrito
  const carritoList = document.getElementById('carritoList');
  carritoList.innerHTML = ''; // Limpiar el carrito antes de agregar los nuevos productos

  productos.forEach((producto, index) => {
    const li = document.createElement('li');
    li.className = "flex justify-between items-center py-2 px-4 mb-2 bg-gray-200 rounded-md";
    li.innerHTML = `
      <span>${producto.nombre_producto} (${producto.codigo})</span>
      <span>Cantidad: ${producto.cantidad}</span>
      <button class="bg-red-600 text-white px-2 py-1 rounded-md" onclick="eliminarProducto(${index})">Eliminar</button>
    `;
    carritoList.appendChild(li);
  });

});

// Función para eliminar un producto del carrito
function eliminarProducto(index) {
  productos.splice(index, 1); // Eliminar el producto del array
  const carritoList = document.getElementById('carritoList');
  carritoList.innerHTML = ''; // Limpiar la lista
  productos.forEach((producto, idx) => {
    const li = document.createElement('li');
    li.className = "flex justify-between items-center py-2 px-4 mb-2 bg-gray-200 rounded-md";
    li.innerHTML = `
      <span>${producto.nombre_producto} (${producto.codigo})</span>
      <span>Cantidad: ${producto.cantidad}</span>
      <button class="bg-red-600 text-white px-2 py-1 rounded-md" onclick="eliminarProducto(${idx})">Eliminar</button>
    `;
    carritoList.appendChild(li);
  });
}

document.getElementById("formSeries").addEventListener("submit", e => {
  e.preventDefault();

  const seriesData = [];
  const productosData = [];
  const proveedor = document.getElementById('proveedor').value;
  const tipoGuia = document.getElementById('tipo_guia').value;
  const numeroGuia = document.getElementById('numero_guia').value;
  const fechaGuia = document.getElementById('fecha_guia').value;

  // Verificar si se seleccionaron todos los datos necesarios
  if (!proveedor || !tipoGuia || !numeroGuia || !fechaGuia) {
    Swal.fire({
      icon: 'error',
      title: 'Oops...',
      text: 'Debe completar todos los campos de guía.',
    });
    return;
  }

  // Captura de las series principales
  const idSeriePrincipal = document.getElementById('serie').value;
  if (idSeriePrincipal) {
    const serialesPrincipales = [];
    const inputs = document.querySelectorAll(`.seriales-${idSeriePrincipal}`);
    inputs.forEach(input => {
      if (input.value.trim() !== '') serialesPrincipales.push(input.value.trim());
    });
    if (serialesPrincipales.length > 0) {
      seriesData.push({ id_serie: idSeriePrincipal, seriales: serialesPrincipales });
    }
  }

  // Captura de las series secundarias
  const contenedoresExtras = document.querySelectorAll('[id^="contenedorInputs"]:not(#contenedorInputs)');
  contenedoresExtras.forEach(contenedor => {
    const idUnico = contenedor.id.replace('contenedorInputs', '');
    const select = document.getElementById('serie' + idUnico);
    if (select && select.value) {
      const serialesExtra = [];
      const inputs = contenedor.querySelectorAll(`.seriales-${select.value}`);
      inputs.forEach(input => {
        if (input.value.trim() !== '') serialesExtra.push(input.value.trim());
      });
      if (serialesExtra.length > 0) {
        seriesData.push({ id_serie: select.value, seriales: serialesExtra });
      }
    }
  });

  // Captura de los productos de ferretería
  const productosInputs = document.querySelectorAll('[id^="producto"]');
  productosInputs.forEach(input => {
    const productoId = input.value;
    const cantidadId = input.id.replace('producto', 'cantidad');
    const cantidad = document.getElementById(cantidadId);
    if (productoId && cantidad && cantidad.value) {
      productosData.push({ id_producto: productoId, cantidad: cantidad.value });
    }
  });

  if (seriesData.length === 0 && productos.length === 0) {
    Swal.fire({
      icon: 'error',
      title: 'Oops...',
      text: 'Debe ingresar al menos un grupo de seriales o productos de ferretería.',
    });
    return;
  } else if (seriesData.length === 0) {
    Swal.fire({
      icon: 'warning',
      title: 'Advertencia',
      text: 'No se ingresaron seriales, solo productos.',
    });
  } else if (productos.length === 0) {
    Swal.fire({
      icon: 'warning',
      title: 'Advertencia',
      text: 'No se ingresaron productos de ferretería, solo seriales.',
    });
  }

  // Mostrar en consola los datos
  console.log("Datos agrupados por serie:", seriesData);
  console.log("Datos de productos de ferretería:", productos);

  // Preparar los datos para enviar
  const formData = {
    guia: {
      tipo_guia: tipoGuia,
      numero_guia: numeroGuia,
      fecha_guia: fechaGuia,
      id_proveedor: proveedor
    },
    series: seriesData,
    productos: productos
  };

  // Aquí envías tanto las series como los productos al backend
  fetch('guardar_series_datos.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(formData)
  })
  .then(res => res.json())
  .then(data => {
    // Usamos Switch Alert 2 para mostrar la respuesta
    if (data.status === 'ok') {
      Swal.fire({
        icon: 'success',
        title: 'Datos guardados correctamente',
        text: 'La información se ha guardado con éxito.',
      }).then(() => {
        cargarGuias(); // Recargar las guías
      });
    } else if (data.status === 'warning') {
      Swal.fire({
        icon: 'warning',
        title: 'Advertencia',
        text: 'Algunos datos no fueron guardados correctamente.',
      });
    } else if (data.status === 'error') {
      Swal.fire({
        icon: 'error',
        title: 'Error al guardar',
        text: 'Hubo un problema al guardar los datos.',
      });
    } else {
      Swal.fire({
        icon: 'error',
        title: 'Error desconocido',
        text: 'Ocurrió un error inesperado.',
      });
    }
  })
  .catch(err => {
    console.error('Error al guardar:', err);
    Swal.fire({
      icon: 'error',
      title: 'Error de conexión',
      text: 'No se pudo conectar al servidor para guardar los datos.',
    });
  });
});

// Función para cargar las guías con búsqueda y paginación
function cargarGuias(page = 1, search = '') {
  const contenedor = document.getElementById('contenedorGuias');
  contenedor.innerHTML = '';  // Limpiar el contenido anterior

  fetch(`listar_guias.php?page=${page}&search=${search}`)
    .then(res => res.json())
    .then(data => {
      if (data.status !== 'ok') {
        contenedor.innerHTML = '<tr><td colspan="7" class="text-red-600 text-center">Error al cargar las guías.</td></tr>';
        return;
      }

      if (data.guias.length === 0) {
        contenedor.innerHTML = '<tr><td colspan="7" class="text-gray-600 text-center">No hay guías registradas.</td></tr>';
        return;
      }

      // Crear tabla y encabezados
      const table = document.createElement('table');
      table.className = 'w-full text-left table-auto border-collapse';

      const thead = document.createElement('thead');
      thead.className = 'bg-gray-100';
      thead.innerHTML = `
        <tr>
          <th class="py-2 px-4 text-sm">Tipo de Guía</th>
          <th class="py-2 px-4 text-sm">Número de Guía</th>
          <th class="py-2 px-4 text-sm">Fecha de Guía</th>
          <th class="py-2 px-4 text-sm">Proveedor</th>
          <th class="py-2 px-4 text-sm">Productos</th>
          <th class="py-2 px-4 text-sm">Series</th>
          <th class="py-2 px-4 text-sm">Acciones</th>
        </tr>
      `;
      table.appendChild(thead);

      // Crear el cuerpo de la tabla
      const tbody = document.createElement('tbody');

      // Mostrar las guías
      data.guias.forEach(guia => {
        const row = document.createElement('tr');
        row.className = 'border-b hover:bg-gray-50';

        row.innerHTML = `
          <td class="py-2 px-4 text-sm">${guia.tipo_guia}</td>
          <td class="py-2 px-4 text-sm">${guia.numero_guia}</td>
          <td class="py-2 px-4 text-sm">${guia.fecha_guia}</td>
          <td class="py-2 px-4 text-sm">${guia.nombre_proveedor || 'N/A'}</td>
          <td class="py-2 px-4 text-sm">${guia.productos}</td>
          <td class="py-2 px-4 text-sm">${guia.series}</td>
          <td class="py-2 px-4 text-center">
            <button
              class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-semibold transition duration-200"
              onclick="verDetalle(${guia.id_guia})"
            >
              <i class="fas fa-eye"></i> Ver Detalle
            </button>
          </td>
        `;
        tbody.appendChild(row);
      });

      table.appendChild(tbody);
      contenedor.appendChild(table);

      // Mostrar la paginación
      const pagination = document.getElementById('pagination');
      pagination.innerHTML = '';
      
      // Paginación
      for (let i = 1; i <= data.totalPages; i++) {
        const pageButton = document.createElement('button');
        pageButton.textContent = i;
        pageButton.className = `px-4 py-2 mx-1 rounded-md text-sm font-medium ${
          i === data.currentPage ? 'bg-blue-500 text-white' : 'bg-gray-200 hover:bg-gray-300'
        }`;
        pageButton.onclick = () => cargarGuias(i, search);
        pagination.appendChild(pageButton);
      }
    })
    .catch(err => {
      console.error(err);
      contenedor.innerHTML = '<tr><td colspan="7" class="text-red-600 text-center">Error de conexión al servidor.</td></tr>';
    });
}

// Buscar por proveedor en tiempo real
document.getElementById('searchProveedor').addEventListener('input', function() {
  const search = this.value;
  cargarGuias(1, search); // Recargar con el término de búsqueda
});

// Inicializar la carga de guías
cargarGuias();

function cargarBodegas(idEmpresa) {
  fetch(`get_bodegas.php?id_empresa=${idEmpresa}`)
    .then(res => res.json())
    .then(data => {
      bodega.disabled = false;
      bodega.innerHTML = '<option value="">Seleccione bodega</option>';
      data.forEach(b => {
        bodega.innerHTML += `<option value="${b.id_bodega}">${b.nombre}</option>`;
      });
    });
}

// Cargar proveedores según la empresa seleccionada
function cargarProveedores(idEmpresa) {
  fetch(`proveedores.php?empresa_id=${idEmpresa}`)
    .then(res => res.json())
    .then(data => {
      proveedor.disabled = false;  // Habilitar campo de proveedores
      proveedor.innerHTML = '<option value="">Seleccione proveedor</option>';
      data.forEach(p => {
        proveedor.innerHTML += `<option value="${p.id_proveedor}">${p.nombre}</option>`;
      });
    })
    .catch(error => {
      console.error('Error al cargar proveedores:', error);
    });
}

});

</script>

<!-- Incluir Switch Alert 2 desde un CDN -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script> <!-- Para íconos -->


  <!-- Modal -->
  <div id="modalDetalle" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden">
    <div class="bg-white p-6 rounded-lg w-96">
      
      <div id="modalContenido"></div>
      <button onclick="cerrarModal()" class="mt-4 bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md">
        Cerrar
      </button>
    </div>
  </div>

  <script>
   
 function verDetalle(idGuia) {
    fetch('detalle_guia.php?id_guia=' + idGuia)
        .then(res => res.json())
        .then(data => {
            if (data.status !== 'ok') {
                document.getElementById('modalContenido').innerHTML = `<p class="text-red-600">${data.message}</p>`;
                return;
            }

            const guia = data.guia;

            // Construir la tabla de productos
            let productosTable = `
                <table class="min-w-full bg-white border border-gray-300 rounded-lg shadow-md">
                    <thead>
                        <tr class="bg-gray-200">
                            <th class="p-4 text-left text-sm font-semibold text-gray-700">Producto</th>
                            <th class="p-4 text-left text-sm font-semibold text-gray-700">Cantidad</th>
                        </tr>
                    </thead>
                    <tbody>
            `;
            
            // Agregar productos a la tabla
            if (guia.productos.trim() === "No hay productos.") {
                productosTable += `<tr><td colspan="2" class="p-4 text-center">${guia.productos}</td></tr>`;
            } else {
                let productos = guia.productos.split("\n").filter(item => item.trim() !== "");
                productos.forEach(producto => {
                    const [nombre, cantidad] = producto.split(" - ");
                    productosTable += `
                        <tr class="border-b">
                            <td class="p-4 text-sm text-gray-700">${nombre}</td>
                            <td class="p-4 text-sm text-gray-700">${cantidad}</td>
                        </tr>
                    `;
                });
            }
            productosTable += `</tbody></table>`;

            // Construir la tabla de series
            let seriesTable = `
                <table class="min-w-full bg-white border border-gray-300 rounded-lg shadow-md mt-4">
                    <thead>
                        <tr class="bg-gray-200">
                            <th class="p-4 text-left text-sm font-semibold text-gray-700">Serie</th>
                            <th class="p-4 text-left text-sm font-semibold text-gray-700">Código</th>
                        </tr>
                    </thead>
                    <tbody>
            `;
            
            // Agregar series a la tabla
            if (guia.series.trim() === "No hay series.") {
                seriesTable += `<tr><td colspan="2" class="p-4 text-center">${guia.series}</td></tr>`;
            } else {
                let series = guia.series.split("\n").filter(item => item.trim() !== "");
                series.forEach(serie => {
                    const [serieNombre, serieCodigo] = serie.split(" - Código: ");
                    seriesTable += `
                        <tr class="border-b">
                            <td class="p-4 text-sm text-gray-700">${serieNombre}</td>
                            <td class="p-4 text-sm text-gray-700">${serieCodigo}</td>
                        </tr>
                    `;
                });
            }
            seriesTable += `</tbody></table>`;

            // Modal contenido
            const modalContenido = `
                <div class="">
                    <h2 class="text-2xl font-semibold text-gray-800 mb-4">Detalles de la Guía</h2>
                    <div class="border-b pb-4 mb-4">
                        <p><strong class="font-semibold">Tipo de Guía:</strong> ${guia.tipo_guia}</p>
                        <p><strong class="font-semibold">Número de Guía:</strong> ${guia.numero_guia}</p>
                        <p><strong class="font-semibold">Fecha de Guía:</strong> ${guia.fecha_guia}</p>
                        <p><strong class="font-semibold">Proveedor:</strong> ${guia.nombre_proveedor}</p>
                        <p><strong class="font-semibold">Tipo de Factura:</strong> ${guia.tipo_factura || 'N/A'}</p>
                    </div>

                    <div class="mt-4">
                        <h3 class="text-xl font-semibold text-gray-700">Productos</h3>
                        ${productosTable}
                    </div>

                    <div class="mt-4">
                        <h3 class="text-xl font-semibold text-gray-700">Series</h3>
                        ${seriesTable}
                    </div>
                </div>
            `;

            document.getElementById('modalContenido').innerHTML = modalContenido;
            document.getElementById('modalDetalle').classList.remove('hidden');
        })
        .catch(err => {
            document.getElementById('modalContenido').innerHTML = '<p class="text-red-600">Error al cargar el detalle.</p>';
        });
}

    function cerrarModal() {
      document.getElementById('modalDetalle').classList.add('hidden');
    }
  </script>
