<!--@Header-->
<?php
session_start();

if(isset($_SESSION['nomUsuario'])){
    $usuario = $_SESSION['nomUsuario'];
    $rol_usuario=$_SESSION['rolUsuario'];
    $id=$_SESSION['cveUsuario'];
    
    if ($rol_usuario == 'ADMINISTRADOR') {
        include("path/header.php");
    }else{
        echo "<script> 
               document.location.href='../functions/salir.php';
            </script>";
    }
}else{
  echo "<script> 
        document.location.href='/aqua-restaurant/';
    </script>";
}

?>
<div class="row">
    <div class="col-md-12 mb-lg-0">
        <div class="card mt-1 pb-0 p-2">
            <nav>
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Alta de compras</button>
                   <!--  <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Edición de usuarios</button> -->
                    <button class="nav-link" id="nav-carga-compras-tab" data-bs-toggle="tab" data-bs-target="#nav-carga-compras" type="button" role="tab" aria-controls="nav-carga-compras" aria-selected="false">Carga de compras</button>
                    <button class="nav-link" id="nav-list-compras-tab" data-bs-toggle="tab" data-bs-target="#nav-list-compras" type="button" role="tab" aria-controls="nav-list-compras" aria-selected="false">Lista de compras</button>
                </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                    <div class="card card-plain">
                        <div class="card-header">
                            <h5 class="font-weight-bolder">Registro de Compra</h5>
                        </div>
                        <div class="card-body pt-3 pb-5">
                            <div class="col-md-10 mb-lg-0">
                                <form id="form_compra">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label class="form-label">Clave</label>
                                            <div class="input-group input-group-outline mb-3">
                                                <input type="text" class="form-control" name="clave_compra" id="clave_compra">
                                            </div>
                                        </div>
                                        <div class="col-md-8 ">
                                            <label class="form-label">Materia Prima</label>
                                            <div class="list-finder-admin">
                                                <div class="input-group input-group-outline mb-3">
                                                    <input type="text" class="form-control" id="materia_prima" autocomplete = "off">
                                                    <input type="hidden" id="idMateria" name="idMateria">
                                                    <div id="listMateriaP" class="list-group list-hide">
                                                        <div class="list-items" ></div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                        </div>
                                        
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <!-- <label class="form-label">Proveedor</label> -->
                                            <div class="input-group input-group-outline mb-3">
                                                <select class="form-control" name="proveedor" id="proveedor" required>
                                                    <option value="">Seleccione un proveedor</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <!-- <label class="form-label">Proveedor</label> -->
                                            <div class="input-group input-group-outline mb-3">
                                                <select class="form-control" name="unidad_medida" id="unidad_medida" required>
                                                    <option value="">Seleccione la unidad de medida</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Cantidad</label>
                                                <input type="number" class="form-control" name="cantidad" id="cantidad">
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="input-group input-group-outline mb-3">
                                            <label class="form-label">Precio Unitario</label>
                                                <input type="text" class="form-control" name="precio_unitario" id="precio_unitario">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Fecha compra</label>
                                            <div class="input-group input-group-outline mb-3">
                                                <input type="date" class="form-control" name="fecha_compra" id="fecha_compra">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Total</label>
                                            <div class="input-group input-group-outline mb-3">
                                                <input type="text" class="form-control" name="total_compra" id="total_compra" value="">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Tipo de compra</label>
                                            <div class="input-group input-group-outline mb-3">
                                                <select class="form-control" name="tipo_compra" id="tipo_compra" required>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="text-center">
                                                <button type="submit" class="btn btn-lg bg-gradient-primary btn-lg w-100 mt-4 mb-0">Dar de alta</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="tab-pane fade" id="nav-carga-compras" role="tabpanel" aria-labelledby="nav-carga-compras-tab">
                    <div class="card card-plain">
                        <div class="card-header">
                            <h5 class="font-weight-bolder">Lista de compras individuales</h5>
                        </div>
                        <div class="card-body ">
                            <div class="col-md-12 mb-lg-0">
                                <form id="formCargarCompra" enctype="multipart/form-data">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label class="form-label">Cargar compra</label>
                                            <div class="input-group input-group-outline mb-3">
                                                <input type="file" class="form-control" name="archivo_compra" id="archivo_compra" accept=".csv" required>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="input-group input-group-outline mb-3">
                                                <button type="submit" class="btn bg-gradient-primary mt-3 mb-0" id="cargar_lista">Cargar info</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="nav-list-compras" role="tabpanel" aria-labelledby="nav-list-compras-tab">
                    <div class="card card-plain">
                        <div class="card-header">
                            <h5 class="font-weight-bolder">Lista de compras individuales</h5>
                        </div>
                        <div class="card-body ">
                            <div class="col-md-12 mb-lg-0">
                                <div class="table-responsive">
                                    <table class="table compact" id= "tabla_lista_compras" style="width:100%">
                                        <thead style="background: #052659;">
                                            <tr>
                                                <th class="align-middle text-center text-white">Clave Compra</th>
                                                <th class="align-middle text-center text-white">Materia</th>
                                                <th class="align-middle text-center text-white">Proveedor</th>
                                                <th class="align-middle text-center text-white" >Cantidad</th>
                                                <th class="align-middle text-center text-white" >Precio Unitario</th>
                                                <th class="align-middle text-center text-white" >Unidad de Medida</th>
                                                <th class="align-middle text-center text-white" >Total</th>   
                                                <th class="align-middle text-center text-white" >Fecha de compra</th> 
                                                <th class="align-middle text-center text-white" >Tipo de compra</th> 
                                                <th class="align-middle text-center text-white" >Acciones</th>             
                                            </tr>
                                        </thead>
                                        <tbody class="" id="lista_compras" style="width:100%"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="tab-pane fade" id="nav-list-generales" role="tabpanel" aria-labelledby="nav-list-generales-tab">
                    <div class="card card-plain">
                        <div class="card-header">
                            <h5 class="font-weight-bolder">Lista de compras</h5>
                        </div>
                        <div class="card-body ">
                            <div class="col-md-12 mb-lg-0">
                                <div class="table-responsive">
                                    <table class="table compact" id= "tabla_lista_compras_gen" style="width:100%">
                                        <thead style="background: #052659;">
                                            <tr>
                                                <th class="align-middle text-center text-white">Clave de compra</th>
                                                <th class="align-middle text-center text-white">Materia</th>
                                                <th class="align-middle text-center text-white">Proveedor</th>
                                                <th class="align-middle text-center text-white" >Cantidad</th>
                                                <th class="align-middle text-center text-white" >Precio Unitario</th>
                                                <th class="align-middle text-center text-white" >Total</th>   
                                                <th class="align-middle text-center text-white" >Fecha de compra</th>  
                                                <th class="align-middle text-center text-white" >Acciones</th>             
                                            </tr>
                                        </thead>
                                        <tbody class="" id="lista_compras_gen"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</div>
