@extends('layouts.app')
<style>
.botonBusqueda{
    width: 14%;
    background: #0164AB !important;
}
.botonBusqueda:hover{
    background: #04538b !important;
}

.botonConsulta{
    width: 14%;
    background: #01A65A !important;
    border: 1px solid #149d5d !important;
}
.botonConsulta:hover{
    background: #0a7c47 !important;
}
.ag-theme-alpine {
            font-size: 8px; /* Cambia el tamaño de la fuente */
        }
.ag-cell {
            line-height: 5px; /* Ajusta la altura de las celdas */
}
</style>
@section('content')
<input type="hidden" value="{{Auth::user()->id}}" id="idusuario">
<div class="nk-content">
  <div class="nk-block-head-sub" style="margin-left: 8px !important">
      <a href="{{route('dashboard')}}" class="btn btn-white btn-dim btn-outline-dark">
        <em class="icon ni ni-home"></em><span>Home</span>
      </a>
  </div>
  <div class="container-fluid">
      <div class="card">
          @if(session()->has('success'))
          <div class="alert alert-success alert-dismissible fade show" role="alert">
              {{ session('success') }}
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
              </button>
          </div>
          @endif
          <h5 class="card-header rounded-top border" style="color:#000000; background: #ffffff; font-size: 15px">
            INGRESOS REGISTRADOS
          </h5>
          <div class="card-body border shadow-sm p-1" style="padding-left:11px;padding-top:0px">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm">
                        <div class="mb-3 row">
                            <label for="nitProveedor" class="col-sm-5 col-form-label">NIT del Proveedor:</label>
                            <div class="col-sm-7">
                                <input type="text" class="from-select form-select-sm" style="width: 100%;border:1px solid #c6c6c6 ">
                            </div>
                        </div>
                    </div>
                  <div class="col-sm">
                    <div class="mb-3 row">
                        <label for="seleccionMes" class="col-sm-5 col-form-label">Proveedor:</label>
                        <div class="col-sm-7">
                            <select class="form-select form-select-sm" >
                                <option selected>Seleccione Proveedor</option>
                                @foreach ($proveedor as $item)
                                <option value="{{$item->id}}">{{$item->nombreEmpresa}}</option>
                                @endforeach
                              </select>
                        </div>
                    </div>
                  </div>
                  <div class="col-sm">
                    <div class="mb-3 row">
                        <label for="nrofactura" class="col-sm-5 col-form-label">Nro. Factura o Recibo:</label>
                        <div class="col-sm-7">
                            <input type="text" class="from-select form-select-sm" style="width: 100%;border:1px solid #c6c6c6 ">
                        </div>
                    </div>
                  </div>                  
                </div>
            </div>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="mb-3 row">
                            <label for="nitProveedor" class="col-sm-5 col-form-label">Fecha de documento:</label>
                            <div class="col-sm-7">
                                <input type="date" class="from-select form-select-sm" style="width: 100%;border:1px solid #c6c6c6 ">
                            </div>
                        </div>
                    </div>
                  <div class="col-sm-7">
                    <div class="mb-3 row">
                        <label for="seleccionMes" class="col-sm-3 col-form-label">Observación:</label>
                        <div class="col-sm-9" style="padding-left: 1px">
                            <textarea class="from-select form-select-sm" name="" id="" style="width: 100%;border:1px solid #c6c6c6" cols="1" rows="1"></textarea>
                        </div>
                    </div>
                  </div>               
                </div>
            </div>
              <div class="row g-3">
                <div class="col-12">
                    <div class="border-bottom border-dark border-2 p-1">
                        
                    </div>
                </div>
                  <div class="col-12 col-xl-12 mt-1">
                    <div class="card-inner border shadow rounded-5 p-2">
                        <div class="container-fluid">
                            <div class="row">
                              <div class="col-md-8">Productos: </div>
                              <input type="text" id="search" placeholder="Buscar...">
                              <button id="searchBtn">Buscar</button>
                          
                              <div id="results"></div>
                            </div>
                            <div id="tablaAdicionar" style="height: 480px; width: 100%;" class="ag-theme-alpine pt-1"></div>
                            </div> 
                        </div>
                    </div>
                  </div>
              </div>
            </div>
      </div>
  </div>
</div>
@section('js1')
<script>

        // Definir los datos
        const rowData = [
            {  producto: 'Producto 1', unidad: 'kg', lote: 'Lote001', fechaVencimiento: '2025-01-01', cantidad: 10, precioUnitario: 100, compraTotal: 1000, registradoPor: 'Usuario1' },
            {  producto: 'Producto 2', unidad: 'kg', lote: 'Lote002', fechaVencimiento: '2025-02-01', cantidad: 5, precioUnitario: 200, compraTotal: 1000, registradoPor: 'Usuario2' },
            // Agrega más filas según sea necesario
        ];

        // Definir las columnas
                // Definir las columnas con anchos específicos
                const columnDefs = [
                    { headerName: "Nº", field: "id", width: 50 },
                    { headerName: "PRODUCTO", field: "producto", width: 450 },
                    { headerName: "UNIDAD DE MEDIDA", field: "unidad", width: 220 },
                    { headerName: "LOTE", field: "lote", width: 180 },
                    { headerName: "FECHA DE VENCIMIENTO", field: "fechaVencimiento", width: 200 },
                    { headerName: "CANTIDAD", field: "cantidad", width: 150 },
                    { headerName: "PRECIO UNITARIO", field: "precioUnitario", width: 200 },
                    { headerName: "COMPRA TOTAL", field: "compraTotal", width: 180 },
                    { headerName: "ACCIONES", field: "acciones", width: 150, cellRenderer: () => '<button>Editar</button>' }
                ];

        // Crear la grid
        const gridOptions = {
            columnDefs: columnDefs,
            rowData: rowData,
        };
        document.addEventListener('DOMContentLoaded', () => {
            const gridDiv = document.querySelector('#tablaAdicionar');
            new agGrid.Grid(gridDiv, gridOptions);
        });

$(document).ready(function() {
    $.ajax({
    type: "GET",
    url: "../obtenerProductos/", 
    success: function(response){
        // Supongamos que `response` es un array de objetos con propiedades `title` y `url`
        const data = response; // Asignar la respuesta a `data`

        $('#search').on('input', function() {
            const query = $(this).val().toLowerCase();
            $('#results').empty();

            if (query) {
                const results = data.filter(item => item.drug.toLowerCase().includes(query));
                if (results.length > 0) {
                    results.forEach(item => {
                        $('#results').append(`<div class="result"><a href="${item.id}" target="_blank">${item.drug}</a></div>`);
                    });
                } else {
                    $('#results').append('<div class="result">No se encontraron resultados.</div>');
                }
            }
        });

    },
    error: function(xhr, status, error){
        console.error("Error en la petición:");
        console.error(xhr.responseText);
    }
  });





});
</script>
@endsection
@endsection