let asistencias = [], sedes = [];
let htmlSedes;

function listarAsistencias(objParams = {}) {
    debugger
    axios.get(URI_POLICIAS_ASISTENCIA, objParams).then((response) => {
        response.data = formatResponse(response);
        debugger
        let columns = [
            {
                title: `N°`,
                data: `id`,
                className: 'text-center'
            },
            {
                title: `APELLIDOS Y NOMBRES`,
                data: `policia_nombres`
            },
            {
                title: `SEDE`,
                data: `sede_descripcion`,
                className: 'text-center'
            },
            {
                title: `HORARIO`,
                data: `horario`,
                className: 'text-center'
            },
            {
                title: `TIPO`,
                data: `tiporol_descripcion`,
                className: 'text-center'
            },
            {
                title: `FRECUENCIA`,
                data: `frecuencia_descripcion`,
                className: 'text-center'
            },
            {
                title: `FECHA ENTRADA`,
                data: `fecha_entrada`,
                className: 'text-center'
            },
            {
                title: `MARC. ENTRADA`,
                data: null,
                className: 'text-center',
                render: data => {
                    let label = "";

                    if (data.estado == 3 || data.estado == 4 || data.estado == 9) {
                        return `-`;
                    }

                    if (data.marcacion_entrada === null) {
                        return null;
                    }

                    if (data.huella_entrada === 1) {
                        label = "text-migration font-weight-bold";
                    } else if (data.huella_entrada === 0) {
                        label = "text-default";
                    }

                    return `<span class="${label}">${data.marcacion_entrada}</span>`;
                }
            },
            {
                title: `MARC. SALIDA`,
                data: null,
                className: 'text-center',
                render: (data) => {
                    let label = "";

                    if (data.estado == 3 || data.estado == 4 || data.estado == 9) {
                        return `-`;
                    }

                    if (data.marcacion_salida === null) {
                        return null;
                    }

                    if (data.huella_salida === 1) {
                        label = "text-migration font-weight-bold";
                    } else if (data.huella_salida === 0) {
                        label = "text-default";
                    }

                    return `<span class="${label}">${data.marcacion_salida}</span>`;
                }
            },
            {
                title: `FECHA SALIDA`,
                data: `fecha_salida`,
                className: 'text-center'
            },
            {
                title: `ESTADO`,
                data: null,
                className: 'text-center',
                render: (data) => {
                    let label = "";
                    let estado = "";

                    switch (data.estado) {
                        case 1:
                            label = "label label-success";
                            estado = "TEMPRANO";
                            break;
                        case 2:
                            label = "label label-warning";
                            estado = "TARDANZA";
                            break;
                        case 3:
                            label = "label label-danger";
                            estado = "FCA";
                            break;
                        case 4:
                            label = "label label-danger";
                            estado = "FSA";
                            break;
                        case 5:
                            label = "label label-default";
                            estado = "NO MARCÓ";
                            break;
                        case 9:
                            label = "label label-info";
                            estado = "LSGH";
                            break;
                        case 10:
                            label = "label bg-purple";
                            estado = "ENTRADA PENDIENTE";
                            break;
                        case 11:
                            label = "label bg-purple";
                            estado = "SALIDA PENDIENTE";
                            break;
                        case null:
                            label = "label bg-purple";
                            estado = "PENDIENTE";
                            break;
                    }

                    return `<span class="${label}">${estado}</span>`;
                }
            },
            {
                title: `ACCIONES`,
                data: null,
                render: (data) => {
                    let acciones = "";

                    switch (data.estado) {
                        case 10:
                        case 11:
                        case null:
                            acciones = `<span data-toggle="tooltip" 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>`;
                            break;
                    }

                    return acciones;
                }
            }
        ];


        let columnDefs = [
            {orderable: false, width: '5%', targets: 0, className: "text-center"},
            {orderable: false, width: '5%', targets: 1},
            {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: '10%', targets: 5, className: "text-center"},
            {orderable: false, width: '8%', targets: 6, className: "text-center"},
            {orderable: false, width: '8%', targets: 7, className: "text-center"},
            {orderable: false, width: '8%', targets: 8, className: "text-center"},
            {orderable: false, width: '8%', targets: 9, className: "text-center"},
            {orderable: false, width: '8%', targets: 10, className: "text-center"},
            {orderable: false, width: '8%', targets: 11, className: "text-center"},
            {orderable: false, width: '8%', targets: 12, className: "text-center"}
        ];

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



        makeDatatable(
                {
                    data: response.data.data,
                    columns: columns,
                    columnDefs: columnDefs,
                    wrapsNameDatatable: wrapsNameDatatable,
                    classNameForDatatable: classNameForDatatable,
                    footer: footer
                }
        ).then((datatable) => {

            $(datatable).on("click", ".registrar", function () {
                let data = $(datatable).DataTable().row($(this).parents("tr")).data();
                console.log(data);

                axios.get("modals/policias/controlAsistencia/registrarAsistencia.jspf").then((response) => {
                    debugger
                    swal({
                        title: '<strong>Registrar Asistencia</strong>',
                        html: response.data,
                        showCloseButton: true,
                        showCancelButton: true,
                        focusConfirm: false,
                        confirmButtonText: '<i class="fa fa-thumbs-up"></i> Great!',
                        confirmButtonAriaLabel: 'Thumbs up, great!',
                        cancelButtonText: 'Cancelar',
                        cancelButtonAriaLabel: 'Thumbs down',
                        width: '30%',
                        onOpen: () => {
//                            $("#spanNombres").html(data.policia_nombres);
//                            $("#spanSede").html(data.sede_descripcion);
//                            $("#spanHorario").html(`${data.tiporol_descripcion} ${data.frecuencia_descripcion}`);
//                            $("#spanRangoFechas").html(`${data.fecha_inicio} - ${data.fecha_fin}`);
//                            let htmlList = ``;
//                            data.detalles_rol.forEach(x => htmlList += `<li class="list-group-item" id="${x.id}">${x.fecha_entrada}</li>`);
//                            $("#listaDias").html(htmlList);
                        }
                    });
                });

            });

        });
    });
}

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);
        $('.select-search').select2();
    });
}

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 listarEstadoAsistencia() {
    axios.get(URI_ESTADO_ASISTENCIA).then((response) => {
        let estados = response.data;
        let html = "";
        estados.forEach(e => html += `<option value="${e.codigo}">${e.nombre}</option>`);
        $("#cboEstadoAsistencia").html(html);
        $("#cboEstadoAsistencia").selectpicker('refresh');
        $('.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"
        });
    });
}



