function getColumns() {
	let columns = [
		{
			title: `N°`,
			data: `numero_orden`,
			className: 'text-center'
		},
		{
			title: `APELLIDOS Y NOMBRES`,
			data: null,
			className: `text-center`,
			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;
		let html = `<option value="">[SELECCIONE]</option>`;
		html += data.map(periodo => `<option value="${periodo.id}">${periodo.descripcion}</option>`);
		$(nodeIdentifier).html(html);
		$(nodeIdentifier).change((e) => {
			let id = $(e.currentTarget).val();
			console.log(id)
		});
	});
//	initSelect2(nodeIdentifier, "descripcion");
}

//const initSelect2 = (nodeIdentifier, title = "") => {
//	$(`${nodeIdentifier}`).select2({
//		containerCssClass: 'select-xs',
//		ajax: {
//			url: baseURLRest + URI_ADMINISTRATIVOS_PERIODO_CIERRE_ASISTENCIA,
//			dataType: `json`,
//			delay: 1000,
//			data: function (params) {
//				return {
//					q: params.term, // search term
//					page: params.page
//				};
//			},
//			processResults: function (data, params) {
//				// parse the results into the format expected by Select2
//				// since we are using custom formatting functions we do not need to
//				// alter the remote JSON data, except to indicate that infinite
//				// scrolling can be used
//				params.page = params.page || 1;
//
//				return {
//					results: data,
//					pagination: {
//						more: (params.page * 30) < data.length
//					}
//				};
//			},
//			cache: true
//		},
//		placeholder: `Buscar`,
//		allowClear: true,
//		escapeMarkup: function (markup) {
//			return markup;
//		}, // let our custom formatter work
//		minimumInputLength: 1,
//		templateResult: formatRepo,
//		templateSelection: formatRepoSelection
//	});
//
//	function formatRepo(repo) {
//		if (repo.loading) {
//			return repo.text;
//		}
//
//		var markup = `
//			<div class='select2-result-repository clearfix'>
//				<div class='select2-result-repository__title'>${repo[title]}</div>	
//			</div>`;
//
//		return markup;
//	}
//
//	function formatRepoSelection(repo) {
//		if (repo.id) {
//			return repo[title];
//		} else {
//			return repo.text;
//		}
//}
//}



const listarSedes = (selectorName) => {
	ajaxWebService.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);
		$(selectorName).select2();
	});
};

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 = () => {

}

$(document).ready(function () {
	initDatePicker("#dpFechaInicioFiltro", "#dpFechaFinFiltro");
	listarSedes("#cboSedesFiltro");
	listarPeriodosCierreAsistencia("#cboPeriodoCierreFiltro");
	$("#btnAplicarFiltro").click(aplicarFiltro);
	$("#btnMostrarTodo").click(listarDescuentoMensualAdministrativos);
});