</div>

<div class="modal fade" id="modalEditarCompra" tabindex="-1" aria-labelledby="modalEditarCompra" aria-hidden="true">
  <div class="modal-dialog modal-sm-lg modal-dialog-centered-product">
    <div class="modal-content">
      <div class="modal-header" style="background-color: #ECC950">
        <h5> <span id="Clave_compra_e"></span></h5>
        <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
      </div>
      
      <div class="modal-body">
        <form action="" method="post" id="formulario_editar_compra">
          <div class="row">
            
            <div class="col-sm-2 col-lg-2 d-flex align-items-center">
              <div class="card-footer" style="width:100% !important">
                <div class="input-group input-group-outline-gd">
                    <!-- <label class="form-label">Precio</label> -->
                    <input type="text" class="form-control"  id="clave_compra_edt" placeholder="Clave">
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-lg-6 d-flex align-items-center">
              <div class="card-footer list-finder-admin" style="width:100% !important">
                <div class="input-group input-group-outline-gd" >
                    <input type="text" class="form-control" id="materia_prima_edt" autocomplete = "off" disabled>
                    <input type="hidden" id="idMateria_edt" name="idMateria_edt">
                    <div id="listMateriaP_edt" class="list-group list-hide">
                        <div class="list-items" ></div>
                    </div>
                </div>
              </div>
            </div>
            <div class="col-sm-4 col-lg-4 d-flex align-items-center">
              <div class="card-footer" style="width:100% !important">
                <div class="input-group input-group-outline-gd">
                    <select class="form-control" name="proveedor_edt" id="proveedor_edt" required>
                    </select>
                </div>
              </div>
            </div>
            <div class="col-sm-4 col-lg-4 d-flex align-items-center">
              <div class="card-footer" style="width:100% !important">
                <div class="input-group input-group-outline-gd">
                    <select class="form-control" name="unidad_medida_edt" id="unidad_medida_edt" required>
                    </select>
                </div>
              </div>
            </div>
            <div class="col-sm-4 col-lg-4 d-flex align-items-center">
              <div class="card-footer" style="width:100% !important">
                <div class="input-group input-group-outline-gd">
                    <!-- <label class="form-label">Precio</label> -->
                    <input type="text" class="form-control"  id="precio_unitario_edt" placeholder="Precio">
                </div>
              </div>
            </div>
            <div class="col-sm-4 col-lg-4 d-flex align-items-center">
              <div class="card-footer" style="width:100% !important">
                <div class="input-group input-group-outline-gd">
                    <!-- <label class="form-label">Cantidad</label> -->
                    <input type="number" class="form-control"  id="cantidad_edt" value="1" placeholder="Cantidad">
                </div>
              </div>
            </div>
            <div class="col-sm-4 col-lg-4 d-flex align-items-center">
              <div class="card-footer" style="width:100% !important">
                <div class=" input-group input-group-outline-gd">
                    <!-- <label class="form-label">Comentario</label> -->
                    <input type="text" class="form-control"  id="total_compra_edt" placeholder="Total"><!-- 
                     <textarea class="form-control" style="font-size: 2em !important;" id="total_compra" placeholder="fecha_compra" name="" id=""></textarea> -->
                </div>
              </div>
            </div>
            <div class="col-sm-4 col-lg-4 d-flex align-items-center">
              <div class="card-footer" style="width:100% !important">
                <div class=" input-group input-group-outline-gd">
                    <!-- <label class="form-label">Comentario</label> -->
                    <input type="date" class="form-control"  id="fecha_compra_edt" ><!-- 
                     <textarea class="form-control" style="font-size: 2em !important;" id="total_compra" placeholder="fecha_compra" name="" id=""></textarea> -->
                </div>
              </div>
            </div>
            <div class="col-sm-4 col-lg-4 d-flex align-items-center">
              <div class="card-footer" style="width:100% !important">
                <div class=" input-group input-group-outline-gd">
                    <select class="form-control" name="tipo_compra_edt" id="tipo_compra_edt" required>
                    </select>
                </div>
              </div>
            </div>
            <div class="col-sm-4 col-lg-4 d-flex align-items-center">
              <div class="card-footer" style="width:100% !important">
                <div class="input-group input-group-outline-gd">
                    <select class="form-control" name="estatus_edt" id="estatus_edt" required>
                        <option value="1">Activo</option>
                        <option value="0">Inactivo</option>

                    </select>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="row">
          <div class="col-6 d-flex align-items-center">
            <div id="materias_primas_x_producto"></div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        
        <button type="button" class="btn btn-secondary" style="font-size: 0.8em" id="btn-cerrar" data-bs-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary text-white" style="font-size: 0.8em" id="btn_editar_compra" data-complement="">Editar</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal Guardar Usuario -->
