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

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

// Obtener empresas
$empresas = [];
if ($rol_actual == 'admin_general') {
    $empresas = $conexion->query("SELECT * FROM empresas")->fetch_all(MYSQLI_ASSOC);
} else {
    $empresas[] = $conexion->query("SELECT * FROM empresas WHERE id_empresa = $id_empresa_usuario")->fetch_assoc();
}
?>

 <!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">
       
    </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>
    <app-klatsch v-bind:klatsch="today"></app-klatsch> 
<div class="flex px-8 items-center today-card bg-white shadow-lg ml-16 h-28 rounded-custom border-l-8 border-blue-500">
  
</div>


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

            <!-- Buscador -->
            <div class="flex items-center">
                <input type="text" placeholder="Buscar..." id="buscarTecnico" 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 redirigir a la nueva página en otra pestaña -->
<a href="personal.php" target="_blank">
    <button class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">
        Ir a Personal
    </button>
</a>
<!-- Botón para abrir el modal -->
<button id="abrirModal" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
    Abrir ingreso técnico
</button>

            </div>
        </div>

 

<!-- Lista de técnicos con el inventario -->
<div id="usuariosList"></div>


<!-- FERRETERÍA (productos) -->
<div id="productos"></div>




<!-- Lista de usuarios -->
<div id="usuariosList" class="max-w-4xl mx-auto space-y-4">
    <!-- Los usuarios se cargarán aquí -->
</div>

    </div>
</div>


  </div>

</div> 

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

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>


<!-- Modal -->
<div id="modalAsignacion" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-50">
    <div class="bg-white w-full max-w-3xl rounded-lg shadow-lg p-6 relative overflow-y-auto max-h-[90vh]">

        <!-- Botón cerrar -->
        <button id="cerrarModal" class="absolute top-2 right-2 text-gray-600 hover:text-red-600 text-xl">&times;</button>

        <h2 class="text-2xl font-bold mb-4">Ingreso Técnico</h2>

       <form id="form_asignacion" class="space-y-4">

    <div>
        <label for="empresa" class="block text-sm font-medium">Empresa:</label>
        <select name="empresa" id="empresa" class="w-full border border-gray-300 rounded px-3 py-2" <?= ($rol_actual == 'admin_empresa') ? 'disabled' : '' ?>>
            <?php foreach ($empresas as $empresa) { ?>
                <option value="<?= $empresa['id_empresa']; ?>" <?= ($empresa['id_empresa'] == $id_empresa_usuario) ? 'selected' : '' ?>>
                    <?= $empresa['nombre']; ?>
                </option>
            <?php } ?>
        </select>
    </div>

    <div>
        <label for="usuario" class="block text-sm font-medium">Usuario:</label>
        <select name="usuario" id="usuario" class="w-full border border-gray-300 rounded px-3 py-2">
            <option value="">Seleccione un empleado</option>
        </select>
    </div>

    <div>
        <label for="bodega" class="block text-sm font-medium">Bodega:</label>
        <select name="bodega" id="bodega" class="w-full border border-gray-300 rounded px-3 py-2"></select>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
            <label for="producto" class="block text-sm font-medium">Producto (Ferretería):</label>
            <select name="producto" id="producto" class="w-full border border-gray-300 rounded px-3 py-2"></select>
        </div>

        <div>
            <label for="cantidad" class="block text-sm font-medium">Cantidad:</label>
            <input type="number" name="cantidad" id="cantidad" min="1" placeholder="Cantidad" class="w-full border border-gray-300 rounded px-3 py-2">
        </div>
    </div>

    <button type="button" id="agregar_producto" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">
        Agregar al carrito
    </button>

    <div id="carrito_producto" class="text-sm text-gray-700"></div>

    <div>
        <label for="serie" class="block text-sm font-medium">Serie:</label>
        <select name="serie" id="serie" class="w-full border border-gray-300 rounded px-3 py-2"></select>
    </div>

    <button type="button" id="agregar_serie" class="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700">
        Agregar serie al carrito
    </button>

    <div id="carrito_serie" class="text-sm text-gray-700"></div>

    <input type="hidden" name="carrito_producto_json" id="carrito_producto_json">
    <input type="hidden" name="carrito_serie_json" id="carrito_serie_json">

    <div class="text-right">
        <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
            Asignar
        </button>
    </div>

