function getColumns() {
	let columns = [
		{
			title: `N°`,
			data: `id`,
			className: 'text-center'
		},
		{
			title: "TIPO DE CIERRE",
			data: "tipopersonal_descripcion"
		},
		{
			title: "PERIODO",
			data: "mescierre_descripcion"
		},
		{
			title: "FECHA INICIO",
			data: "fecha_inicio",
			className: "text-center"
		},
		{
			title: `FECHA FIN`,
			data: `fecha_fin`,
			className: 'text-center'
		},
		{
			title: `ESTADO`,
			data: `estado`,
			className: 'text-center',
			render: (data) => {
				let label = "";
				let text = "";

				switch (data) {
					case 0:
						label = "label label-danger";
						text = "CERRADO";
						break;
					case 1:
						label = "label label-success";
						text = "ABIERTO";
						break;
				}

				return `<span class="${label}">${text}</span>`;
			}
		},
		{
			title: `ACCIONES`,
			data: null,
			className: 'text-center',
			render: (data) => {
				let acciones = "";
				let editar = "";
				let abrirPeriodo = ""
				let cerrarPeriodo = ""

				if (data.estado === 1) {
					cerrarPeriodo = `<span style="cursor: pointer"><i class="cierre-periodo icon-lock2 text-danger-700"></i>&nbsp;&nbsp;</span>`;
				} else if (data.estado === 0) {
					abrirPeriodo = `<span style="cursor: pointer"><i class="cierre-periodo icon-unlocked2 text-success-700"></i>&nbsp;&nbsp;</span>`;
				}
				editar = `<span style="cursor: pointer"><i class="editar icon-pencil text-slate-800"></i>&nbsp;&nbsp;</span>`;

				acciones = editar + abrirPeriodo + cerrarPeriodo;
				return acciones;
			}
		},
	];

	return columns;
}
const mostrarModalNuevoPeriodo = () => {
	ajaxModal.get("cierreasistenciamensual/mantenimientoPeriodoCierre/registroperiodocierre.jspf").then((response) => {
		swalWithBootstrapButtons({
			title: '<strong>Registrar Periodo</strong>',
			html: response.data,
			showCancelButton: true,
			showCloseButton: true,
			focusConfirm: false,
			confirmButtonText: '<i class="icon-checkmark2"></i> Registrar',
			cancelButtonText: '<i class="icon-cross3"></i>Cancelar',
			width: '30%',
			customClass: 'swal2-overflow',
			onOpen: () => {
				inicializarInputsModalNuevoPeriodo();
			}
		}).then((result) => {
			if (result.value) {
				registrarNuevoPeriodo();
			}
		})

	})
}

const inicializarInputsModalNuevoPeriodo = () => {
	listarTipoPersonal("#cboTipoPersonal")
	listarMesesCierre("#cboMesesCierre")
	initDatePicker("#dpFechaInicio", "#dpFechaFin")
	$("#dpFechaInicio").val("")
	$("#dpFechaFin").val("")
}

const registrarNuevoPeriodo = () => {
	let tipopersonal_id = $("#cboTipoPersonal").val()
	let tipopersonal_descripcion = $("#cboTipoPersonal option:selected").text()
	let mescierre_id = $("#cboMesesCierre").val()
	let mescierre_descripcion = $("#cboMesesCierre option:selected").text()

	let fecha_inicio = $("#dpFechaInicio").val()
	let fecha_fin = $("#dpFechaFin").val()
	let estado = 1

	let params = {
		tipopersonal_id,
		tipopersonal_descripcion,
		mescierre_id,
		mescierre_descripcion,
		fecha_inicio,
		fecha_fin,
		estado
	}

	ajaxWebService.post(URI_PERIODOCIERRE, params).then((response) => {
		if (response.status) {
			swal({
				type: 'success',
				title: `¡Periodo de cierre «${mescierre_descripcion}» registrado!`,
				showConfirmButton: false,
				timer: 1500
			})
		}
	})


}


const listarTipoPersonal = (nodeIdentifier) => {
	return ajaxWebService.get(URI_TIPOPERSONAL).then((response) => {
		if (response.status) {
			let data = response.data
			let html = ""
			html += data.map(tipoPersonal => `<option value="${tipoPersonal.id}">${tipoPersonal.descripcion}</option>`)
			$(nodeIdentifier).html(html)
		}
		return $(nodeIdentifier)
	})
}

const listarMesesCierre = (nodeIdentifier) => {
	return ajaxWebService.get(URI_MESESCIERRE).then((response) => {
		if (response.status) {
			let data = response.data
			let html = ""
			html += data.map(mesCierre => `<option value="${mesCierre.id}">${mesCierre.descripcion}</option>`)
			$(nodeIdentifier).html(html)
		}
		return $(nodeIdentifier)
	})
}


