let data = [];
let sedes = [];
let handsonTable;
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": "15/06/2018"});
    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": "16/06/2018"});
    data.push({"dni": "12345678", "nombres": "DELGADO CHOZO JUAN FRANCISCO", "sede": "CANTA CALLAO 2", "horario": "07:00 - 07:00", "tipo_horario": "AMANECIDA 24h",
        "fecha_entrada": "17/06/2018", "marcacion_entrada": "06:59", "marcacion_salida": "00:00", "fecha_salida": "18/06/2018"});


    sedes = ["LINCE", "MONTESORI", "AREQUIPA", "ARENALES", "CUBA", "COCALENOS", "BELISARIO", "BERTONELLI", "VILLA EL SALVADOR"];
}



function defaultConfigHandsonTable(){
    let container = document.getElementById("tblProyectado");

    handsonTable = new Handsontable(container, {
        data: [],
        stretchH: 'all',
        rowHeaders: true,
        colHeaders: ['DNI', 'Apellidos y Nombres', 'Sede', 'Horario', 'Rol', 'Fecha Entrada', 'Hora entrada', 'Hora Salida', 'Fecha Salida'],
        columns: [{}, {}, {}, {}, {}, {}, {}, {} ,{}]
    });
}



function mostrarVistaPrevia() {
    handsonTable.destroy();
    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
            },
            {
                "data": "fecha_entrada",
                "className": 'text-center',
                type: 'date',
                dateFormat: 'DD/MM/YYYY',
                readOnly: true

            },
            {
                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',
                readOnly: true
            }
        ]
    });
}


$(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();
    defaultConfigHandsonTable();
    initializeData();
    $("#btnVistaPrevia").click(mostrarVistaPrevia);
});