<?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
}
?>
 <!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">
   
</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">Guias de devolucion</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 con ícono de Devoluciones -->
<button onclick="abrirModal()" class="flex items-center p-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition duration-200">
    <!-- Ícono de Devoluciones (undo) -->
    <i class="fas fa-undo h-4 w-4 mr-3"></i>
    Devoluciones
</button>

            </div>
        </div>
<table class="w-full bg-white shadow-lg rounded-lg overflow-hidden">
    <thead>
        <tr class="text-center bg-blue-800 text-white">
            <th class="px-6 py-3 text-sm font-semibold">ID</th>
            <th class="px-6 py-3 text-sm font-semibold">Fecha</th>
            <th class="px-6 py-3 text-sm font-semibold">Empresa</th>
            <th class="px-6 py-3 text-sm font-semibold">Código</th>
            <th class="px-6 py-3 text-sm font-semibold">Personal</th> <!-- Nueva columna para el usuario -->
            <th class="px-6 py-3 text-sm font-semibold">Acciones</th>
        </tr>
    </thead>
    <tbody id="tabla-body">
        <!-- Aquí se llenarán las filas de las devoluciones -->
    </tbody>
</table>

<div id="no-data" class="hidden text-center text-red-600">
    No se encontraron guías de devolución.
</div>


    </div>
</div>


  </div>

</div> 

    </div>
</body>
</html>
<!-- Modal de Búsqueda -->
<div id="modalBusqueda" class="fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center z-50" style="display: none;">
    <div class="bg-white w-full max-w-6xl p-8 rounded-lg shadow-lg">
        <!-- Botón para cerrar el modal -->
        <button onclick="cerrarModal()" class="absolute top-4 right-4 p-3 bg-red-500 text-white rounded-full hover:bg-red-600">
            X
        </button>

        <!-- Contenido del modal -->
        <div class="grid grid-cols-2 gap-8">
            <!-- Columna izquierda: Buscador de técnicos y productos -->
            <div class="space-y-8">
                <div class="mb-8">
                    <!-- Buscador de técnicos -->
                    <input 
                        type="text" 
                        id="busquedaTecnico" 
                        placeholder="Buscar técnico..." 
                        oninput="buscarTecnico()" 
                        class="w-full p-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-lg"
                    />
                </div>

                <div id="tecnicos" class="mb-8"></div>

                <hr class="my-8">

                <div id="panelBusqueda" style="display: none;" class="space-y-8">
                    <h3 class="text-3xl font-semibold mb-4">
                        <!-- Elemento donde se muestra el técnico seleccionado -->
                        <div id="tecnicoSeleccionado" class="mb-8">
                            <p id="nombreTecnico"></p>
                        </div>
                    </h3>

                    <!-- Buscador de productos -->
                    <input 
                        type="text" 
                        id="buscarProducto" 
                        oninput="buscarProducto()" 
                        placeholder="Buscar producto..." 
                        class="w-full p-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-lg"
                    />

                    <!-- Buscador de series -->
                    <div>
                        <input 
                            type="text" 
                            id="buscarSerie" 
                            placeholder="Buscar serie..." 
                            class="w-full p-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-lg"
                        />
                        <button 
                            onclick="buscarSerie()" 
                            class="mt-4 p-3 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition duration-200"
                        >
                            Buscar Serie
                        </button>
                    </div>

                    <!-- Resultados de productos -->
                    <div class="resultados" id="productos"></div>

                    <!-- Resultados de series -->
                    <div class="resultados" id="resultadoSeries"></div>
                </div>
            </div>

            <!-- Columna derecha: Carrito -->
            <div class="carrito mt-6 p-6 bg-gray-100 rounded-lg shadow-md">
                <h3 class="text-2xl font-semibold mb-6">Carrito de Devolución</h3>
                <div id="carrito" class="space-y-4"></div>
                <button 
                    onclick="enviarDevolucion()" 
                    class="mt-6 p-4 bg-green-500 text-white rounded-md hover:bg-green-600 transition duration-200 text-lg"
                >
                    Guardar Devolución
                </button>
            </div>
        </div>
    </div>
</div>


<!-- Agregar el link de TailwindCSS -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">

<!-- Script para abrir y cerrar el modal -->
<script>
    function abrirModal() {
        document.getElementById('modalBusqueda').style.display = 'flex';
    }

    function cerrarModal() {
        document.getElementById('modalBusqueda').style.display = 'none';
    }
