function getColumns() {
    let columns = [
        {
            title: `N°`,
            data: `id`,
            className: 'text-center'
        },
        {
            title: `POLICIA`,
            data: `policia_nombres`,
            className: `text-center`,
        },
        {
            title: `SEDE`,
            data: `sede_descripcion`,
            className: `text-center`,
        },
        {
            title: `HORARIO`,
            data: `horario`,
            className: 'text-center'
        },
        {
            title: `FECHA ENTRADA`,
            data: `fecha_entrada`,
            className: 'text-center'
        },
        {
            title: `MARC. ENTRADA`,
            data: `marcacion_entrada`,
            className: 'text-center'
        },
        {
            title: `MARC. SALIDA`,
            data: `marcacion_salida`,
            className: 'text-center'
        },
        {
            title: `FECHA SALIDA`,
            data: `fecha_salida`,
            className: 'text-center'
        },
        {
            title: `ROL`,
            data: `tiporol_descripcion`,
            className: 'text-center'
        },
        {
            title: `COSTO HORA`,
            data: `costo_hora`,
            className: 'text-center'
        },
        {
            title: `TIEMPO LABORADO`,
            data: `tiempo_laborado`,
            className: 'text-center'
        },
        {
            title: `MONTO`,
            data: `monto`,
            className: 'text-center'
        },
        {
            title: `DCTO POR NO MARCAR`,
            data: `descuento_no_marco`,
            className: 'text-center'
        },
        {
            title: `TIEMPO EXTRA`,
            data: `tiempo_extra`,
            className: 'text-center'
        },
        {
            title: `MONTO EXTRAS`,
            data: `monto_extras`,
            className: 'text-center'
        },
        {
            title: `ESTADO EXTRAS`,
            data: `estado_extras`,
            className: 'text-center'
        },
        {
            title: `MONTO TOTAL`,
            data: `monto_total`,
            className: 'text-center'
        },
    ];

    return columns;
}

function getColumnDefs() {
    let columnDefs = [
        {orderable: false, width: '3%', targets: 0, className: "text-center"},
        {orderable: false, width: '10%', targets: 1, className: "text-center"},
        {orderable: false, width: '30%', targets: 2, className: "text-center"},
        {orderable: false, width: '7%', targets: 3, className: "text-center"},
        {orderable: false, width: '7%', targets: 4, className: "text-center"},
        {orderable: false, width: '3%', targets: 5, className: "text-center"},
        {orderable: false, width: '10%', targets: 6, className: "text-center"},
        {orderable: false, width: '30%', targets: 7, className: "text-center"},
        {orderable: false, width: '7%', targets: 8, className: "text-center"},
        {orderable: false, width: '7%', targets: 9, className: "text-center"},
        {orderable: false, width: '3%', targets: 10, className: "text-center"},
        {orderable: false, width: '10%', targets: 11, className: "text-center"},
        {orderable: false, width: '30%', targets: 12, className: "text-center"},
        {orderable: false, width: '7%', targets: 13, className: "text-center"},
        {orderable: false, width: '7%', targets: 14, className: "text-center"},
        {orderable: false, width: '7%', targets: 15, className: "text-center"},
        {orderable: false, width: '7%', targets: 16, className: "text-center"},
        {orderable: false, width: '7%', targets: 17, className: "text-center"},
    ];
    return columnDefs;
}

function listarPolicias(selectorName) {
    axios.get(URI_POLICIAS).then((result) => {
        let policias = result.data;
        policias = _.orderBy(policias, p => p.nombres);
        let html = `<option value="">[TODOS]</option>`;
        policias.forEach(p => html += `<option documento_identidad="${p.dni}" value="${p.id}">${p.nombres}</option>`);
        $(`${selectorName}`).html(html);
        $('.select-search').select2();
    });
}

function listarSedes(selectorName) {
    axios.get(URI_SEDES).then((result) => {
        let sedes = result.data;
        sedes = _.orderBy(sedes, s => s.descripcion);
        let html = `<option value="">[TODOS]</option>`;
        sedes.forEach(sede => html += `<option value="${sede.codigo}">${sede.descripcion}</option>`);
        $(`${selectorName}`).html(html);
    });
}

function defaultConfigDateRangePicker(selectorName) {
    $(selectorName).daterangepicker({
        "autoApply": true,
        "locale": {
            "format": "DD/MM/YYYY",
            "separator": " - ",
            "applyLabel": "Apply",
            "cancelLabel": "Cancel",
            "fromLabel": "From",
            "toLabel": "To",
            "customRangeLabel": "Custom",
            "weekLabel": "W",
            "daysOfWeek": [
                "Do",
                "Lu",
                "Ma",
                "Mi",
                "Ju",
                "Vi",
                "Sa"
            ],
            "monthNames": [
                "Enero",
                "Febrero",
                "Marzo",
                "Abril",
                "Mayo",
                "Junio",
                "Julio",
                "Agosto",
                "Setiembre",
                "Octubre",
                "Noviembre",
                "Diciembre"
            ],
            "firstDay": 1
        },
        "startDate": "17/08/2018",
        "endDate": "23/08/2018"
    }, function (start, end, label) {
//                    console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
    });
    $(selectorName).datepicker('setDate', 'now');
}


function mostrarReporte(objParams = {}) {
    axios.get(URI_POLICIA_REPORTE_MONTOS, objParams).then((response) => {
        response.data = formatResponse(response);
        let columns = getColumns();
        let columnDefs = getColumnDefs();

        let wrapsNameDatatable = `divDatatable`;
        let classNameForDatatable = `display table table-bordered`;
        let footer = false;

        makeDatatable(
                {
                    data: response.data.data,
                    columns,
                    columnDefs,
                    wrapsNameDatatable,
                    classNameForDatatable,
                    footer
                }
        );
    });
}


$().ready(function () {
    defaultConfigDataTable();
    listarPolicias("#cboPoliciasFiltro");
    listarSedes("#cboSedesFiltro");
    defaultConfigDateRangePicker("#dpRangoFechas");
    $("#btnVerTodos").click(mostrarReporte);
});