function listarRolesPolicias(objParams = {}) {

    ajaxWebService.get(URI_ROL_POLICIA, objParams).then((response) => {
        debugger
        let columns = [
            {
                title: `N°`,
//                data: `numeroFila`
                data: `id`
            },
            {
                title: `APELLIDOS Y NOMBRES`,
                data: `policia_nombres`
            },
            {
                title: `SEDE`,
                data: `sede_descripcion`
            },
            {
                title: `FECHA INICIO`,
                data: `fecha_inicio`
            },
            {
                title: `FECHA FIN`,
                data: `fecha_fin`
            },
            {
                title: `TIPO`,
                data: `tiporol_descripcion`
            },
            {
                title: `FRECUENCIA`,
                data: `frecuencia_descripcion`
            },
            {
                title: `ESTADO`,
                data: `estado`,
                render: (data) => {
                    if (Object.is(data, 1)) {
                        return `<span class="label label-success">ACTIVO</span>`;
                    } else {
                        return `<span class="label label-danger">INACTIVO</span>`;
                    }
                }
            },
            {
                title: `ACCIONES`,
                data: `estado`,
                className: 'text-center',
                render: (data) => {
                    let editar = "";
                    let eliminar = "";
                    let acciones = "";
                    console.log(data);
                    if (data === 1) {
                        editar = `<span data-placement="left" title="Ver detalle" data-toggle="tooltip" style="cursor: pointer"> <i class='ver-detalle icon-calendar2 text-primary-700'></i>&nbsp;&nbsp; </span>`;
                        eliminar = `<span data-placement="left" title="Desactivar Rol" style="cursor: pointer"> <i class="eliminar fa  fa-power-off text-danger-700"></i>&nbsp;&nbsp; </span>`;
                    } else {
                        eliminar = `<span data-placement="left" title="Eliminar" style="cursor: pointer"> <i class="eliminar fa  fa-power-off text-success-700"></i>&nbsp;&nbsp; </span>`;
                    }

                    acciones = editar + eliminar;
                    return acciones;
                }
            }
        ];
        let columnDefs = [
            {orderable: false, width: '1%', targets: 0, className: "text-center"},
            {orderable: false, width: '8%', targets: 1},
            {orderable: false, width: '10%', 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"}
        ];
        let wrapsNameDatatable = `divRoles`;
        let classNameForDatatable = `display table table-bordered`;
        makeDatatable(wrapsNameDatatable,
                {
                    data: response.data,
                    columns,
                    columnDefs,
                },
                classNameForDatatable).then((nodes) => {
            nodes.container.off();
            nodes.container.on("click", ".ver-detalle", function () {
                let data = nodes.datatable.DataTable().row($(this).parents("tr")).data();
                console.log(data);
                ajaxModal.get("policias/mantenimientoRol/detalleRol.jspf").then((response) => {
                    debugger
                    swal({
                        title: '<strong>Detalle de rol</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 = ``;
                            initDateRangePicker("#dpDetalleRol");
                            let fechas = data.detalles_rol.map(dr => dr.fecha_entrada.split(" ")[0]);
                            $("#dpDetalleRol").datepicker("setDates", fechas);
//                            data.detalles_rol.forEach(x => htmlList += `<li class="list-group-item" id="${x.id}">${x.fecha_entrada}</li>`);
//                            $("#listaDias").html(htmlList);
                        }
                    });
                });
            });
            nodes.container.on("click", ".eliminar", function () {
                let data = nodes.datatable.DataTable().row($(this).parents("tr")).data();
                mostrarModalEliminacion(data);
            });
        });
    });
}


