@extends('layouts.app')
@section('content')
<!-- end sidebar menu -->
<!-- start page content -->
<div class="page-content-wrapper">
    <div class="page-content">
        <div class="page-bar">
            <div class="page-title-breadcrumb">
                <div class="pull-left">
                    <div class="page-title text-danger">Pagos Automaticos - Davivienda</div>
                </div>
                <ol class="breadcrumb page-breadcrumb pull-right">
                    <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="{{ url('/dashboard') }}">Inicio</a>&nbsp;<i class="fa fa-angle-right"></i>
                    </li>
                    <li class="active">Pagos Automaticos</li>
                </ol>
            </div>
        </div>
        <!-- start widget -->
        <!-- start admited patient list -->
        <div class="row">
            <div class="col-md-12 col-sm-12">
                <div class="card  card-box">

                    <div class="card-body ">
                        <div class="row">
                            <!--<div class="col-11"> </div>-->
                            <div class="col-12 tools">


                                <div class="btn-group">
                                    <a class="btn btn-default dropdown-toggle" href="javascript:void(0)" onclick="loadTabla();"><i class="fa fa-repeat"></i></a>
                                </div>

                                <!--<a class="btn btn-primary" onclick="generar()"><i class="fa fa-download"></i></a>-->

                            </div>


                            <div class="table-responsive">

                                <table class="table table-sm table-striped table-bordered" id="tabla_cxs" cellspacing="0" width="100%" style="font-size:14px">
                                    <thead>

                                        <tr>
                                            <th><b>#</b></th>
                                            <th><b>Fecha Lectura</b></th>
                                            <th><b>Fecha Pago</b></th>
                                            <th><b>Documento API</b></th>
                                            <th><b>Cliente</b></th>
                                            <th><b>Detalle API</b></th>
                                            <th><b>Monto API</b></th>
                                            <th><b>Recibo API</b></th>
                                            <th><b>VDP Estado</b></th>
                                            <th style="white-space: nowrap;"><b>VDP Recibo</b></th>
                                            <th><b>Vinculación Davivienda</b></th>
                                            <th><b>Respuesta Pago VDP</b></th>
                                            <th><b>Pago Aplicado a</b></th>
                                            <th><b>Correo</b></th>
                                            <th><b>Anulador por</b></th>
                                            <th></th>
                                        </tr>
                                        <tr>
                                            <th></th>
                                            <th id="fecha"></th>
                                            <th id="fecha_pago"></th>

                                            <th id="documento"></th>
                                            <th  id="cliente_"></th>
                                            <th id="detalle_api"></th>
                                            <th id="monto_api"></th>
                                            <th id="recibo_banco"></th>
                                            <th id="estado_pago"></th>
                                            <th id="recibo"></th>
                                            <th id="estado_vinculacion"></th>
                                            <th id="respuesta_pago_vdp"></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                        </tr>

                                    </thead>
                                    <tbody>
                                    </tbody>

                                </table>
                            </div>
                        </div>
                    </div>




                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal PAgo--}}
<div class="modal" id="modal">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Realizar Pago</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <p id="p_resultado" style="display:inline"></p>
                <p style="color:red;display:inline">¿Desea corregir al cliente o agregar lo faltante para aplicar el pago?</p>
                <br>
                <input type="hidden" id="id_pago_automatico">
                <input type="hidden" id="cedula_td">
                <form>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label" title="A quien se le aplicará el pago"><b>Cliente Aplicar el Pago:</b></label>
                        <select name="" id="cliente_corregido" class="form-control" onchange="">
                        </select>
                    </div>


                    <div class="form-group" id="content_rule">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" checked id="defaultCheck1">
                            <label class="form-check-label" for="defaultCheck1">
                                <b>Crear Regla de Corrección </b><small>Esto solo aplica cuando no se encuentra el cliente</small>
                            </label>
                        </div>
                    </div>
                    <div class="form-group" id="content_comentario">
                        <label for="message-text" class="col-form-label"><b>Comentario - regla corrección:</b></label>
                        <textarea class="form-control" id="message-text"></textarea>
                    </div>

                    <p id="txt_tiene_regla"></p>

                    <hr>

                    <div class="form-group" id="div_contrato" style="display:none">
                        <label for="message-text" class="col-form-label" title="A quien se le aplicará el pago"><b>Contrato:</b></label>
                        <!--<select name="" id="contrato_txt" class="form-control"></select>-->
                        <select class="form-control select2 select2-hidden-accessible" style="width: 100%;" id="contrato" onchange="consultar_servicios()" name="contrato"></select>
                    </div>

                    <div class="form-group" id="div_servicio" style="display:none">
                        <label for="message-text" class="col-form-label" title="A quien se le aplicará el pago"><b>Servicio:</b></label>
                        <select class="form-control select2 select2-hidden-accessible" style="width: 100%;" id="servicio" onchange="" name="servicio"></select>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" onclick="procesar_regla();">Procesar</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>


{{-- Modal Regla--}}

