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 = ""
				let verdetalle = ""

				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>`;
				verdetalle = `<span style="cursor: pointer"><i class="ver-detalle icon-list text-primary-800"></i>&nbsp;&nbsp;</span>`;

				acciones = verdetalle + 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, todos = 0) => {
	return ajaxWebService.get(URI_TIPOPERSONAL).then((response) => {
		if (response.status) {
			let data = response.data
			let html = `<option value="">${todos ? "[TODOS]" : "[SELECCIONE]"}</option>`
			html += data.map(tipoPersonal => `<option value="${tipoPersonal.id}">${tipoPersonal.descripcion}</option>`)
			$(nodeIdentifier).html(html)
		}
		return $(nodeIdentifier)
	})
}
const listarMesesCierre = (nodeIdentifier, todos = 0) => {
	return ajaxWebService.get(URI_MESESCIERRE).then((response) => {
		if (response.status) {
			let data = response.data
			let html = `<option value="">${todos ? "[TODOS]" : "[SELECCIONE]"}</option>`
			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", (e) => mostrarModalEditarPeriodoCierre(getDataRow(nodes.datatable, e)))
				.on("click", ".cierre-periodo", (e) => mostrarModalCierrePeriodo(getDataRow(nodes.datatable, e)))
				.on("click", ".ver-detalle", (e) => mostrarModalVerDetalle(getDataRow(nodes.datatable, e)))

		});
	});
}
const mostrarModalVerDetalle = (data) => {

	ajaxModal.get("periodoscierre/detalleperiodo.jspf").then((response) => {
		swalWithBootstrapButtons({
			title: '<strong>Detalle</strong>',
			html: response.data,
			showCloseButton: true,
			showConfirmButton: false,
			focusConfirm: false,
			confirmButtonText: '<i class="icon-checkmark2"></i> OK',
			width: '30%',
			customClass: 'swal2-overflow',
			onOpen: () => {

				let params = {
					periodocierreasistencia_id: data.id
				}

				ajaxWebService.get(URI_PERIODOCIERRE_SEDES, {params}).then((response2) => {
					let columns = [
						{
							title: 'N°',
							data: 'id',
							className: 'text-center'
						},
						{
							title: 'Sede',
							data: 'sede_descripcion'
						},
						{
							title: 'ESTADO',
							data: 'estado',
							className: 'text-center',
							render: (data) => {
								let label = "", contenido = ""

								if (data === 1) {
									label = "label label-success"
									contenido = "ABIERTO"
								} else if (data === 0) {
									label = "label label-danger"
									contenido = "CERRADO"
								}

								return `<span class="${label}">${contenido}</span>`
							}
						},
						{
							title: 'ACCIONES',
							data: null,
							className: 'text-center',
							render: (data) => {
								let abrirPeriodo = "", cerrarPeriodo = ""
								let acciones
								if (data.estado === 1) {
									cerrarPeriodo = `<span style="cursor: pointer"><i class="cierre-periodo-sede icon-lock2 text-danger-700"></i>&nbsp;&nbsp;</span>`;
								} else if (data.estado === 0) {
									abrirPeriodo = `<span style="cursor: pointer"><i class="cierre-periodo-sede icon-unlocked2 text-success-700"></i>&nbsp;&nbsp;</span>`;
								}

								acciones = abrirPeriodo + cerrarPeriodo
								return acciones
							}
						}
					]

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

					let dataOrdenada = _.orderBy(response2.data, s => s.sede_descripcion)

					makeDatatable(
						wrapsNameDatatable,
						{
							data: dataOrdenada,
							columns,
							pageLength: 10
						},
						classNameForDatatable,
						).then((nodes) => {
						nodes.container
							.off()
							.on("click", ".cierre-periodo-sede", (e) => mostrarModalCierrePeriodoSede(getDataRow(nodes.datatable, e), data))
					});
				})

			}
		}).then((result) => {
			if (result.value) {

			}
		});
	});
}
const mostrarModalCierrePeriodoSede = (data, jsonPrimerDatatable) => {

	let {id, estado} = data;
	let titulo = "";
	let textoConfirmacion = ""
	let tituloOperacion = "";


	if (estado) {
		titulo = `Cerrar el periodo «${data.mescierre_descripcion}» a la sede «${data.sede_descripcion}»?`;
		textoConfirmacion = 'Sí!';
		tituloOperacion = '¡Periodo cerrado exitosamente!';
		estado = 0;
	} else {
		titulo = `Abrir el periodo «${data.mescierre_descripcion}» a la sede «${data.sede_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_SEDES}/${id}`, {estado}).then((response) => {
				if (response.status) {
					swal({
						type: 'success',
						title: tituloOperacion,
						showConfirmButton: false,
						timer: 1500
					});
				}

				mostrarModalVerDetalle(jsonPrimerDatatable)
			});
		} else {
			mostrarModalVerDetalle(jsonPrimerDatatable)
		}
	});
}
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) {
			let promises_periodosedes
			let params = {periodocierreasistencia_id: id}
			ajaxWebService.get(`${URI_PERIODOCIERRE_SEDES}`, {params}).then((response2) => {
				let dataRequest = response2.data.map((d) => {
					return {
						id: d.id,
						estado
					}
				})
				promises_periodosedes = dataRequest.map((p) => ajaxWebService.patch(`${URI_PERIODOCIERRE_SEDES}/${p.id}`, p))
			})

			let promise_periodo = ajaxWebService.patch(`${URI_PERIODOCIERRE}/${id}`, {estado})

			Promise.all([promises_periodosedes, promise_periodo])
				.then(axios.spread(function (...responses) {
					swal({
						type: 'success',
						title: tituloOperacion,
						showConfirmButton: false,
						timer: 1500
					});
					listarPeriodosCierre()
				}))


		}
	});
}
const aplicarFiltro = () => {
	let tipopersonal_id = $("#cboTipoPersonalFiltro").val()
	let tipopersonal_descripcion = $("#cboTipoPersonalFiltro option:selected").text()
	let periodo_id = $("#cboPeriodoFiltro").val()
	let periodo_descripcion = $("#cboPeriodoFiltro option:selected").text() === "[TODOS]" ? "": $("#cboPeriodoFiltro option:selected").text()
	let fecha_inicio = $("#dpFechaInicioFiltro").val()
	let fecha_fin = $("#dpFechaFinFiltro").val()
	let rango_fechas = generarFechas(fecha_inicio, fecha_fin)
	let estado = $("#cboEstadoPeriodoCierreFiltro").val()
	
	debugger
	let params = cleanQueryParams({
		tipopersonal_id,
		mescierre_descripcion: periodo_descripcion,
		fecha_inicio: rango_fechas,
		estado
	})

	listarPeriodosCierre({params})

}
const formControls = {
	init() {

		this.initTipoCierres()
		this.initPeriodos()
		this.initEstados()
		this.initPickers()
	},
	initTipoCierres() {

		listarTipoPersonal("#cboTipoPersonalFiltro", 1)
	},
	initPeriodos() {
		listarMesesCierre("#cboPeriodoFiltro", 1)
	},
	initEstados() {

	},
	initPickers() {
		initDatePicker("#dpFechaInicioFiltro", "#dpFechaFinFiltro")
		$("#dpFechaInicioFiltro").val("")
		$("#dpFechaFinFiltro").val("")
	}
}
$(document).ready(function () {
	formControls.init()
	$("#btnNuevoPeriodo").click(mostrarModalNuevoPeriodo);
	$("#btnMostrarTodo").click(listarPeriodosCierre)
	$("#btnAplicarFiltro").click(aplicarFiltro)
})