<div class="modal fade" id="modalGuardarUsuario" tabindex="-1" aria-labelledby="modalGuardarUsuario" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalGuardarUsuario"> CCOMPRA GUARDADA</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-10">
                        <h6 class="mb-0">¡La compra ha sido registrada exitosamente!</h6>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Editar Usuario -->
<div class="modal fade" id="modalEditarUsuario" tabindex="-1" aria-labelledby="modalEditarUsuario" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalEditarUsuario"> COMPRA GUARDADA</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-10">
                        <h6 class="mb-0">¡La compra ha sido editada exitosamente!</h6>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Editar Usuario -->
<div class="modal fade" id="modalFalloUsuario" tabindex="-1" aria-labelledby="modalFalloUsuario" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalFalloUsuario"> FALLO AL CARGAR LA COMPRA</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-10">
                        <h6 class="mb-0">¡La compra no se ha podido cargar, porfavor introducir los datos correctos!</h6>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<script src="../assets/js/jquery-3.5.1.min.js"></script>
<script src="../assets/lib/dataTable/datatables.min.js"></script>

<script>
   $(document).ready(function () {

        getListMaterias('');
        getProveedores()
        getTipoCompras()
        getComprasIndiv()
        getUnidadMedida()
        //getCompras()

        $('#tabla_lista_compras').DataTable({
        //order: [[8, 'Desc']],
        ordering: false,
        dom: 'Blfrtip',
        searching: false,  
        lengthChange: false,
        /* select: {
            style: 'single',
            info: false,
        }, */
        buttons: [],
        pagingType: 'simple_numbers',
        language: {
            url: '../assets/lib/dataTable/spanish.json',
        },
        paging: true,
        scrollY: 'calc(100vh - 300px)',
        scrollX: true,
        fixedHeader: true,
        bFilter: false, 
        bInfo: false,
        columns: [
            {data: 'clave_compra', class: ''},
            {data: 'Nombre', class: 'sizet-prod'},
            {data: 'nombre_proveedor', class: 'sizet-prod'},
            {data: 'cantidad', class: ''},
            {data: 'Precio', class: ''},
            {data: 'med_uni_descripcion', class: ''},
            {data: 'total', class: ''},
            {data: 'fecha_creacion', class: 'sizet-prod'},
            {data: 'tipo_compra', class: 'sizet-prod'},
            {data: 'accion', class: ''},
        ],
    });

        $('#materia_prima')
        .unbind('keyup')
        .on('keyup', function () {
            let text = $(this).val().toUpperCase();
            selInventario(text);
        });
        $('#materia_prima_edt')
        .unbind('keyup')
        .on('keyup', function () {
            let text = $(this).val().toUpperCase();
            selInventario2(text);
        });
        $("#btn_editar_compra").unbind("click").on("click", function(){
            let id = $(this).attr("data-complement")
            
            editar_compra(id)
        })
        $('#btn-cerrar').on('click', function(){
            $('#modalEditarCompra').modal("toggle");
        });
        $("#cantidad, #precio_unitario").on("input", function(){
            let cantidad = parseFloat($("#cantidad").val())
            let precio_unitario = parseInt($("#precio_unitario").val())
            let total_input = $("#total_compra")
            
            calcularTotal(cantidad,precio_unitario, total_input)
        });
         $("#cantidad_edt, #precio_unitario_edt").on("input", function(){
            let cantidad = parseFloat($("#cantidad_edt").val())
            let precio_unitario = parseInt($("#precio_unitario_edt").val())
            let total_input = $("#total_compra_edt")
            
            calcularTotal(cantidad,precio_unitario, total_input)
        });
        
        

        //Cargar lista de compras
        $("#formCargarCompra").submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);

            $.ajax({
            url: "../functions/compras/cargar_lista_csv.php", 
            type: "POST",
            data: formData,
            contentType: false, 
            processData: false, 
            success: function(response) {
                
                if(response == 1){
                    $("#modalEditarUsuario").show()
                    setTimeout(function() {
                        location.href ="/aqua-restaurant/usuario_administrador/compras.php";
                    }, 500);

                }else{
                    $("#modalFalloUsuario").show()
                    
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(textStatus);
            }
        });
        })
            
        
    }
  )
    function calcularTotal(cantidad,precio_unitario, total_input){
        if (!isNaN(cantidad) && !isNaN(precio_unitario)) {
                let total = cantidad * precio_unitario;
                
                total_input.val(total.toFixed(2));
            } else {
                total_input.val("0.00");
            }
    }