const mostrarModalEliminacion = (data) => {
    let {id, estado} = data;
    let titulo = "";
    let textoConfirmacion = ""
    let tituloOperacion = "";
    if (estado) {
        titulo = 'Está seguro de eliminar el rol?';
        textoConfirmacion = 'Sí, eliminar!';
        tituloOperacion = '¡Eliminado exitosamente!';
        estado = 0;
    } else {
        titulo = 'Está seguro de activar?';
        textoConfirmacion = 'Sí, activar!';
        tituloOperacion = '¡Activado exitosamente!';
        estado = 1;
    }



    swal({
        title: titulo,
        text: "",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: textoConfirmacion
    }).then((result) => {
        if (result.value) {
            ajaxWebService.patch(`${URI_ROL_POLICIA}/${id}`, {estado}).then((response) => {
                if (response.status) {
                    swal({
                        type: 'success',
                        title: tituloOperacion,
                        showConfirmButton: false,
                        timer: 1500
                    });
                    listarRolesPolicias();
                }
            });
        }
    });
};
const listarTipoRoles = () => {
    ajaxWebService.get(URI_TIPOROL_POLICIA).then((response) => {
        let tipoRoles = response.data;
        let html = "<option>[SELECCIONE]</option>";
        tipoRoles.forEach(tp => html += `<option data-hora-entrada="${tp.hora_entrada}"  data-hora-salida="${tp.hora_salida}" value="${tp.codigo}">${tp.descripcion}</option>`);
        $("#cboTipoRol").html(html);
    });
}


function listarFrecuenciaRol() {
    ajaxWebService.get(URI_FRECUENCIA_ROL_POLICIA).then((result) => {
        let frecuenciasRol = result.data;
        let html = "<option>[SELECCIONE]</option>";
        frecuenciasRol.forEach(f => html += `<option value="${f.codigo}">${f.descripcion}</option>`);
        $("#cboFrecuenciaRol").html(html);
    });
}

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

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


function modificarServicio() {
//    debugger
    $("#detalle_rol").addClass("hidden");
    $("#editar_rol").removeClass("hidden");
    $("#modal-title").html('Cambiar servicio');
    $("#modal-header").removeClass('bg-primary');
    $("#modal-header").addClass('bg-jade');
    $("#botones-editar").removeClass('hidden');
    $("#btnCerrar").addClass("hidden");
    animar();
//    e.preventDefault();
}

function registrarRolPolicia() {
    let policia_nombres = $("#cboPolicias option:selected").text();
    let policia_id = $("#cboPolicias").val();
    let tiporol_id = $("#cboTipoRol").val();
    let tiporol_descripcion = $("#cboTipoRol option:selected").text();
    let rango_fechas = $("#dpRangoFechas").val();
    let split_fechas = rango_fechas.split("-").map(f => f.trim());
    let fecha_inicio = split_fechas[0];
    let fecha_fin = split_fechas[1];
    let frecuencia_id = $("#cboFrecuenciaRol").val();
    let frecuencia_descripcion = $("#cboFrecuenciaRol option:selected").text();
    let sede_id = $("#cboSedesModal").val();
    let sede_descripcion = $("#cboSedesModal option:selected").text();
    let estado = 1;
    let policia_dni = $("#cboPolicias option:selected").attr("documento_identidad");
    let hora_entrada = $("#cboTipoRol option:selected").data('hora-entrada');
    let hora_salida = $("#cboTipoRol option:selected").data('hora-salida');
    debugger
    let fechas = generarFechas(fecha_inicio, fecha_fin);
    let fechas_rol;

    switch (frecuencia_descripcion) {
        case "PAR":
            fechas_rol = fechas
                    .map(f => {
                        return {
                            number: f.split("/")[0],
                            fecha: f
                        }
                    })
                    .filter(f => f.number % 2 == 0)
                    .map(f => f.fecha);
            break;
        case "IMPAR":
            fechas_rol = fechas
                    .map(f => {
                        return {
                            number: f.split("/")[0],
                            fecha: f
                        }
                    })
                    .filter(f => f.number % 2 == 1)
                    .map(f => f.fecha);
            break;
        case "DIARIO":
            fechas_rol = fechas;
            break;
    }

    let detalles_rol = [];
    let numero = 1;
    fechas_rol
            .map((f) => {
                let obj = {
                    fecha_entrada: `${f} ${hora_entrada}`,
                    fecha_salida: `${f} ${hora_salida}`
                }

                return obj;
            })
            .forEach((f) => {
                debugger
                let detalle_rol = {
                    id: numero++,
                    fecha_entrada: f.fecha_entrada,
                    fecha_salida: f.fecha_salida,
                    estado: 1
                };
                detalles_rol.push(detalle_rol);
            });
    let params = {
        numeroFila: policia_id,
        policia_id,
        policia_dni,
        policia_nombres,
        sede_id,
        sede_descripcion,
        fecha_inicio,
        fecha_fin,
        tiporol_id,
        tiporol_descripcion,
        frecuencia_id,
        frecuencia_descripcion,
        detalles_rol,
        estado
    };
    ajaxWebService.post(URI_ROL_POLICIA, params)
            .then((response) => {
                debugger;
                if (response.status) {
                    swal({
                        type: 'success',
                        title: '¡Rol registrado exitosamente!',
                        showConfirmButton: false,
                        timer: 1500
                    })
                    listarRolesPolicias();
                    console.log(response.data);
                } else {

                }
            })
            .catch(error => {
                console.log(error);
            });
}



