let data = [];
let sedes = [];

function initializeData() {
    data.push({"dni": "12345678", "nombres": "DELGADO CHOZO JUAN FRANCISCO", "sede": "CANTA CALLAO 2", "horario": "07:00 - 17:00", "tipo_horario": "REGULAR",
        "fecha_entrada": "15/06/2018", "marcacion_entrada": "06:59", "marcacion_salida": "00:00", "fecha_salida": "2018-06-15"});
    data.push({"dni": "12345678", "nombres": "DELGADO CHOZO JUAN FRANCISCO", "sede": "CANTA CALLAO 2", "horario": "07:00 - 17:00", "tipo_horario": "REGULAR",
        "fecha_entrada": "16/06/2018", "marcacion_entrada": "06:59", "marcacion_salida": "00:00", "fecha_salida": "2018-06-16"});
    data.push({"dni": "12345678", "nombres": "DELGADO CHOZO JUAN FRANCISCO", "sede": "CANTA CALLAO 2", "horario": "07:00 - 17:00", "tipo_horario": "REGULAR",
        "fecha_entrada": "17/06/2018", "marcacion_entrada": "06:59", "marcacion_salida": "00:00", "fecha_salida": "2018-06-17"});
    
    
    sedes = ["LINCE", "MONTESORI", "AREQUIPA", "ARENALES", "CUBA", "COCALENOS", "BELISARIO", "BERTONELLI", "VILLA EL SALVADOR"];
}


function mostrarVistaPrevia() {
    let container = document.getElementById("tblProyectado");
    handsonTable = new Handsontable(container, {
        data: data,
        stretchH: 'all',
        rowHeaders: true,
        colHeaders: ['DNI', 'Apellidos y Nombres', 'Sede', 'Horario', 'Rol', 'Fecha Entrada', 'Hora entrada', 'Hora Salida', 'Fecha Salida'],
        columns: [
            {
                data: "dni",
                className: 'text-center',
                readOnly: true
            },
            {
                "data": "nombres",
                readOnly: true
            },
            {
                "data": "sede",
                "className": "text-center",
//                editor: 'select',
//                selectOptions: sedes,
                source: sedes,
                strict: true,
                type: 'autocomplete',
                allowInvalid: false
            },
            {
                "data": "horario",
                "className": "text-center",
                readOnly: true
            },
            {
                "data": "tipo_horario",
                "className": "text-center",
                readOnly: true,
//                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',
                type: 'date',
                dateFormat: 'DD/MM/YYYY'
                
            },
            {
                data: "marcacion_entrada",
                className: 'text-center',
                type: 'time',
                timeFormat: 'HH:mm',
                correctFormat: true,
                allowInvalid: false
            },
            {
                data: "marcacion_salida",
                className: 'text-center',
                type: 'time',
                timeFormat: 'HH:mm',
                correctFormat: true,
                allowInvalid: true
            },
            {
                data: "fecha_salida",
                className: 'text-center',
                type: 'date',
                dateFormat: 'DD/MM/YYYY'
            }
        ]
    });
}


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