// FUNCIONES PARA BUSCAR LA MATERIA PRIMA //
  function getListMaterias(word) {
    // console.log(word);
    let pagina = "../functions/list_materias_primas.php"; 
    let datos = { word: word }; 
    let dtipo = "JSON"; 
    let tipo = "POST"; 
    let selector = searchInventario;
    let selector2 = searchInventario2;
    $.ajax({
      type: tipo,
      dataType: dtipo,
      data: datos,
      url: pagina,
      success: function (respuesta) {
        selector(respuesta)
        selector2(respuesta)
      }, error(e) {
        console.log(e);
      }
    });
  }
    /** FUNCION AJAX */
  function ajax_function(pagina, datos, dtipo, tipo, selector){
    $.ajax({
      type: tipo,
      dataType: dtipo,
      data: datos,
      url: pagina,
      success: function (respuesta) {
        selector(respuesta)
      }, error(e) {
        console.log(e);
      }
    });
  }
  function searchInventario(dt){
    var sl = $('#materia_prima').offset();
    $('#listMateriaP .list-items').html('');
    $('#listMateriaP').css({top: sl.top + 20 + 'px'});// volver a tomar al hacer scroll.
    if (dt[0].id > 0) {
        $.each(dt, function (v, u) {
            let H = `<div class="list-item" id="${u.id}" data_complement="${u.map_clave}|${u.id}|${u.map_nombre.replace(/"/g, '')}" data-price="${u.map_costo_final}">${u.map_nombre}</div>`;
            $('#listMateriaP .list-items').append(H);
        });
    }
    
    $('#listMateriaP').on('mouseleave', function () {
        $('#listMateriaP').slideUp('fast');
    });

    $('#listMateriaP .list-item').on('click', function () {
        let prdNm = $(this).html();
        let prdId = $(this).attr('id');
        let price = $(this).attr('data-price');
        $('#materia_prima').val(prdNm);
        $('#idMateria').val(prdId);
        $('#Precio').val(price);
        $('#listMateriaP').slideUp(100);
        
    });
  }
  function selInventario(res) {
  
    res = res.toUpperCase();
    if (res == '') {
        $('#listMateriaP').slideUp(100);
    } else {
        $('#listMateriaP').slideDown(400);
    }
    if (res.length > 1) {
        if (res.length == 2) {
            // getListProducts(res)
            $('#listMateriaP .list-items div.list-item').css({display: 'block'});
        } else {
            $('#listMateriaP .list-items div.list-item').css({display: 'none'});
            $('#listMateriaP .list-items div.list-item').each(function (index) {
                var cm = $(this).attr('data_complement').toUpperCase().replace(/|/g, '');
                
                cm = omitirAcentos(cm);
                var cr = cm.indexOf(res);
                if (cr > -1) {
                    $(this).css({display: 'block'});
                }
            });
        }
        // rowCurr.show();
    }else {
        var sl = $('#materia_prima').offset();
        $('#listMateriaP').css({top: sl.top + 20 + 'px'});// volver a tomar al hacer scroll.
        $('#listMateriaP .list-items div.list-item').css({display: 'none'});
    }
  }

  function searchInventario2(dt){
    var sl = $('#materia_prima_edt').offset();
    $('#listMateriaP_edt .list-items').html('');
    $('#listMateriaP_edt').css({top: sl.top + 60 + 'px'});// volver a tomar al hacer scroll.
    if (dt[0].id > 0) {
        $.each(dt, function (v, u) {
            let H = `<div class="list-item" id="${u.id}" data_complement="${u.map_clave}|${u.id}|${u.map_nombre.replace(/"/g, '')}" data-price="${u.map_costo_final}">${u.map_nombre}</div>`;
            $('#listMateriaP_edt .list-items').append(H);
        });
    }
    
    $('#listMateriaP_edt').on('mouseleave', function () {
        $('#listMateriaP_edt').slideUp('fast');
    });

    $('#listMateriaP_edt .list-item').on('click', function () {
        let prdNm = $(this).html();
        let prdId = $(this).attr('id');
        let price = $(this).attr('data-price');
        $('#materia_prima_edt').val(prdNm);
        $('#idMateria_edt').val(prdId);
        $('#Precio_edt').val(price);
        $('#listMateriaP_edt').slideUp(100);
        
    });
  }
  function selInventario2(res) {
  
    res = res.toUpperCase();
    if (res == '') {
        $('#listMateriaP_edt').slideUp(100);
    } else {
        $('#listMateriaP_edt').slideDown(400);
    }
    if (res.length > 1) {
        if (res.length == 2) {
            // getListProducts(res)
            $('#listMateriaP_edt .list-items div.list-item').css({display: 'block'});
        } else {
            $('#listMateriaP_edt .list-items div.list-item').css({display: 'none'});
            $('#listMateriaP_edt .list-items div.list-item').each(function (index) {
                var cm = $(this).attr('data_complement').toUpperCase().replace(/|/g, '');
                
                cm = omitirAcentos(cm);
                var cr = cm.indexOf(res);
                if (cr > -1) {
                    $(this).css({display: 'block'});
                }
            });
        }
        // rowCurr.show();
    }else {
        var sl = $('#materia_prima_edt').offset();
        $('#listMateriaP_edt').css({top: sl.top + 20 + 'px'});// volver a tomar al hacer scroll.
        $('#listMateriaP_edt .list-items div.list-item').css({display: 'none'});
    }
  }

  /** Omite acentos para su facil consulta */
  function omitirAcentos(text) {
      var acentos = 'ÃÀÁÄÂÈÉËÊÌÍÏÎÒÓÖÔÙÚÜÛãàáäâèéëêìíïîòóöôùúüûÑñÇç';
      var original = 'AAAAAEEEEIIIIOOOOUUUUaaaaaeeeeiiiioooouuuunncc';
      for (var i = 0; i < acentos.length; i++) {
          text = text.replace(acentos.charAt(i), original.charAt(i));
      }
      return text;
  }