</form>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const form = document.getElementById("form_asignacion");
    const carrito_producto_json = document.getElementById("carrito_producto_json");
    const carrito_serie_json = document.getElementById("carrito_serie_json");

    form.addEventListener("submit", function(e) {
        e.preventDefault(); // Prevenir el comportamiento de envío tradicional del formulario

        // Obtener los datos del carrito
        const carrito_producto = JSON.parse(carrito_producto_json.value || '[]');
        const carrito_serie = JSON.parse(carrito_serie_json.value || '[]');

        // Crear los datos para enviar al servidor
        const formData = new FormData(form);
        formData.append("carrito_producto_json", JSON.stringify(carrito_producto));
        formData.append("carrito_serie_json", JSON.stringify(carrito_serie));

        // Enviar los datos con AJAX
        fetch('procesar_asignacion.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                // Mostrar mensaje de éxito
                alert(data.message);
            } else {
                // Mostrar mensaje de error
                alert(data.message);
            }
        })
        .catch(error => {
            alert("Ocurrió un error al procesar la solicitud.");
            console.error(error);
        });
    });
});
</script>

    </div>
</div>

<script>
    let carritoProducto = [];
    let carritoSerie = [];

    function actualizarCarritoProducto() {
        $('#carrito_producto').html('');
        carritoProducto.forEach((item, index) => {
            $('#carrito_producto').append(`<p>Producto: ${item.nombre} | Cantidad: ${item.cantidad} <button onclick="eliminarProducto(${index})" class="text-red-500">Eliminar</button></p>`);
        });
        $('#carrito_producto_json').val(JSON.stringify(carritoProducto));
    }

    function eliminarProducto(index) {
        carritoProducto.splice(index, 1);
        actualizarCarritoProducto();
    }

    function actualizarCarritoSerie() {
        $('#carrito_serie').html('');
        carritoSerie.forEach((item, index) => {
            $('#carrito_serie').append(`<p>Serie: ${item.serie} <button onclick="eliminarSerie(${index})" class="text-red-500">Eliminar</button></p>`);
        });
        $('#carrito_serie_json').val(JSON.stringify(carritoSerie));
    }

    function eliminarSerie(index) {
        carritoSerie.splice(index, 1);
        actualizarCarritoSerie();
    }

    $('#agregar_producto').on('click', function () {
        const productoSelect = $('#producto');
        const id_producto = productoSelect.val();
        const nombre = productoSelect.find('option:selected').data('nombre');
        const cantidad = $('#cantidad').val();

        if (id_producto && cantidad > 0) {
            carritoProducto.push({ id_producto, nombre, cantidad });
            actualizarCarritoProducto();
        } else {
            alert('Selecciona un producto y una cantidad válida.');
        }
    });

    $('#agregar_serie').on('click', function () {
        const serieSelect = $('#serie');
        const id_serie = serieSelect.val();
        const serie = serieSelect.find('option:selected').data('serie');

        if (id_serie) {
            carritoSerie.push({ id_serie, serie });
            actualizarCarritoSerie();
        } else {
            alert('Selecciona una serie.');
        }
    });

    $('#empresa').on('change', function () {
        const idEmpresa = $(this).val();
        $.post('ajax_usuarios_por_empresa.php', { id_empresa: idEmpresa }, function (data) {
            $('#usuario').html('<option value="">Seleccione un empleado</option>' + data);
            $('#bodega, #producto, #serie').html('');
        });
    });

    $('#usuario').on('change', function () {
        const idUsuario = $(this).val();
        if (!idUsuario) {
            $('#bodega, #producto, #serie').html('');
            return;
        }

        $.post('ajax_datos_usuario.php', { id_usuario: idUsuario }, function (data) {
            const res = JSON.parse(data);

            $('#bodega').html(`<option value="${res.bodega.id_bodega}">${res.bodega.nombre}</option>`);

            let productosHTML = '';
            res.ferreteria.forEach(p => {
                productosHTML += `<option value="${p.id_producto}" data-nombre="${p.nombre}">${p.nombre}</option>`;
            });
            $('#producto').html(productosHTML);

            let seriesHTML = '';
            res.series.forEach(s => {
                seriesHTML += `<option value="${s.id_dato}" data-serie="${s.serie}">${s.serie}</option>`;
            });
            $('#serie').html(seriesHTML);
        });
    });

    // Detectar si es admin_empresa para precargar usuarios
    <?php if ($rol_actual == 'admin_empresa') { ?>
        $(document).ready(function () {
            const idEmpresa = $('#empresa').val();
            $.post('ajax_usuarios_por_empresa.php', { id_empresa: idEmpresa }, function (data) {
                $('#usuario').html('<option value="">Seleccione un empleado</option>' + data);
            });
        });
    <?php } ?>

    // Abrir y cerrar modal
    $('#abrirModal').on('click', function () {
        $('#modalAsignacion').removeClass('hidden flex').addClass('flex');
    });

    $('#cerrarModal').on('click', function () {
        $('#modalAsignacion').addClass('hidden').removeClass('flex');
    });
