@extends('layouts.app')

@section('title')
    Requisiciones
@endsection

@section('modals')
<!-- Modal Create System -->
<div class="modal fade" id="new-system" style="overflow-y: scroll;" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&minus;</span>
          </button>
        </div>
          <form id="form-add">
          <div class="modal-body">
            @csrf
            {{-- Formulario --}}
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Requisición N°</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="req_numero" readonly>
                            <div class="input-group-prepend">
                                <span class="input-group-text"><b>#</b></span>
                            </div>    
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <!-- text input -->
                    <div class="form-group">
                        <label>Fecha</label>
                        <div class="input-group date" id="cont_fecha" data-target-input="nearest">
                            <input type="date" class="form-control datetimepicker-input" id="fecha" name="fecha"  data-target="#cont_fecha" readonly>
                            <div class="input-group-append" data-target="#cont_fecha" data-toggle="datetimepicker">
                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Posible Número:</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="p_numero" readonly>
                            <div class="input-group-prepend">
                                <span class="input-group-text"><b>#</b></span>
                            </div>    
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Dirección Solicitante</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="dir_solicitante">
                        </div>
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="form-group">
                        <label>Descripción</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="descripcion" readonly>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Cédula del Beneficiario</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="cedula_ben">   
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Código del Municipio</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="cod_municipio" readonly>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Municipio</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="municipio" readonly>  
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label>Apellido</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="apellido_ben" readonly>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label>Nombre</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="nombre_ben" readonly>  
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label>Destino a</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="destino" readonly>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
            <div class="col-sm-6">
                    <div class="form-group">
                        <label>Código del proveedor</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="cod_proveedor">
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label>Proveedor</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="nombre_proveedor" readonly>  
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label>Cédula del autorizado</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="cedula_autorizado" readonly>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label>Nombre</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="nombre_autorizado" readonly>  
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label>Observación</label>
                        <div class="input-group">
                            <textarea class="form-control" rows="3" id="observacion" name="observacion"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <h3 class="text-center">Renglones</h3>
            <button type="button" id="btn-modal-renglon" class="btn btn-primary" data-toggle="modal" data-target="#modal_renglon">
            Agregar Renglon
            </button>
            <br><br><br>
            <table class="table table-striped table-hover" id="tabla-renglones">
                <thead>
                    <tr>
                        <th scope="col">Cod. Partida</th>
                        <th scope="col">Descripción</th>
                        <th scope="col">Precio U</th>
                        <th scope="col">Cantidad</th>
                        <th scope="col">I.V.A (%)</th>
                        <th scope="col">Total I.V.A (Bs)</th>
                        <th scope="col">Total Renglon (Bs)</th>
                        <th scope="col">Acciones</th>
                    </tr>
                </thead>
                <tbody id="fila-renglon">
                    
                </tbody>
            </table>
            <br>
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Total Requisición:</label>
                        <div class="input-group">
                            <input type="text" class="form-control monto" id="monto" name="total_requisicion" maxlength="22" placeholder="9.999,99" readonly>
                            <div class="input-group-prepend">
                                <span class="input-group-text"><b>Bs</b></span>
                            </div>    
                        </div>
                    </div>
                </div>
            </div>

            {{-- Fin Formulario --}}
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-success" id="btn-submit">
                    <i class="fas fa-check"></i> Guardar
                </button>
            </div>
          </form>
        
      </div>
    </div>
  </div>
  <!--Modal renglones-->
    <div class="modal fade" id="modal_renglon" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">DETALLE DEL PEDIDO</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <form id="form-add-renglon">
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label>Disponibilidad</label>
                            <div class="input-group">
                                <input type="text" class="form-control" value="0,0" name="disponibilidad" id="disponibilidad" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="form-group">
                            <label>Código de la Partida</label>
                            <div class="input-group">
                                <input type="text" class="form-control" name="codigo_partida" id="codigo_partida" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label>Descripción</label>
                            <div class="input-group">
                                <textarea class="form-control" name="descripcion_renglon" id="descripcion_renglon" rows="3" required></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label>Precio Unitario</label>
                            <div class="input-group">
                                <input type="text" class="form-control monto" id="precio_unitario" name="precio_unitario" placeholder="0,00" required>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label>Cantidad</label>
                            <div class="input-group">
                                <input type="text" class="form-control monto" id="cantidad_r" name="cantidad_r" placeholder="0,00" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label>I.V.A (%)</label>
                            <div class="input-group">
                                <input type="text" class="form-control monto" id="iva_r" name="iva_r" placeholder="0,00" required>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label>Total I.V.A (Bs)</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="total_iva_r" name="total_iva_r" placeholder="0,00" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label>Total Renglon</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="total_renglon" name="total_renglon" maxlength="22" placeholder="0.000,00" readonly>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="msj-alert">

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <button type="submit" class="btn btn-primary" id="btn-add-renglon">Agregar</button>
            </div>
        </form>
        </div>
    </div>
    </div>
  <!--Fin modal renglones-->
