let data = [];

function initializeData() {
    data.push({"numero": 1, "nombres": "DELGADO CHOZO JUAN FRANCISCO", "sede": "CANTA CALLAO 2", "horario": "07:00 - 17:00", "tipo_horario": "REGULAR",
        "fecha_entrada": "2018-06-15", "marcacion_entrada": "06:59", "marcacion_salida": "00:00", "fecha_salida": "2018-06-15"});

    data.push({"numero": 2, "nombres": "DELGADO CHOZO JUAN FRANCISCO", "sede": "CANTA CALLAO 2", "horario": "07:00 - 17:00", "tipo_horario": "REGULAR",
        "fecha_entrada": "2018-06-15", "marcacion_entrada": "06:59", "marcacion_salida": "00:00", "fecha_salida": "2018-06-15"});

    data.push({"numero": 3, "nombres": "DELGADO CHOZO JUAN FRANCISCO", "sede": "CANTA CALLAO 2", "horario": "07:00 - 17:00", "tipo_horario": "REGULAR",
        "fecha_entrada": "2018-06-15", "marcacion_entrada": "06:59", "marcacion_salida": "00:00", "fecha_salida": "2018-06-15"});

    data.push({"numero": 4, "nombres": "DELGADO CHOZO JUAN FRANCISCO", "sede": "CANTA CALLAO 2", "horario": "07:00 - 17:00", "tipo_horario": "REGULAR",
        "fecha_entrada": "2018-06-15", "marcacion_entrada": "06:59", "marcacion_salida": "00:00", "fecha_salida": "2018-06-15"});

    data.push({"numero": 5, "nombres": "DELGADO CHOZO JUAN FRANCISCO", "sede": "CANTA CALLAO 2", "horario": "07:00 - 17:00", "tipo_horario": "REGULAR",
        "fecha_entrada": "2018-06-15", "marcacion_entrada": "06:59", "marcacion_salida": "00:00", "fecha_salida": "2018-06-15"});

    data.push({"numero": 6, "nombres": "DELGADO CHOZO JUAN FRANCISCO", "sede": "CANTA CALLAO 2", "horario": "07:00 - 17:00", "tipo_horario": "REGULAR",
        "fecha_entrada": "2018-06-15", "marcacion_entrada": "06:59", "marcacion_salida": "00:00", "fecha_salida": "2018-06-15"});

}


function mostrarVistaPrevia() {
    console.log("vista previa");
    console.log(data);
    $("#tblAsistenciaPolicias").DataTable().destroy();
    $("#tblAsistenciaPolicias").DataTable({
        iDisplayLength: 50,
        bStateSave: false,
        autoWidth: false,
        responsive: true,
        stateSave: true,
        columnDefs: [{
                orderable: false,
                width: '100px',
                targets: [7]
            }],
        dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
        "processing": true,
        data: data,
        "columns": [
            {"data": "numero"},
            {"data": "nombres"},
            {"data": "sede"},
            {"data": "horario"},
            {
                "data": "tipo_horario",
                "className": "text-center",
                render: (data)=>{
                    let label = '';
                    
                    switch(data){
                        case "REGULAR":
                            label= `label bg-slate border-slate-700`;
                        break;
                    }
                    
                    return `<span class="${label}">${data}</span>`;
                }
            },
            {
                "data": "fecha_entrada",
                "className": 'text-center'
            },
            {
                "data": "marcacion_entrada",
                "className": 'text-center'
            },
            {
                "data": "marcacion_salida",
                "className": 'text-center'
            },
            {
                "data": "fecha_salida",
                "className": 'text-center'
            },
        ],
        rowsGroup: [1, 2, 3, 4],
        fnInitComplete: function (settings, data) {
            console.log(data);
        }
    });
}


$(function () {
    $("#dpFechaInicio").datepicker({
        minDate: new Date(2000, 1 - 1, 1), maxDate: new Date(),
        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(),
        dateFormat: 'dd/mm/yy',
        defaultDate: new Date(),
        changeMonth: true,
        changeYear: true,
        yearRange: '-18:+0',
        onSelect: function () {
//        $(this).valid();
        }
    });
    $("#dpFechaFin").datepicker('setDate', 'now');

    defaultConfigDataTable();
    initializeData();
    $("#btnVistaPrevia").click(mostrarVistaPrevia);
});