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 = ``;
							initDatePickerMultiDate("#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 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>Registro de 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"
				});
				initDateRangePicker("#dpRangoFechas")
//                $("#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 initDatePickerMultiDate = (nodeIdentifier) => {
	$(nodeIdentifier).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);
});