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: "SEDE",
			data: "sede_descripcion",
			className: "text-center"
		},
		{
			title: `FECHA`,
			data: `fecha_asistencia`,
			className: 'text-center'
		},
		{
			title: `HORARIO`,
			data: `horario`,
			className: 'text-center'
		},
		{
			title: `MARC. ENTRADA`,
			data: null,
			className: 'text-center',
			render: (data) => {
				let label = "";

				if (data.estadoasistencia_codigo == 3 || data.estadoasistencia_codigo == 4 || data.estadoasistencia_codigo == 6 || data.estadoasistencia_codigo == 7 || data.estadoasistencia_codigo == 8 || data.estadoasistencia_codigo == 9) {
					return `-`;
				}

				if (data.huella_entrada === 1) {
					label = "text-migration font-weight-bold";
				} else if (data.huella_entrada === 0) {
					label = "text-default";
				}

				if (!data.marcacion_entrada) {
					return null;
				}

				return `<span class="${label}">${data.marcacion_entrada}</span>`;
			}
		},
		{
			title: `AULAS`,
			data: `aulas`,
			className: 'text-center'
		},
		{
			title: `FIRMÓ SALIDA <input type="checkbox" id="chkFirmaTodo">`,
			data: `firmo_salida`,
			className: 'text-center',
			render: (data) => {
				let label = "";
				let contenido = "";

				switch (data) {
					case 0:
						label = "label label-danger";
						contenido = "NO";
						break;

					case 1:
						label = "label label-success";
						contenido = "SI";
						break;

					case "":
						label = "label bg-purple";
//						contenido = "PENDIENTE";
						return `<input type="checkbox" class="chkFirma">`;
						break;

				}

				return `<span class="${label}">${contenido}</span>`;
			}
		},
		{
			title: 'ESTADO ASISTENCIA'.split(' ').join('<br>'),
			data: null,
			className: "text-center",
			render: (data) => {
				let label = "";
				let estado = "";

				switch (data.estadoasistencia_codigo) {
					case 1:
						label = "label label-success";
						estado = "TEMPRANO";
						break;
					case 2:
						label = "label label-warning";
						estado = "TARDANZA";
						break;
					case 3:
						label = "label label-danger";
						estado = "FCA";
						break;
					case 4:
						label = "label label-danger";
						estado = "FSA";
						break;
					case 5:
						label = "label label-default";
						estado = "NO MARCÓ";
						break;
					case 6:
						label = "label label-info";
						estado = "VACACIONES";
						break;
					case 7:
						label = "label label-info";
						estado = "FERIADO";
						break;
					case 8:
						label = "label label-info";
						estado = "LCGH";
						break;
					case 9:
						label = "label label-info";
						estado = "LSGH";
						break;
					case 10:
						label = "label bg-purple";
						estado = "ENTRADA PENDIENTE";
						break;
					case 11:
						label = "label bg-purple";
						estado = "SALIDA PENDIENTE";
						break;
					case null:
					case "":
						label = "label bg-purple";
						estado = "PENDIENTE";
						break;
				}

				return `<span class="${label}">${estado}</span>`;
			}
		},
		{
			title: `ACCIONES`,
			data: null,
			className: 'text-center',
			render: (data) => {
				let acciones = "";
				let registrar = "";
				let editar = "";
				let aprobar = "";
				let anular = "";
				let reemplazar = "";
				switch (data.estadoasistencia_codigo) {
					case 3:
					case 4:
						reemplazar = `<span style="cursor:pointer;"><i class="reemplazar icon-reemplazo"></i></span>`;
						break;
					case 10:
					case 11:
					case null:
					case "":
						registrar = `<span data-toggle="tooltip" data-placement="left" title="Editar" style="cursor: pointer"> <i class='registrar icon-plus-circle2 text-success-700'></i>&nbsp;&nbsp; </span>`;
						editar = `<span data-toggle="tooltip" data-placement="left" title="Editar" style="cursor: pointer"> <i class='editar icon-pencil text-slate-800'></i>&nbsp;&nbsp; </span>`;
						aprobar = `<span data-toggle="tooltip" data-placement="left" title="Aprobar" style="cursor: pointer"> <i class='aprobar icon-checkmark-circle text-success-700'></i>&nbsp;&nbsp; </span>`;
						anular = `<span data-toggle="tooltip" data-placement="left" title="Anular" style="cursor: pointer"> <i class='anular icon-cancel-circle2 text-danger-700'></i>&nbsp;&nbsp; </span>`;


						break;
				}
				acciones = registrar + reemplazar;
				return acciones;
			}
		}
	];

	return columns;
}


