Modificación del de vista de dopcumentos del alumno

This commit is contained in:
2026-05-06 18:33:18 -06:00
parent 91d0813a9c
commit 964ed4bbd2
27 changed files with 1921 additions and 339 deletions
@@ -58,7 +58,7 @@
</div>
@elseif($tipoSlug === 'escala_5')
<div class="d-flex flex-wrap" style="gap:.5rem;">
<div class="d-flex flex-wrap escala-grupo" style="gap:.5rem;">
@for($k = 1; $k <= 5; $k++)
<div class="form-check form-check-inline mr-0">
<input type="radio"
@@ -67,7 +67,7 @@
value="{{ $k }}"
class="form-check-input d-none escala-input"
{{ $pregunta->requerida ? 'required' : '' }}>
<label class="btn btn-outline-primary px-3 py-2"
<label class="btn btn-outline-primary px-3 py-2 escala-label"
for="{{ $fieldId }}_{{ $k }}">{{ $k }}</label>
</div>
@endfor
@@ -75,7 +75,7 @@
</div>
@elseif($tipoSlug === 'escala_10')
<div class="d-flex flex-wrap" style="gap:.5rem;">
<div class="d-flex flex-wrap escala-grupo" style="gap:.5rem;">
@for($k = 1; $k <= 10; $k++)
<div class="form-check form-check-inline mr-0">
<input type="radio"
@@ -84,10 +84,20 @@
value="{{ $k }}"
class="form-check-input d-none escala-input"
{{ $pregunta->requerida ? 'required' : '' }}>
<label class="btn btn-outline-primary px-3 py-2"
<label class="btn btn-outline-primary px-3 py-2 escala-label"
for="{{ $fieldId }}_{{ $k }}">{{ $k }}</label>
</div>
@endfor
<small class="text-muted align-self-center ml-2">1 = Muy malo &nbsp; 10 = Excelente</small>
</div>
@endif
@once
<style>
.escala-input:checked + .escala-label {
background-color: #4e73df;
border-color: #4e73df;
color: #fff;
}
</style>
@endonce
@@ -0,0 +1,242 @@
@extends('layouts.landing')
@section('title', 'Reporte — ' . $evaluacion->titulo)
@section('content')
<div class="container-fluid">
{{-- Header --}}
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<div>
<h5 class="m-0 font-weight-bold text-primary">
<i class="fas fa-chart-bar mr-1"></i> {{ $evaluacion->titulo }}
</h5>
<small class="text-muted">Reporte de resultados</small>
</div>
<div class="d-flex flex-wrap" style="gap:.4rem;">
<a href="{{ route('evaluacion.reporte.pdf', $evaluacion) }}"
class="btn btn-sm btn-danger shadow-sm">
<i class="fas fa-file-pdf mr-1"></i> Exportar PDF
</a>
<a href="{{ route('evaluacion.show', $evaluacion) }}"
class="btn btn-sm btn-secondary shadow-sm">
<i class="fas fa-arrow-left mr-1"></i> Regresar
</a>
</div>
</div>
{{-- Tarjetas de resumen --}}
<div class="row mb-4">
<div class="col-xl-3 col-md-6 mb-3">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Participantes</div>
<div class="h4 mb-0 font-weight-bold text-gray-800">{{ $totalSubmissions }}</div>
</div>
<div class="col-auto"><i class="fas fa-users fa-2x text-gray-300"></i></div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-3">
<div class="card border-left-info shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">Preguntas</div>
<div class="h4 mb-0 font-weight-bold text-gray-800">{{ count($datos) }}</div>
</div>
<div class="col-auto"><i class="fas fa-list-ol fa-2x text-gray-300"></i></div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-3">
<div class="card border-left-success shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">Estado</div>
<div class="h4 mb-0 font-weight-bold text-gray-800">{{ ucfirst($evaluacion->status) }}</div>
</div>
<div class="col-auto"><i class="fas fa-clipboard-check fa-2x text-gray-300"></i></div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-3">
<div class="card border-left-warning shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Dirigida a</div>
<div class="h4 mb-0 font-weight-bold text-gray-800">{{ $evaluacion->tipo?->nombre }}</div>
</div>
<div class="col-auto"><i class="fas fa-tag fa-2x text-gray-300"></i></div>
</div>
</div>
</div>
</div>
</div>
{{-- Sin respuestas --}}
@if($totalSubmissions === 0)
<div class="alert alert-info text-center">
<i class="fas fa-info-circle fa-2x mb-2 d-block"></i>
Esta evaluación aún no tiene respuestas registradas.
</div>
@endif
{{-- Preguntas --}}
@foreach($datos as $i => $item)
@php $pregunta = $item['pregunta']; @endphp
<div class="card shadow mb-4">
<div class="card-header py-3 d-flex align-items-center justify-content-between flex-wrap" style="gap:.5rem;">
<h6 class="m-0 font-weight-bold text-primary">
{{ $i + 1 }}. {{ $pregunta->texto }}
@if($pregunta->es_docente)
<span class="badge badge-info ml-1">
<i class="fas fa-chalkboard-teacher mr-1"></i>Por docente
</span>
@endif
@if($pregunta->requerida)
<span class="text-danger ml-1" title="Obligatoria">*</span>
@endif
</h6>
<div class="d-flex align-items-center" style="gap:.5rem;">
<span class="badge badge-light border">{{ $pregunta->tipo?->nombre }}</span>
@if(!$item['es_docente'] && isset($item['promedio']))
<span class="badge badge-primary px-3">
Promedio: {{ $item['promedio'] }}
</span>
@endif
</div>
</div>
<div class="card-body">
{{-- Texto libre --}}
@if($item['tipo'] === 'texto_libre')
@if(!$item['es_docente'])
@forelse($item['textos'] as $txt)
<div class="alert alert-light border mb-2 py-2 px-3">
<i class="fas fa-quote-left text-muted mr-2 small"></i>{{ $txt }}
</div>
@empty
<p class="text-muted mb-0"><em>Sin respuestas registradas.</em></p>
@endforelse
@else
@foreach($item['por_docente'] as $pd)
<div class="mb-4">
<h6 class="font-weight-bold text-info mb-2">
<i class="fas fa-chalkboard-teacher mr-1"></i>{{ $pd['docente_nombre'] }}
<small class="text-muted font-weight-normal">({{ $pd['total'] }} respuesta(s))</small>
</h6>
@forelse($pd['textos'] as $txt)
<div class="alert alert-light border mb-2 py-2 px-3">
<i class="fas fa-quote-left text-muted mr-2 small"></i>{{ $txt }}
</div>
@empty
<p class="text-muted small"><em>Sin respuestas.</em></p>
@endforelse
</div>
@endforeach
@endif
{{-- Gráfica única --}}
@elseif(!$item['es_docente'])
@if($item['total'] > 0)
<div class="row align-items-center">
<div class="col-lg-8">
<canvas id="chart-{{ $i }}"
height="{{ in_array($item['tipo'], ['si_no']) ? 200 : 160 }}">
</canvas>
</div>
<div class="col-lg-4 text-center">
<p class="mb-2 text-muted">
<i class="fas fa-poll mr-1"></i>
<strong>{{ $item['total'] }}</strong> respuesta(s)
</p>
@if(isset($item['promedio']))
<div class="h4 font-weight-bold text-primary mb-0">
{{ $item['promedio'] }}
</div>
<small class="text-muted">promedio</small>
@endif
</div>
</div>
@else
<p class="text-muted"><em>Sin respuestas registradas.</em></p>
@endif
{{-- Gráficas por docente --}}
@else
@if(empty($item['por_docente']))
<p class="text-muted"><em>Sin respuestas registradas.</em></p>
@else
<div class="row">
@foreach($item['por_docente'] as $di => $pd)
<div class="col-md-6 mb-4">
<div class="card border h-100">
<div class="card-header py-2 bg-light d-flex align-items-center justify-content-between">
<span class="font-weight-bold text-info small">
<i class="fas fa-chalkboard-teacher mr-1"></i>{{ $pd['docente_nombre'] }}
</span>
@if(isset($pd['promedio']))
<span class="badge badge-primary">Prom: {{ $pd['promedio'] }}</span>
@endif
</div>
<div class="card-body py-2">
@if($pd['total'] > 0)
<canvas id="chart-{{ $i }}-{{ $di }}" height="200"></canvas>
<p class="text-center text-muted small mt-2 mb-0">
{{ $pd['total'] }} respuesta(s)
</p>
@else
<p class="text-muted text-center small py-3"><em>Sin respuestas.</em></p>
@endif
</div>
</div>
</div>
@endforeach
</div>
@endif
@endif
</div>
</div>
@endforeach
</div>
@endsection
@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
Chart.defaults.font.family = "'Nunito', sans-serif";
Chart.defaults.font.size = 13;
@foreach($datos as $i => $item)
@if($item['tipo'] !== 'texto_libre' && $item['total'] > 0)
@if(!$item['es_docente'] && isset($item['chart_config']))
new Chart(
document.getElementById('chart-{{ $i }}'),
@json($item['chart_config'])
);
@elseif($item['es_docente'])
@foreach($item['por_docente'] as $di => $pd)
@if(isset($pd['chart_config']) && $pd['total'] > 0)
new Chart(
document.getElementById('chart-{{ $i }}-{{ $di }}'),
@json($pd['chart_config'])
);
@endif
@endforeach
@endif
@endif
@endforeach
</script>
@endsection
@@ -0,0 +1,355 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Reporte {{ $evaluacion->titulo }}</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: DejaVu Sans, Arial, sans-serif;
font-size: 11px;
color: #333;
line-height: 1.5;
}
/* ── Header ── */
.header {
border-bottom: 3px solid #4e73df;
padding-bottom: 10px;
margin-bottom: 18px;
}
.header h1 {
font-size: 17px;
color: #4e73df;
margin-bottom: 4px;
}
.header .meta {
font-size: 10px;
color: #666;
}
.header .descripcion {
font-size: 11px;
color: #555;
margin-top: 4px;
font-style: italic;
}
/* ── Summary boxes ── */
.summary-row {
width: 100%;
margin-bottom: 18px;
}
.summary-row td {
width: 25%;
padding: 8px 6px;
border: 1px solid #e3e6f0;
background: #f8f9fc;
text-align: center;
border-radius: 4px;
}
.summary-row .label {
font-size: 9px;
color: #666;
text-transform: uppercase;
letter-spacing: .5px;
font-weight: bold;
display: block;
}
.summary-row .value {
font-size: 16px;
font-weight: bold;
color: #4e73df;
}
/* ── Pregunta block ── */
.pregunta-block {
margin-bottom: 22px;
page-break-inside: avoid;
}
.pregunta-header {
background: #4e73df;
color: white;
padding: 6px 10px;
font-size: 11px;
font-weight: bold;
border-radius: 4px 4px 0 0;
}
.pregunta-body {
border: 1px solid #d1d3e2;
border-top: none;
padding: 10px;
border-radius: 0 0 4px 4px;
background: #fff;
}
.badge-info {
background: #36b9cc;
color: white;
padding: 1px 6px;
border-radius: 3px;
font-size: 9px;
font-weight: bold;
}
/* ── Stats ── */
.stat-line {
font-size: 10px;
color: #666;
margin-bottom: 4px;
}
.promedio {
font-size: 20px;
font-weight: bold;
color: #4e73df;
}
.promedio-label {
font-size: 10px;
color: #666;
}
/* ── Chart image ── */
.chart-img {
display: block;
width: 100%;
max-width: 480px;
margin: 6px auto;
}
.chart-error {
color: #aaa;
font-size: 10px;
text-align: center;
padding: 15px;
border: 1px dashed #ccc;
border-radius: 4px;
}
/* ── Texto libre ── */
.texto-libre-item {
background: #f8f9fc;
border-left: 3px solid #4e73df;
padding: 5px 10px;
margin-bottom: 5px;
font-size: 10px;
color: #444;
}
/* ── Docente section ── */
.docente-header {
background: #e8f7fa;
border-left: 4px solid #36b9cc;
padding: 5px 8px;
margin-bottom: 6px;
font-size: 11px;
font-weight: bold;
color: #2c8fa0;
}
.docente-block {
margin-bottom: 14px;
page-break-inside: avoid;
}
.two-col-table { width: 100%; }
.two-col-table td { width: 50%; vertical-align: top; padding: 0 5px; }
.two-col-table td:first-child { padding-left: 0; }
.two-col-table td:last-child { padding-right: 0; }
/* ── Footer ── */
.footer {
margin-top: 30px;
border-top: 1px solid #e3e6f0;
padding-top: 8px;
text-align: center;
font-size: 9px;
color: #aaa;
}
.no-data { color: #aaa; font-size: 10px; font-style: italic; }
</style>
</head>
<body>
{{-- ENCABEZADO --}}
<div class="header">
<h1><span style="color:#4e73df;">&#9646;</span> {{ $evaluacion->titulo }}</h1>
<div class="meta">
<strong>Tipo:</strong> {{ $evaluacion->tipo?->nombre }}
&nbsp;|&nbsp;
<strong>Estado:</strong> {{ ucfirst($evaluacion->status) }}
&nbsp;|&nbsp;
<strong>Participantes:</strong> {{ $totalSubmissions }}
&nbsp;|&nbsp;
<strong>Generado:</strong> {{ now()->format('d/m/Y H:i') }}
@if($evaluacion->fecha_inicio || $evaluacion->fecha_fin)
&nbsp;|&nbsp;
<strong>Vigencia:</strong>
{{ $evaluacion->fecha_inicio?->format('d/m/Y') ?? '—' }}
al
{{ $evaluacion->fecha_fin?->format('d/m/Y') ?? '—' }}
@endif
</div>
@if($evaluacion->descripcion)
<div class="descripcion">{{ $evaluacion->descripcion }}</div>
@endif
</div>
{{-- RESUMEN --}}
<table class="summary-row" cellspacing="4" cellpadding="0">
<tr>
<td>
<span class="label">Participantes</span>
<span class="value" style="color:#4e73df;">{{ $totalSubmissions }}</span>
</td>
<td>
<span class="label">Preguntas</span>
<span class="value" style="color:#36b9cc;">{{ count($datos) }}</span>
</td>
<td>
<span class="label">Estado</span>
<span class="value" style="font-size:13px; color:#1cc88a;">{{ ucfirst($evaluacion->status) }}</span>
</td>
<td>
<span class="label">Tipo</span>
<span class="value" style="font-size:13px; color:#f6c23e;">{{ $evaluacion->tipo?->nombre }}</span>
</td>
</tr>
</table>
@if($totalSubmissions === 0)
<p class="no-data" style="text-align:center; padding:20px;">
Esta evaluación aún no tiene respuestas registradas.
</p>
@endif
{{-- PREGUNTAS --}}
@foreach($datos as $i => $item)
@php $pregunta = $item['pregunta']; @endphp
<div class="pregunta-block">
<div class="pregunta-header">
{{ $i + 1 }}. {{ $pregunta->texto }}
@if($pregunta->es_docente)
&nbsp;<span class="badge-info">Por docente</span>
@endif
<span style="float:right; font-weight:normal; font-size:9px;">
{{ $pregunta->tipo?->nombre }}
</span>
</div>
<div class="pregunta-body">
{{-- Texto libre --}}
@if($item['tipo'] === 'texto_libre')
@if(!$item['es_docente'])
@forelse($item['textos'] as $txt)
<div class="texto-libre-item">{{ $txt }}</div>
@empty
<p class="no-data">Sin respuestas registradas.</p>
@endforelse
@else
@foreach($item['por_docente'] as $pd)
<div class="docente-block">
<div class="docente-header">
{{ $pd['docente_nombre'] }}
<span style="font-weight:normal; font-size:9px; color:#666;">
{{ $pd['total'] }} respuesta(s)
</span>
</div>
@forelse($pd['textos'] as $txt)
<div class="texto-libre-item">{{ $txt }}</div>
@empty
<p class="no-data">Sin respuestas.</p>
@endforelse
</div>
@endforeach
@endif
{{-- Gráfica única --}}
@elseif(!$item['es_docente'])
@if($item['total'] > 0)
<table style="width:100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="width:70%; vertical-align:middle;">
@if(isset($item['chart_img']))
<img src="{{ $item['chart_img'] }}" class="chart-img" alt="Gráfica">
@else
<div class="chart-error">Gráfica no disponible</div>
@endif
</td>
<td style="width:30%; vertical-align:middle; text-align:center; padding-left:10px;">
<div class="stat-line">Respuestas</div>
<div class="promedio" style="font-size:24px;">{{ $item['total'] }}</div>
@if(isset($item['promedio']))
<div style="margin-top:10px;">
<div class="stat-line">Promedio</div>
<div class="promedio">{{ $item['promedio'] }}</div>
<div class="promedio-label">/ {{ str_contains($item['tipo'], '10') ? '10' : '5' }}</div>
</div>
@endif
</td>
</tr>
</table>
@else
<p class="no-data">Sin respuestas registradas.</p>
@endif
{{-- Gráficas por docente (tabla 2 columnas) --}}
@else
@if(empty($item['por_docente']))
<p class="no-data">Sin respuestas registradas.</p>
@else
@php
$chunks = array_chunk($item['por_docente'], 2);
@endphp
@foreach($chunks as $pair)
<table class="two-col-table" cellpadding="0" cellspacing="0" style="margin-bottom:10px;">
<tr>
@foreach($pair as $pd)
<td>
<div class="docente-block">
<div class="docente-header">
{{ $pd['docente_nombre'] }}
@if(isset($pd['promedio']))
&nbsp;·&nbsp;
<span style="font-size:9px; color:#36b9cc;">
Prom: {{ $pd['promedio'] }}
</span>
@endif
</div>
@if($pd['total'] > 0)
@if(isset($pd['chart_img']))
<img src="{{ $pd['chart_img'] }}" style="width:100%; display:block;" alt="Gráfica">
@else
<div class="chart-error">Gráfica no disponible</div>
@endif
<p class="stat-line" style="text-align:center; margin-top:4px;">
{{ $pd['total'] }} respuesta(s)
</p>
@else
<p class="no-data">Sin respuestas.</p>
@endif
</div>
</td>
@endforeach
@if(count($pair) === 1)
<td></td>
@endif
</tr>
</table>
@endforeach
@endif
@endif
</div>
</div>
@endforeach
<div class="footer">
Reporte generado el {{ now()->format('d/m/Y \a \l\a\s H:i') }} Sistema Educativo
</div>
</body>
</html>
+24 -3
View File
@@ -79,7 +79,7 @@
@php
$user = $docente->docentes->first();
$fotoUrl = $user?->profile_photo_url;
$nombreDocente = $user?->name ?? 'Docente';
$nombreDocente = trim("{$user?->apellidoPaterno} {$user?->apellidoMaterno} {$user?->name}") ?: 'Docente';
@endphp
<div class="card shadow-sm mb-4 border-left-info">
@@ -138,8 +138,8 @@
<div class="card shadow-sm mb-4">
<div class="card-body text-center">
<button type="submit" class="btn btn-success btn-lg px-5"
onclick="return confirm('¿Estás seguro de enviar la evaluación? No podrás cambiar tus respuestas.')">
<button type="button" class="btn btn-success btn-lg px-5"
onclick="confirmarEnvioEvaluacion()">
<i class="fas fa-paper-plane mr-2"></i> Enviar evaluación
</button>
</div>
@@ -149,3 +149,24 @@
</div>
@endsection
@section('scripts')
<script>
function confirmarEnvioEvaluacion() {
Swal.fire({
title: '¿Enviar evaluación?',
html: 'Una vez enviada <strong>no podrás modificar tus respuestas</strong>.',
icon: 'question',
showCancelButton: true,
confirmButtonText: 'Sí, enviar',
cancelButtonText: 'Cancelar',
confirmButtonColor: '#1cc88a',
cancelButtonColor: '#6c757d',
}).then(result => {
if (result.isConfirmed) {
document.getElementById('form-evaluacion').submit();
}
});
}
</script>
@endsection
+5 -2
View File
@@ -17,8 +17,11 @@
<h5 class="m-0 font-weight-bold text-primary">
<i class="fas fa-clipboard-list mr-1"></i> {{ $evaluacion->titulo }}
</h5>
<div>
<a href="{{ route('evaluacion.edit', $evaluacion) }}" class="btn btn-sm btn-primary mr-1">
<div class="d-flex flex-wrap" style="gap:.4rem;">
<a href="{{ route('evaluacion.reporte.show', $evaluacion) }}" class="btn btn-sm btn-info">
<i class="fas fa-chart-bar"></i> Reporte
</a>
<a href="{{ route('evaluacion.edit', $evaluacion) }}" class="btn btn-sm btn-primary">
<i class="fas fa-edit"></i> Editar
</a>
<a href="{{ route('evaluacion.index') }}" class="btn btn-sm btn-secondary">