function initDatePicker(selectorName) {
    $(selectorName).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();
        }
    });
    $(selectorName).datepicker('setDate', 'now');
}

function listarRolesPolicias(objParams = {}) {
    debugger
    axios.get(URI_ROL_POLICIA, objParams).then((result) => {
        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) => {
                    console.log(data);
                    if (Object.is(data, 1)) {
                        return `   <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>
                                    <span data-toggle="tooltip" data-placement="left" title="Desactivar Rol" style="cursor: pointer"> <i class='anular icon-cancel-circle2 text-danger-700'></i>&nbsp;&nbsp; </span>
                                `;
                    } else {
                        return null;
                    }

                }
            }
        ];

        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"}
        ];

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

        makeDatatable({
            data: result.data,
            columns: columns,
            columnDefs: columnDefs,
            wrapsNameDatatable: wrapsNameDatatable,
            classNameForDatatable: classNameForDatatable,
            footer: footer
        }).then((datatable) => {
            $(datatable).on("click", ".ver-detalle", function () {
                let data = $(datatable).DataTable().row($(this).parents("tr")).data();


                axios.get("modals/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}`);
                        }
                    });

                });
            });
        });

    });
}

function listarTipoRoles() {
    axios.get(URI_TIPOROL_POLICIA).then((result) => {
        let roles = result.data;
        let html = "<option>[SELECCIONE]</option>";
        roles.forEach(rol => html += `<option value="${rol.codigo}">${rol.descripcion}</option>`);
        $("#cboTipoRol").html(html);
    });
}


function listarFrecuenciaRol() {
    axios.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) {
    axios.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) {
    axios.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");

    debugger
    let fechas = generarFechas(fecha_inicio, fecha_fin);
    let detalles_rol = [];
    let numero = 1;
    fechas.forEach((f) => {
        let detalle_rol = {
            id: numero++,
            fecha_entrada: f,
            fecha_salida: f,
            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
    };

    axios.post(URI_ROL_POLICIA, params)
            .then((result) => {
                result.data = formatResponse(result);
                debugger;
                if (result.data.status) {
                    listarRolesPolicias();
                    console.log(result.data);
                } else {

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

function generarFechas(desde, hasta) {
    let reverseDesde = desde.split("/").reverse().join("/");
    let reverseHasta = hasta.split("/").reverse().join("/");
    desde = moment(reverseDesde);
    hasta = moment(reverseHasta);
    let diaActual = desde;

    let fechas = [];
    while (diaActual.isSameOrBefore(hasta)) {
        fechas.push(diaActual.format('DD/MM/YYYY'));
        diaActual.add(1, 'days');
    }
    return fechas;
}

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() {
    axios.get("modals/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();


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

                $("#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 () {
                    }
                });
                $("#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 () {
                    }
                });
                $("#dpFechaFin").datepicker('setDate', 'now');

                defaultConfigDatePicker();
                defaultConfigDateRangePicker();
            }
        }).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 params = cleanQueryParams({
        policia_id,
        sede_id
    });

    console.log(params);

    listarRolesPolicias({params});
}

$().ready(function () {
    defaultConfigDataTable();
    initDatePicker("#dpFechaInicio");
    initDatePicker("#dpFechaFin");
    listarSedes("#cboSedesFiltro");
    listarPolicias("#cboPoliciasFiltro");
    $('#servicio13').click(modificarServicio);
    $("#btnCancelar").click(cancelar);
    $("#btnGuardarCambios").click(guardarCambios);
    $("#btnNuevoRol").click(mostrarModalNuevoRol);
    $("#btnVerRoles").click(buscarRoles);
    $("#btnVerTodos").click(listarRolesPolicias);
});