const listarPersonal = (selectorName) => {
	initSelect2(selectorName, baseURLRest + URI_TRABAJADORES, {title: "nombresapellidos", subtitle: "documentoidentidad"});
};

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 listarEstadoAsistencia = (nodeIdentifier) => {
	ajaxWebService.get(URI_ESTADO_ASISTENCIA).then((response) => {
		let estados = response.data;
		let html = "";
		estados
			.filter(e => e.codigo != 10 && e.codigo != 11)
			.forEach(e => html += `<option value="${e.codigo}">${e.descripcion}</option>`);
		$(nodeIdentifier).html(html);
		$(nodeIdentifier).selectpicker('refresh');
		$('.selectpicker').selectpicker({
			style: 'btn-info',
			size: 4
		});
		$(".btn.dropdown-toggle.bs-placeholder").removeClass("btn-info");
		$(".btn.dropdown-toggle.bs-placeholder").css({
			border: "1px solid #ddd",
			backgroundColor: "#fff"
		});
	});
}


const inicializarInputsModalRegistroAsistencia = (data) => {
	initDatePicker("#dpFechaAsistencia");
	$("#spanNombres").text(`${data.trabajador_apellidos} ${data.trabajador_nombres}`);
	$("#cboTipoRegistro").change(cambioTipoRegistro);
	$("#")
}

function cambioTipoRegistro() {

	let criterio = $(this).val();
	console.log(criterio);
	if (criterio == 0) {
		let html = ``;
		$("#divFiltroModal").html(html);
	}
	if (criterio == 1 || criterio == 2) {
		let html =
			`<div class=''>                        
                        <div class="form-group col-md-12">                                            
                           <label style="font-size: small">
                               Hora Entrada: 
                           </label>
                           <span class="text-danger"> (*)</span>
													 <input type="time" id="txtHora" name="txtHora" value="" class="form-control" placeholder="Ingrese la hora" style="text-transform:uppercase;">
                       </div>
                    </div>`;
		$("#divFiltroModal").html(html);
	} else if (criterio == 3 || criterio == 4) {
		let html =
			`<div class='col-md-12'>
                       <div class="form-group">                                            
                           <label style="font-size: small">
                               Observación: 
                           </label>
                           <span class="text-danger"> (*)</span>
                           <textarea type="text" id="txtObservacion" name="txtObservacion" value="" class="form-control" placeholder="Ingrese el motivo de la falta" rows="3" style="resize: none;"/>                                            
                       </div> 
                   </div>`;
		$("#divFiltroModal").html(html);
	}
}

const mostrarMensajeResultadoModal = (result, data) => {

	if (result.value) {
		let criterio = $("#cboTipoRegistro").val();
		let hora_entrada, id, params;
		switch (criterio) {
			case "1":
				debugger
				hora_entrada = $("#txtHora").val();
				id = data.id;
				params = {
					marcacion_entrada: hora_entrada,
					marco_entrada: 0,
					estadoasistencia_codigo: 5,
					estadoasistencia_nombre: "NO MARCÓ",
					estadoasistencia_descripcion: "NO MARCÓ"
				};

				ajaxWebService.patch(`${URI_DOCENTES_ASISTENCIAS}/${id}`, params)
					.then((response) => {
						if (response.status) {
							swal({
								type: 'success',
								title: `¡Asistencia registrada!`,
								showConfirmButton: false,
								timer: 1500
							})
//							let params = cleanQueryParams({id});
//							listarAsistenciaDocentes({params})
						}
					});
				break;
			case "2":
				hora_entrada = $("#txtHora").val();
				id = data.id;
				params = {
					marcacion_entrada: hora_entrada,
					marco_entrada: 1
				};

				ajaxWebService.patch(`${URI_DOCENTES_ASISTENCIAS}/${id}`, params)
					.then((response) => {
						if (response.status) {
							swal({
								type: 'success',
								title: `¡Asistencia registrada!`,
								showConfirmButton: false,
								timer: 1500
							})
						}
					});
				break;
			case "3":
			case "4":

				break;
		}
	}
}