// FIN FUN. MATERIAS PRIMAS DE INVENTARIO //

// ENCONTRAR PROVEEDORES //
  function getProveedores(){
    let pagina = "../functions/list_providers.php"; 
    let datos = { word: '' }; 
    let dtipo = "JSON"; 
    let tipo = "POST"; 
    let selector = putProveedores;
    ajax_function(pagina, datos, dtipo, tipo, selector);
  }
  function putProveedores(dt){
    dt.forEach(function(item, index) {
        $("#proveedor").append(`<option value="${item.id}"> ${item.prv_nombre_proveedor}</option>`)
        $("#proveedor_edt").append(`<option value="${item.id}"> ${item.prv_nombre_proveedor}</option>`)
    });
  }
// FIN PROVEEDORES //


// ENCONTRAR UNIDAD DE MEDIDAS //
  function getUnidadMedida(){
    let pagina = "../functions/list_unidad_medidas.php"; 
    let datos = { word: '' }; 
    let dtipo = "JSON"; 
    let tipo = "POST"; 
    let selector = putUnidadMedida;
    ajax_function(pagina, datos, dtipo, tipo, selector);
  }
  function putUnidadMedida(dt){
    dt.forEach(function(item, index) {
        $("#unidad_medida").append(`<option value="${item.id}"> ${item.und_descripcion}</option>`)
        $("#unidad_medida_edt").append(`<option value="${item.id}"> ${item.und_descripcion}</option>`)
    });
  }