<div class="modal" id="modal2">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ver Regla de Correccion</h5>
                <button type="button" class="close" data-dismiss="modal" data-target="#modal2" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">

                <form>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label"><b> DOCUMENTO API:</b></label>
                        <input name="" id="cliente_ver" class="form-control" readonly>
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label"><b>Cliente Corregido:</b></label>
                        <input name="" id="cliente_corregido_ver" class="form-control" readonly>
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label"><b>Comentario:</b></label>
                        <textarea class="form-control" id="message_text_ver" readonly></textarea>
                    </div>

                    <div class="form-group">
                        <label for="message-text" class="col-form-label"><b>Creado por:</b></label>
                        <input name="" id="usuario_ver" class="form-control" readonly>
                    </div>


                    <div class="form-group">
                        <label for="message-text" class="col-form-label"><b>Modificado por:</b></label>
                        <input name="" id="usuario_ver2" class="form-control" readonly>
                    </div>

                    <div class="form-group" style="display:none">
                        <label for="message-text" class="col-form-label"><b>Fecha de Creacion:</b></label>
                        <input name="" id="fecha_ver" class="form-control" readonly>
                    </div>

                </form>

            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-primary" data-dismiss="modal" data-target="#modal2">Cerrar</button>
            </div>
        </div>
    </div>
</div>

{{-- Modal PAg externo--}}

<div class="modal" id="modal3">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Pago externo a vincular</h5>
                <button type="button" class="close" data-dismiss="modal" data-target="#modal3" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
            <input type="hidden" id="id_pago_automatico_vincular">

                <form>

                    <p>Ingrese los consecutivos de los pagos que realizó manualmente, esto proceso cambiará este registro a estado pagado y agregara los consecutivos para la vinculación davivienda </p>

                    <div class="form-group">
                        <label for="message-text" class="col-form-label"><b> Consecutivos:</b></label>
                        <input class="form-control" type="text" id="consecutivos" name="consecutivos" value="" onkeypress="" />
                    </div>


                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" onclick="vincular();">Procesar pago a vincular</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" data-target="#modal3">Cerrar</button>
            </div>
        </div>
    </div>
</div>


@endsection

<style>
    #tabla_cxs td {
        white-space: nowrap;
    }

    .container-fluid {
        width: 100%;
        padding-right: none !important;
        padding-left: none !important;
        margin-right: auto;
        margin-left: auto;
    }

    table.dataTable.table-sm .sorting_asc:before,
    table.dataTable.table-sm .sorting_desc:before {
        top: 5px;
        right: 0.85em;
        display: none;
    }

    table.dataTable.table-sm .sorting_asc:after,
    table.dataTable.table-sm .sorting_desc:after {
        top: 5px;
        display: none;
    }

    .dataTables_filter {
        display: none;
    }

    .blur-effect {
        filter: blur(2px);
    }

    .select2-container--open {
        z-index: 9999999;
    }

    /*.modal {
        z-index: 1060;
        outline: 0;
        overflow-y: auto !important;
    }*/
</style>

@section('script')
<script src="{{ asset('css/bootstrap_sunrey/assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('css/bootstrap_sunrey/assets/plugins/datatables/plugins/bootstrap/dataTables.bootstrap4.min.js') }}"></script>