function listarPeriodosCierre(objParams = {}){
	ajaxWebService.get(URI_PERIODOCIERRE, 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", ".editar", function () {
					let data = nodes.datatable.DataTable().row($(this).parents("tr")).data();
					mostrarModalEditarPeriodoCierre(data);
				})
				.on("click", ".cierre-periodo", function () {
					let data = nodes.datatable.DataTable().row($(this).parents("tr")).data();
					mostrarModalCierrePeriodo(data);
				});

		});
	});
}

const mostrarModalEditarPeriodoCierre = (data) => {
	ajaxModal.get("cierreasistenciamensual/mantenimientoPeriodoCierre/registroperiodocierre.jspf").then((response) => {
		swalWithBootstrapButtons({
			title: '<strong>Editar Periodo de cierre</strong>',
			html: response.data,
			showCancelButton: true,
			showCloseButton: true,
			focusConfirm: false,
			confirmButtonText: '<i class="icon-checkmark2"></i> Guardar cambios',
			cancelButtonText: '<i class="icon-cross3"></i>Cancelar',
			width: '30%',
			customClass: 'swal2-overflow',
			onOpen: () => {
				inicializarInputsModalEditarPeriodoCierre(data);
			}
		}).then((result) => {
			if (result.value) {
				editarPeriodoCierre(data);
			}
		});
	});
}

const inicializarInputsModalEditarPeriodoCierre = (data) => {
	console.log(data)
	listarTipoPersonal("#cboTipoPersonal").then((node) => node.val(data.tipopersonal_id))
	listarMesesCierre("#cboMesesCierre").then((node) => node.val(data.mescierre_id))
	initDatePicker("#dpFechaInicio", "#dpFechaFin")
	$("#dpFechaInicio").val(data.fecha_inicio)
	$("#dpFechaFin").val(data.fecha_fin)
}

const editarPeriodoCierre = (data) => {
	let {id} = data
	let tipopersonal_id = $("#cboTipoPersonal").val()
	let tipopersonal_descripcion = $("#cboTipoPersonal option:selected").text()
	let mescierre_id = $("#cboMesesCierre").val()
	let mescierre_descripcion = $("#cboMesesCierre option:selected").text()
	let fecha_inicio = $("#dpFechaInicio").val()
	let fecha_fin = $("#dpFechaFin").val()
	let params = {
		tipopersonal_id,
		tipopersonal_descripcion,
		mescierre_id,
		mescierre_descripcion,
		fecha_inicio,
		fecha_fin
	}

	ajaxWebService.patch(`${URI_PERIODOCIERRE}/${id}`, params).then((response) => {
		if (response.status) {
			swal({
				type: 'success',
				title: `¡Periodo de cierre modificado exitosamente!`,
				showConfirmButton: false,
				timer: 1500
			})
			listarPeriodosCierre()
		}
	})

}

const mostrarModalCierrePeriodo = (data) => {
	let {id, estado} = data;
	let titulo = "";
	let textoConfirmacion = ""
	let tituloOperacion = "";


	if (estado) {
		titulo = `Cerrar el periodo «${data.mescierre_descripcion}»?`;
		textoConfirmacion = 'Sí!';
		tituloOperacion = '¡Periodo cerrado exitosamente!';
		estado = 0;
	} else {
		titulo = `Abrir el periodo «${data.mescierre_descripcion}»?`;
		textoConfirmacion = 'Sí!';
		tituloOperacion = '¡Periodo abierto exitosamente!';
		estado = 1;
	}

	swal({
		title: titulo,
		text: "",
		type: 'question',
		showCancelButton: true,
		confirmButtonColor: '#3085d6',
		cancelButtonColor: '#d33',
		confirmButtonText: textoConfirmacion
	}).then((result) => {
		if (result.value) {
			ajaxWebService.patch(`${URI_PERIODOCIERRE}/${id}`, {estado}).then((response) => {
				if (response.status) {
					swal({
						type: 'success',
						title: tituloOperacion,
						showConfirmButton: false,
						timer: 1500
					});
					listarPeriodosCierre()
				}
			});
		}
	});
}

const aplicarFiltro = () => {

}

$(document).ready(function () {
	$("#btnNuevoPeriodo").click(mostrarModalNuevoPeriodo);
	$("#btnMostrarTodo").click(listarPeriodosCierre)
	$("#btnAplicarFiltro").click(aplicarFiltro)
})