// FIN UNIDAD DE MEDIDAS //
  
// ENCONTRAR TIPO DE COMPRA //
  function getTipoCompras(){
    let pagina = "../functions/list_tipo_compras.php"; 
    let datos = { word: '' }; 
    let dtipo = "JSON"; 
    let tipo = "POST"; 
    let selector = putTipoCompras;
    ajax_function(pagina, datos, dtipo, tipo, selector);
  }
  function putTipoCompras(dt){
    dt.forEach(function(item, index) {
        $("#tipo_compra").append(`<option value="${item.id}"> ${item.tcm_descripcion}</option>`)
        $("#tipo_compra_edt").append(`<option value="${item.id}"> ${item.tcm_descripcion}</option>`)
    });
  }
// FIN TIPO DE COMPRA //

  
// LISTAR COMPRAS INDIVIDUALES//
  function getComprasIndiv(){
    let pagina = "../functions/list_compras.php"; 
    let datos = { word: '1' }; 
    let dtipo = "JSON"; 
    let tipo = "POST"; 
    let selector = putComprasIndiv;
    ajax_function(pagina, datos, dtipo, tipo, selector);
  }
  function putComprasIndiv(dt){
    console.log(dt)
    let tabla = $('#tabla_lista_compras').DataTable();
    if (dt[0]['id'] > 0) {
        $("#lista_compras").html('')
        $.each(dt, function (v, item) {
            /* $("#lista_compras").append(`<tr data-complement="${item.cmp_clave_compra}|${item.id}|${item.map_id}|${item.pv_id}|${item.tc_id}|${item.tcm_descripcion}|${item.com_inventario_id}|${item.und_id}">
            <td>${item.cmp_clave_compra}</td> 
            <td>${item.map_nombre}</td> 
            <td>${item.prv_nombre_proveedor}</td> 
            <td>${item.cmp_cantidad}</td> 
            <td>${item.cmp_precio_unitario}</td> 
            <td>${item.und_descripcion}</td> 
            <td>${item.cmp_total}</td> 
            <td>${item.cmp_fecha_creacion}</td> 
            <td>${item.tcm_descripcion}</td> 
            <td><button type="submit" class="btn btn-primary text-white edit_compra" id="btn_editar" data-complement="${item.id}">Editar</button></td>
            </tr>`) */
            var rowNode = tabla.row
                .add({
                clave_compra: item.cmp_clave_compra,
                Nombre: item.map_nombre ,
                nombre_proveedor: item.prv_nombre_proveedor,
                cantidad: item.cmp_cantidad,
                Precio: item.cmp_precio_unitario,
                med_uni_descripcion: item.und_descripcion,
                total: item.cmp_total,
                fecha_creacion: item.cmp_fecha_creacion,
                tipo_compra:item.tcm_descripcion,
                accion: `<button type="submit" class="btn btn-primary text-white edit_compra" id="btn_editar" data-complement="${item.id}">Editar</button></td>`,
                
                })
            .draw().node();
            $(rowNode).attr('data-complement', `${item.cmp_clave_compra}|${item.id}|${item.map_id}|${item.pv_id}|${item.tc_id}|${item.tcm_descripcion}|${item.com_inventario_id}|${item.und_id}`);
        })
    }
    
    /*if(dt[0].id == 0){
        $("#lista_compras").append(`<tr data-complement=""> <td> Aun no se cargan datos </td>
        </tr>`)
    }else{
        dt.forEach(function(item, index) {
            $("#lista_compras").append(`<tr data-complement="${item.cmp_clave_compra}|${item.id}|${item.map_id}|${item.pv_id}|${item.tc_id}|${item.tcm_descripcion}|${item.com_inventario_id}|${item.und_id}">
            <td>${item.cmp_clave_compra}</td> 
            <td>${item.map_nombre}</td> 
            <td>${item.prv_nombre_proveedor}</td> 
            <td>${item.cmp_cantidad}</td> 
            <td>${item.cmp_precio_unitario}</td> 
            <td>${item.und_descripcion}</td> 
            <td>${item.cmp_total}</td> 
            <td>${item.cmp_fecha_creacion}</td> 
            <td>${item.tcm_descripcion}</td> 
            <td><button type="submit" class="btn btn-primary text-white edit_compra" id="btn_editar" data-complement="${item.id}">Editar</button></td>
            </tr>`)
        });
    }*/
    
  }
// FIN LISTAR COMPRAS //

