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.nombres;
				let apellidos = data.apellidos;
				nombresCompletos = `${apellidos} ${nombres}`;

				return nombresCompletos;
			}
		},
		{
			title: "SEDE",
			data: "sede_base_descripcion",
			className: "text-center"
		},
		{
			title: `CARGO`,
			data: `cargo`,
			className: 'text-center'
		},
		{
			title: `HORARIO`,
			data: `horario`,
			className: 'text-center'
		},
		{
			title: `FECHA`,
			data: `fecha_entrada`,
			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: 'ESTADO',
			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 = "";

				switch (data.estadoasistencia_codigo) {
					case 10:
					case 11:
					case null:
					case "":
						let 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>`;
						let 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>`;
						let 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>`;
						let 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>`;

						acciones = registrar;
						break;
				}

				return acciones;
			}
		}
	];

	return columns;
}

const mostrarModalRegistro = (data) => {
	ajaxModal.get("administrativos/controlAsistencia/registrarAsistencia.jsp").then((response) => {
		swal({
			title: '<strong>Registrar 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: () => {
				inicializarInputsModal(data);
			}
		})
//		  .then((result) => {
//			mostrarMensajeResultadoModal(result);
//		});
	});
}


const inicializarInputsModal = (data) => {
	let nombresCompletos = `${data.apellidos} ${data.nombres}`;
	$("#dpAsistencia").val(data.fecha_entrada);
	$("#spanNombres").text(nombresCompletos);
	$("#cboTipoRegistro").change(cambioTipoRegistro);
}


function cambioTipoRegistro() {
	debugger
	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-6">                                            
                           <label style="font-size: small">
                               Marcación: 
                           </label>
                           <span class="text-danger"> (*)</span>
                           <select id="cboTipoAsistencia" class="form-control">
                                        <option value="0">[SELECCIONE]</option>
                                        <option value="1">ENTRADA</option>
                                        <option value="2">SALIDA</option>
                            </select>                                            
                       </div>
                       <div class="form-group col-md-6">                                            
                           <label style="font-size: small">
                               Hora: 
                           </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);
	}
}

function listarAsistencia(objParams = {}) {

	ajaxWebService.get(URI_ADMINISTRATIVO_ASISTENCIA, 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();
			nodes.container.on("click", ".registrar", function () {
				let data = nodes.datatable.DataTable().row($(this).parents("tr")).data();
				mostrarModalRegistro(data);
			});

		});
	});
}

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 listarPersonal = (selectorName) => {
	initSelect2(selectorName, baseURLRest + URI_TRABAJADORES, {title: "nombresapellidos", subtitle: "documentoidentidad"});
};

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

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

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


const listarEstadoAsistencia = () => {
	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.nombre}</option>`);
		$("#cboEstadoAsistencia").html(html);
		$("#cboEstadoAsistencia").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"
		});
	});
}

$(() => {
	$("#btnMostrarTodo").click(listarAsistencia);
	$("#btnAplicarFiltro").click(aplicarFiltro);
	initDatePicker("#dpFechaInicio", "#dpFechaFin");
	listarSedes("#cboSedesFiltro");
	listarPersonal("#cboPersonalFiltro");
	listarEstadoAsistencia();
});
