@extends('../padre.padre')

@section('contenido') 
<div class="d-flex justify-content-center">

  <h1>VENCIMIENTOS</h1>
  
</div>

<form action="consultarvencimientos" method="GET">

  <div class="col-md-12">
    <label for="">Fecha_Inicial<input    type="date" name="fi" id="fecI" value="{{$fi}}" class="form-control"></label>
    <label for="">Fecha_Final<input    type="date" name="ff" id="" value="{{$ff}}" class="form-control"></label>
    @include('../menu.bodegas')
    <button  type="submit" id="botonf" class="btn btn-warning">Consultar</button>
    <button  type="submit" name="exportar" class="btn btn-success" value="1">Exportar</button>
    @include('menu.botonRegresar')
  </div>
  
  
    <div>

      <label for="">Nombre Producto<input    type="text" name="product" id="" value="{{$buscarN}}" class="form-control"></label>
      <button  type="submit" name="buscarN" class="btn btn-success" value="1">buscar</button>
    </div>
</form>

 @include('../menu/exportar.exportarVencimientos') 

<!-- Formulario para agregar vencimientos a productos existentes -->
<div class="card mt-4">
    <div class="card-header">
        <h5>Agregar Vencimiento a Producto Existente</h5>
    </div>
    <div class="card-body">
        <form id="formNuevoProducto">
            <div class="row">
                <div class="col-md-4">
                    <label for="codigoProducto">Código del Producto:</label>
                    <div class="input-group">
                        <input type="text" id="codigoProducto" name="codigoProducto" class="form-control" list="sugerenciasProductos" required placeholder="Digite nombre o código y seleccione">
                        <button type="button" id="btnBuscarProd" class="btn btn-outline-primary">Buscar</button>
                    </div>
                    <datalist id="sugerenciasProductos"></datalist>
                    <small class="text-muted">Escriba nombre/código, pulse Buscar, seleccione y se cargará el código</small>
                </div>
                <div class="col-md-2">
                    <label for="caja">Cantidad Caja:</label>
                    <input type="number" id="caja" name="caja" class="form-control" min="0" value="0">
                </div>
                <div class="col-md-2">
                    <label for="frcc">Cantidad Fracción:</label>
                    <input type="number" id="frcc" name="frcc" class="form-control" min="0" value="0">
                </div>
                <div class="col-md-2">
                    <label for="lote">Número de Lote:</label>
                    <input type="text" id="lote" name="lote" class="form-control" required>
                </div>
                <div class="col-md-2">
                    <label for="fechaVencimiento">Fecha de Vencimiento:</label>
                    <input type="date" id="fechaVencimiento" name="fechaVencimiento" class="form-control" required>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-md-3">
                    <label for="numeroFactura">Número de Factura (opcional):</label>
                    <input type="text" id="numeroFactura" name="numeroFactura" class="form-control">
                </div>
                <div class="col-md-3">
                    <label for="proveedorNit">NIT Proveedor (opcional):</label>
                    <input type="text" id="proveedorNit" name="proveedorNit" class="form-control">
                </div>
                <div class="col-md-3">
                    <label for="bodegaProducto">Bodega:</label>
                    <select id="bodegaProducto" name="bodegaProducto" class="form-control" required>
                        <option value="">Seleccionar Bodega</option>
                        @foreach($bodegas ?? [] as $bodega)
                            <option value="{{ $bodega->id }}">{{ $bodega->nombreBodega }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-md-12">
                    <button type="submit" class="btn btn-primary">Guardar Producto</button>
                    <button type="reset" class="btn btn-secondary">Limpiar Formulario</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
  // Manejar el formulario de nuevo producto
  document.getElementById("formNuevoProducto").addEventListener("submit", function(e) {
    e.preventDefault();
    
    const formData = {
      codigoProducto: document.getElementById("codigoProducto").value,
      caja: document.getElementById("caja").value,
      frcc: document.getElementById("frcc").value,
      lote: document.getElementById("lote").value,
      fechaVencimiento: document.getElementById("fechaVencimiento").value,
      numeroFactura: document.getElementById("numeroFactura").value,
      proveedorNit: document.getElementById("proveedorNit").value,
      bodegaProducto: document.getElementById("bodegaProducto").value
    };
    
    fetch("agregarProductoVencimiento", {
      method: 'POST',
      body: JSON.stringify(formData),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(res => res.json())
    .then(response => {
      if (response.estado === "ok") {
        alert("Producto agregado exitosamente");
        document.getElementById("formNuevoProducto").reset();
        // Recargar la página para mostrar el nuevo producto
        location.reload();
      } else {
        alert("Error: " + response.mensaje);
      }
    })
    .catch(error => {
      console.error('Error:', error);
      alert("Error al procesar la solicitud");
    });
  });

  // Búsqueda manual por botón para no consultar en cada tecla
  const inputCodigo = document.getElementById("codigoProducto");
  const lista = document.getElementById("sugerenciasProductos");
  const btnBuscarProd = document.getElementById("btnBuscarProd");

  btnBuscarProd.addEventListener("click", function() {
    const q = inputCodigo.value.trim();
    if (q.length < 2) {
      alert("Digite al menos 2 caracteres para buscar");
      return;
    }
    fetch(`buscarProductosNombre?q=${encodeURIComponent(q)}`)
      .then(r => r.json())
      .then(items => {
        lista.innerHTML = "";
        items.forEach(it => {
          const opt = document.createElement("option");
          opt.value = `${it.codigo} - ${it.nombre}`;
          opt.dataset.codigo = it.codigo;
          lista.appendChild(opt);
        });
        if (items.length === 0) {
          alert("Sin resultados para la búsqueda");
        }
      })
      .catch(() => {
        alert("Error al buscar productos");
      });
  });

  // Al salir del input, si el usuario seleccionó una opción, dejar solo el código
  inputCodigo.addEventListener("change", function() {
    const valor = this.value;
    const sepm = valor.split(" - ");
    if (sepm.length > 1) {
      this.value = sepm[0];
    }
  });

  // Script existente para cambiar fecha de vencimiento
  document.querySelector("#tablaVencimeintos").addEventListener("keypress", function(e) {
    if(e.keyCode==13){
      let id = e.target.parentElement.parentElement.getElementsByTagName("th")[0].innerText;
      let valor = e.target.value;
   
      fetch("cambiarfechaVencieminto", {
          method: 'POST',
          body: JSON.stringify({
              "fecha": valor,
              "id":id
          }),
          headers: {
              'Content-Type': 'application/json'
          }
      }).then(res => res.text())
      .then(response => {
        alert(response)
      })
    }
  });
 </script>

@endsection