let data = [];

function initilizeData() {
//    axios.get('http://172.16.2.91:3000/ServletAdministrativos/accion=listarAsistencias')
//            .then(function (response) {
//                // handle success
//                console.log(response);
//            })
//            .catch(function (error) {
//                // handle error
//                console.log(error);
//            })
//            .then(function () {
//                // always executed
//            });
}


function cargarDatatable() {
    let datos = data;
    let numero = 1;
    datos.forEach(p => p["numeroFila"] = numero++);
    $("#tblAsistencias").DataTable().destroy();
    $("#tblAsistencias").DataTable({
        "language": {
            "lengthMenu": "Mostrar: _MENU_",
            "zeroRecords": "&nbsp;&nbsp;&nbsp; No se encontraron resultados",
            "info": "&nbsp;&nbsp;&nbsp; Mostrando del _START_ al _END_ de un total de _TOTAL_ registros",
            "infoEmpty": "&nbsp;&nbsp;&nbsp; Mostrando 0 de 0 registros",
            "search": "Filtrar:",
            "loadingRecords": "Cargando...",
            "processing": '<span style="width:100%;"><img src="http://www.snacklocal.com/images/ajaxload.gif"></span>',
            "paginate": {
                "first": "First",
                "last": "Last",
                "next": "Siguiente",
                "previous": "Anterior"
            }
        },
        "bSort": false,
        "bFilter": false,
        "aaSorting": [],
        "ordering": false,
        "bLengthChange": false,
        "bInfo": true,
        "paging": true,
        iDisplayLength: 25,
        bStateSave: false,
        autoWidth: false,
        responsive: true,
        stateSave: true,
        columnDefs: [
            {orderable: false, width: '5%', targets: 0, className: "text-center"},
            {orderable: false, width: '25%', targets: 1},
            {orderable: false, width: '15%', targets: 2},
            {orderable: false, width: '10%', targets: 3, className: "text-center"},
            {orderable: false, width: '10%', targets: 4, className: "text-center"},
            {orderable: false, width: '10%', targets: 5, className: "text-center"},
            {orderable: false, width: '8%', targets: 6, className: "text-center"},
        ],
        dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
        "processing": true,
        ajax: {
            contentType: 'application/json; charset=utf-8',
            url: "http://172.16.2.91:3000/asistenciasPersonalAdministrativoDatatable",
//            data: {
//                busqueda: busqueda
//            }
//            , 
            beforeSend: function () {
//                cargando();

            }, complete: function () {
//                localStorage.removeItem("dniBuscar");
//                dniBuscar=null;
//                cerrar_cargando();
            }
        },
        columns: [
            {data: "numeroFila", className: "text-center"},
            {data: "nombres"},
            {data: "cargo"},
            {data: "horario"},
            {data: "fecha"},
            {data: "hora_marcacion"},
            {
                data: "estado",
                className: "text-center",
                render: (data) => {

                    if (data === null) {
                        return `<span class="label bg-purple" style="font-size: 12px">PENDIENTE</span>`;
                    }

                    let label = '';
                    let obs = ['', 'Asistió', 'No marcó', 'Falta con aviso', 'Falta sin aviso', 'Tardanza', 'Vacaciones', 'Feriado', 'LSGH', 'LCGH'];
                    debugger
                    switch (data) {
                        case 1://Asistió
                            label = "label label-success";
                            break;
                        case 2://No marco
                            label = 'label label-info';
                            break;
                        case 3://'Falta con aviso'
                        case 4://'Falta sin aviso'
                            label = 'label label-danger';
                            break;
                        case 5://'Tardanza'
                            label = 'label label-warning';
                            break;
                        case 6://'Vacaciones'
                        case 7://'Feriado'
                        case 8://'LSGH'
                        case 9://'LCGH'
                            label = 'label label-primary';
                            break;
                        default:
                            label = 'label label-default';
                    }

                    debugger
                    console.log(label);

                    return `<span class="${label}" style="font-size: 12px">${obs[data]}</span>`;
                }
            },
            {
                data: "hora_marcacion",
                render: (data) => {
                    if (data === null) {
                        let html = `<span data-toggle="modal" data-target="#modal_entrada_pendiente" data-placement="left" title="Editar" style="cursor: pointer"> <i class='registrar icon-plus-circle2 text-success-700'></i>&nbsp;&nbsp; </span>
                                    <span data-toggle="tooltip" data-placement="left" title="Editar" style="cursor: pointer"> <i class='editar icon-pencil text-slate-800'></i>&nbsp;&nbsp; </span>
                                    <span data-toggle="tooltip" data-placement="left" title="Aprobar" style="cursor: pointer"> <i class='aprobar icon-checkmark-circle text-success-700'></i>&nbsp;&nbsp; </span>
                                    <span data-toggle="tooltip" data-placement="left" title="Anular" style="cursor: pointer"> <i class='anular icon-cancel-circle2 text-danger-700'></i>&nbsp;&nbsp; </span>`;
                        return html;
                    }
                    return null;
                }
            },
        ],
        fnInitComplete: function (settings, data) {
            $('th').removeClass('sorting_asc');
//            console.log(data);
        }
    });
}

$().ready(function () {
    initilizeData();
    cargarDatatable();
    $('.selectpicker').selectpicker({
        style: 'btn-info',
        size: 4
    });

    $(".btn.dropdown-toggle.bs-placeholder").removeClass("btn-info");
    $(".btn.dropdown-toggle.bs-placeholder").css({
        border: "1px solid #ddd",
        backgroundColor: "#fff"
    });

    $("#dpFechaInicio").datepicker({
        minDate: new Date(2000, 1 - 1, 1), maxDate: new Date(2018, 6, 31),
        dateFormat: 'dd/mm/yy',
//        defaultDate: new Date(),
        changeMonth: true,
        changeYear: true,
        yearRange: '-18:0',
        onSelect: function () {
//        $(this).valid();
        }
    });
    $("#dpFechaInicio").datepicker('setDate', 'now');

    $("#dpFechaFin").datepicker({
        minDate: new Date(2000, 1 - 1, 1), maxDate: new Date(2018, 6, 31),
        dateFormat: 'dd/mm/yy',
        defaultDate: new Date(),
        changeMonth: true,
        changeYear: true,
        yearRange: '-18:+0',
        onSelect: function () {
//        $(this).valid();
        }
    });
    $("#dpFechaFin").datepicker('setDate', 'now');

});

