@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">Ejecuciones Cron Cobros</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">Listado Ejecuciones</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-head">
                            <header>Listado de Ejecucion Cron Cobros</header>
                        </div>
                        <div class="card-body ">

                            <div class="table-wrap">
                                <div class="table-responsive">
                                    <table class="table table-sm table-striped table-bordered" id="tabla_cxs" >
                                        <thead>
                                        <tr>
                                            <th><b>#</b></th>
                                            <th><b>Contratos</b></th>
                                            <th><b>Fecha inicio cola</b></th>
                                            <th><b>Fecha fin cola</b></th>
                                            <th><b>Cant. en cola</b></th>
                                            <th><b>Fecha inicio Ejecución</b></th>
                                            <th><b>Fecha fin Ejecución</b></th>
                                            <th><b>Cant. Ejecutado</b></th>

                                        </tr>

                                        <tbody>

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

                        </div>
                        <div class="card-footer">
                            <div class="float-right">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
<style>
    /*
table.dataTable td, th {
	font-size: 0.7em !important;
}
table.dataTable th input, select {
	width: 90%!important;
	font-size: 0.8em!important;
}*/
    #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>
    <script type="text/javascript">


        $(document).ready(function (){
            loadTabla();
        });

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



        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('obtenerCronCobrosAjax') }}",
                "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: 'cant_registros',
                    name: 'cant_registros',
                    className: 'center'
                },

                //  fecha_inicio_cola
                {
                    data: 'fecha_inicio_cola',
                    name: 'fecha_inicio_cola'
                },
                //fecha_fin_cola
                {
                    data: 'fecha_fin_cola',
                    name: 'fecha_fin_cola'
                },
                //  cant_contratos_en_cola
                {
                    data: 'cant_contratos_en_cola',
                    name: 'cant_contratos_en_cola',
                    className: 'center'
                },
                //fecha_inicio_procesar_cola
                {
                    data: 'fecha_inicio_procesar_cola',
                    name: 'fecha_inicio_procesar_cola'
                },
                //fecha_fin_procesar_cola
                {
                    data: 'fecha_fin_procesar_cola',
                    name: 'fecha_fin_procesar_cola'
                },
                //cant_contratos_trabajados
                {
                    data: 'cant_contratos_trabajados',
                    name: 'cant_contratos_trabajados',
                    className: 'center'
                },

            ],

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