let justificacion;

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

const seleccionarCheckBox = () => {

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

function getColumns() {
	let columns = [
		{
			title: `<input type="checkbox" id="chkTodo">`,
			data: null,
			className: 'text-center',
			render: (data) => {
				return `<input type="checkbox" class="chkAsistencia">`
			}
		},
		{
			title: `FECHA<br>ASISTENCIA`,
			data: "fecha_asistencia",
			className: `text-center`
		},
		{
			title: "HORA",
			data: "hora_asistencia",
			className: "text-center"
		},
		{
			title: `DESCUENTO`,
			data: `descuento`,
			className: 'text-center',
			render: (data) => {
				let texto = ""

				if (data.includes("min")) {
					texto = data
				} else {
					texto = `S/${parseFloat(data).toFixed(2)}`
				}

				return `<span class="text-danger">${texto}</span>`
			}
		},
		{
			title: `OBSERVACIÓN`,
			data: `observacion`,
			className: 'text-center'
		},
		{
			title: `SEDE<br>MARCACIÓN`,
			data: `sede_marcacion`,
			className: 'text-center'
		},
		{
			title: `TIPO<br>REGISTRO`,
			data: `huella`,
			className: 'text-center',
			render: (data) => {
				let label = "", contenido = ""

				if (data === 1) {
					label = "label label-success"
					contenido = "HUELLA"
				} else if (data === 0) {
					label = "label bg-teal"
					contenido = "MANUAL"
				}
				return `<span class="${label}">${contenido}</span>`
			}
		},
		{
			title: "TIPO TRABAJADOR",
			data: "tipo_trabajador",
			className: "text-center"
		}
	];

	return columns;
}

const listarAsistencias = (objParams = {}) => {
	ajaxWebService.get(URI_JUSTIFICACION_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) => {
			$("#chkTodo, .chkAsistencia").uniform()
			nodes.container
				.off()
				.on("click", ".verdetalle", function () {
//					let data = nodes.datatable.DataTable().row($(this).parents("tr")).data();
//					mostrarModalVerDetalleJustificacion(data);
				})
				.on("click", "#chkTodo", (e) => seleccionarCheckBoxTodo($(e.currentTarget)))
				.on("click", ".chkAsistencia", (e) => seleccionarCheckBox());

		});
	});
};


const cargarDatos = () => {
	justificacion = JSON.parse(localStorage.getItem('data'));

	$("#spanNombres").text(`${justificacion.trabajador_apellidos} ${justificacion.trabajador_nombres}`)
	initDateRangePicker("#dpRangoFechas")
	$("#dpRangoFechas").data('daterangepicker').setStartDate(justificacion.fecha_inicio)
	$("#dpRangoFechas").data('daterangepicker').setEndDate(justificacion.fecha_fin)
	$("#spanTipoJustificacion").text(`${justificacion.tipojustificacion_descripcion}`)
	if (justificacion.tipojustificacion_descripcion == "TARDANZA") {
		$("#spanHora").text(`${justificacion.hora_ingreso}`)
		$("#divHora").removeClass('hidden')
	}


	$("#spanMotivo").text(`${justificacion.motivo}`)
	$("#txtObservacion").text(`${justificacion.observacion}`)
	$("#spanNumeroDocumentosAdjuntos").text(`${justificacion.numero_documentos_adjuntos}`)
	let documentos = justificacion.documentos;

//	let urlDocumento = documentos[0].url
//	$("#imgDocumento").attr('height', '200px')
//	$("#imgDocumento").attr('width', '200px')
//	$("#imgDocumento").attr('src', urlDocumento)

//	documentos.forEach(documento => {
//	let html = `<div class="col-md-4">
//								<img src="${documento.url}">
//							</div>`
//
//		$("#divDocumentos").html(html)
//	})
	let html = ""
	html +=
		documentos.map(documento =>
			`<div class="col-md-3">
				<img src="${documento.url}">
			 </div>`
		)
		.join("")
	$("#divDocumentos").html(html)
}
const justificar = (estadoJustificacion = 1) => {

	let titulo = "";
	let textoConfirmacion = ""
	let tituloOperacion = "";
	if (estadoJustificacion == 1) {
		titulo = 'Está seguro de aceptar la justificación?';
		textoConfirmacion = 'Sí';
		tituloOperacion = '¡Justificación aceptada!!';
	} else if (estadoJustificacion == 2) {
		titulo = 'Está seguro de rechazar la justificación?';
		textoConfirmacion = 'Sí!';
		tituloOperacion = '¡Justificación rechazada!';
	}

	swal({
		title: titulo,
		text: "",
		type: 'warning',
		showCancelButton: true,
		confirmButtonColor: '#3085d6',
		cancelButtonColor: '#d33',
		confirmButtonText: textoConfirmacion
	}).then((result) => {


		if (result.value) {
			let {id} = justificacion
			let params = cleanQueryParams({
				estado: estadoJustificacion
			})

			ajaxWebService.patch(`${URI_JUSTIFICACION}/${id}`, params).then((response) => {
				if (response.status) {
					swal({
						type: 'success',
						title: tituloOperacion,
						showConfirmButton: false,
						timer: 1500
					}).then((result) => {
						window.location.href = `${contextPath}vistas/listadoJustificacion.jsp`
					});
				}
			})
		}
	});




}
const aceptarJustificacion = () => {
	justificar()
}
const rechazarJustificacion = () => {
	justificar(2)
}

$(document).ready(function () {
	cargarDatos()
	$("#btnAceptar").click(aceptarJustificacion)
	$("#btnRechazar").click(rechazarJustificacion)
	listarAsistencias()
})