</script>


  <script>
 let tecnicoSeleccionado = null;
let carrito = { ferreteria: [], series: [] };
let productosBuscados = [];
let seriesBuscadas = [];


    function buscarTecnico() {
        const nombre = document.getElementById('busquedaTecnico').value;
        
        // Si el campo está vacío, no hacer la búsqueda
        if (nombre.trim() === "") {
            document.getElementById('tecnicos').innerHTML = '';
            return;
        }
        
        fetch('buscar_tecnicos.php?nombre=' + nombre)
            .then(res => res.json())
            .then(data => {
                const cont = document.getElementById('tecnicos');
                
                // Si no hay resultados, mostrar mensaje con lo que se escribió
                if (data.length === 0) {
                    cont.innerHTML = `<p>No hay resultados para "${nombre}"</p>`;
                } else {
                    // Mostrar los resultados de búsqueda
                    cont.innerHTML = data.map(t => 
                        `<button onclick="seleccionarTecnico(${t.id}, '${t.nombre}')">${t.nombre}</button>`
                    ).join('<br>');
                }
            })
            .catch(error => {
                console.error('Error al buscar técnicos:', error);
            });
    }

    function seleccionarTecnico(id, nombre) {
        // Guardamos el técnico seleccionado
        tecnicoSeleccionado = id;
        
        // Actualizamos el nombre del técnico en la UI
        document.getElementById('nombreTecnico').innerText = `Técnico Seleccionado: ${nombre}`;
        
        // Reiniciamos los datos del carrito y las búsquedas anteriores
        carrito = { ferreteria: [], series: [] };
        productosBuscados = [];
        seriesBuscadas = [];
        
        // Mostramos el panel de búsqueda de productos
        document.getElementById('panelBusqueda').style.display = 'block';
        
        // Actualizamos el carrito (este método puedes ajustarlo según tu lógica)
        actualizarCarrito();
    }

function buscarProducto() {
    const nombre = document.getElementById('buscarProducto').value;
    const cont = document.getElementById('productos');
    
    // Limpiar cualquier mensaje previo de "No hay resultados" y la tabla
    cont.innerHTML = ''; 

    // Si el campo está vacío, no hacer la búsqueda
    if (nombre.trim() === "") {
        return; // No hacer nada si está vacío
    }

    // Llamada a la API para obtener los productos
    fetch(`buscar_productos_tecnico.php?id=${tecnicoSeleccionado}&nombre=${nombre}`)
        .then(res => res.json())
        .then(data => {
            // Si no hay resultados, mostrar mensaje con lo que se escribió
            if (data.length === 0) {
                cont.innerHTML = `<p class="no-result">No hay resultados para "<strong>${nombre}</strong>"</p>`;
            } else {
                productosBuscados = data;
                renderizarProductos(); // Mostrar productos encontrados
            }
        })
        .catch(error => {
            console.error('Error al buscar productos:', error);
        });
}

function renderizarProductos() {
  const cont = document.getElementById('productos');
  
  // Crear la tabla de productos
  const html = productosBuscados.map(item => {
    const enCarrito = carrito.ferreteria.find(p => p.id === item.id_producto);
    const cantidadActual = enCarrito ? enCarrito.cantidad : 0;
    const stockRestante = item.total - cantidadActual;
    
    return `
      <tr class="border-b">
        <td class="px-4 py-2">${item.nombre}</td>
        <td class="px-4 py-2">${stockRestante}</td>
        <td class="px-4 py-2">
          <input type="number" id="cant-${item.id_producto}" min="1" max="${stockRestante}" value="1" 
                 class="border p-2 rounded w-20">
        </td>
        <td class="px-4 py-2">
          <button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600" 
                  onclick="agregarFerreteria(${item.id_producto}, '${item.nombre}', ${item.total})">
            Agregar
          </button>
        </td>
      </tr>
    `;
  }).join('');
  
  // Si hay productos, mostrar la tabla de resultados
  if (productosBuscados.length > 0) {
    cont.innerHTML = `
      <h4 class="text-xl font-semibold mb-4">Resultados Ferretería</h4>
      <table class="min-w-full table-auto">
        <thead>
          <tr class="bg-gray-100">
            <th class="px-4 py-2 text-left">Producto</th>
            <th class="px-4 py-2 text-left">Stock</th>
            <th class="px-4 py-2 text-left">Cant.</th>
            <th class="px-4 py-2 text-left">Acción</th>
          </tr>
        </thead>
        <tbody>
          ${html}
        </tbody>
      </table>
    `;
  } else {
    cont.innerHTML = `<p class="text-center text-gray-500">No hay resultados para esta búsqueda.</p>`;
  }
}
function buscarSerie() {
  const serie = document.getElementById('buscarSerie').value;
  fetch(`buscar_series_tecnico.php?id=${tecnicoSeleccionado}&q=${serie}`)
    .then(res => res.json())
    .then(data => {
      seriesBuscadas = data;
      renderizarSeries();
    });
}