@endsection

@section('content')
    <div class="container p-5">
        <div class="card card-outline card-danger">
            <div class="card-title p-4 border-bottom">
                <div class="row">
                    <div class="col-md-6">

                        <h4><i class="fa fa-th"></i> Requisiciones Realizadas</h4>
                    </div>
                    <div class="col-md-6 text-right">
                        <a href="#" class="btn btn-primary btn-sm shadow" id="btn-add" data-toggle="modal" data-target="#new-system"><i class="fa fa-plus"></i> Nueva Requisición</a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="tabla-requisicion">
                        <thead>
                            <td class="text-center">ID</td>
                            <td class="text-center">Fecha Creación</td>
                            <td class="text-center">Beneficiario</td>
                            <td class="text-center">Total</td>
                            <td class="text-center">Status</td>
                            <td class="text-center">Acciones</td>
                        </thead>
                        <tbody id="tbody-requisicion"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')

<script>
   $(document).ready(function(){
        var id = "";
        start()
        // Formato index(ruta, parametro, botones)
        // Los botones deben ir en formato json dentro de un array, ejemplo:
        async function start (){
           let table =  await index('/requisicion'),
               template = "";
           table.forEach(e => {
            var btn_edit = "";
            var btn_anular = "";
            if(e.estatus){
                    btn_edit = `<a title="Editar" href="#" data-toggle="modal" data-target="#new-system" class="btn btn-warning rounded-circle btn-sm edit shadow" data-id="${e.id}"><i class="fas fa-edit"></i></a>`
                    btn_anular =`
                    <form method="POST" class="del" style="display: inline-block;" data-id="${e.id}">
                        @csrf
                        <input type="hidden" id="justificacion_final" name="justificacion_final">
                        <button title="ANULAR"  type="submit" class="btn btn-danger rounded-circle btn-sm shadow" ><i class="fas fa-ban"></i></button>
                    </form>`
                }else{
                    btn_edit = `<a title="REQ ANULADA" class="btn bg-secondary rounded-circle btn-sm shadow"><i class="fas fa-edit"></i></a>`
                    btn_anular =`<a title="REQ ANULADA" class="btn bg-secondary rounded-circle btn-sm shadow"><i class="fas fa-ban"></i></a>`
                }
             
            template+= `
                <tr ${(!e.estatus) ? "class='table-danger'" : ""}>
                    <td class="text-center">${e.id}</td>
                    <td class="text-center">${e.fecha}</td>
                    <td class="text-center">${e.beneficiario_id}</td>
                    <td class="text-center">${e.total_requisicion}</td>
                    <td class="text-center">${(e.estatus) ? "Activa" : "Inactiva"}</td>
                    <td class="text-right">
                        ${btn_edit}
                        ${btn_anular}
                    </td>
                </tr>
            `;
           });

           $('#tabla-requisicion').DataTable().destroy();

           $('#tbody-requisicion').html(template);

           $('#tabla-requisicion').DataTable({language: translate});
        }

        // Reiniciar formulario de registro
        $('#btn-add').click(async function(){
            renglones = []
            $("#fila-renglon").html("")
            $("#msj-alert").html("");
            $("#dir_solicitante").attr('readonly',false)
            $("#form-add-renglon").trigger('reset');//reseteamos el form para agregar renglones
            $("#btn-modal-renglon").attr('disabled',false)
            $("#btn-submit").prop("disabled",true)
            $('#form-edit').trigger('reset');
            $('#form-add').trigger('reset');
            $('#form-edit').attr('id', 'form-add');
            $('#btn-submit').attr('class', 'btn btn-success').html('<i class="fa fa-circle-check"></i> Guardar');
            $('#modal-title').html('<i class="fa fa-plus"></i> Registrar Requisición');
            $("#fecha").val(fechaActual());
            let row = await count('/requisicion/count');
            $("#req_numero").val(row);
            $("#p_numero").val(row);
        });
        // Enviar formulario de requisicion
        $(document).on('submit', '#form-add', function(e){
            e.preventDefault();
            let form = new FormData(this);
            form.append('dd_solicitante_id',$("#descripcion").attr("data-solicitante")),
            form.append('beneficiario_id',$("#nombre_ben").attr("data-beneficiario")),
            form.append('gl_proveedor_id',$("#nombre_proveedor").attr("data-proveedor")),
            form.append('renglones',JSON.stringify(renglones)),
            form.delete('_method');
            //console.log(form.get('gl_proveedor_id'));//para verificar cualquier dato enviado
            store('/requisicion/store', form);
            start();
            $("#btn-submit").prop("disabled",true)
            $('#new-system').modal('hide');
        })
        // Eliminar registro
        $(document).on('submit', '.del', function(e){
            e.preventDefault();
            id = $(this).attr('data-id');
            Swal.fire({
                title: '<strong>¡Atención!</strong>',
                icon: 'warning',
                html:
                '<p>¿Está seguro(a) de querer anular este registro?</p>'
                +'<label for="justificacion">Por favor, justifique su acción:</label><input type="text" class="form-control" id="justificacion" minlenght="15" required>',
                showCloseButton: true,
                showCancelButton: true,
                focusConfirm: false,
                confirmButtonText:
                '<i class="fa fa-check"></i> ¡Si, estoy seguro!',
                cancelButtonText:
                '<i class="fas fa-ban"></i> Cancelar',
            }).then((result) => {
                    if(result.value){
                        let form = new FormData(this);
                        form.append('justificacion_final',$('input[id=justificacion]').val()),
                        form.append('_method', 'PUT');
                        return fetch(
                            '/requisicion/anular/'+id,
                                { method: 'POST',
                                    body: form
                                }
                            ).then(res => res.json()
                            ).then(function(data){
                                if(data.status){
                                    Swal.fire(
                                        '¡Perfecto!',
                                        data.message,
                                        'success'
                                    )
                                    setTimeout(() => {
                                        start();
                                        id = "";
                                    }, 1500);
                                }
                                if(!data.status){
                                    Swal.fire({
                                        icon: 'error',
                                        title: '¡Ups!',
                                        html: template
                                    })
                            }
                            })
                            .catch(function(err){
                                console.log(err);
                            })
                    }
            })
            // id = $(this).attr('data-id');
            // let form = new FormData(this);
            //     form.append('motivo','Texto Motivo'),
            //     form.append('_method', 'PUT');
            // // destroy('/requisicion/destroy/', id);
            // anular('/requisicion/anular/',form,id);//anulamos la requisicion
            // setTimeout(() => {
            //     start();
            //     id = "";
            // }, 1500);
        })

        // Obtener datos de un registro
        $(document).on('click', '.edit', async function(e){
            e.preventDefault();
            //desabilitamos el btn para crear renglones
            $("#btn-modal-renglon").attr('disabled',true)
            $("#btn-submit").prop("disabled",false)
            id = $(this).attr('data-id');
            $('#form-add').attr('id', 'form-edit');
            $('#btn-submit').attr('class', 'btn btn-primary').html('<i class="fa fa-check"></i> Modificar registro');
            $('#modal-title').html('<i class="fa fa-edit"></i> Modificar Requisicion');
            $('#new-system').modal('show');
            let row = await show('/requisicion/show/', id);
            console.log(row);
            $("#req_numero").val(row.id)
            $("#fecha").val(row.fecha)
            $("#p_numero").val(row.id)
            $("#dir_solicitante").val(row.dd_solicitante_id.codigo)
            $("#descripcion").val(row.dd_solicitante_id.nombre)
            $("#cedula_ben").val(row.beneficiario_id.cedula)
            $("#cod_municipio").val(row.beneficiario_id.gl_parroquia.gl_municipio.id)
            $("#municipio").val(row.beneficiario_id.gl_parroquia.gl_municipio.descripcion)
            $("#apellido_ben").val(row.beneficiario_id.apellidos)
            $("#nombre_ben").val(row.beneficiario_id.nombres)
            $("#destino").val(row.dd_solicitante_id.nombre)
            $("#cod_proveedor").val(row.gl_proveedor_id.rif)
            $("#nombre_proveedor").val(row.gl_proveedor_id.proveedor)
            $("#cedula_autorizado").val(row.gl_proveedor_id.cedula)
            $("#nombre_autorizado").val(row.gl_proveedor_id.autorizado)
            $("#observacion").val(row.observacion)
            $("#descripcion").attr("data-solicitante",row.dd_solicitante_id.id)
            $("#nombre_ben").attr("data-beneficiario",row.beneficiario_id.id)
            $("#nombre_proveedor").attr("data-proveedor",row.gl_proveedor_id.id)
            renglon_edit = "";
            row.requisiciones_renglones.forEach(e => {
                renglon_edit+= `
                <tr>
                    <td class="text-center">${e.codigo_partida}</td>
                    <td class="text-center">${e.nombre_producto}</td>
                    <td class="text-center">${currencyFormatter(e.precio_unitario)}</td>
                    <td class="text-center">${currencyFormatter(e.cantidad)}</td>
                    <td class="text-center">${currencyFormatter(e.IVA)}</td>
                    <td class="text-center">${currencyFormatter(e.total_iva)}</td>
                    <td class="text-center">${currencyFormatter(e.total_renglon)}</td>
                </tr>
                `;
            })
            $("#fila-renglon").html(renglon_edit);
            var monto_n = currencyFormatter(row.total_requisicion)
                $("#monto").val(monto_n)
        })
        // Enviar formulario de actualización
        $(document).on('submit', '#form-edit', function(e){
            e.preventDefault();
            let form = new FormData(this);
                form.append('dd_solicitante_id',$("#descripcion").attr("data-solicitante")),
                form.append('beneficiario_id',$("#nombre_ben").attr("data-beneficiario")),
                form.append('gl_proveedor_id',$("#nombre_proveedor").attr("data-proveedor")),
                form.append('_method', 'PUT');
            update('/requisicion/update/', form, id);
            start();
            $("#btn-submit").prop("disabled",true)
            $('#new-system').modal('hide');
        })
        $(document).on("change","#fecha", function(){
            validarCampos();
        })
        // $(document).on('keyup', '#cod_municipio', async function(e){
            
        //     mun = "";
        //     mun = $(this).val();
        //     let row = await show('/municipios/show/', mun);
        //     if(row){
        //         $("#municipio").val(row.descripcion)
        //     }else{
        //         $("#municipio").val("")
        //     }
        //     validarCampos();
        // })
        //consultamos Direccion solicitante
        $(document).on('keyup', '#dir_solicitante', async function(e){
                direc = $(this).val();
                let row = await show('/direcciones/show/', direc);
                if(row){
                    $("#descripcion").val(row.nombre);
                    $("#descripcion").attr("data-solicitante",row.id);
                    $("#destino").val(row.nombre);
                    $("#disponibilidad").val("1.200,00");
                    $("#dir_solicitante").attr('readonly',true)
                }else{
                    $("#descripcion").val("");
                    $("#descripcion").attr("data-solicitante", "");
                    $("#destino").val("");
                    $("#disponibilidad").val("0,0");
                    $("#dir_solicitante").attr('readonly',false)
                }
                validarCampos();
        })
        //consultamos beneficiario
        $(document).on('keyup', '#cedula_ben', async function(e){
                ci_ben = $(this).val();
                let row = await show('/personas/show/', ci_ben);
                if(row){
                    $("#apellido_ben").val(row.apellidos);
                    $("#nombre_ben").val(row.nombres);
                    $("#cod_municipio").val(row.gl_parroquia.gl_municipio.id);
                    $("#municipio").val(row.gl_parroquia.gl_municipio.descripcion);
                    $("#nombre_ben").attr("data-beneficiario",row.id);
                }else{
                    $("#apellido_ben").val("");
                    $("#nombre_ben").val("");
                    $("#cod_municipio").val("");
                    $("#municipio").val("");
                    $("#nombre_ben").attr("data-beneficiario", "");
                }
                validarCampos();
        })
        // $(document).on("keyup","#destino",function(){
        //     validarCampos();
        // })
        //consultamos proveedor
        $(document).on('keyup', '#cod_proveedor', async function(e){

                cod_prov = $(this).val();
                let row = await show('/proveedores/show/', cod_prov);
                if(row){
                    $("#nombre_proveedor").val(row.proveedor)
                    $("#cedula_autorizado").val(row.cedula)
                    $("#nombre_autorizado").val(row.autorizado)
                    $("#nombre_proveedor").attr("data-proveedor",row.id);
                }else{
                    $("#nombre_proveedor").val("")
                    $("#cedula_autorizado").val("")
                    $("#nombre_autorizado").val("")
                    $("#nombre_proveedor").attr("data-proveedor","");
                }
                validarCampos();
        })
        //consultamos autorizado
        // $(document).on('keyup', '#cedula_autorizado', async function(e){
            
        //         ci_aut = $(this).val();
        //         let row = await show('/personas/show/', ci_aut);
        //         if(row){
        //             $("#nombre_autorizado").val(row.nombres)
        //         }else{
        //             $("#nombre_autorizado").val("")
        //         }
        //         validarCampos();
        // })
        // $(document).on('keyup','#monto', function(){
        //     validarCampos();
        // })
        function validarCampos(){
            var v1,v2,v3,v4,v5,v6,v7,v8;
            
            if($("#fecha").val() != ""){
                v1 = 1
            }else{
                v1 = 0
            }
            if($("#descripcion").val() != ""){
                v2 = 1
            }else{
                v2 = 0
            }
            // if($("#apellido_ben").val() != ""){
            //     v3 = 1
            // }else{
            //     v3 = 0
            // }
            if($("#municipio").val() != ""){
                v4 = 1
            }else{
                v4 = 0
            }
            // if($("#destino").val() != ""){
            //     v5 = 1
            // }else{
            //     v5 = 0
            // }
            // if($("#nombre_proveedor").val() != ""){
            //     v6 = 1
            // }else{
            //     v6 = 0
            // }
            if($("#nombre_autorizado").val() != ""){
                v7 = 1
            }else{
                v7 = 0
            }
            if($("#monto").val() != "" && parseFloat(formatear_str($("#monto").val()))>0){
                v8 = 1
            }else{
                v8 = 0
            }
            // && v3 && v4 && v5 && v6 && v7 variables para municipio y destino en caso de que lleven registro aparte
            if(v1 && v2 && v4 && v7 && v8){
                $("#btn-submit").prop("disabled",false)            
            }else{
                $("#btn-submit").prop("disabled",true)
            }

        }
        //////////////////////////
         // logica para renglones
        $(document).on("keyup","#precio_unitario",function() {
            calcular_totales();
        })
        $(document).on("keyup","#cantidad_r",function() {
            calcular_totales();
        })
        $(document).on("keyup","#iva_r",function() {
            calcular_totales();
        })
        function calcular_totales() {
            var precio_unit = formatear_str($("#precio_unitario").val());
            var cantidad = formatear_str($("#cantidad_r").val());
            var iva = formatear_str($("#iva_r").val());
            var precio_por_cantidad = formatear_numero(precio_unit*cantidad);
            var total_iva = formatear_numero((precio_por_cantidad * iva)/100);
            var total_renglon = parseFloat(precio_por_cantidad) + parseFloat(total_iva);
            $("#total_iva_r").val(currencyFormatter(total_iva));
            $("#total_renglon").val(currencyFormatter(total_renglon));
        }
        //con esta funcion formateamos los numeros q vienen en string para poder operarlos
        function formatear_str(cadena) {
            return parseFloat(cadena.replace(".", "").replace(",", ".")).toFixed(2);
        }
        function formatear_numero(num) {
            var num_formateado = parseFloat(num).toFixed(2);
            return num_formateado;
        }
        var id_renglon = 0;
        var total_requisicion = 0;
        let renglones = []
        $(document).on("submit","#form-add-renglon", function (e){
            e.preventDefault();
            if(formatear_str($("#total_renglon").val())>0){
                id_renglon++
                codigo_partida = $("#codigo_partida").val();
                descripcion_renglon = $("#descripcion_renglon").val();
                precio_unitario = $("#precio_unitario").val();
                cantidad_r = $("#cantidad_r").val();
                iva_r = $("#iva_r").val();
                total_iva_r = $("#total_iva_r").val();
                total_renglon = formatear_str($("#total_renglon").val());
                disponibilidad = formatear_str($("#disponibilidad").val());
                result_disponible = disponibilidad-total_renglon;
                if(result_disponible<0){
                    $("#msj-alert").html(mensajeAlert("El total supera la disponibilidad, no se puede procesar el registro."));
                }else{
                    $("#msj-alert").html("");
                        //cargamos la variable de renglones q enviaremos a la BD
                        let renglon = {
                            id_renglon, //se utiliza para eliminarlos de la tabla NO PARA BD
                            codigo_partida,
                            nombre_producto: descripcion_renglon,
                            precio_unitario,
                            cantidad_r,
                            iva_r,
                            total_iva_r,
                            total_renglon
                        }
                        renglones.push(renglon);
                        //agregamos renglones
                        $("#fila-renglon").append(`
                            <tr>
                                <td class="text-center">${codigo_partida}</td>
                                <td class="text-center">${descripcion_renglon}</td>
                                <td class="text-center">${precio_unitario}</td>
                                <td class="text-center">${cantidad_r}</td>
                                <td class="text-center">${iva_r}</td>
                                <td class="text-center">${total_iva_r}</td>
                                <td class="text-center t_renglon">${$("#total_renglon").val()}</td>
                                <td class="text-center"><a title="Eliminar" class="btn bg-danger rounded-circle btn-sm shadow eliminar_renglon" id-renglon="${id_renglon}"><i class="fas fa-ban"></i></a></td>
                            </tr>
                    `)
                    total_requisicion = 0;
                    $(".t_renglon").each(function(){
                        total_requisicion+= parseFloat(formatear_str($(this).text()));
                    });
                    $("#monto").val(currencyFormatter(total_requisicion));
                    validarCampos();
                    //reseteamos el formulario
                    $("#msj-alert").html("");
                    $("#form-add-renglon").trigger('reset');
                    $("#disponibilidad").val(currencyFormatter(result_disponible))
                }
            }else{                
                $("#msj-alert").html(mensajeAlert("El total del renglon no puede ser 0 Bs."));
            }
            
        })
        $(document).on("click",".eliminar_renglon",function() {
            let elemento = $(this).parent().parent(); //elemento tr del renglon
            let id_renglon = $(this).attr("id-renglon"); //solo capturamos el id del renglon puesto en el btn
            total_requisicion -= parseFloat(formatear_str(elemento.children(".t_renglon").text()));
            $("#monto").val(currencyFormatter(total_requisicion));
            
            renglones = renglones.filter(item => item.id_renglon != id_renglon);
            elemento.remove();
            validarCampos();
        })
        function mensajeAlert(mensaje) {
            let alert = `<div class="callout callout-danger">
                            <h5>Error</h5>
                            <p>${mensaje}</p>
                        </div>`
            return alert;
            
        }
    });
</script>
@endsection