</script>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Estilos de Tailwind CSS -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.1.2/dist/tailwind.min.css" rel="stylesheet">


<!-- 

<div id="inventarioModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden flex items-center justify-center">
    <div class="bg-white p-6 rounded-lg shadow-lg max-w-4xl w-full">
        <h2 class="text-2xl font-semibold mb-4 text-center">Inventario del Técnico</h2>
        
      
        <div class="mb-6">
            <h3 class="text-xl font-semibold text-gray-700 mb-3">Productos de Ferretería</h3>
            <table class="min-w-full table-auto bg-gray-50 border border-gray-200 rounded-lg shadow-sm">
                <thead>
                    <tr class="bg-blue-500 text-white">
                        <th class="px-4 py-2 text-left">Producto</th>
                        <th class="px-4 py-2 text-left">Cantidad</th>
                    </tr>
                </thead>
                <tbody id="tablaFerreteria">
                 
                </tbody>
            </table>
        </div>

      
        <div class="mb-6">
            <h3 class="text-xl font-semibold text-gray-700 mb-3">Series</h3>
            <table class="min-w-full table-auto bg-gray-50 border border-gray-200 rounded-lg shadow-sm">
                <thead>
                    <tr class="bg-green-500 text-white">
                        <th class="px-4 py-2 text-left">Serie</th>
                    </tr>
                </thead>
                <tbody id="tablaSeries">
              
                </tbody>
            </table>
        </div>

   
        <button id="cerrarModalinve" class="mt-4 bg-red-500 text-white px-6 py-3 rounded-lg w-full md:w-auto mx-auto block">Cerrar</button>
    </div>
</div><div class="p-4 max-w-screen-lg mx-auto text-sm font-sans bg-white">

  <div class="flex justify-between items-start border border-blue-300 p-2 mb-2">
    <div>
      <img src="tu-logo.png" alt="Logo" class="h-12 mb-2">
      <div class="space-y-1 text-sm">
        <p><strong>Tecnico:</strong> LUIS ENRIQUE PEREZ MUÑOZ</p>
        <p><strong>Direccion:</strong></p>
        <p><strong>Email:</strong></p>
      </div>
    </div>
    <div class="text-right text-sm">
      <p><span class="text-blue-600 font-semibold">Corte</span> <span class="text-red-600">1/04/2025</span></p>
      <p><span class="text-blue-600 font-semibold">Celular</span></p>
      <p><span class="text-blue-600 font-semibold">Fecha</span> <span class="text-green-600">13/04/2025</span></p>
      <h2 class="text-red-600 font-bold text-lg">MATERIALES <span class="text-blue-600">ABRIL</span></h2>
    </div>
  </div>

 
  <div class="overflow-x-auto">
    <table class="min-w-full border border-blue-300 text-xs">
      <thead class="bg-[#e6f3fc] text-blue-800 font-semibold">
        <tr class="text-center border-b border-blue-300">
          <th class="border border-blue-300 py-1 px-2">Item</th>
          <th class="border border-blue-300 py-1 px-2">Nombre de Material</th>
          <th class="border border-blue-300 py-1 px-2">Med</th>
          <th class="border border-blue-300 py-1 px-2">Asignado</th>
          <th class="border border-blue-300 py-1 px-2">Consumo</th>
          <th class="border border-blue-300 py-1 px-2">Devolucion</th>
          <th class="border border-blue-300 py-1 px-2">Pendiente</th>
        </tr>
      </thead>
      <tbody>
  
        <tr class="text-center">
          <td class="border border-blue-300 py-1 px-2">1</td>
          <td class="border border-blue-300 py-1 px-2 text-left">ACOPLADORES</td>
          <td class="border border-blue-300 py-1 px-2">UN</td>
          <td class="border border-blue-300 py-1 px-2">10</td>
          <td class="border border-blue-300 py-1 px-2 text-green-600">#¡VALOR!</td>
          <td class="border border-blue-300 py-1 px-2 text-green-600">#¡VALOR!</td>
          <td class="border border-blue-300 py-1 px-2 text-green-600">#¡VALOR!</td>
        </tr>
  
      </tbody>
    </table>
  </div>
</div>

 --><!-- Modal de Inventario -->
<div id="inventarioModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-50">
  <div class="bg-white rounded-lg shadow-lg max-w-4xl w-full p-6 relative overflow-y-auto max-h-[90vh]">
    <button onclick="cerrarModal()" class="absolute top-2 right-2 text-gray-500 hover:text-red-600 text-2xl font-bold">&times;</button>
    <div id="inventarioList" class="text-sm"></div>
  </div>
