let personal

function getColumns() {
	let columns = [
		{
			title: `N°`,
			data: `numero_orden`,
			className: 'text-center'
		},
		{
			title: "Fecha",
			data: "fecha",
			className: 'text-center'
		},
		{
			title: "HORA<br>ENTRADA",
			data: "hora_ingreso",
			className: 'text-center'
		},
		{
			title: `MARCACIÓN<br>ENTRADA`,
			data: `marcacion_entrada`,
			className: 'text-center'
		},
		{
			title: `MARCACIÓN<br>SALIDA`,
			data: `marcacion_salida`,
			className: 'text-center'
		},
		{
			title: "HORA<br>SALIDA",
			data: "hora_salida",
			className: "text-center"
		},
		{
			title: `CANTIDAD<br>MINUTOS`,
			data: `cantidad_minutos`,
			className: 'text-center'
		},
		{
			title: `COSTO`,
			data: `costo`,
			className: 'text-center'
		},
		{
			title: `MONTO`,
			data: `monto`,
			className: 'text-center',
			render: (data) => {
				let contenido = parseFloat(data).toFixed(2)
				return `<span class="text-primary">${contenido}</span>`
			}
		},
		{
			title: `DESCUENTO`,
			data: `descuento`,
			className: 'text-center',
			render: (data) => {
				let contenido = parseFloat(data).toFixed(2)
				let label = ""
				
				if(data>0){
					label = "text-danger"
				}else{
					label = "text-default"
				}
				
				return `<span class="${label}">${contenido}</span>`
			}
		},
		{
			title: `TOTAL`,
			data: `total`,
			className: 'text-center',
			render: (data) => {
				let contenido = parseFloat(data).toFixed(2)
				return `<span class="text-success">${contenido}</span>`
			}
		},
		{
			title: `TIPO<br>ASISTENCIA`,
			data: `tipo_asistencia`,
			className: 'text-center'
		},
		{
			title: `SEDE`,
			data: `sede_descripcion`,
			className: 'text-center',
			render: (data) => {
				return `<span class="label bg-teal">${data}</span>`
			}
		},
		{
			title: `AULAS`,
			data: `aulas`,
			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 null
//			}
//		}
	];

	return columns;
}

const recibirData = () => {
	let data = localStorage.getItem('data')
	let filter = localStorage.getItem('filtros')
	personal = data ? JSON.parse(data) : null;
	filtros = filter ? JSON.parse(filter) : null;
	let html = ""
	let tipoPago = ["A", "B", "C", "D", "E", "F", "G", "H"]
	debugger
	html += tipoPago
		.map(tp => `<li class="list-group-item col-md-6">${tp}=${personal["pago" + tp]}</li>`)
		.reduce((prev, curr) => prev.concat(curr))

	$("#ulCostos").html(html)
//	localStorage.removeItem('data')
//	localStorage.removeItem('filtros')
}

const mostrarDatosTrabajador = () => {
	let id = personal.trabajador_id

	ajaxWebService.get(`${URI_TRABAJADORES}/${id}`)
		.then((response) => {
			if (response.status) {
				let trabajador = response.data;

				$("#spanNombres").text(`${trabajador.apellidos} ${trabajador.nombres}`)

			}
		})
}

function listarDetalleMontosDocentes(objParams = {}){
	ajaxWebService.get(URI_DOCENTES_DETALLEMONTOS, 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)))

		});
	});
}

$(document).ready(function () {
	recibirData();
	mostrarDatosTrabajador()
	listarDetalleMontosDocentes()
})