// Enviar datos para almacenar de la compra //
  $('#form_compra').submit(function(event) {
    // Prevenir que el formulario se envíe de forma predeterminada
    event.preventDefault();
    
    // Obtener los datos del formulario
    var datos = $(this).serialize();

    var idMateria = document.getElementById('idMateria');
    var cantidad = document.getElementById('cantidad');
    var precio_unitario = document.getElementById('precio_unitario');
    var total_compra = document.getElementById('total_compra');
    var fecha_compra = document.getElementById('fecha_compra');
    var tipo_compra = document.getElementById('tipo_compra');
    var proveedor = document.getElementById('proveedor');
    var clave_compra = document.getElementById('clave_compra');
    const expresiones={
        caracteres: /^[a-zA-Z0-9]/,
        numeros: /^[0-9]/,
        decimales:/^[0-9.]/,
    }
    if(cantidad.value!="" && precio_unitario.value!="" && total_compra.value!="" && fecha_compra.value!="" && tipo_compra.value!="" && idMateria.value!="" && proveedor.value!="" && clave_compra.value!=""){
        
        
        // Enviar la solicitud AJAX
        $.ajax({
        url: '../functions/compras/crear_compra.php',
        type: 'POST',
        data: datos,
        success: function(respuesta) {
            if (respuesta == 1) {
                $('#modalGuardarUsuario').modal('toggle'); 
                setTimeout(function() {
                    location.href='/aqua-restaurant/usuario_administrador/compras.php';
                }, 3000);
            } else {
                $('#modalFalloGuardarMateria').modal('toggle'); 
                setTimeout(function() {
                    //location.href='/aqua-restaurant/usuario_administrador/compras.php';
                }, 3000);
            }
        },
        error: function(xhr, status, error) {
            console.log('Error al enviar la solicitud: ' + error);
        }
        });
        
        
    }else{
        if(idMateria.value == ""){
            document.getElementById('materia_prima').classList.add('input_error');
        }
        if(cantidad.value == ""){
            document.getElementById('cantidad').classList.add('input_error');
        }
        if(precio_unitario.value == ""){
            document.getElementById('precio_unitario').classList.add('input_error');
        }
        if(total_compra.value == ""){
            document.getElementById('total_compra').classList.add('input_error');
        }
        if(fecha_compra.value == ""){
            document.getElementById('fecha_compra').classList.add('input_error');
        }
        if(tipo_compra.value == ""){
            document.getElementById('tipo_compra').classList.add('input_error');
        }
        if(proveedor.value == ""){
            document.getElementById('proveedor').classList.add('input_error');
        }
        if(clave_compra.value == ""){
            document.getElementById('clave_compra').classList.add('input_error');
        }
       
    }
    
  });
// FIN CREACION COMPRA