</div>
<script>
$(document).ready(function () {
    // Buscar técnicos
    $('#buscarTecnico').on('keyup', function () {
        const searchTerm = $(this).val().toLowerCase();
        $.get('obtener_usuarios.php', function (data) {
            const usuarios = JSON.parse(data);
            const usuariosList = $('#usuariosList');
            usuariosList.empty();

            usuarios.forEach(usuario => {
                if (
                    usuario.nombres.toLowerCase().includes(searchTerm) ||
                    usuario.apellido_paterno.toLowerCase().includes(searchTerm)
                ) {
                    usuariosList.append(`
                        <div class="p-4 bg-white shadow-md rounded-lg flex justify-between items-center mb-3">
                            <div>
                                <p class="text-lg font-semibold text-blue-600">${usuario.nombres} ${usuario.apellido_paterno}</p>
                                <p class="text-sm text-gray-500">${usuario.email}</p>
                            </div>
                            <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition" onclick="verInventario(${usuario.id})">Ver Inventario</button>
                        </div>
                    `);
                }
            });
        });
    });

    // Mostrar modal
    window.mostrarModal = function (html) {
        $('#inventarioList').html(html);
        $('#inventarioModal').removeClass('hidden').addClass('flex');
    };

    // Cerrar modal
    window.cerrarModal = function () {
        $('#inventarioModal').addClass('hidden').removeClass('flex');
    };
window.verInventario = function (id_usuario) {
    $.post('obtener_inventario.php', { id_usuario: id_usuario }, function (data) {
        const response = JSON.parse(data);
        const { tecnico, inventario, devoluciones } = response;

        const ferreteriaItems = inventario.filter(item => item.nombre_producto !== null);
        const seriesItems = inventario.filter(item => item.nombre_producto === null);

        function generarTabla(titulo, items, esFerreteria) {
            let tabla = `
                <h3 class="text-blue-700 font-bold mb-2 mt-4">${titulo}</h3>
                <div class="overflow-x-auto mb-6">
                    <table class="min-w-full border border-blue-300 text-xs">
                        <thead class="bg-[#e6f3fc] text-blue-800 font-semibold">
                            <tr class="text-center border-b border-blue-300">
                                <th class="border border-blue-300 py-1 px-2">Item</th>
                                <th class="border border-blue-300 py-1 px-2">${esFerreteria ? 'Nombre de Material' : 'Serie'}</th>
                                <th class="border border-blue-300 py-1 px-2">Tipo</th>
                                <th class="border border-blue-300 py-1 px-2">Asignado</th>
                                <th class="border border-blue-300 py-1 px-2">Devolución</th>
                                <th class="border border-blue-300 py-1 px-2">Acción</th>
                            </tr>
                        </thead>
                        <tbody>
            `;

            if (items.length > 0) {
                items.forEach((item, index) => {
                    let devolucionTexto = 'No devuelto';
                    let cantidadDevuelta = 0;
                    let comentarioExtra = '';

                    if (!esFerreteria && item.cantidad <= 0) {
                        devolucionTexto = 'Devuelto';
                        const devolucionSerie = devoluciones.find(dev => dev.serie_devuelta === item.serie);
                        if (devolucionSerie && devolucionSerie.comentario_devuelto) {
                            comentarioExtra = `<div class="text-left text-xs mt-1 text-blue-700 italic">Comentario: ${devolucionSerie.comentario_devuelto}</div>`;
                        }
                    } else if (esFerreteria) {
                        // Calcular el total devuelto para productos de ferretería
                        const totalDevuelto = devoluciones
                            .filter(dev => dev.nombre_producto === item.nombre_producto)
                            .reduce((acc, dev) => acc + parseInt(dev.cantidad_devuelta || 0), 0);

                        if (totalDevuelto > 0) {
                            devolucionTexto = `Devuelto: ${totalDevuelto}`;
                        }
                    }

                    tabla += `
                        <tr class="text-center">
                            <td class="border border-blue-300 py-1 px-2">${index + 1}</td>
                            <td class="border border-blue-300 py-1 px-2">${esFerreteria ? item.nombre_producto : item.serie}</td>
                            <td class="border border-blue-300 py-1 px-2">${item.tipo}</td>
                            <td class="border border-blue-300 py-1 px-2">${item.cantidad}</td>
                            <td class="border border-blue-300 py-1 px-2">
                                ${devolucionTexto}
                                ${comentarioExtra}
                            </td>
                            <td class="border border-blue-300 py-1 px-2">
                                ${
                                    (!esFerreteria && item.cantidad > 0 && !devoluciones.find(dev => dev.serie_devuelta === item.serie)) ||
                                    (esFerreteria && item.cantidad > 0 && !devoluciones.find(dev => dev.nombre_producto === item.nombre_producto))
                                        ? `<button class="px-4 py-1 bg-red-600 hover:bg-red-700 text-white text-xs font-medium rounded-full transition duration-200" 
                                            onclick="devolverProducto(${item.id_inventario}, ${item.cantidad}, '${item.nombre_producto || item.serie}')">
                                            Devolver
                                        </button>` 
                                        : ''
                                }
                            </td>
                        </tr>
                    `;
                });
            } else {
                tabla += `
                    <tr>
                        <td colspan="6" class="text-center py-2 text-red-500">No hay datos en esta categoría.</td>
                    </tr>
                `;
            }

            tabla += `</tbody></table></div>`;
            return tabla;
        }

        const html = `
            <div class="text-sm font-sans bg-white">
                <!-- Encabezado -->
                <div class="flex justify-between items-start border border-blue-300 p-2 mb-4 rounded">
                    <div>
                        <img src="https://inversionestli.com/sistema_tliv3.0/logo.jpg" alt="Logo" class="h-12 mb-2">
                        <div class="space-y-1">
                            <p><strong>Técnico:</strong> ${tecnico.nombres} ${tecnico.apellido_paterno}</p>
                            <p><strong>Dirección:</strong> ${tecnico.direccion || 'N/A'}</p>
                            <p><strong>Email:</strong> ${tecnico.email}</p>
                        </div>
                    </div>
                    <div class="text-right text-sm">
                        <p><span class="text-blue-600 font-semibold">Fecha</span> <span class="text-green-600">${new Date().toLocaleDateString()}</span></p>
                        <h2 class="text-red-600 font-bold text-lg">MATERIALES <span class="text-blue-600">ABRIL</span></h2>
                    </div>
                </div>

                <!-- Tablas -->
                ${generarTabla('Inventario de Ferretería', ferreteriaItems, true)}
                ${generarTabla('Inventario con Series', seriesItems, false)}
            </div>
        `;

        mostrarModal(html);
    });
};

    // Función para devolver un producto
    window.devolverProducto = function (idInventario, cantidad, nombreProducto) {
        if (confirm(`¿Estás seguro de devolver ${cantidad} de ${nombreProducto}?`)) {
            $.post('devolver_producto.php', {
                id_inventario: idInventario,
                cantidad: cantidad
            }, function(response) {
                const data = JSON.parse(response);
                if (data.success) {
                    alert('Producto devuelto con éxito');
                    // Actualizar el inventario sin recargar la página
                    verInventario(data.id_usuario); // Recarga solo el inventario del técnico
                } else {
                    alert('Hubo un error al devolver el producto');
                }
            });
        }
    };

});
</script>



