@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 Sincronización - 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 Sincronización</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>Fecha Recibido</th>
                                            <th>Comercio</th>
                                            <th>Tel. destino</th>
                                            <th>Identificación</th>
                                        
                                            <th>Cliente</th>
                                            <th>Monto</th>
                                            <th>Nº Referencia</th>
                                            <th>Nº Referencia Banco</th>
                                            <th>Cliente ID</th>
                                            <th><b>Estado</b></th>
                                            <th>Descripción</th>
                                            <th>VDP Leido</th>
                                            <th>VDP Fecha</th>
                                            <th>VDP Recibo</th>
                                            <th>Vinculado</th>

                                        </tr>
                                        <!--<tr>
                                            <th></th>
                                            <th id="fecha"></th>
                                            <th id="documento"></th>
                                            <th></th>
                                            <th></th>
                                            <th id="fecha_nacimiento"></th>
                                            <th id="estado_pago"></th>
                                            <th></th>
                                           
                                        </tr>-->

                                    </thead>
                                    <tbody>
                                    </tbody>

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




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

{{-- Modal --}}
<div class="modal" id="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <!-- Aquí se mostrará el contenido resumido del <td> -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">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;
}
</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() {

        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;
            }
        });
        
    });

    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") === '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") === '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></select>');
            }
           
            $('#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_registro
            /*$('#inp_fecha').daterangepicker({

                autoUpdateInput: false,
                locale: {
                    format: 'DD-MM-YYYY',
                    "applyLabel": "Aplicar",
                    "cancelLabel": "Cancelar",
                    "fromLabel": "Desde",
                    "toLabel": "Hasta",
                }
            }).on('apply.daterangepicker', function(ev, picker) {
                // Actualiza el input cuando se hace clic en "Aplicar"
                $(this).val(picker.startDate.format('DD-MM-YYYY') + ' - ' + picker.endDate.format('DD-MM-YYYY'));
                $(this).trigger('change'); // Dispara el evento 'change'

            }).on('cancel.daterangepicker', function(ev, picker) {
                // Limpia el input cuando se hace clic en "Cancelar"
                $(this).val('');
                $(this).trigger('change'); // Dispara el evento 'change'
            });*/

        });

        const fields_list = [
            'DT_RowIndex', 
            'fechaRecibido',
            'comercio', 
            'telefonoDestino', 
            'identificacion',
            'cliente',
            'monto',
            'numReferencia',
            'numReferenciaBanco',
            'clienteId',
            'estado',
            'descripcion',
            'vdp_leido',
            'vdp_leido_fecha',
            'vdp_recibo' ,
           
        ]

        let column_fields = fields_list.map(e =>{
            return {
                data: e,
                name: e,
            }
        })

        column_fields.push({
            data :  'vinculado_codigo_descripcion',
            name :  'vinculado_codigo_descripcion'
        })



        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('obtener_sincronizacion_daviviendaAjax') }}",
                "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: column_fields,
        });
        table.on('draw.dt', function (e, settings, json, xhr) {
            $('#tabla_cxs tbody').removeClass('blur-effect');
        });
    }
    

    function buscar(tipo) {

        //$('#accion').val(1);
        //var textoSelect = $('#' + tipo).val();
        const ENTER_KEY_CODE = 13;

        switch (tipo) {
            case 'documento':
                //document.getElementById("frmFiltros").submit();
                break;
            case 'email':
                document.querySelector('#email').addEventListener('keyup', function(e) {
                    if (e.keyCode === ENTER_KEY_CODE) {
                        document.getElementById("frmFiltros").submit();
                    }
                });
                break;
                // case 'fecha_nacimiento_init':
                //     document.querySelector('#fecha_nacimiento_init').addEventListener('keyup', function(e) {
                //         if (e.keyCode === ENTER_KEY_CODE) {
                //             document.getElementById("frmFiltros").submit();
                //         }
                //     });
                // break;
            case 'fecha_nacimiento_end':
                document.querySelector('#fecha_nacimiento_end').addEventListener('keyup', function(e) {
                    if (e.keyCode === ENTER_KEY_CODE) {
                        document.getElementById("frmFiltros").submit();
                    }
                });
                break;

            case 'fechacreacion_init':
                document.querySelector('#fechacreacion_init').addEventListener('keyup', function(e) {
                    if (e.keyCode === ENTER_KEY_CODE) {
                        document.getElementById("frmFiltros").submit();
                    }
                });
                break;
            case 'fechacreacion_end':
                document.querySelector('#fechacreacion_end').addEventListener('keyup', function(e) {
                    if (e.keyCode === ENTER_KEY_CODE) {
                        document.getElementById("frmFiltros").submit();
                    }
                });
                break;
            case 'fecha_primer_cobro_start':
                document.querySelector('#fecha_primer_cobro_start').addEventListener('keyup', function(e) {
                    if (e.keyCode === ENTER_KEY_CODE) {
                        document.getElementById("frmFiltros").submit();
                    }
                });
                break;
            case 'fecha_primer_cobro_end':
                document.querySelector('#fecha_primer_cobro_end').addEventListener('keyup', function(e) {
                    if (e.keyCode === ENTER_KEY_CODE) {
                        document.getElementById("frmFiltros").submit();
                    }
                });
                break;
                /*   case 'fechacreacion_rango':
                      document.querySelector('#fechacreacion_rango').addEventListener('keyup', function(e) {
                          if (e.keyCode === ENTER_KEY_CODE) {
                              document.getElementById("frmFiltros").submit();
                          }
                      });
                  break; */
                /* case 'fecha_novedad':
                    document.querySelector('#fecha_novedad').addEventListener('keyup', function(e) {
                        if (e.keyCode === ENTER_KEY_CODE) {
                            document.getElementById("frmFiltros").submit();
                        }
                    }); */

                //default:
                //document.getElementById("frmFiltros").submit();
                //break;
        }

    }
</script>
@endsection