Sindbad~EG File Manager

@extends('adminlte::page')

@section('title', $asignacion->evaluacion)

@section('content_header')
    <h1 style="color: #1177d1;">{{ $asignacion->evaluacion }}</h1>
    <p style="color: #6c757d;"><b>¡Hola!, tu calificación sincera contribuye a mejorar el desempeño de: </b>{{ $asignacion->evaluado }}</p><hr>
    <p><?= $asignacion->info ?></p>
@stop

@section('content')

	<style>
		fieldset {
		  border: 1px solid #1177d1;
		  border-radius: 10px;
		  padding: 10px;
		}
		legend {
		  padding: 10px;
		  width: 50%; 
		}
		/* Contenedor del switch */
		.toggle-container {
			background-color: #f8f9fa; /* Color claro de fondo */
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
			border: 1px solid #ddd; /* Borde suave */
		}

		/* Espaciado entre los radios */
		.form-check-inline {
			margin: 0 10px;
		}

		/* Personalización de los radios */
		.styled-radio {
			accent-color: #007bff; /* Cambia el color del radio seleccionado */
			transform: scale(1.2); /* Agranda los radios */
			margin-right: 5px; /* Espaciado entre radio y texto */
		}

		/* Etiquetas de los radios */
		.form-check-label {
			font-weight: bold;
			font-size: 1rem; /* Tamaño más legible */
			color: #333; /* Color del texto */
			cursor: pointer; /* Cambia el cursor al pasar sobre el texto */
		}

		/* Hover para mejorar la accesibilidad */
		.form-check-label:hover {
			color: #007bff; /* Color al pasar el cursor */
		}
	</style>
	
	{!! Form::open(array('url'=>'/admin/evaluar/formulario','method'=>'POST','autocomplete'=>'off')) !!}
		{{Form::token()}}
		@foreach($competencias as $com)
			<div class="card" id="{{ $com->id }}">
				<div class="card-body">
					<fieldset>
			    		<legend style="color: #1177d1;">{{ $com->com_nom }}</legend>
			    		@if ($asignacion->estado == 1)
			    			@livewire('cargarinterrogantes', ['competenciaid' => $com->id,'asignacionid' => $asignacion->id,"tipo" => "mostrar","evaluado"=>$asignacion->evaluado_id])
			    		@endif

			    		@livewire('cargaformulario', ['competenciaid' => $com->id,"evaluador_id" => $asignacion->evaluador_id])

			    	</fieldset><br>
			    </div>
			</div>
		@endforeach
		<input type="hidden" name="asignacion_id" value="{{ $asignacion->id }}">
		<!--<div class="card">
			<div class="card-body" align="center">
				<table class="table">
					<thead class="thead-dark">
						<tr>
							<th>CALIFICACIÓN</th>
							<th>ESCALA</th>
							<th>INTERPRETACIÓN DE CALIFICACIONES Y RESULTADOS</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>DESTACADO</td>
							<td width="100px;">3,70 a 4,00</td>
							<td>El desempeño es de alta calidad y se logra con una base consistente.  Los resultados de su desempeño exceden claramente la mayor parte de los requerimientos de la posición.  La persona demuestra de manera regular logros significativos y supera lo razonable en las diferentes manifestaciones de su trabajo.</td>
						</tr>
						<tr>
							<td>SATISFACTORIO</td>
							<td width="100px;">2,70 a 3,69</td>
							<td>Obtiene los resultados esperados.  Este nivel debe ser aplicado a aquellos cuyo desempeño cumple con las exigencias del puesto, de acuerdo a lo esperado.  Es habitual en aquellas personas que tienen conocimientos, formación y experiencia apropiados para el puesto. Las personas en este nivel satisfacen los criterios de desempeño en el puesto por un trabajo competente y confiable.</td>
						</tr>
						<tr>
							<td>NECESITA MEJORAR</td>
							<td width="100px;">2,30 a 2,69</td>
							<td>Este nivel refleja un desempeño donde la persona no cumple de forma completa con los requerimientos del puesto, de acuerdo a lo esperado.  
La persona demuestra dificultad para lograr algunas o varias de las funciones y/o metas que se le plantean, por lo que necesita mayor seguimiento y orientación en las mismas.  </td>
						</tr>
						<tr>
							<td>NO CALIFICA</td>
							<td width="100px;">0 a 2,29</td>
							<td>Este nivel se aplica para aquellos cuyo trabajo en términos de calidad, cantidad y cumplimiento de objetivos, está claramente por debajo de las exigencias básicas de su puesto de trabajo.  </td>
						</tr>
					</tbody>
				</table> -->
				<br>
				<!-- Tablas -->
				@if($asignacion->informe == 0)
					<div id="generalTable">
						<table class="table table-striped">
							<tr scope="row">
								<td>Total de Puntos</td>
								<td id="total"></td>
							</tr>
							<tr scope="row">
								<td>Término Medio Obtenido</td>
								<td id="terminomedio"></td>
							</tr>
						</table>
					</div>
				@elseif ($asignacion->informe == 1)
				<div id="detailedTable">
					<table class="table table-striped">
						<thead>
							<tr>
								<th>Competencias requeridas</th>
								<th>Puntos Totales</th>
								<th>Puntos Alcanzados</th>
								<th>Porcentaje</th>
							</tr>
						</thead>
						<tbody>
							@foreach($competencialista as $com)
								<tr>
									<td>{{ $com->com_nom }}</td>
									<td id="maximo{{ $com->id }}"></td>
									<td id="celda{{ $com->id }}"></td>
									<td id="porcentaje_{{ $com->id }}"></td>
								</tr>
							@endforeach
							<tr class="fw-bold">
								<td><strong>Total General</strong></td>
								<td><strong><p id="total_totales"></p></strong></td>
								<td><strong><p id="puntos_totales"></p></strong></td>
								<td><strong><p id="porcentaje_total"></p></strong></td>
							</tr>
						</tbody>
					</table>
				</div>
				@endif
			</div>
		</div>
		<div class="card">
			<div class="card-body" align="center">
				<button class="btn btn-success" type="submit"><i class="far fa-save"></i> Guardar Cambios</button>
			</div>
		</div>
    {!!Form::close()!!}