<script>
  
    // Función para ver el inventario de un usuario
    function verInventario(idUsuario) {
        $.post('obtener_inventario_usuario.php', { id_usuario: idUsuario }, function(data) {
            const inventario = JSON.parse(data);
            const tablaFerreteria = $('#tablaFerreteria');
            const tablaSeries = $('#tablaSeries');
            
            // Limpiar las tablas
            tablaFerreteria.html('');
            tablaSeries.html('');

            // Recorrer el inventario y mostrar los datos
            if (inventario.length > 0) {
                inventario.forEach(item => {
                    if (item.tipo === 'ferreteria') {
                        tablaFerreteria.append(`
                            <tr class="border-b">
                                <td class="px-4 py-2">${item.nombre_producto}</td>
                                <td class="px-4 py-2 text-green-600">${item.cantidad}</td>
                            </tr>
                        `);
                    } else if (item.tipo === 'serie') {
                        tablaSeries.append(`
                            <tr class="border-b">
                                <td class="px-4 py-2">${item.serie}</td>
                            </tr>
                        `);
                    }
                });
            } else {
                tablaFerreteria.append(`
                    <tr>
                        <td colspan="2" class="px-4 py-2 text-center text-gray-500">No hay productos de ferretería disponibles.</td>
                    </tr>
                `);
                tablaSeries.append(`
                    <tr>
                        <td class="px-4 py-2 text-center text-gray-500">No hay series disponibles.</td>
                    </tr>
                `);
            }
            
            // Abrir el modal
            $('#inventarioModal').removeClass('hidden').addClass('flex');
        });
    }

    // Función para cerrar el modal
    $('#cerrarModalinve').click(function() {
        $('#inventarioModal').removeClass('flex').addClass('hidden');
    });
</script>