const mostrarModalRegistroAsistencia = (data) => {
	ajaxModal.get("docentesporhoras/controlAsistencia/registroAsistencia.jspf").then((response) => {
		swal({
			title: '<strong>Registro de Asistencia</strong>',
			html: response.data,
			showCloseButton: true,
			showCancelButton: true,
			focusConfirm: false,
			confirmButtonText: '<i class="fa fa-thumbs-up"></i> Registrar asistencia',
			confirmButtonAriaLabel: 'Thumbs up, great!',
			cancelButtonText: 'Cancelar',
			cancelButtonAriaLabel: 'Thumbs down',
			width: '30%',
			onOpen: () => {
				inicializarInputsModalRegistroAsistencia(data);
			}
		})
			.then((result) => {

				mostrarMensajeResultadoModal(result, data);
			});
	});
}

function listarAsistenciaDocentes(objParams = {}){
	ajaxWebService.get(URI_DOCENTES_ASISTENCIAS, objParams).then((response) => {
		let columns = getColumns();

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

		makeDatatable(
			wrapsNameDatatable,
			{
				data: response.data,
				columns,
			},
			classNameForDatatable,
			).then((nodes) => {
			$(".chkFirma, #chkFirmaTodo").uniform();
			nodes.container
				.off()
				.on("click", ".registrar", function () {
					let data = nodes.datatable.DataTable().row($(this).parents("tr")).data();
					mostrarModalRegistroAsistencia(data);
				})
				.on("click", "#chkFirmaTodo", (e) => seleccionarCheckBoxTodo($(e.currentTarget)))
				.on("click", ".chkFirma", (e) => seleccionarCheckBox());

		});
	});
}

const seleccionarCheckBoxTodo = (tr) => {
	if (tr.prop('checked')) {
		$('.chkFirma').prop('checked', true).uniform()
	} else {
		$('.chkFirma').prop('checked', false).uniform()
	}
}

const seleccionarCheckBox = () => {

	if ($('.chkFirma:checked').length === $('.chkFirma').length) {
		$('#chkFirmaTodo').prop('checked', true).uniform()
	} else {
		$('#chkFirmaTodo').prop('checked', false).uniform()
	}
}


const aplicarFiltro = () => {
	debugger
	let personal = $("#cboPersonalFiltro").select2('data')[0];
	let trabajador_id = personal ? personal.id : "";
	let sede_id = $("#cboSedesFiltro").val();
	let fecha_inicio = $("#dpFechaInicioFiltro").val();
	let fecha_fin = $("#dpFechaFinFiltro").val();
	let estadoasistencia_codigo = $("#cboEstadoAsistenciaFiltro").val();
	let rango_fechas = generarFechas(fecha_inicio, fecha_fin);

	let params = cleanQueryParams({
		trabajador_id,
		fecha_asistencia: rango_fechas,
		sede_id,
		estadoasistencia_codigo
	});

	if (estadoasistencia_codigo == 12) {
		params.estadoasistencia_codigo = "";
	}

	listarAsistenciaDocentes({params});
}

const registrarNoFirmo = (e) => {
	e.preventDefault();
	let firmo_salida = 0;
	registrarFirma(e, firmo_salida)
};
const registrarFirmo = (e) => {
	e.preventDefault();
	let firmo_salida = 1;
	registrarFirma(e, firmo_salida)
};

const registrarFirma = (e, firmo_salida = 0) => {
	$(".chkFirma:checked").each((index, value) => {
		let data = $("#divDatatable-datatable").DataTable().row($(value).parents('tr')).data();
//		let {id, firmo_salida} = data;
//		firmo_salida = 1;
		let id = data.id;
		let params = {
			firmo_salida
		};
		let mensaje = firmo_salida == 1 ? "«FIRMÓ»" : "«NO FIRMÓ»";

		ajaxWebService.patch(`${URI_DOCENTES_ASISTENCIAS}/${id}`, params)
			.then((response) => {
				if (response.status) {
					swal({
						type: 'success',
						title: `¡Se registró ${mensaje}!`,
						showConfirmButton: false,
						timer: 1500
					}).then((result) => {
						listarAsistenciaDocentes();
					});
				}
			});

	})
}

$(document).ready(function () {
	initDatePicker("#dpFechaInicioFiltro", "#dpFechaFinFiltro");
	listarSedes("#cboSedesFiltro");
	listarPersonal("#cboPersonalFiltro");
	listarEstadoAsistencia("#cboEstadoAsistenciaFiltro");
	$("#btnAplicarFiltro").click(aplicarFiltro);
	$("#btnMostrarTodo").click(listarAsistenciaDocentes);
	$("#btnFirmo").click((e) => registrarFirmo(e));
	$("#btnNoFirmo").click((e) => registrarNoFirmo(e));
});