// EDITAR COMPRA
    $(document).unbind('click').on("click", ".edit_compra", function(){
        let row = $(this).closest("tr");
        let nombre = row.find("td:eq(1)").text();
        let proveedor = row.find("td:eq(2)").text();
        let cantidad = row.find("td:eq(3)").text();
        let precio_uni = row.find("td:eq(4)").text();
        let unidad_medida = row.find("td:eq(5)").text();
        let total = row.find("td:eq(6)").text();
        let fecha_compra = row.find("td:eq(7)").text();
        
        let tpc_id = row.attr("data-complement").split('|')[4]
        let clave = row.attr("data-complement").split('|')[0]
        let id = row.attr("data-complement").split('|')[1]
        let mat_id = row.attr("data-complement").split('|')[2]
        let prv_id = row.attr("data-complement").split('|')[3]
        let tipo_compra = row.attr("data-complement").split('|')[5]
        let c_inventario_id = row.attr("data-complement").split('|')[6]
        let und_id = row.attr("data-complement").split('|')[7]

        $("#Clave_compra_e").text(clave)
        $("#clave_compra_edt").val(clave)
        $("#clave_compra_edt").attr("data-complement", c_inventario_id)
        $("#precio_unitario_edt").val(precio_uni)
        $("#cantidad_edt").val(cantidad)
        $("#cantidad_edt").attr('data-anterior',cantidad)
        $("#total_compra_edt").val(total)
        $("#tipo_compra_edt").val(tpc_id)
        $("#proveedor_edt").val(prv_id)
        $("#unidad_medida_edt").val(und_id)
        $("#btn_editar_compra").attr("data-complement", id)
        $("#fecha_compra_edt").val(fecha_compra)
        $("#materia_prima_edt").val(nombre)
        $("#idMateria_edt").val(mat_id)
        $("#idMateria_edt").attr('data-anterior',mat_id)
        
      $('#modalEditarCompra').modal("show");
        
    });
    
    function editar_compra(id){
        let clave_compra_edt = $("#clave_compra_edt").val()
        let idMateria_edt = $("#idMateria_edt").val()
        let proveedor_edt = $("#proveedor_edt").val()
        let unidad_medida_edt = $("#unidad_medida_edt").val()
        let precio_unitario_edt = $("#precio_unitario_edt").val()
        let cantidad_edt = $("#cantidad_edt").val()
        let total_compra_edt = $("#total_compra_edt").val()
        let fecha_compra_edt = $("#fecha_compra_edt").val()
        let tipo_compra_edt = $("#tipo_compra_edt").val()
        let status = $("#estatus_edt").val()
        let id_compra_inventario = $("#clave_compra_edt").attr("data-complement")
        let cantidad_anterior = $("#cantidad_edt").attr('data-anterior')
        let id_materia_anterior = $("#idMateria_edt").attr('data-anterior')
        if (clave_compra_edt!='' && idMateria_edt!='' && proveedor_edt!='' && precio_unitario_edt!='' && cantidad_edt!='' && total_compra_edt!='' && fecha_compra_edt!='' && tipo_compra_edt!='' && id_compra_inventario!='' && cantidad_anterior!='' && id_materia_anterior && unidad_medida_edt!='')
        {
            data = {
                'id': id,
                'clave_compra_edt': clave_compra_edt,
                'idMateria_edt': idMateria_edt,
                'proveedor_edt': proveedor_edt,
                'unidad_medida_edt':unidad_medida_edt,
                'precio_unitario_edt': precio_unitario_edt,
                'cantidad_edt': cantidad_edt,
                'total_compra_edt': total_compra_edt,
                'fecha_compra_edt': fecha_compra_edt,
                'tipo_compra_edt': tipo_compra_edt,
                'status': status,
                'id_compra_inventario': id_compra_inventario,
                'cantidad_anterior':cantidad_anterior,
                'id_materia_anterior':id_materia_anterior
            }

            let pagina = "../functions/compras/editar_compra.php"; 
            let datos = data; 
            let dtipo = "JSON"; 
            let tipo = "POST"; 
            let selector = result_compra;
            ajax_function(pagina, datos, dtipo, tipo, selector);
        }else{
            if (clave_compra_edt == ''){
                $("#clave_compra_edt").addClass("input_error")             
            }
            if (idMateria_edt == ''){
                $("#idMateria_edt").addClass("input_error")
            }
            if (proveedor_edt == ''){
                $("#proveedor_edt").addClass("input_error")
            }
            if (unidad_medida_edt == ''){
                $("#unidad_medida_edt").addClass("input_error")
            }
            if (precio_unitario_edt == ''){
                $("#precio_unitario_edt").addClass("input_error")
            }
            if (cantidad_edt == ''){
                $("#cantidad_edt").addClass("input_error")
            }
            if (total_compra_edt == ''){
                $("#total_compra_edt").addClass("input_error")
            }
            if (fecha_compra_edt == ''){
                $("#fecha_compra_edt").addClass("input_error")
            }
            if (tipo_compra_edt == ''){
                $("#tipo_compra_edt").addClass("input_error")
            }
        }
    }
    function result_compra(data){
        if(data == 1){
            $("#modalEditarUsuario").show()
            setTimeout(function() {
                location.href ="/aqua-restaurant/usuario_administrador/compras.php";
            }, 500);

        }else{
            $("#modalFalloUsuario").show()
            setTimeout(function() {
                location.href ="/aqua-restaurant/usuario_administrador/compras.php";
            }, 500);
        }
    }
// FIN EDITAR COMPRA


// LISTAR COMPRAS INDIVIDUALES//
  /* function getCompras(){
    let pagina = "../functions/list_compras.php"; 
    let datos = { word: '2' }; 
    let dtipo = "JSON"; 
    let tipo = "POST"; 
    let selector = putCompras;
    ajax_function(pagina, datos, dtipo, tipo, selector);
  }
  function putCompras(dt){
    dt.forEach(function(item, index) {
        $("#lista_compras_gen").append(`<tr data-complement="${item.cmp_clave_compra}|${item.id}|${item.map_id}|${item.pv_id}|${item.tc_id}|${item.tcm_descripcion}|${item.com_inventario_id}">
        <td>${item.cmp_clave_compra}</td>
        <td>${item.map_nombre}</td>  
        <td>${item.prv_nombre_proveedor}</td> 
        <td>${item.cmp_cantidad}</td> 
        <td>${item.cmp_precio_unitario}</td> 
        <td>${item.cmp_total}</td> 
        <td>${item.cmp_fecha_creacion}</td> 
        <td><button type="submit" class="btn btn-primary text-white edit_compra" id="btn_editar" data-complement="${item.id}">Editar</button></td>
        </tr>`)
    });
  } */
// FIN LISTAR COMPRAS //
</script>

<?php
include("path/footer.php");
?>