function buscar() {
    let criterio = $("#cboCriterio").val();
    let busqueda = $("#busqueda");
    let fechaInicio = $("#dpFechaInicio").val();
    let fechaFin = $("#dpFechaFin").val();
    let estadoAsistencia = $("#cboEstados");

    $("#tblAsistenciaPolicias").DataTable().destroy();
    $("#tblAsistenciaPolicias").DataTable({
        iDisplayLength: 5,
        bStateSave: false,
        autoWidth: false,
        responsive: true,
        stateSave: true,
        columnDefs: [{
                orderable: false,
                width: '100px',
                targets: [8]
            }],
        dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
        "processing": true,
        "serverSide": false,
        "data": asistencias,
        "columns": [{"data": "fila"},
            {"data": "nombres"},
            {"data": "dni"},
            // {"data": "sede"},
            {"data": "area"},
            {"data": "cargo"},
            {
                "data": "fecha_asistencia",
                "className": 'text-center'
            },
            {
                "data": "hora_ingreso",
                "className": 'text-center'
            },
            {
                "data": "hora_salida",
                "className": 'text-center'
            },
            {
                "data": "observacion",
                "className": 'text-center',
                render: function (data) {
                    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>`;
                }
            }
        ],
        fnInitComplete: function (settings, data) {
            console.log(data);
        }
    });

}

function seleccionCriterio() {
    $("#cboCriterio").change(function () {
        let criterio = $(this).val();
        console.log(criterio);
        debugger;

        if (criterio === 'SEDE') {
            listarSedes();
            // debugger
        } else if (criterio == 'APELLIDOS') {
            let html = `<label id="lblCriterio">Apellidos</label>
      <input type="text" class="form-control" id="busqueda" maxlength="50">`;
            $('#divCriterio').html(html);
            $('#busqueda').validCampo('abcdefghijklmnopqrstuvwxyzñABCDEFGHIJKLMNOPQRSTUVWXYZÑ ');
        } else if (criterio == 'DNI') {
            let html = `<label id="lblCriterio">DNI</label>
    <div class="input-group" style="width:100%">
      <input type="text" class="form-control" id="busqueda" maxlength="8">
    </div>`;
            $('#divCriterio').html(html);
            $('#busqueda').validCampo('0123456789');
        } else {
            $('#divCriterio').html('');
        }


    });
}



function evtChange() {
    let criterio = $(this).val();
    console.log(criterio);
    if (criterio == 0) {
        let html = ``;
        $("#divFiltro").html(html);
    }
    if (criterio == 1 || criterio == 2) {
        let html =
                `<div class=''>
                        
                        <div class="form-group col-md-12">
                            <label style="font-size: small">Tipo de registro:</label>
                            <span class="text-danger"> (*)</span>
                            <select id="cboTipoRegistro" class="form-control">
                                        <option value="0">[SELECCIONE]</option>
                                        <option value="1">NO MARCÓ</option>
                                        <option value="2">HUELLA DESCONOCIDA</option>
                                        <option value="3">OTROS</option>
                            </select>
                        </div>
                        
                        <div class="form-group col-md-6">                                            
                           <label style="font-size: small">
                               Marcación: 
                           </label>
                           <span class="text-danger"> (*)</span>
                           <select id="cboTipoAsistencia" class="form-control">
                                        <option value="0">[SELECCIONE]</option>
                                        <option value="1">ENTRADA</option>
                                        <option value="2">SALIDA</option>
                            </select>                                            
                       </div>
                       <div class="form-group col-md-6">                                            
                           <label style="font-size: small">
                               Hora: 
                           </label>
                           <span class="text-danger"> (*)</span>
                           <input type="time" id="txtHora" name="txtHora" value="" class="form-control" placeholder="Ingrese la hora" style="text-transform:uppercase;">                                            
                       </div> 
                    </div>`;
        $("#divFiltro").html(html);
    } else if (criterio == 3 || criterio == 4) {
        let html =
                `<div class='col-md-12'>
                       <div class="form-group">                                            
                           <label style="font-size: small">
                               Observación: 
                           </label>
                           <span class="text-danger"> (*)</span>
                           <textarea type="text" id="txtObservacion" name="txtObservacion" value="" class="form-control" placeholder="Ingrese el motivo de la falta" rows="3" style="resize: none;"/>                                            
                       </div> 
                   </div>`;
        $("#divFiltro").html(html);
    }
}


function buscarAsistencias() {
    let policia_id = $("#cboPoliciasFiltro").val();
    let sede_id = $("#cboSedesFiltro").val();
    let params = cleanQueryParams({
        policia_id,
        sede_id
    });

    listarAsistencias({params});
}

$().ready(function () {
    listarEstadoAsistencia();
    listarPolicias("#cboPoliciasFiltro");
    listarSedes("#cboSedesFiltro");
    defaultConfigDataTable();
    $('.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');

    $("#cboTipoAsistencia").change(evtChange);


    defaultConfigDatePicker();

    seleccionCriterio();
    $("#btnVerTodos").click(listarAsistencias);
    $("#btnVerAsistencias").click(buscarAsistencias);
});


