<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Devolución de Inventario</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    .carrito table, .resultados table { width: 100%; border-collapse: collapse; margin-top: 10px; }
    td, th { padding: 6px; border: 1px solid #ccc; }
    input[type='number'] { width: 60px; }
  </style>
</head>
<body>
  <h2>Devolución de Inventario</h2>

  <div class="max-w-4xl mx-auto p-4">
    <!-- Buscador de técnicos -->
    <div class="mb-6">
        <input 
            type="text" 
            id="busquedaTecnico" 
            placeholder="Buscar técnico" 
            oninput="buscarTecnico()" 
            class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
    </div>

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

    <hr class="my-6">

    <!-- Panel de Búsqueda -->
    <div id="panelBusqueda" style="display: none;" class="space-y-6">
        <h3 class="text-2xl font-semibold">Búsqueda de productos del técnico</h3>
        
        <!-- Buscador de productos -->
        <div>
            <input 
                type="text" 
                id="buscarProducto" 
                oninput="buscarProducto()" 
                placeholder="Buscar producto..." 
                class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
           
        </div>

        <!-- Buscador de series -->
        <div>
            <input 
                type="text" 
                id="buscarSerie" 
                placeholder="Buscar serie" 
                class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
            <button 
                onclick="buscarSerie()" 
                class="mt-2 p-2 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>

        <!-- Carrito -->
        <div class="carrito mt-6 p-4 bg-gray-100 rounded-lg">
            <h3 class="text-xl font-semibold mb-4">Carrito de Devolución</h3>
            <div id="carrito"></div>
            <button 
                onclick="enviarDevolucion()" 
                class="mt-4 p-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition duration-200"
            >
                Guardar Devolución
            </button>
        </div>
    </div>
</div>
 <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">

  <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}</button>`
        ).join('<br>');
      }
    })
    .catch(error => {
      console.error('Error al buscar técnicos:', error);
    });
}

function seleccionarTecnico(id) {
  tecnicoSeleccionado = id;
  carrito = { ferreteria: [], series: [] };
  productosBuscados = [];
  seriesBuscadas = [];
  document.getElementById('panelBusqueda').style.display = 'block';
  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>
</body>
</html>