<!--<link rel="stylesheet" href="{{ asset('css/bootstrap_sunrey/assets/plugins/datatables/dataTables.responsive.css') }}" />
<script src="{{ asset('css/bootstrap_sunrey/assets/plugins/datatables/dataTables.responsive.js') }}"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>-->
<script type="text/javascript">
    $(document).ready(function() {

        $('#consecutivos').tagsInput({
            'defaultText': 'add a consecutivo', // Texto por defecto que se muestra cuando no hay etiquetas
            'width': 'auto',           // Ancho del campo de entrada
            'height': '150px',          // Altura del campo de entrada
            'delimiter': ',',    // Delimitadores para separar las etiquetas
             'confirmKeys': [13,188],         // Enter key will confirm tag addition
             'unique': true,
             'placeholderColor' : '#666666',


        });
        /*$('#contrato').select2({
            placeholder: 'Seleccionar un contrato',
            allowClear: true
        });*/

        loadTabla();

        $('#cliente').select2({
            placeholder: 'Cliente Id', // Agrega tu placeholder aquí
            allowClear: true,
            minimumInputLength: 3,
            language: {
                inputTooShort: function() {
                    return 'Por favor, escribe 3 o más caracteres';
                },
                errorLoading: function() {
                    return 'Esperando por resultados...';
                }
            },
            ajax: {
                dataType: 'json',
                url: '{{ url("cliente/data/ajax2") }}',
                delay: 250,
                data: function(param) {
                    let q = param.term
                    var query = {
                        search: q
                    }

                    console.log('query :', query)
                    return query;
                },
                processResults: function(data, page) {
                    return {
                        results: data
                    };
                },
                //theme: "classic"
            },
            templateSelection: function(data, container) {
                // Añade atributos personalizados al <option> tag para la selección actual
                $(data.element).attr('data-custom-attribute', data.custom_attribute);
                return data.text;
            }
        });

        $('#cliente_corregido').select2({
            placeholder: 'Buscar Cliente', // Agrega tu placeholder aquí
            allowClear: true,
            minimumInputLength: 3,
            width: '100%',
            language: {
                inputTooShort: function() {
                    return 'Por favor, escribe 3 o más caracteres';
                },
                errorLoading: function() {
                    return 'Esperando por resultados...';
                }
            },
            ajax: {
                dataType: 'json',
                url: '{{ url("cliente/data/ajax2") }}',
                delay: 250,
                data: function(param) {
                    let q = param.term
                    var query = {
                        search: q
                    }

                    console.log('query :', query)
                    return query;
                },
                processResults: function(data, page) {
                    return {
                        results: data
                    };
                },
                //theme: "classic"
            },
            templateSelection: function(data, container) {
                // Añade atributos personalizados al <option> tag para la selección actual
                $(data.element).attr('data-custom-attribute', data.custom_attribute);
                return data.text;
            }

        }).on('select2:select', function(e) {
            var data = e.params.data;
            //console.log(data); // Aquí puedes ver los datos del ítem seleccionado
            // Llama a otra función aquí, pasando `data` si es necesario
            //validar_contrato();
            validar_contrato_servicios_varios();
        });

});


    function loadTabla() {
        $('#tabla_cxs').DataTable().clear();
        $('#tabla_cxs').DataTable().destroy();

        $('#tabla_cxs thead th').each(function() {
            var title = $(this).text();

            if ($(this).attr("id") === 'documento') {
                //$(this).html('<select class="form-control input-sm select2" id="inp_documento"  /></select>');
                $(this).html('<input class="form-control input-sm"   autocomplete="off"  type="text" placeholder="Buscar por documento" id="inp_documento"/>');


            }else if ($(this).attr("id") === 'cliente_') {
                $(this).html('<input class="form-control input-sm"   autocomplete="off"  type="text" placeholder="Buscar por nombre " id="inp_cliente"/>');

            } else if ($(this).attr("id") === 'detalle_api') {
                $(this).html('<input class="form-control input-sm"   autocomplete="off"  type="text" placeholder="Buscar por detalle " id="inp_detalle_api"/>');

            }
            //monto_api
            else if ($(this).attr("id") === 'monto_api') {
                $(this).html('<input class="form-control input-sm"   autocomplete="off"  type="text" placeholder="Buscar por monto " id="inp_monto_api"/>');
            }

            //recibo_banco
            else if ($(this).attr("id") === 'recibo_banco') {
                $(this).html('<input class="form-control input-sm"   autocomplete="off"  type="text" placeholder="Buscar por recibo " id="inp_recibo_banco"/>');
            }


            else if ($(this).attr("id") === 'fecha') {
                $(this).html('<input class="form-control input-sm"   autocomplete="off"  type="text" placeholder="Buscar por fecha " id="inp_fecha"/>');
            } else if ($(this).attr("id") === 'fecha_pago') {
                $(this).html('<input class="form-control input-sm"   autocomplete="off"  type="text" placeholder="Buscar por fecha " id="inp_fecha_pago"/>');
            } else if ($(this).attr("id") === 'estado_pago') {
                $(this).html('<select class="form-control input-sm select2" id="inp_estado_pago" /><option value="">Todos</option><option value="2">No Pagado</option><option value="1">Pagado</option><option value="0">Pendiente</option><option value="3">Anulado</option></select>');
            } //recibo
            else if ($(this).attr("id") === 'recibo') {
                $(this).html('<input class="form-control input-sm"   autocomplete="off"  type="text" placeholder="Buscar por recibo" id="inp_recibo"/>');
            } //estado_vinculacion
            //estado_vinculacion
            else if ($(this).attr("id") === 'estado_vinculacion') {
                $(this).html('<select class="form-control input-sm select2" id="inp_estado_vinculado" /> <option value="">Todos</option><option value="0">Vinculado</option><option value="1">Pendiente</option><option value="2">No Vinculado - error</option></select>');

            }
            //respuesta_pago_vdp
            else if ($(this).attr("id") === 'respuesta_pago_vdp') {
                $(this).html('<input class="form-control input-sm" id="inp_respuesta_pago_vdp"  autocomplete="off"  type="text" placeholder="Buscar por respuesta"/>');

            }

            $('#inp_fecha').datepicker({
                dateFormat: 'dd-mm-yy', // Formato de la fecha
                autoSize: true, // Ajusta automáticamente el tamaño del input
                changeMonth: true, // Permite cambiar de mes
                changeYear: true, // Permite cambiar de año
                showButtonPanel: true, // Muestra el panel inferior con botones
                closeText: 'Cerrar', // Texto para el botón de cerrar
                currentText: 'Hoy', // Texto para el botón de fecha actual
                // Opciones de localización, si necesitas cambiar el idioma
                dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
                monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                onSelect: function(dateText) {
                    $(this).trigger('change'); // Dispara el evento 'change' cuando se selecciona una fecha
                }
            });

            $('#inp_fecha_pago').datepicker({
                dateFormat: 'dd-mm-yy', // Formato de la fecha
                autoSize: true, // Ajusta automáticamente el tamaño del input
                changeMonth: true, // Permite cambiar de mes
                changeYear: true, // Permite cambiar de año
                showButtonPanel: true, // Muestra el panel inferior con botones
                closeText: 'Cerrar', // Texto para el botón de cerrar
                currentText: 'Hoy', // Texto para el botón de fecha actual
                // Opciones de localización, si necesitas cambiar el idioma
                dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
                monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                onSelect: function(dateText) {
                    $(this).trigger('change'); // Dispara el evento 'change' cuando se selecciona una fecha
                }
            });


        });



        var table = $("#tabla_cxs").DataTable({

            "fixedHeader": true,
            "lengthMenu": [15, 25, 50, 75, 100],
            "language": {

                "processing": "Procesando",
                "search": "Buscar:",
                "searchPlaceholder": "Presione enter para buscar...",
                "lengthMenu": "Mostrar _MENU_ registros por página",
                "zeroRecords": "No se encontraron resultados",
                "info": "Mostrando página _PAGE_ de _PAGES_",
                "infoEmpty": "No hay registros disponibles",
                "infoFiltered": "(filtrado de _MAX_ total registros)",
                "loadingRecords": "Cargando...",
                "paginate": {
                    "first": "Primero",
                    "last": "Último",
                    "next": "Siguiente",
                    "previous": "Anterior"
                },
                "aria": {
                    "sortAscending": ": Activar para ordenar la columna de manera ascendente",
                    "sortDescending": ": Activar para ordenar la columna de manera descendente"
                },
            },

            "processing": true,
            "serverSide": true,
            "filter": false,
            "orderMulti": false,
            "bLengthChange": false,
            "bInfo": false,
            "pageLength": 25,
            "lengthChange": false,
            "info": false,
            "searching": true,
            "order": [],
            "responsive": false,
            "ordering": false, // Desactiva el ordenamiento de columnas

            "ajax": {
                "url": "{{ url('obtenerPagoAutomaticosAjax') }}",
                "type": "POST",
                "headers": {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },

            },
            "preDrawCallback": function() {
                $('#tabla_cxs tbody').addClass('blur-effect');
            },
            initComplete: function() {
                var api = this.api();

                // Apply the search
                api.columns().every(function() {
                    var that = this;

                    $('input,select', this.header()).on('keyup change', function() {
                        if (that.search() !== this.value) {
                            that.search(this.value)
                                .draw();
                        }
                    });
                });
            },

            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                },
                {
                    data: 'fecha_lectura',
                    name: 'fecha_lectura'
                },
                {
                    data: 'fechaRecibido',
                    name: 'fechaRecibido'
                },


                {
                    data: 'cedula',
                    name: 'cedula'
                },
                {
                    data: 'cliente',
                    name: 'cliente'
                },
                {
                    data: 'descripcion_transaccion',
                    name: 'descripcion_transaccion'
                },
                {
                    data: 'monto_pago',
                    name: 'monto_pago'
                },

                {
                    data: 'comprobante',
                    name: 'comprobante'
                },
                {
                    data: 'estado_pago',
                    name: 'estado_pago',

                },
                {
                    data: 'vdp_recibo',
                    name: 'vdp_recibo'
                },
                {
                    data: 'vinculado_pendiente',
                    name: 'vinculado_pendiente'
                },
                {
                    data: 'respuesta_proceso',
                    name: 'respuesta_proceso'
                },
                {
                    data: 'aplicado_a',
                    name: 'aplicado_a'
                },


                {
                    data: 'notificacion',
                    render: function(data, type, row) {
                        var data = JSON.parse(row.notificacion);
                        //console.log(data);
                        if (row.notificacion != "" || row.notificacion != null) {

                            if (data && data.original) {
                                if (data.original.ok == true) {
                                    return '<span class="clsAvailable"><i class="fa fa-envelope"></i> Enviado</span>';
                                } else {
                                    return '<span class="clsNotAvailable"  title="' + data.original.message + '"><i class="fa fa-envelope"></i> No Enviado</span>';
                                }

                            } else {
                                return " ";
                            }
                        } else {
                            return " ";
                        }

                    }
                },
                {
                    data: 'anulacion',
                    name: 'anulacion'
                },
                //agregar un boton
                {
                    data: null,
                    render: function(data, type, row) {

                        $btns = '';
                        //if estado_pago==2
                        if (row.estado_pago_id == 2
                            /*&& row.cliente == "No Identificado" */
                            &&
                            (
                                !row.descripcion.toLowerCase().includes('prima') &&
                                !row.descripcion.toLowerCase().includes('ors') &&
                                /*!row.descripcion.toLowerCase().includes('sf') &&*/
                                !row.descripcion.toLowerCase().includes('servicio funerario') &&
                                !row.descripcion.toLowerCase().includes('patología') &&
                                !row.descripcion.toLowerCase().includes('patologia') 
                                
                                /*&&
                                !row.descripcion.toLowerCase().includes('escapadita') &&
                                !row.descripcion.toLowerCase().includes('escapaditas')*/
                                
                            ) && {{ Auth::user()->hasPermissionTo('pago_automatico_aprobar') ? 'true' : 'false' }}
                        ) { //no pagado

                            $btns = `<button
                                        type="button"
                                        class="btn btn-primary btn-sm"
                                        onclick="mostrarDetalle(event, ${row.rowid} , '${row.regla_correcion_id ?? ''}' , '${row.cedula?? ''}' )"
                                    >
                                        <i class="fa fa-money"></i> Pagar
                                    </button>`;
                        }


                        //$btns +='<a href="javascript:void(0)" class="btn btn-tbl-update btn-xs" title="Ver"><i class="fa fa-eye"></i></a>';
                        if ( (row.estado_pago_id == 1 || row.estado_pago_id == 0) && {{ Auth::user()->hasPermissionTo('pago_automatico_anular') ? 'true' : 'false' }} ) { //1 = pagado
                            $btns += `
                                    <button
                                        title="Solo anula de manera informativa, en el proceso"
                                        type="button"
                                        class="btn btn-danger btn-sm"
                                        onclick="anular_pago(${row.rowid})"
                                    >
                                        <i class="fa fa-trash"></i> Anular
                                    </button>
                                `;



                        }


                        var isLocalhostOrStag = {!! json_encode(in_array(env('PATH_DEPLOY'), ['localhost', 'STAG','PRODUCCION'])) !!};

                        if (

                            /*(
                                !row.descripcion.toLowerCase().includes('prima') &&
                                !row.descripcion.toLowerCase().includes('ors') &&
                                !row.descripcion.toLowerCase().includes('servicio funerario') &&
                                !row.descripcion.toLowerCase().includes('patología') &&
                                !row.descripcion.toLowerCase().includes('patologia')
                            ) &&*/
                            row.estado_pago_id == 2 && isLocalhostOrStag) { //2 = no pagado
                            $btns += `
                                    <button
                                        title="Esto es para vincular el pago que se realizó externamente"
                                        type="button"
                                        class="btn btn-default btn-sm"
                                        onclick="pago_externo(${row.rowid})"
                                    >
                                        <i class="fa fa-sync"></i> Pago Externo
                                    </button>
                                `;



                        }



                        if (row.regla_correcion_id) {
                            $btns += `
                                    <button
                                        type="button"
                                        class="btn btn-info btn-sm" data-toggle="modal"

                                        onclick="mostrar_regla_correccion(${row.regla_correcion_id})"
                                    >
                                        <i class="fa fa-money"></i> Regla Aplicada
                                    </button>
                                `;

                        }
                        return $btns;



                    }
                }


            ],

        });
        table.on('draw.dt', function(e, settings, json, xhr) {
            $('#tabla_cxs tbody').removeClass('blur-effect');
        });
    }

    $('#cliente_corregido').on('select2:select', function (e) {

        console.log("Cambiando a select2"); // Imprime el texto del ítem seleccionado
    });
    $('#cliente_corregido').on('select2:unselect', function (e) {
        console.log("Opción deseleccionada en select2"); // Imprime un mensaje cuando se deselecciona un ítem
    });

    function pago_externo(rowid){
        $('#modal3').modal('show');

        $('#id_pago_automatico_vincular').val(rowid);

    }
    $('#modal3').on('hidden.bs.modal', function(e) {
        $('#id_pago_automatico_vincular').val("");
        $('#consecutivos').importTags(''); // Esto elimina todas las etiquetas

    });

    function vincular(){
        var rowid=$('#id_pago_automatico_vincular').val();
        var tags = $('#consecutivos').val();
        if (tags === '') {
                alert('No se han añadido consecutivos.');
        } else {
                //alert('Consecutivos: ' + tags);

                $('#modal3').modal('hide');
                $('#id_pago_automatico_vincular').val("");
                $('#consecutivos').importTags(''); // Esto elimina todas las etiquetas

            $.ajax({
                type: 'POST',
                url: "{{ URL::asset('vincular_pago_externo') }}",
                beforeSend: function() {
                    //$('#modal2').modal('show');
                    Swal.fire({ // Usa 'Swal' en lugar de 'swal'
                        title: 'Cargando',
                        text: 'Espere un momento...',
                        allowOutsideClick: false,
                        showConfirmButton: false,
                        didOpen: () => {
                            Swal.showLoading() // Usa 'Swal' en lugar de 'swal'
                        }
                    });
                },
                data: {
                    'consecutivos': tags,
                    'rowid': rowid,
                    "_token": "{{ csrf_token() }}"

                },
                success: function(res) {
                    swal.close();

                    console.log(res);
                    if (res.error==false) {
                       // alert(res.mensaje);
                       // $('#modal3').modal('hide');
                        //loadTabla();
                        Swal.fire({
                                title: 'Aplicar Pago Otros módulos',
                                text: res.mensaje,
                                icon: 'success',
                                showCancelButton: false,
                                confirmButtonColor: '#3085d6'
                            }).then((result) => {

                                loadTabla();

                            });

                    } else {
                        alert('Error al agregar los consecutivos');
                    }
                },
                error: function(err) {
                    console.log(err);
                    alert(err);
                }
            });


        }



    }

    async function mostrarDetalle(event, rowid, regla_correccion_id = '', cliente_cedula = '') {
        console.log("1.mostrarDetalle");
        limpiar_valores_modal();
        Swal.fire({
            title: 'Cargando',
            text: 'Espere un momento...',
            allowOutsideClick: false,
            showConfirmButton: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        try {
             //datos de la tabla
             var cedula_td = $(event.target).closest('tr').find('td:nth-child(4)').text();
            var textoDeLaColumna = $(event.target).closest('tr').find('td:nth-child(12)').text();
            //console.log("textoDeLaColumna: " + textoDeLaColumna);
            //datos de la tabla


            // regla de correcccion
            if (regla_correccion_id) {
                $('#p_resultado').text(textoDeLaColumna);
                $("#id_pago_automatico").val(rowid);
                $("#cedula_td").val(cedula_td);//para la cedula que no se reconocio
                $('#message-text').val("");


                console.log("existe regla_correccion_id");
                const res = await $.ajax({
                    type: "GET",
                    url: `{{asset('').'regla_correcion'}}/${regla_correccion_id}`,
                    dataType: "json"
                });
                if (res) {
                    console.log("cliente de la regla_correccion: ");
                    console.log(res);

                    var newOption = new Option(res.cliente, res.cliente_id_corregido, true, true);
                    $('#cliente_corregido').append(newOption).trigger('change');
                    $//('#cliente_corregido').prop('disabled', true);

                }
                $("#defaultCheck1").prop("checked", false);
                $('#content_rule').hide();
                $('#content_comentario').hide();
                $("#message-text").val("");
                $("#txt_tiene_regla").text("Existe regla de corrección");

                validar_contrato_servicios_varios();
                Swal.close();
                $('#modal').modal('show');
                return 0;

            }



           /* if(textoDeLaColumna.includes('El cliente  con cédula') || textoDeLaColumna.toLowerCase().includes('servicios')) {*/
                //console.log("includes(El cliente  con cédula");
               // console.log("existe la cedula cliente_cedula en la tabla front pero vamos a validar si existe en bd");

                const res = await $.ajax({
                    type: "GET",
                    url: `{{asset('').'obtenerCliente'}}/${cliente_cedula}`,
                    //dataType: "json"
                });
                console.log("Validamos si existe Cliente de la cedula: "+cliente_cedula);
                console.log(res);

                if (!res || $.isEmptyObject(res)) {
                    console.log("cliente no encontrado en bd");
                    cliente_cedula = "";
                } else {
                    console.log("cliente encontrado , pasamos a selecionarl");
                    var newOption = new Option(res.cliente, res.cliente_id, true, true);
                    $('#cliente_corregido').append(newOption).trigger('change');
                    //$('#cliente_corregido').prop('disabled', true);

                    validar_contrato_servicios_varios();
                }

                console.log("======2º bloque==========");

                if (cliente_cedula != "") {
                    console.log("existe el cliente en la bd: " + cliente_cedula);
                    //$("#div_contrato").show();
                    //$("#div_servicio").show();
                    $("#defaultCheck1").prop('checked', false);

                    $("#content_comentario").hide();
                    $('#content_rule').hide();

                } else {
                    console.log("cliente_cedula es vacio " + cliente_cedula);
                    $("#defaultCheck1").prop('checked', true);
                   // $('#content_rule').show();
                    $("#content_comentario").show();
                    $('#content_rule').show();

                    //preguntar si el cliente

                }

           /* }else {
                console.log("NO includes(el cliente con cédula)");
                if (regla_correccion_id) {
                    console.log("2 regla si");
                    $("#div_contrato").hide();
                    $("#div_servicio").hide();
                    $("#defaultCheck1").prop('checked', false);
                    $('#content_rule').hide();
                    $('#message-text').val("");
                    $("#content_comentario").hide();
                    $("#txt_tiene_regla").text("Existe regla de corrección");
                } else {
                    console.log("2 regla no");
                    $("#div_contrato").hide();
                    $("#div_servicio").hide();
                    $("#defaultCheck1").prop('checked', true);
                    $('#content_rule').show();
                    $('#message-text').val("");
                    $("#content_comentario").show();
                    $("#txt_tiene_regla").text("");
                }
            }*/


            // Inserta el texto en el <p> dentro del modal
            $('#p_resultado').text(textoDeLaColumna);
            $("#id_pago_automatico").val(rowid);
            $("#cedula_td").val(cedula_td);//para la cedula que no se reconocio
            $('#message-text').val("");
            $("#txt_tiene_regla").text("");
            Swal.close();
            $('#modal').modal('show');
        } catch (error) {
            console.log('Error en la solicitud AJAX:', error);
            if (error.responseText) {
                try {
                    let errorResponse = JSON.parse(error.responseText);
                    console.error('Respuesta del error:', errorResponse);
                } catch (e) {
                    console.error('Error al parsear la respuesta del error:', error.responseText);
                }
            }
            Swal.close();
        }
    }


   //si se usa
    function validar_contrato_servicios_varios() {

       data_servicios = [];
       var id_cliente = $('#cliente_corregido').val(); //'1';//$('#cliente').val();
       console.log("(validar_contrato_servicios_varios), id_cliente= "+id_cliente);
       if (id_cliente != '' || id_cliente != null) {
           //console.log('consultando contratos ajax....');
           var url = "{{ URL::asset('validar_pago_contratos_servicios') }}" + "/" + id_cliente;
           //console.log(url);
           $.ajax({
               //async: false,
               type: 'get',
               url: url,
           //$.get(url,false, function(res) {
               success: function (res) {
                   var obj = $.parseJSON(res);
                   console.log((obj));
                   if(obj.varios==true){
                       console.log("(validar_contrato_servicios_varios) hay varios contratos, habilitamos el div_contrato y div_servicio");
                       $("#div_contrato").show();
                       $("#div_servicio").show();

                        var data = obj.contratos.map(function(item) {
                            return {
                                id: item.contrato_id,
                                text: 'Contrato Nro.:' + item.contrato_codigo
                            };
                        });
                        $('#contrato').empty().append('<option value=""></option>').select2({
                            data: data,
                            placeholder: 'Seleccionar un contrato',
                            allowClear: true
                        });
                        $('#servicio').select2({
                            data: [],
                            placeholder: 'Seleccionar un servicio',
                            allowClear: true
                        });

                   }else{
                    console.log("(validar_contrato_servicios_varios)No hay varios o nada en contratos o servicios");

                    //limpiar porque solo hay 1 contrato o 1 servicio o cerp
                        $("#contrato").empty().trigger('change');
                        $("#servicio").empty().trigger('change');

                        $("#div_contrato").hide();
                        $("#div_servicio").hide();
                   }


               }
           });

       }
   }


   //no se usa
   /*
    function consultar_contrato() {

        data_servicios = [];
        var id_cliente = $('#cliente_corregido').val(); //'1';//$('#cliente').val();
        console.log("consultar_contrato, id_cliente= "+id_cliente);
        if (id_cliente != '' || id_cliente != null) {
            console.log('consutando contratos ajax....');
            var url = "{{ URL::asset('pagos/asociacion/manual/contratos/ajax') }}" + "/" + id_cliente;
            //console.log(url);
            $.ajax({
                async: false,
                type: 'get',
                url: url,
            //$.get(url,false, function(res) {
                success: function (res) {
                    var obj = $.parseJSON(res);
                    console.log((obj));
                    //if(obj.length>1){
                      //  console.log("hay varios contratos, habilitamos el div_contrato y div_servicio");
                        //$("#div_contrato").show();
                        //$("#div_servicio").show();
                    //}
                    //if(obj.length==1){
                        //consultar_servicios_varios(obj[0].contrato_id);
                   // }
                    var data = obj.map(function(item) {
                        return {
                            id: item.contrato_id,
                            text: 'Contrato Nro.:' + item.contrato_codigo
                        };
                    });
                    $('#contrato').empty().append('<option value=""></option>').select2({
                        data: data,
                        placeholder: 'Seleccionar un contrato',
                        allowClear: true
                    });

                }
            });

        }
    }*/

    //si se usa
    function consultar_servicios() {
        var id_contrato = $('#contrato').val();
        //console.log(id_contrato);
        console.log("consultar_servicios, id_contrato: "+id_contrato);


        if (id_contrato > 0) {
            console.log('El contrato seleccionado tiene el ID:' + id_contrato);
            var url = "{{ URL::asset('pagos/asociacion/manual/servicios/ajax') }}" + "/" + id_contrato;
            $.ajax({
                //async: false,
                type: 'get',
                url: url,
                success: function (res) {
            //$.get(url, function(res) {
                var obj = $.parseJSON(res);
                console.log(obj);

                    //if(obj.length>1){
                      //  console.log("hay varios servicios, habilitamos el div_contrato y div_servicio");
                        //$("#div_contrato").show();
                        //$("#div_servicio").show();
                    //}
                    var data = obj.map(function(item) {
                        return {
                            id: item.contrato_servicio_id,
                            text: item.servicio_nombre + ' - ' + (item.contrato_servicio_estado == 1 ? '(Activo)' : '(Inactivo)')
                        };
                    });
                    // Vaciar el select y agregar una opción vacía
                    $('#servicio').empty().append('<option value=""></option>');
                    // Re-inicializar Select2 con los nuevos datos
                    $('#servicio').select2({
                        data: data,
                        placeholder: 'Seleccionar un servicio',
                        allowClear: true
                    });
                }
            });

        }

    }




    function anular_pago(id_pago) {
        //dese una Swal que pregunte si deseo anular el pago y que si preciono si, entonces muestre un textarea para que ingrese el motivo y lo envie por ajax
        //si el pago se anula, entonces se debe mostrar un mensaje de que el pago ha sido anulado
        Swal.fire({
            title: 'Anular Pago',
            text: '¿Está seguro de anular el pago?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Anular'
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: 'Ingrese el motivo de anulación',
                    input: 'textarea',
                    inputAttributes: {
                        autocapitalize: 'off'
                    },
                    showCancelButton: true,
                    confirmButtonText: 'Enviar',
                    showLoaderOnConfirm: true,
                    preConfirm: (motivo) => {
                        // Aquí puedes realizar la solicitud AJAX para enviar el motivo
                        // Asegúrate de retornar la promesa de la solicitud AJAX aquí
                        if (!motivo) {
                            Swal.showValidationMessage('Debe ingresar un motivo para la anulación'); // Mensaje de validación
                            return false;
                        }
                        return $.ajax({
                            url: `{{asset('').'anular_pago_automatico'}}`,
                            type: 'POST',
                            data: {
                                motivo: motivo,
                                id_pago: id_pago,
                                "_token": "{{ csrf_token() }}",

                            },
                            dataType: 'json'
                        }).done(function(response) {
                            // Manejo de la respuesta exitosa
                            if(response.error==false){
                                Swal.fire(
                                        'Anulado!',
                                        'El pago ha sido anulado solo en esta vista.',
                                        'success'
                                    );
                                    loadTabla();
                            }else{
                                     Swal.fire(
                                        'Error!',
                                        response.mensaje,
                                        'error'
                                    );
                            }

                        }).fail(function(error) {
                            // Manejo del error
                            Swal.showValidationMessage(
                                `Request failed: ${error}`
                            );
                        });
                    },
                    allowOutsideClick: () => !Swal.isLoading()
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Manejo después de enviar el motivo exitosamente
                        // Por ejemplo, puedes mostrar otro Swal aquí si es necesario
                    }
                });
            }
        });
    }

    function clear_fields() {

        $("#cliente_ver").val('')
        $("#cliente_corregido_ver").val('')
        $("#message_text_ver").val('')
        $("#usuario_ver").val('')
        $("#usuario_ver2").val('')

        $("#fecha_ver").val('')
        $("#txt_tiene_regla").text("");

    }

    function mostrar_regla_correccion(regla_correccion_id) {

        clear_fields()
        $.ajax({
            type: "GET",
            url: `{{asset('').'regla_correcion'}}/${regla_correccion_id}`,
            dataType: "json",
            //load
            beforeSend: function() {
                //$('#modal2').modal('show');
                Swal.fire({ // Usa 'Swal' en lugar de 'swal'
                    title: 'Cargando',
                    text: 'Espere un momento...',
                    allowOutsideClick: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        Swal.showLoading() // Usa 'Swal' en lugar de 'swal'
                    }
                });
            },
            success: function(e) {
                swal.close();
                console.log(e);
                if (e) {

                    //e = res[0] ;
                    $("#cliente_ver").val(e.cedula_original);
                    //$("#cliente_corregido_ver").val(e.cedula_corregida)
                    $("#cliente_corregido_ver").val(e.cliente);
                    $("#message_text_ver").val(e.comentario);
                    $("#usuario_ver").val(e.created_user_name);
                    $("#usuario_ver2").val(e.update_user_name);
                    $("#fecha_ver").val(e.formatted_created_at);

                }

                $('#modal2').modal('show');
            },
        });

    }



    function procesar_regla() {

        var id_pago = $("#id_pago_automatico").val();
        var cliente_corregido = $('#cliente_corregido').select2('val');

        console.log(cliente_corregido);
        var cedula_td = $("#cedula_td").val();
        if (cliente_corregido == "" || cliente_corregido == null) {
            alert("Seleccionar un cliente para aplicar el pago");
            return;
        }
        //console.log(id_pago);


        $.ajax({
            type: "POST",
            url: "{{asset('').'crear_regla'}}",
            dataType: "json",
            beforeSend: function() {
                //$('#modal2').modal('show');
                $('#modal').modal('hide');
                Swal.fire({ // Usa 'Swal' en lugar de 'swal'
                    title: 'Procesando',
                    text: 'Espere un momento...',
                    allowOutsideClick: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        Swal.showLoading() // Usa 'Swal' en lugar de 'swal'
                    }
                });
            },
            data: {
                "_token": "{{ csrf_token() }}",
                id_pago: id_pago,
                id_cliente: cliente_corregido,
                cedula_no_encontrada: cedula_td,
                comentario: $("#message-text").val(),
                aplica_regla: $("#defaultCheck1").is(':checked'),
                contrato: $("#contrato").val(),
                servicio: $("#servicio").val()
            },
            success: function(res) {
                swal.close();

                console.log(res)
                if (res.error == false) {
                    Swal.fire({
                        title: 'Aplicar Pago',
                        text: res.pago.aplicar_pago.mensaje,
                        icon: 'success',
                        showCancelButton: false,
                        confirmButtonColor: '#3085d6'
                    }).then((result) => {
                        $('#modal').modal('hide');
                        loadTabla();
                        limpiar_valores_modal();
                    });
                } else {
                    Swal.fire({
                        title: 'Aplicar Pago',
                        text: res.error_mensaje,
                        icon: 'error',
                        showCancelButton: false,
                        confirmButtonColor: '#3085d6'
                    }).then((result) => {
                        $('#modal').modal('hide');
                        limpiar_valores_modal();

                    });
                }
                $('#modal').modal('hide');
            },


        });


    }

    function limpiar_valores_modal() {
        $("#id_pago_automatico").val("");
        $('#cliente_corregido').val("");
        //$('#servicio').val("").trigger('change');

        $("#cedula_td").val("");
        $("#message-text").val("");

        $('#cliente_corregido').val("").trigger('change');
        $('#p_resultado').text("");
        $("#defaultCheck1").prop('checked', true);

        $("#contrato").empty().trigger('change');
        $("#servicio").empty().trigger('change');

        $("#div_contrato").hide();
        $("#div_servicio").hide();
        //$('#cliente_corregido').prop('disabled', false).trigger('change');

    }
    $('#modal').on('hidden.bs.modal', function(e) {
        // Código a ejecutar después de que el modal se cierra
        limpiar_valores_modal();
    });
</script>
@endsection