function renderizarSeries() {
  const html = seriesBuscadas.map(item => {
    const serieEnCarrito = carrito.series.find(s => s.id === item.id_dato);
    
    return `
      <tr class="border-b">
        <td class="px-4 py-2">${item.serie}</td>
        <td class="px-4 py-2">
          <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600" 
                  onclick="agregarSerie(${item.id_dato}, '${item.serie}')">
            Agregar
          </button>
        </td>
        ${serieEnCarrito ? `
          <td class="px-4 py-2">
            <input type="text" placeholder="Comentario" value="${serieEnCarrito.comentario || ''}" 
                   class="border p-2 rounded" 
                   oninput="actualizarComentario(${item.id_dato}, this.value)">
          </td>` : ''}
      </tr>
    `;
  }).join('');

  document.getElementById('resultadoSeries').innerHTML = `
    <h4 class="text-xl font-semibold mb-4">Series encontradas</h4>
    <table class="min-w-full table-auto">
      <thead>
        <tr class="bg-gray-100">
          <th class="px-4 py-2 text-left">Serie</th>
          <th class="px-4 py-2 text-left">Acción</th>
          <th class="px-4 py-2 text-left">Comentario</th>
        </tr>
      </thead>
      <tbody>
        ${html}
      </tbody>
    </table>
  `;
}

function agregarFerreteria(id, nombre, stock) {
  const input = document.getElementById(`cant-${id}`);
  if (!input) return;

  const cantidad = parseInt(input.value);
  if (isNaN(cantidad) || cantidad <= 0) {
    alert("La cantidad debe ser mayor que 0.");
    return;
  }

  const existente = carrito.ferreteria.find(p => p.id === id);
  const cantidadActual = existente ? existente.cantidad : 0;
  const totalDeseado = cantidadActual + cantidad;

  if (totalDeseado > stock) {
    alert(`La cantidad total no puede superar el stock disponible de ${stock}.`);
    return;
  }

  if (existente) {
    existente.cantidad = totalDeseado;
  } else {
    carrito.ferreteria.push({ id, nombre, cantidad });
  }

  actualizarCarrito();
  renderizarProductos();
}

function agregarSerie(id, serie) {
  const serieExistente = carrito.series.find(s => s.id === id);
  
  if (!serieExistente) {
    carrito.series.push({ id, serie, comentario: '' });
  }

  seriesBuscadas = seriesBuscadas.filter(s => s.id_dato !== id);
  actualizarCarrito();
  renderizarSeries();
}

function actualizarComentario(id, comentario) {
  const serie = carrito.series.find(s => s.id === id);
  if (serie) {
    serie.comentario = comentario;
  }
}

