function getColumns() {
	let columns = [
		{
			title: `N°`,
			data: `numero_orden`,
			className: 'text-center'
		},
		{
			title: `APELLIDOS Y NOMBRES`,
			data: null,
			render: (data) => {
				let nombresCompletos;
				let nombres = data.trabajador_nombres;
				let apellidos = data.trabajador_apellidos;
				nombresCompletos = `${apellidos} ${nombres}`;

				return nombresCompletos;
			}
		},
		{
			title: "SEDE",
			data: "sede_nombre",
			className: "text-center"
		},
		{
			title: `CARGO`,
			data: `cargolaboral_nombre`,
			className: 'text-center'
		},
		{
			title: `DESCUENTO<br>(S/.)`,
			data: `descuento_total`,
			className: 'text-center',
			render: (data) => {
				return `<span class="text-danger">${data}.00</span>`;
			}
		},
		{
			title: `ACCIONES`,
			data: null,
			className: 'text-center',
			render: (data) => {
				let acciones = "";
				let registrar = "";
				let verdetalle = "";
				verdetalle = `<span data-toggle="tooltip" data-placement="left" title="Ver detalle" style="cursor: pointer"> <i class='verdetalle icon-list text-primary-700'></i>&nbsp;&nbsp; </span>`;
				acciones = verdetalle;
				return acciones;
			}
		}
	];

	return columns;
}
const listarPeriodosCierreAsistencia = (nodeIdentifier) => {
	ajaxWebService.get(URI_ADMINISTRATIVOS_PERIODO_CIERRE_ASISTENCIA).then((result) => {
		let data = result.data;
		data = _.filter(data, {tipopersonal_descripcion: "ADMINISTRATIVOS"})
		let html = `<option value="">[SELECCIONE]</option>`;
		html += data.map(periodo => `<option value="${periodo.id}">${periodo.mescierre_descripcion}</option>`);
		$(nodeIdentifier).html(html);
		$(nodeIdentifier).change((e) => {
			let id = $(e.currentTarget).val();
			console.log(id)
		});
	});
//	initSelect2(nodeIdentifier, "descripcion");
}
const mostrarModalVerDetalleDescuentoAsistencia = (data) => {
	let filtros = {
		fecha_inicio: $("#dpFechaInicioFiltro").val(),
		fecha_fin: $("#dpFechaFinFiltro").val(),
		sede_id: $("#cboSedesFiltro").val()
	}
	localStorage.setItem('data', JSON.stringify(data))
	localStorage.setItem('filtros', JSON.stringify(filtros))
	location.href = `${baseURLModals}administrativos/montosAdministrativos/detalleMontosAdministrativos.jsp`
}
const listarDescuentoMensualAdministrativos = (objParams = {}) => {
	ajaxWebService.get(URI_ADMINISTRATIVOS_DESCUENTO_MENSUAL, objParams).then((response) => {
		let columns = getColumns();

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

		makeDatatable(
			wrapsNameDatatable,
			{
				data: response.data,
				columns,
			},
			classNameForDatatable,
			).then((nodes) => {
			nodes.container
				.off()
				.on("click", ".verdetalle", function () {
					let data = nodes.datatable.DataTable().row($(this).parents("tr")).data();
					mostrarModalVerDetalleDescuentoAsistencia(data);
				})

		});
	});
};
const aplicarFiltro = () => {
	let periodocierre_id = $("#cboPeriodoCierreFiltro").val()
	let periodocierre_descripcion = $("#cboPeriodoCierreFiltro option:selected").text()
	let fecha_inicio = $("#dpFechaInicioFiltro").val()
	let fecha_fin = $("#dpFechaFinFiltro").val()
	let sede_id = $("#cboSedesFiltro").val()
	let sede_descripcion = $("#cboSedesFiltro option:selected").text()
	let params = cleanQueryParams({
		sede_id
	})
	listarDescuentoMensualAdministrativos({params})
}
$(document).ready(function () {
	initDatePicker("#dpFechaInicioFiltro", "#dpFechaFinFiltro");
	listarSedes("#cboSedesFiltro");
	listarPeriodosCierreAsistencia("#cboPeriodoCierreFiltro");
	$("#btnAplicarFiltro").click(aplicarFiltro);
	$("#btnMostrarTodo").click(listarDescuentoMensualAdministrativos);
});