<?php
include 'conexion3.php';
$suppliers = $conn->query("SELECT sup_id, sup_name FROM suppliers");
?>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Registrar Nueva Factura</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .suggestions {
      border: 1px solid #ccc;
      max-height: 150px;
      overflow-y: auto;
      position: absolute;
      background: #fff;
      z-index: 10;
      width: 100%;
    }
    .suggestions div:hover {
      background-color: #f1f1f1;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div class="container py-4">
  <h3>Nueva Factura</h3>
  <form action="procesar_factura.php" method="POST">
    <div class="row mb-3">
      <div class="col-md-4">
        <label class="form-label">Proveedor</label>
        <select name="proveedor_id" class="form-select" required>
          <option value="">-- Seleccionar proveedor --</option>
          <?php foreach ($suppliers as $s): ?>
            <option value="<?= $s['sup_id'] ?>"><?= $s['sup_name'] ?></option>
          <?php endforeach; ?>
        </select>
      </div>
      <div class="col-md-4">
        <label class="form-label">Número de Factura</label>
        <input type="text" name="numero_factura" class="form-control" required>
      </div>
      <div class="col-md-4">
        <label class="form-label">Fecha de Emisión</label>
        <input type="date" name="fecha_emision" class="form-control" required>
      </div>
    </div>

    <h5>Buscar Producto</h5>
    <div class="mb-3 position-relative">
      <input type="text" id="buscar_producto" class="form-control" placeholder="Escriba para buscar producto">
      <div id="suggestions" class="suggestions"></div>
    </div>

    <h5>Artículos</h5>
    <table class="table table-bordered" id="tabla-items">
      <thead>
        <tr>
          <th>Producto</th>
          <th>Cantidad</th>
          <th>Precio</th>
          <th>Impuesto (%)</th>
          <th>Acción</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>

    <button type="submit" class="btn btn-primary">Guardar Factura</button>
  </form>
</div>

<script>
document.getElementById("buscar_producto").addEventListener("input", function() {
  const query = this.value;
  if (query.length < 2) {
    document.getElementById("suggestions").innerHTML = "";
    return;
  }
  fetch("buscar_producto.php?q=" + encodeURIComponent(query))
    .then(res => res.json())
    .then(data => {
      const suggestions = document.getElementById("suggestions");
      suggestions.innerHTML = "";
      data.forEach(prod => {
        const div = document.createElement("div");
        div.textContent = prod.p_name;
        div.dataset.id = prod.p_id;
        div.addEventListener("click", () => agregarItem(prod.p_id, prod.p_name));
        suggestions.appendChild(div);
      });
    });
});

function agregarItem(id, name) {
  const tbody = document.querySelector("#tabla-items tbody");
  const row = document.createElement("tr");
  row.innerHTML = `
    <td><input type="hidden" name="producto_id[]" value="${id}">${name}</td>
    <td><input type="number" name="cantidad[]" class="form-control" step="1" required></td>
    <td><input type="number" name="precio[]" class="form-control" step="0.01" required></td>
    <td><input type="number" name="impuesto[]" class="form-control" step="0.01" required></td>
    <td><button type="button" class="btn btn-danger btn-sm" onclick="this.closest('tr').remove()">Eliminar</button></td>
  `;
  tbody.appendChild(row);
  document.getElementById("suggestions").innerHTML = "";
  document.getElementById("buscar_producto").value = "";
}
</script>
</body>
</html>