function eliminarItem(tipo, id) {
  carrito[tipo] = carrito[tipo].filter(item => item.id !== id);
  actualizarCarrito();
  if (tipo === 'ferreteria') {
    renderizarProductos();
  } else {
    renderizarSeries();
  }
}
function actualizarCarrito() {
  const f = carrito.ferreteria.map(p => `
    <tr class="border-b">
      <td class="px-4 py-2">${p.nombre}</td>
      <td class="px-4 py-2">${p.cantidad}</td>
      <td class="px-4 py-2">
        <button onclick="eliminarItem('ferreteria', ${p.id})" class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">
          Eliminar
        </button>
      </td>
    </tr>
  `).join('');
  
  const s = carrito.series.map(p => `
    <tr class="border-b">
      <td class="px-4 py-2">${p.serie}</td>
      <td class="px-4 py-2">
        <button onclick="eliminarItem('series', ${p.id})" class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">
          Eliminar
        </button>
      </td>
      <td class="px-4 py-2">
        <input type="text" value="${p.comentario}" oninput="actualizarComentario(${p.id}, this.value)" placeholder="Comentario" 
               class="border p-2 rounded w-full mt-1 focus:ring-2 focus:ring-blue-500">
      </td>
    </tr>
  `).join('');

  document.getElementById('carrito').innerHTML = `
    <div class="bg-white p-6 rounded-lg shadow-lg">
      <h4 class="text-xl font-semibold mb-4 text-gray-800">Ferretería:</h4>
      <table class="min-w-full table-auto">
        <thead>
          <tr class="bg-gray-100">
            <th class="px-4 py-2 text-left">Producto</th>
            <th class="px-4 py-2 text-left">Cantidad</th>
            <th class="px-4 py-2 text-left">Acción</th>
          </tr>
        </thead>
        <tbody>
          ${f}
        </tbody>
      </table>

      <h4 class="text-xl font-semibold mt-6 mb-4 text-gray-800">Series:</h4>
      <table class="min-w-full table-auto">
        <thead>
          <tr class="bg-gray-100">
            <th class="px-4 py-2 text-left">Serie</th>
            <th class="px-4 py-2 text-left">Acción</th>
            <th class="px-4 py-2 text-left">Comentario</th>
          </tr>
        </thead>
        <tbody>
          ${s}
        </tbody>
      </table>
    </div>
  `;
}


function enviarDevolucion() {
  if (carrito.ferreteria.length === 0 && carrito.series.length === 0) {
    alert("No has seleccionado nada para devolver.");
    return;
  }

  fetch('procesar_devolucion.php', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      id_usuario: tecnicoSeleccionado,
      ferreteria: carrito.ferreteria.map(p => ({ id: p.id, cantidad: p.cantidad })),
      series: carrito.series.map(s => ({ id: s.id, comentario: s.comentario }))
    })
  })
  .then(res => res.json())
  .then(resp => {
    alert(resp.mensaje);
    if (resp.exito) {
      window.open('generar_guia.php?id=' + resp.id_devolucion, '_blank');
      carrito = { ferreteria: [], series: [] };
      actualizarCarrito();
      productosBuscados = [];
      seriesBuscadas = [];
      document.getElementById('resultadoProductos').innerHTML = '';
      document.getElementById('resultadoSeries').innerHTML = '';
    }
  });
}



  </script>


    <script>
  function cargarGuías() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'api.php', true);  // Solicitud a api.php para obtener las guías
    xhr.setRequestHeader("Content-Type", "application/json");

    xhr.onload = function() {
        if (xhr.status === 200) {
            const data = JSON.parse(xhr.responseText);
            mostrarGuías(data);  // Llamar a la función para mostrar las guías
        } else {
            alert("Error al cargar las guías de devolución.");
        }
    };

    xhr.send();
}

function mostrarGuías(data) {
    const tablaBody = document.getElementById('tabla-body');
    const noDataDiv = document.getElementById('no-data');
    tablaBody.innerHTML = '';  // Limpiar la tabla antes de mostrar nuevas guías

    // Si no hay guías
    if (data.length === 0) {
        noDataDiv.classList.remove('hidden');
        return;
    } else {
        noDataDiv.classList.add('hidden');
    }

    // Recorrer y agregar cada guía a la tabla
    data.forEach(guia => {
        const fila = document.createElement('tr');
        fila.classList.add('text-center', 'border-b', 'border-gray-200');
        fila.innerHTML = `
            <td class="px-6 py-4">${guia.id}</td>
            <td class="px-6 py-4">${guia.fecha}</td>
            <td class="px-6 py-4">${guia.empresa}</td>
            <td class="px-6 py-4">${guia.codigo}</td>  <!-- Aquí agregamos el código -->
            <td class="px-6 py-4">${guia.usuario}</td>  <!-- Agregamos la columna Usuario -->
            <td class="px-6 py-4">
                <a href="guia_detalle.php?id=${guia.id}" class="text-blue-800 hover:bg-blue-700 hover:text-white py-2 px-4 rounded-lg transition-all">
                  Ver guia
                </a>
            </td>
        `;
        tablaBody.appendChild(fila);
    });
}

// Cargar las guías cuando la página esté lista
window.onload = function() {
    cargarGuías();
};


    </script>
