@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"> Reglas de Corrección</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">Reglas Listado</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>#</th>
                                            <th>Creado por</th>
                                            <th>Documento Original</th>
                                            <th>Documento Corregido</th>
                                            <th>Editado o anulado por</th>
                                            <th>Estado</th>
                                            <th>Detalle</th>
                                            <th></th>

                                        </tr>
                                        <tr>
                                            <th></th>
                                            <th id="fecha"></th>
                                            <th id="documento"></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></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 modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Editar Regla</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
            <form>
                    <input type="hidden" id="id_regla">
                    <div class="form-group">
                        <label for="message-text" class="col-form-label"><b> Documento Original:</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>
                        <select name="" id="cliente_corregido" class="form-control">
                        </select>
                    </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"></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>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" onclick="procesar_edicion();">Guardar Cambios</button>
                <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() {

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

        $('#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;
            }
        });

    });

    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>');
            }//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"/>');
            } */

            /*$('#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
                }
            });*/
            

        });



        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('obtenerReglasAjax') }}",
                "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: 'usuario_creador',
                    name: 'usuario_creador',
                    /*render: function(data, type, row) {
                    return '<span class="subject">'+
                                                	'<span class="from"> John Deo </span>'+
                                                	'<span class="time">16 mins </span>'+
                                                '</span>';
                    }*/
                },
                {
                    data: 'cedula_original',
                    name: 'cedula_original'
                },
                {
                    data: 'cedula_corregida',
                    name: 'cedula_corregida'
                },
                {
                    data: 'usuario_update',
                    name: 'usuario_update',
                    /*render: function(data, type, row) {
                    return '<span class="subject">'+
                                                	'<span class="from"> John Deo </span>'+
                                                	'<span class="time">16 mins </span>'+
                                                '</span>';
                    }*/
                },
                {
                    data: 'estado_regla',
                    name: 'estado_regla'
                },

                {
                    data: 'comentario',
                    name: 'comentario'
                },
                
                {
                    data: null,
                    render: function(data, type, row) {

                        $btns = '';
                       
                        if (row.estado == 1) { //1= activo,0= inactivo

                           $user_creador=row.usuario_creador;
                           $user_actulizdor=row.usuario_update;
                                    
                            $btns = `<a href="javascript:void(0)" 
                                         onclick="EditarRegla(event, ${row.rowid}, '${row.cliente_corregido}', '${row.cliente_id}','${ $user_creador}','${ $user_actulizdor}' )"
                                        class="btn btn-tbl-update btn-xs" data-bs-toggle="tooltip" data-bs-placement="top" title="Editar">
                                        <i class="fa fa-edit"></i>
                                    </a>`;

                            $btns += `<a href="javascript:void(0)"  
                                        onclick="AnularRegla(event, ${row.rowid} )"
                                        class="btn btn-tbl-update btn-xs text-white" data-bs-toggle="tooltip" data-bs-placement="top" title="Eliminar" onclick="sendDelete(155844,'contratos','contratos/lista')">
                                        <i class="fa fa-trash"></i>
                                       </a>`;
                        }

                        return $btns;
                        //$btns +='<a href="javascript:void(0)" class="btn btn-tbl-update btn-xs" title="Ver"><i class="fa fa-eye"></i></a>';

                    }
                }
             


            ],

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

    function EditarRegla(event, id_regla, cliente, id_cliente,  user_creador, user_update){

        
        $("#id_regla").val(id_regla);
        var cedula_td = $(event.target).closest('tr').find('td:nth-child(3)').text();
        var comentario = $(event.target).closest('tr').find('td:nth-child(7)').text();
        $('#cliente_ver').val(cedula_td);
        $("#message_text_ver").val(comentario);

        var newOption = new Option(cliente, id_cliente, true, true);
        $('#cliente_corregido').append(newOption).trigger('change');

        $('#modal').modal('show');

        $("#usuario_ver").val(user_creador);
        $("#usuario_ver2").val(user_update);
        //$("#fecha_ver").val(e.formatted_created_at);

        

    }

    function procesar_edicion(){
        var id_regla = $("#id_regla").val();
        var cliente_corregido = $('#cliente_corregido').select2('val');
        
        if (cliente_corregido == "" || cliente_corregido == null) {
            alert("Seleccionar un cliente para aplicar la regla de corrección");
            return;
        }

                    $.ajax({
                        type: "POST",
                        url: "{{ asset('') . 'actualizat_regla' }}",
                        beforeSend: function(xhr) {
                            $('#modal').modal('hide');
                            showLoadingAlert();
                        },
                        data: {
                            "_token": "{{ csrf_token() }}",
                            "editar_regla":1,
                            "rowid":id_regla,
                            "cliente_corregido":cliente_corregido,
                            "message_text_ver": $("#message_text_ver").val()

                        },
                        success: function(res) {
                            Swal.close(); // Close loading indicator
                            console.log(res);
                            if (res.error==false) {
                                        Swal.fire({
                                                title: 'Edición de Regla',
                                                text: "Regla editada con éxito",
                                                icon: 'success',
                                                showCancelButton: false,
                                                confirmButtonColor: '#3085d6'
                                            }).then((result) => {
                                                //$('#modal').modal('hide');
                                                loadTabla();
                                               
                                            });
                            }else{

                                Swal.fire({
                                        title: 'Error en edición',
                                        html: res.mensaje,
                                        icon: 'error',
                                        showCancelButton: false,
                                        confirmButtonColor: '#3085d6'
                                    }).then((result) => {
                                        // Reload the Page
                                        loadTabla();
                                    });
                            }

                        }
                    });
                   
    }

    $('#modal').on('hidden.bs.modal', function(e) {
        $("#id_regla").val("");
        $("#message_text_ver").val("");
        $("#cliente_ver").val("");
    });
    function AnularRegla(event, id_regla){

        Swal.fire({
            title: 'Confirmar',
            text: '¿Estás seguro de que desea eliminar la regla?',
            icon: 'question',
            showLoaderOnConfirm: true,
            showCancelButton: true,
            confirmButtonText: `<i class="fa fa-check"></i> De Acuerdo`,
            cancelButtonText: '<i class="fa fa-ban"></i> Cancelar',
            confirmButtonColor: '#3085d6'
        }).then((result) => {
            Swal.close(); // Close loading indicator
            if (result.isConfirmed) {

                    $.ajax({
                        type: "POST",
                        url: "{{ asset('') . 'actualizat_regla' }}",
                        beforeSend: function(xhr) {
                            showLoadingAlert();
                        },
                        data: {
                            "_token": "{{ csrf_token() }}",
                            "anular_regla":1,
                            "rowid":id_regla

                        },
                        success: function(res) {
                            Swal.close(); // Close loading indicator
                            console.log(res);
                            if (res.error==false) {
                                        Swal.fire({
                                                title: 'Anular Regla',
                                                text: "Regla anulada con éxito",
                                                icon: 'success',
                                                showCancelButton: false,
                                                confirmButtonColor: '#3085d6'
                                            }).then((result) => {
                                                //$('#modal').modal('hide');
                                                loadTabla();
                                               
                                            });
                            }else{

                                Swal.fire({
                                        title: 'Error',
                                        html: res.mensaje,
                                        icon: 'error',
                                        showCancelButton: false,
                                        confirmButtonColor: '#3085d6'
                                    }).then((result) => {
                                        // Reload the Page
                                        loadTabla();
                                    });
                            }

                        }
                    });
                   


            }

        });

    }

    function showLoadingAlert() {
        Swal.fire({
            title: 'Cargando!',
            text: 'Espere un momento...',// add html attribute if you want or remove
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            },
        });
    }
    //


   
</script>
@endsection