function cancelar() {
    $("#detalle_rol").removeClass("hidden");
    $("#editar_rol").addClass("hidden");
    $("#modal-title").html('Ver detalle rol');
    $("#modal-header").addClass('bg-primary');
    $("#modal-header").removeClass('bg-jade');
    $("#botones-editar").addClass('hidden');
    $("#btnCerrar").removeClass("hidden");
    animar();
}

function animar() {
    let animation = `fadeIn`;
    $("#modal_body_tombo2").addClass(`animated ${animation}`).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function () {
        $(this).removeClass(`animated ${animation}`);
    });
}


function guardarCambios() {
    cancelar();
    $("#servicio13").css("background-color", "lightpink");
}


function mostrarModalNuevoRol() {
    ajaxModal.get("policias/mantenimientoRol/crearRol.jspf").then((response) => {
        swal({
            title: '<strong>Nuevo Rol</strong>',
//            type: 'info',
            html: response.data,
            showCloseButton: true,
            showCancelButton: true,
            focusConfirm: false,
            confirmButtonText: '<i class="fa fa-thumbs-up"></i> Registrar rol',
            confirmButtonAriaLabel: 'Registrar rol',
            cancelButtonText: 'Cancelar',
            cancelButtonAriaLabel: 'Thumbs down',
            width: '30%',
            customClass: 'swal2-overflow',
            onOpen: () => {
                listarTipoRoles();
                listarFrecuenciaRol();
                listarSedes("#cboSedesModal");
                listarPolicias("#cboPolicias");
                $('.selectpicker').selectpicker({
                    style: 'btn-info',
                    size: 4
                });
                $('.select-search').select2();
                $(".btn.dropdown-toggle.bs-placeholder").removeClass("btn-info");
                $(".btn.dropdown-toggle.bs-placeholder").css({
                    border: "1px solid #ddd",
                    backgroundColor: "#fff"
                });
                $("#dpRangoFechas").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 + ')');
                });
//                $("#dpRangoFechas").datepicker('setDate', 'now');
                defaultConfigDatePicker();
            }
        }).then((result) => {
            if (result.value) {
                registrarRolPolicia();
            }
        });
    });
}


function buscarRoles() {
    let policia_id = $("#cboPoliciasFiltro").val();
    let sede_id = $("#cboSedesFiltro").val();
    let fecha_inicio = $("#dpFechaInicio").val();
    let fecha_fin = $("#dpFechaFin").val();
    let rangoFechas = generarFechas(fecha_inicio, fecha_fin);
    let params = cleanQueryParams({
        policia_id,
        sede_id,
        fecha_inicio: rangoFechas
    });
    console.log(params);
    listarRolesPolicias({params});
}

const initDateRangePicker = (dp) => {
    $(dp).datepicker({
        format: "dd/mm/yyyy",
        language: "es",
        multidate: true,
        multidateSeparator: ","
    });
}

$().ready(function () {
    $.fn.datepicker.noConflict = function () {
        $.fn.datepicker = old;
        return this;
    };
    initDatePicker("#dpFechaInicio", "#dpFechaFin");
    listarSedes("#cboSedesFiltro");
    listarPolicias("#cboPoliciasFiltro");
    $('#servicio13').click(modificarServicio);
    $("#btnCancelar").click(cancelar);
    $("#btnGuardarCambios").click(guardarCambios);
    $("#btnNuevoRol").click(mostrarModalNuevoRol);
    $("#btnAplicarFiltro").click(buscarRoles);
    $("#btnMostrarTodo").click(listarRolesPolicias);
});