@extends('adminlte::page')

@section('title', 'Generar Pagos')

{{-- @section('content_header')
    <h1>Crear Socio</h1>
@stop --}}

@section('content')
    <div style="display:none;" id="loader"></div>
    <div id="DivPrincipal">
        <form id="pagos_form" method="post" enctype="multipart/form-data">
            @csrf
            <div class="container-fluid p-2">
                <div class="row">
                    <!-- left column -->
                    <div class="col-md-6">
                        <h3><i class="fa fa-th" aria-hidden="true"></i> Generación de Pagos</h3>
                    </div>
                </div>
            </div>
            <!-- DUALLISTBOX -->
            <div class="card card-warning">
                <div class="card-header">
                    <h3 class="card-title">Datos de Deuda</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">
                        <div class="card-body">
                            <label>Socio:</label>
                            <div class="row">
                                <div class="col-2">
                                    <div class="form-group">
                                        <input type="number" class="form-control" name='id_socio' id="id_socio" required
                                            value="" disabled="true">
                                    </div>
                                </div>
                                <div class="col-10">
                                    <div class="input-group">
                                        <input type="text" class="form-control" name='lbl_socio' id="lbl_socio"
                                            value="" disabled="true">
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-md btn-default" id="search_socio"
                                                name="search_socio">
                                                <i class="fa fa-search"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- /.card-header -->
                    <div class="col-6">
                        <div class="card-body">
                            <label>Documento Pendiente de Cobro:</label>
                            <div class="row">
                                <div class="col-2">
                                    <div class="form-group">
                                        <input type="number" class="form-control" name='id_deuda' id="id_deuda" required
                                            value="" disabled="true">
                                    </div>
                                </div>
                                <div class="col-10">
                                    <div class="input-group">
                                        <input type="text" class="form-control" name='lbl_deuda' id="lbl_deuda" required
                                            value="" disabled="true">
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-md btn-default" id="search_deuda"
                                                name="search_deuda">
                                                <i class="fa fa-search"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-2">
                            <div class="form-group">
                                <label>Deuda Total:</label>
                                <input type="number" class="form-control" name='deuda_total' id="deuda_total"
                                    value="0" disabled="true">
                            </div>
                        </div>
                        <div class="col-2">
                            <label>Monto Abonado:</label>
                            <div class="form-group">
                                <input type="number" class="form-control" name='abono_deuda' id="abono_deuda"
                                    value="0" disabled="true">
                            </div>
                        </div>
                        <div class="col-2">
                            <label>Saldo Total:</label>
                            <div class="form-group">
                                <input type="number" class="form-control" name='saldo_deuda' id="saldo_deuda"
                                    value="0" disabled="true">
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label>Método de Pago:</label>
                                <input type="text" class="form-control" name='met_pago' id="met_pago"
                                    disabled="true">
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <button type="button" class="btn btn-dark m-4" id="btnvercuotas" name="btnvercuotas">
                                    <i class="fas fa-eye">
                                        Ver Cuotas</i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- /.card-body -->
                <div class="card-footer">

                </div>
            </div>
            <!-- /.card -->
            <!-- /.DUALLISTBOX -->

            <div class="card card-success">
                <div class="card-header bg-success">
                    <h3 class="card-title">Ingresar Abono</h3>
                </div>
                <div class="card-body">
                    <input id="id_pago" name="id_pago" hidden value="0" readonly>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Tipo Pago:</label>
                                <div class="row">
                                    <div class="col-1 text-center">
                                        <i class="fa fa-sort"></i>
                                    </div>
                                    <div class="col-8">
                                        <select class="form-control border-dark" name='tipo_pago' id="tipo_pago">
                                            <option selected value="EFE">EFECTIVO</option>
                                            <option value="DEP">DEPOSITO</option>
                                        </select>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Valor a Pagar:</label>
                                <div class="row">
                                    <div class="col-1 text-center">
                                        <h3>$</h3>
                                    </div>
                                    <div class="col-8">
                                        <input type="number" class="form-control border-dark" name='cant_abono'
                                            id="cant_abono" required value="0" placeholder="0.00">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label>Observación:</label>
                                <div class="row">
                                    <div class="col-1 text-center">
                                        <i class="fa fa-comment"></i>
                                    </div>
                                    <div class="col-11">
                                        <input type="text" class="form-control border-gray-200" name='lbl_observacion'
                                            id="lbl_observacion" required value="" placeholder="Observación">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="datos_bancarios" name="datos_bancarios">
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label>Cuenta Bancaria:</label>
                                    <select class="form-control border-dark" name='cuenta_bancaria' id="cuenta_bancaria">
                                        @foreach ($bancos as $datos)
                                            <option value="{{ $datos->id }}">{{ $datos->nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label>Número de Cuenta:</label>
                                    <select class="form-control border-dark" name='numero_cuenta' id="numero_cuenta"
                                        disabled>
                                        @foreach ($bancos as $datos)
                                            <option value="{{ $datos->id }}">{{ $datos->cuenta }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label>Número de Comprobante:</label>
                                    <div class="row">
                                        <div class="col-6">
                                            <input type="number" class="form-control border-gray-200"
                                                name='txt_comprobante' id="txt_comprobante" required value=""
                                                placeholder="Número de comprobante">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="exampleInputFile">Comprobante en PDF:</label>
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="input-group">
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" accept=".pdf"
                                                        name='archivo1' id="archivo1">
                                                    <label class="custom-file-label"
                                                        for="exampleInputFile">Seleccionar</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="float-right">
                                <button type="button" class="btn btn-success" id="btnProcesarPago"
                                    name="btnProcesarPago"> <i class="fas fa-play-circle">
                                        Procesar Pago</i></button>
                                <button type="button" class="btn btn-danger" onclick="Limpiar()"> <i
                                        class="fas fa-trash">
                                        Limpiar</i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </form>
    </div>


    <!-- modal buscar Socios-->
    <div class="modal fade" id="modal-buscar-socios">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"> <i class="fas fa-search"> </i> Búsqueda de Socios</h4>
                    <button id="CloseModal" type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!--<p>One fine body&hellip;</p>-->
                    <div class="row">
                        <div class="col-12">

                            <!-- /.card -->
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title"></h3>
                                </div>
                                <!-- /.card-header -->
                                <div class="card-body">
                                    <table id="tblBuscarSocios" class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>IdSocio</th>
                                                <th>Identificacion</th>
                                                <th>Nombres</th>
                                                <th>Apellidos</th>
                                                <th>Estado</th>
                                                <th style="display:none;">Id socio</th>
                                            </tr>
                                        </thead>
                                        <tfoot>

                                        </tfoot>
                                    </table>
                                </div>
                                <!-- /.card-body -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                                                                                                                                                                                                                                  <button type="button" class="btn btn-primary">Save changes</button>-->
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-ver_cuotas">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"> <i class="fas fa-search"> </i> Detalle de Cuotas</h4>
                    <button id="CloseModal" type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title"></h3>
                                </div>
                                <!-- /.card-header -->
                                <div class="card-body">
                                    <table id="tblCuotas" class="table table-bordered table-hover">
                                        <thead>
                                            <tr>
                                                <th># Cuota</th>
                                                <th>F. Vencimiento</th>
                                                <th>Monto</th>
                                                <th>Credito</th>
                                                <th>Saldo</th>
                                                {{-- <th>F. Cancelado</th> --}}
                                            </tr>
                                        </thead>
                                        <tbody id="tbodyCuotas">

                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.card-body -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /.modal buscar Socios-->

    <div class="modal fade" id="modal-buscar-fact">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"> <i class="fas fa-search"> </i> Búsqueda de Documentos Pendiente de Cobro</h4>
                    <button id="CloseModal" type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!--<p>One fine body&hellip;</p>-->
                    <div class="row">
                        <div class="col-12">

                            <!-- /.card -->
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title"></h3>
                                </div>
                                <!-- /.card-header -->
                                <div class="card-body">
                                    <table id="tblFacturasSocios" class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>Codigo</th>
                                                <th>No. Documento</th>
                                                <th>Descripción</th>
                                                <th>Monto</th>
                                                <th>Abono</th>
                                                <th>Saldo</th>
                                                <th>Form. Pago</th>
                                            </tr>
                                        </thead>
                                        <tfoot>

                                        </tfoot>
                                    </table>
                                </div>
                                <!-- /.card-body -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                                                                                                                                                                                                                                  <button type="button" class="btn btn-primary">Save changes</button>-->
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- Modal -->
    <div class="modal fade" id="modal_pagoexito" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">PAGO EXITOSO</h5>
                    {{-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button> --}}
                </div>
                <div class="modal-body">
                    Pago realizado con exito .Desea Generar comprobante de pago.?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="CerrarModalPagoExitoso()">No</button>
                    <button type="button" class="btn btn-primary" onclick="abrirRecibopdf()">Si</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Consulta a Procesar-->
    <div class="modal fade" id="modal_procesa_deuda" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">GENERACIÓN DE PAGOS</h5>
                    {{-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button> --}}
                </div>
                <div class="modal-body">
                    ¿Está seguro de generar el pago al documento pendiente de cobro eleccionado.?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                        onclick="CancelarProceso()">Cancelar</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal"
                        onclick="ConfirmaProceso()">Confirmar</button>

                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css\mantenimiento\socio\estilos_socio.css') }}">
@stop

@section('js')
    {{-- <script src="{{ asset('js\mantenimientos\Pagos\pagos.js') }}"></script> --}}
    <script type="application/javascript" >
        const csrfToken = document.head.querySelector("[name~=csrf-token][content]").content;
        const formulario = document.getElementById("pagos_form");
        let valoridpago = 0;
        let valoriddeuda = 0;
        //pagos
        function CargarBusquedaSocios() {
            $('#tblBuscarSocios').DataTable({
                "processing": true,
                "destroy": true,
                "serverSide": true,
                "responsive": true,
                "lengthChange": false,
                "autoWidth": false,
                "select": true,
                "ajax": {
                    'url': '/pagos/consultarSocios',
                    'headers': {
                        'Content-Type': 'application/json',
                        "X-CSRF-Token": $("meta[name='csrf-token']").attr("content")
                    }
                },
                "columns": [{
                        data: 'id_ente'
                    },
                    {
                        data: 'num_docum_iden'
                    },
                    {
                        data: 'p_primer_nombre'
                    },
                    {
                        data: 'p_primer_apellido'
                    },
                    {
                        data: 'activo'
                    },
                    {
                        data: 'IdSocios',
                        visible: false,
                        searchable: false,
                    }
                ],
                "language": {
                    "lengthMenu": "Mostrar _MENU_ registros por página",
                    "zeroRecords": "No se encontró nada - lo siento",
                    "info": "Mostrando la página _PAGE_ de _PAGES_",
                    "infoEmpty": "No hay registros disponibles",
                    "infoFiltered": "(filtrado de _MAX_ registros totales)",
                    "search": "Buscar Socio:",
                    "paginate": {
                        "previous": "Anterior",
                        "next": "siguiente"
                    }
                },

            }).buttons().container().appendTo('#tblBuscarSocios_wrapper .col-md-6:eq(0)');

            var table = $('#tblBuscarSocios').DataTable();
            $('#tblBuscarSocios tbody').on('click', 'tr', function() {
                var row = table.row(this).data();
                CargarDatosSocio(row);
            });

        }

        CargarBusquedaSocios();


        function CargarDatosSocio(item) {

            document.getElementById("id_socio").value = item.IdSocios;
            document.getElementById("lbl_socio").value = item.p_primer_nombre + " " + item.p_primer_apellido;

            $("#modal-buscar-socios").modal('hide');
            CargarBusquedaFacturasSocios();
        }

        $('#search_socio').on('click', function() {
            var table = $('#tblBuscarSocios').DataTable();
            table.ajax.reload();
            $("#modal-buscar-socios").modal('show');

        })

        //facturas
        function CargarBusquedaFacturasSocios() {
            var id_socio = document.getElementById("id_socio").value;

            $('#tblFacturasSocios').DataTable({
                "processing": true,
                "destroy": true,
                "serverSide": true,
                "responsive": true,
                "lengthChange": false,
                "autoWidth": false,
                "select": true,
                "ajax": {
                    'url': 'consultarFacturasSocios',
                    'type': 'GET',
                    'headers': {
                        "contentType": "application/json",
                        "X-CSRF-Token": $("meta[name='csrf-token']").attr("content"),
                    },
                    "contentType": "application/json",
                    "data": {
                        "id_socio": id_socio
                    }
                    // "data": function ( d ) {
                    //     d.id_socio = id_socio;
                    //     // return JSON.stringify( d )
                    // },
                    // "dataSrc": ""
                    // "data":function ( d ) {
                    //     return JsonData;
                    // }
                },
                "columns": [{
                        data: 'id_factura_cab'
                    },
                    {
                        data: 'num_documento'
                    },
                    {
                        data: 'descripcion'
                    },
                    // {
                    //     data: 'fecha_ingreso'
                    // },

                    // {
                    //     data: 'total'
                    // },
                    {
                        data: 'monto'
                    },
                    {
                        data: 'credito'
                    },
                    {
                        data: 'saldo'
                    },
                    {
                        data: 'metodo_pago'
                    },
                ],
                "language": {
                    "lengthMenu": "Mostrar _MENU_ registros por página",
                    "zeroRecords": "No se encontró nada - lo siento",
                    "info": "Mostrando la página _PAGE_ de _PAGES_",
                    "infoEmpty": "No hay registros disponibles",
                    "infoFiltered": "(filtrado de _MAX_ registros totales)",
                    "search": "Buscar Factura:",
                    "paginate": {
                        "previous": "Anterior",
                        "next": "siguiente"
                    }
                },

            }).buttons().container().appendTo('#tblFacturasSocios_wrapper .col-md-6:eq(0)');

            var table = $('#tblFacturasSocios').DataTable();
            
            $('#tblFacturasSocios tbody').on('click', 'tr', function() {
                var row = table.row(this).data();
                CargarDatosFacturasSocio(row);
            });

            //table.ajax.reload(); 
        }

        $('#search_deuda').on('click', function() {
            var table = $('#tblFacturasSocios').DataTable();
            table.ajax.reload();

            var id_socio = document.getElementById("id_socio").value;
            if (id_socio <= 0 || id_socio == null) {
                toastr.error("debe seleccionar un socio!!");
                return;
            }
            $("#modal-buscar-fact").modal('show');
        })



        function CargarDatosFacturasSocio(item) {
            console.log('CargarDatosFacturasSocio' + item);
            document.getElementById("id_deuda").value = item.id_factura_cab;
            document.getElementById("lbl_deuda").value = item.descripcion;
            document.getElementById("deuda_total").value = item.monto;
            document.getElementById("abono_deuda").value = item.credito;
            document.getElementById("saldo_deuda").value = item.saldo;
            if (item.metodo_pago == 'CON') {
                document.getElementById("cant_abono").value = item.monto;
                document.getElementById("cant_abono").disabled = true;
                document.getElementById("met_pago").value ="CONTADO";
            }else{
                document.getElementById("met_pago").value ="CREDITO";
            }
            $("#modal-buscar-fact").modal('hide');
        }



        function format(inputDate) {
            let fecha = new Date(inputDate);
            let date, month, year;

            date = fecha.getDate() + 1;
            month = fecha.getMonth() + 1;
            year = fecha.getFullYear();

            date = date
                .toString()
                .padStart(2, '0');

            month = month
                .toString()
                .padStart(2, '0');

            return `${date}/${month}/${year}`;
        }

        function ConvertDateString(str) {
            const [year, month, day] = str.split('-');
            var date = (day.substring(0, 2) + "/" + month + "/" + year);
            return date;
        }

        const Limpiar = () => {
            formulario.reset();
        }

        function CancelarProceso(){
            $("#modal_procesa_deuda").modal('hide');
        }

        function ConfirmaProceso(){
            GrabarPago();
            $("#modal_procesa_deuda").modal('hide');
        }

        function GrabarPago(){
            var id_socio        = document.getElementById("id_socio").value;
            var id_deuda        = document.getElementById("id_deuda").value;
            var valor_deuda     = document.getElementById("cant_abono").value;
            var observacion     = document.getElementById("lbl_observacion").value;
            var tipo_pago       = document.getElementById("tipo_pago").value;
            var cuenta_bancaria = document.getElementById("cuenta_bancaria").value;
            var txt_comprobante = document.getElementById("txt_comprobante").value;
            var archivo1        = document.getElementById("archivo1").value;

            if (id_socio <= 0 || id_socio == null || id_socio == "") {
                toastr.error("debe seleccionar un socio!!");
                return;
            }
            if (id_deuda <= 0 || id_deuda == null || id_deuda == "") {
                toastr.error("debe seleccionar una deuda!!");
                return;
            }
            if (tipo_pago.length <= 0 || tipo_pago == null || tipo_pago == "") {
                toastr.error("debe seleccionar un tipo de pago!!");
                return;
            }
            if (valor_deuda <= 0 || valor_deuda == null || valor_deuda == "") {
                toastr.error("debe ingresar la cantidad!!");
                return;
            }
            if (observacion.length <= 0 || observacion == null || observacion == "") {
                toastr.error("debe ingresar una observación!!");
                return;
            }

            if (tipo_pago == "DEP"){

                if (txt_comprobante.length <= 0 || txt_comprobante == null || txt_comprobante == "") {
                    toastr.error("debe ingresar el número de comprobante!!");
                    return;
                }

                // if (archivo1 ==null || archivo1 == undefined || archivo1 == "") {
                //     toastr.error("debe seleccionar un Pdf escaneando el comprobante!!");
                //     return;
                // }
            }
            var myObjet = {};
            myObjet.id_factura_cab = id_deuda;
            myObjet.id_socio = id_socio;
            myObjet.valor_abono = valor_deuda;
            myObjet.observacion = observacion;
            myObjet.tipo_pago = tipo_pago;
            myObjet.cuenta_bancaria = cuenta_bancaria;
            myObjet.txt_comprobante = txt_comprobante;
            myObjet.archivo1 =archivo1;

            
            $.ajax({
                url: "/pagos/procesarPagoSocio",
                type: "POST",
                data: JSON.stringify(myObjet),
                headers: {
                    'Content-Type': 'application/json',
                    "X-CSRF-Token": csrfToken
                },
                success: function(data) {
                    OcultarLoader();
                    if (data.status == "ok") {
                        valoridpago = data.idpago;
                        valoriddeuda = data.iddeuda;
                        document.getElementById("id_pago").value = data.idpago;
                        var valor = document.getElementById("tipo_pago").value;
                        if (valor == 'DEP') {
                            $("#pagos_form").submit();
                        }
                        $("#modal_pagoexito").modal('show');
                        toastr.success("Se ha realizado el pago.!!");
                    } else {
                        toastr.error("Se ha producido un error al Generar el Pago!!");
                    }
                },
                cache: false,
                contentType: false,
                processData: false,
            });
        }

        $("form#pagos_form").submit(function (e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            jQuery.each(jQuery("#pagos_form")[0].files, function (i, file) {
                formData.append("file-" + i, file);
            });
            $.ajax({
                url: "/pagos/RegistrarDatosBancarios",
                type: "POST",
                data: formData,
                success: function (data) {
                    // if (data.status == "ok") {

                    // } else {

                    // }
                },
                cache: false,
                contentType: false,
                processData: false,
            });
                
            
        });

        $('#btnProcesarPago').on('click', function() {
            var id_socio = document.getElementById("id_socio").value;
            var id_deuda = document.getElementById("id_deuda").value;
            var valor_deuda = document.getElementById("cant_abono").value;
            var observacion = document.getElementById("lbl_observacion").value;
            var tipo_pago = document.getElementById("tipo_pago").value;
            var cuenta_bancaria = document.getElementById("cuenta_bancaria").value;
            var txt_comprobante = document.getElementById("txt_comprobante").value;
            var archivo1        = document.getElementById("archivo1").value;

            if (id_socio <= 0 || id_socio == null || id_socio == "") {
                toastr.error("debe seleccionar un socio!!");
                return;
            }
            if (id_deuda <= 0 || id_deuda == null || id_deuda == "") {
                toastr.error("debe seleccionar una deuda!!");
                return;
            }
            if (tipo_pago.length <= 0 || tipo_pago == null || tipo_pago == "") {
                toastr.error("debe seleccionar un tipo de pago!!");
                return;
            }
            if (valor_deuda <= 0 || valor_deuda == null || valor_deuda == "") {
                toastr.error("debe ingresar la cantidad!!");
                return;
            }
            if (observacion.length <= 0 || observacion == null || observacion == "") {
                toastr.error("debe ingresar una observación!!");
                return;
            }

            if (tipo_pago == "DEP"){

                if (txt_comprobante.length <= 0 || txt_comprobante == null || txt_comprobante == "") {
                    toastr.error("debe ingresar el número de comprobante!!");
                    return;
                }

                // if (archivo1 ==null || archivo1 == undefined || archivo1 == "") {
                //     toastr.error("debe seleccionar un Pdf escaneando el comprobante!!");
                //     return;
                // }
            }
            $("#modal_procesa_deuda").modal('show');
            // var myObjet = {};
            // myObjet.id_factura_cab = id_deuda;
            // myObjet.id_socio = id_socio;
            // myObjet.valor_abono = valor_deuda;
            // myObjet.observacion = observacion;
            // myObjet.tipo_pago = tipo_pago;

            // $.ajax({
            //     url: "/pagos/procesarPagoSocio",
            //     type: "POST",
            //     data: JSON.stringify(myObjet),
            //     headers: {
            //         'Content-Type': 'application/json',
            //         "X-CSRF-Token": csrfToken
            //     },
            //     success: function(data) {
            //         OcultarLoader();
            //         if (data.status == "ok") {
            //             valoridpago = data.idpago;
            //             valoriddeuda = data.iddeuda;
            //             $("#modal_pagoexito").modal('show');
            //         } else {
            //             toastr.error("Se ha producido un error al Generar el Pago!!");
            //         }
            //     },
            //     cache: false,
            //     contentType: false,
            //     processData: false,
            // });
        })

        const abrirRecibopdf = () => {
            window.open("/pagopdf/" + valoridpago + "/" + valoriddeuda);
            $("#modal_pagoexito").modal('hide');
            setTimeout(function() {
                location.reload();
            }, 1000);
        }

        const CerrarModalPagoExitoso = () =>{
            $("#modal_pagoexito").modal('hide');
            setTimeout(function() {
                location.reload();
            }, 1000);
        }

        $('#btnvercuotas').on('click', function() {
            const id_deuda = document.getElementById("id_deuda").value;
            llenarTablaCuotas(id_deuda);
            $("#modal-ver_cuotas").modal('show');
        })

        function llenarTablaCuotas(id_factura_cab) {
            $.ajax({
                url: "/pagos/consultarCuotasSocios",
                type: "POST",
                data: JSON.stringify({
                    id_factura_cab: id_factura_cab
                }),
                headers: {
                    'Content-Type': 'application/json',
                    "X-CSRF-Token": csrfToken
                },
                success: function(data) {
                    OcultarLoader();
                    console.log(data.status);
                    if (data.status == "ok") {
                        $("#tbodyCuotas").empty();

                        for (var option of data.object) {
                            var rowCuota = '<td width="100" >' + option.num_cuota + '</td>';
                            var rowFVencim = '<td width="100" >' + ConvertDateString(option.fecha_vencimiento) +
                                '</td>';
                            var rowMonto = '<td width="100" >' + option.monto + '</td>';
                            var rowCredito = '<td width="100" >' + option.credito + '</td>';
                            var rowSaldo = '<td width="100" >' + option.saldo + '</td>';

                            $("#tblCuotas>tbody").append('<tr id="row' + option.num_cuota + '">' + rowCuota +
                                rowFVencim + rowMonto + rowCredito + rowSaldo + '</tr>');
                        }


                    } else {
                        toastr.error("Se ha producido un error al cargar cuotas!!");
                    }
                },
                cache: false,
                contentType: false,
                processData: false,
            });
        }

        $('#example2').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": false,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "responsive": true,
        });

        $('#reservationdate').datetimepicker({
            format: 'DD/MM/YYYY'
        });

        $('#reservationdate2').datetimepicker({
            format: 'DD/MM/YYYY'
        });

        $('#reservationdate3').datetimepicker({
            format: 'DD/MM/YYYY'
        });

        $('[data-mask]').inputmask()

        $('input').inputmask();

        bsCustomFileInput.init();

        var valCheked = document.getElementById("tipo_pago");
        valCheked.addEventListener('change', function() {
            OcultaDatosBancarios();
        });

        function OcultaDatosBancarios(){
            var valor = document.getElementById("tipo_pago").value;
            if (valor == 'EFE') {   
                document.getElementById("datos_bancarios").style.display = "none";
            } else
            if (valor == 'DEP') {
                document.getElementById("datos_bancarios").style.display = "block";
            }
        }

        OcultaDatosBancarios();

        var valCheked2 = document.getElementById("cuenta_bancaria");
        valCheked2.addEventListener('change', function() {
            CargaNumeroCuentaBanco();
        });

        function CargaNumeroCuentaBanco(){
            var id = document.getElementById("cuenta_bancaria").value;
            $("#numero_cuenta").val(id).change();
        }

        CargaNumeroCuentaBanco();
        
    </script>
@stop