function getColumns() {
	let columns = [
		{
			title: `N°`,
			data: `id`,
			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: "FECHA INICIO",
			data: "fecha_inicio",
			className: "text-center"
		},
		{
			title: `FECHA FIN`,
			data: `fecha_fin`,
			className: 'text-center'
		},
		{
			title: `CANT. DIAS`,
			data: `cantidad_dias`,
			className: 'text-center'
		},
		{
			title: `ESTADO`,
			data: `estado`,
			className: 'text-center',
			render: (data) => {
				let label = "";
				let text = "";

				switch (data) {
					case 1:
						label = "label label-success";
						text = "ACTIVO";
						break;
					case 0:
						label = "label label-warning";
						text = "INACTIVO";
						break;
				}

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


				if (data.estado === 1) {
					eliminar = `<span style="cursor: pointer"><i class="eliminar fa fa-power-off text-danger-700"></i>&nbsp;&nbsp;</span>`;
				} else {
					eliminar = `<span style="cursor: pointer"><i class="eliminar fa fa-power-off text-success-700"></i>&nbsp;&nbsp;</span>`;
				}

				verdetalle = `<span style="cursor: pointer"><i class="verdetalle icon-list text-primary-700"></i>&nbsp;&nbsp;</span>`;
//				editar = `<span style="cursor: pointer"><i class="editar icon-pencil text-slate-800"></i>&nbsp;&nbsp;</span>`;



				acciones = verdetalle + editar + eliminar;
				return acciones;
				return null;
			}
		},
	];

	return columns;
}


const listarPersonal = (selectorName) => {
	initSelect2(selectorName, baseURLRest + URI_TRABAJADORES, {title: "nombresapellidos", subtitle: "documentoidentidad"});
};
const inicializarInputsModalVerDetalle = (data) => {
	$("#spanNombres").text(`${data.trabajador_apellidos} ${data.trabajador_nombres}`);
	$("#spanPeriodoVacacional").text(`${data.fecha_inicio} - ${data.fecha_fin}`);
	$("#spanCantidadDias").text(`${data.cantidad_dias}`);

	let detalle_fechas = data.detalle_fechas;

	let html = "";
	detalle_fechas.forEach(df => {
		html += `<li>${df.fecha}</li>`
	});
	$("#ulFechas").html(html);
};


const mostrarModalVerDetalleVacaciones = (data) => {
	ajaxModal.get("administrativos/vacaciones/individual/verdetalle.jsp").then((response) => {
		swal({
			title: '<strong>Detalle de vacaciones</strong>',
			html: response.data,
			showCloseButton: true,
			showCancelButton: true,
			focusConfirm: false,
			confirmButtonText: '<i class="icon-checkmark2"></i> Editar tolerancia',
			confirmButtonAriaLabel: 'Editar tolerancia',
			cancelButtonText: '<i class="icon-cross3"></i>Cancelar',
			cancelButtonAriaLabel: 'Thumbs down',
			width: '30%',
			customClass: 'swal2-overflow',
			onOpen: () => {
				inicializarInputsModalVerDetalle(data);
			}
		});
	});
};


const mostrarModalEliminarVacaciones = (data) => {
	let {id, estado} = data;
	let titulo = "";
	let textoConfirmacion = ""
	let tituloOperacion = "";
	if (estado == 1) {
		titulo = 'Está seguro de eliminar?';
		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_ADMINISTRATIVOS_VACACIONES_INDIVIDUAL}/${id}`, {estado}).then((response) => {
				if (response.status) {
					swal({
						type: 'success',
						title: tituloOperacion,
						showConfirmButton: false,
						timer: 1500
					});
					listarVacacionesIndividuales();
				}
			});
		}
	});
};
function listarVacacionesIndividuales(objParams = {}){
	ajaxWebService.get(URI_ADMINISTRATIVOS_VACACIONES_INDIVIDUAL, 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();
					mostrarModalVerDetalleVacaciones(data);
				})
//				.on("click", ".editar", function () {
//					let data = nodes.datatable.DataTable().row($(this).parents("tr")).data();
//					mostrarModalEditarTolerancia(data);
//				})
				.on("click", ".eliminar", function () {
					let data = nodes.datatable.DataTable().row($(this).parents("tr")).data();
					mostrarModalEliminarVacaciones(data);
				});

		});
	});
}

const aplicarFiltro = () => {
};



const inicializarInputsModalRegistroVacaciones = () => {
	listarPersonal("#cboPersonal");
	initDatePicker("#dpFechaInicio", "#dpFechaFin");
};


const registrarVacaciones = () => {
	debugger
	let personal = $("#cboPersonal").select2('data')[0];
	let {id:trabajador_id, documentoidentidad:trabajador_dni, nombres:trabajador_nombres, apellidos:trabajador_apellidos} = personal;
	
	let fecha_inicio = $("#dpFechaInicio").val();
	let fecha_fin = $("#dpFechaFin").val();
	let observacion = $("#txtObservacion").val()
	let params = {
		trabajador_id,
		trabajador_dni,
		trabajador_nombres,
		trabajador_apellidos,
		fecha_inicio,
		fecha_fin,
		observacion,
		cantidad_dias: 0,
		detalle_fechas: [],
		estado: 1
	};

	ajaxWebService.post(URI_ADMINISTRATIVOS_VACACIONES_INDIVIDUAL, params)
		.then((response) => {
			debugger;
			if (response.status) {
				swal({
					type: 'success',
					title: '¡Vacaciones registradas!',
					showConfirmButton: false,
					timer: 1500
				})
				listarVacacionesIndividuales();
			} else {
				swal({
					type: 'success',
					title: '¡No ha sido posible registrar las vacaciones!',
					showConfirmButton: false,
					timer: 1500
				})
			}
		})
		.catch((error) => {
			console.log(error);
		});

};

const mostrarModalNuevo = () => {
	ajaxModal.get("administrativos/vacaciones/individual/registroVacaciones.jsp").then((response) => {
		swal({
			title: '<strong>Registro de vacaciones</strong>',
			html: response.data,
			showCloseButton: true,
			showCancelButton: true,
			focusConfirm: false,
			confirmButtonText: '<i class="icon-checkmark2"></i> Registrar vacaciones',
			confirmButtonAriaLabel: 'Registrar vacaciones',
			cancelButtonText: '<i class="icon-cross3"></i>Cancelar',
			cancelButtonAriaLabel: 'Thumbs down',
			width: '30%',
			customClass: 'swal2-overflow',
			onOpen: () => {
				inicializarInputsModalRegistroVacaciones();
			}
		}).then((result) => {
			if (result.value) {
				registrarVacaciones();
			}
		});
	});
};





$(() => {
	initDatePicker("#dpFechaInicioFiltro", "#dpFechaFinFiltro");
	listarPersonal("#cboPersonalFiltro");
	listarSedes("#cboSedesFiltro");
	$("#btnMostrarTodo").click(listarVacacionesIndividuales);
	$("#btnAplicarFiltro").click(aplicarFiltro);
	$("#btnNuevo").click(mostrarModalNuevo);
});