@stop
@section('js')
	<script>
		$(document).ready(function(){
			$(".calcular").change(function(){
				var inputs = $(".calcular:checked");
				let contadorinput = 0;
				let contador = 0;
				for (let index = 0; index < inputs.length; index++) {
					contador+=parseInt(inputs[index].value);
					contadorinput+=1;
				}
				$("#total").text(contador); 
				let promedio = parseFloat(contador/contadorinput).toFixed(2);
				$("#terminomedio").text(promedio); 
				if(promedio <= 2.29){
					$("#interpretacion").text("NO CALIFICA"); 
				}else if(promedio <= 2.69){
					$("#interpretacion").text("NECESITA MEJORAR"); 
				}else if(promedio <= 3.69){
					$("#interpretacion").text("SATISFACTORIO"); 
				}else if(promedio <= 4){
					$("#interpretacion").text("DESTACADO"); 
				}
			});
		});
	</script>
	<script>
		function processValue(competenciaId) {
			// Find all radio inputs for this competencia
			const radioInputs = document.querySelectorAll(`input[data-competencia="${competenciaId}"]`);
			const targetCell = document.getElementById('celda' + competenciaId);
			const maxElement = document.getElementById('maximo' + competenciaId);
			const percentageElement = document.getElementById('porcentaje_' + competenciaId);

			// Calculate sum of selected values for this competencia
			let selectedSum = 0;
			let maxSum = 0;

			// Group radios by name to handle multiple groups
			const radioGroups = {};
			radioInputs.forEach(radio => {
				if (!radioGroups[radio.name]) {
					radioGroups[radio.name] = [];
				}
				radioGroups[radio.name].push(radio);
			});

			// Calculate sums for each group
			Object.values(radioGroups).forEach(group => {
				// Find selected value in this group
				const selectedRadio = group.find(radio => radio.checked);
				if (selectedRadio) {
					selectedSum += parseInt(selectedRadio.value) || 0;
				}

				// Find maximum value in this group
				const groupMax = Math.max(...group.map(radio => parseInt(radio.value) || 0));
				maxSum += groupMax;
			});

			// Update the cell with sum of selected values
			if (targetCell) {
				targetCell.textContent = selectedSum;
			}

			// Update the maximum element with sum of max values
			if (maxElement) {
				maxElement.textContent = maxSum;
			}

			// Calculate and update percentage
			if (percentageElement) {
				const percentage = maxSum > 0 ? Math.round((selectedSum / maxSum) * 100) : 0;
				percentageElement.textContent = percentage + '%';
			}

			// Update totals
			updateTotals();
			}

			function updateTotals() {
				let totalPoints = 0;
				let totalMaxPoints = 0;

				// Get all competencia rows (excluding the totals row)
				const rows = document.querySelectorAll('tbody tr:not(:last-child)');

				rows.forEach(row => {
					const maxCell = row.querySelector('td[id^="maximo"]');
					const valueCell = row.querySelector('td[id^="celda"]');

					const maxValue = maxCell ? parseInt(maxCell.textContent) || 0 : 0;
					const cellValue = valueCell ? parseInt(valueCell.textContent) || 0 : 0;

					totalMaxPoints += maxValue;
					totalPoints += cellValue;
				});

				// Update total_totales
				const totalTotalesElement = document.getElementById('total_totales');
				if (totalTotalesElement) {
					totalTotalesElement.textContent = totalMaxPoints;
				}

				// Update total points
				const puntosTotalesElement = document.getElementById('puntos_totales');
				if (puntosTotalesElement) {
					puntosTotalesElement.textContent = totalPoints;
				}

				// Update total percentage
				const porcentajeTotalElement = document.getElementById('porcentaje_total');
				if (porcentajeTotalElement) {
					const totalPercentage = totalMaxPoints > 0 ? Math.round((totalPoints / totalMaxPoints) * 100) : 0;
					porcentajeTotalElement.textContent = totalPercentage + '%';
				}
			}

			// Initialize empty cells with 0
			function initializeEmptyCells() {
				const cells = document.querySelectorAll('td[id^="maximo"], td[id^="celda"], td[id^="porcentaje_"]');
				cells.forEach(cell => {
					if (!cell.textContent.trim()) {
						cell.textContent = cell.id.includes('porcentaje') ? '0%' : '0';
					}
				});
			}

			// Set up event listeners
			document.addEventListener('DOMContentLoaded', function() {
			// Initialize empty cells
			initializeEmptyCells();

			// Use event delegation for radio buttons
			document.addEventListener('change', function(event) {
				if (event.target.classList.contains('calcular')) {
					const competenciaId = event.target.dataset.competencia;
					processValue(competenciaId);
				}
			});

			// Initialize totals
			updateTotals();
		});
	</script>
	
			
@stop