@extends('layout.template')
@section('title', 'SICCAP ICATEP | Reporte Encuestas de Evaluación')
@push('scripts')
<style>
    #tablaEncuestas_wrapper .dataTables_paginate .paginate_button {
        color: var(--cui-icatep-rojo1) !important;
    }
    #tablaEncuestas_wrapper .dataTables_paginate .paginate_button.current,
    #tablaEncuestas_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: var(--cui-icatep-rojo1) !important;
        border-color: var(--cui-icatep-rojo1) !important;
        color: #ffffff !important;
    }
    #tablaEncuestas_wrapper .dataTables_paginate .paginate_button:hover {
        background: var(--cui-icatep-rojo1) !important;
        border-color: var(--cui-icatep-rojo1) !important;
        color: #ffffff !important;
    }
    #tablaEncuestas_wrapper .dataTables_paginate .paginate_button.previous,
    #tablaEncuestas_wrapper .dataTables_paginate .paginate_button.next {
        background: var(--cui-icatep-rojo1) !important;
        border-color: var(--cui-icatep-rojo1) !important;
        color: #ffffff !important;
    }
</style>
@endpush
@section('content')
<div class="content-body">
    <div class="container-fluid">

        {{-- Título --}}
        <div class="row page-titles mx-0 mt-4 shadow-sm" style="border-radius:12px;border:none;background:white;">
            <div class="col-sm-12 p-md-0 card-body">
                <h3 class="mb-1"><i class="la la-certificate me-2"></i>Reporte de Encuestas de Evaluaci&oacute;n (Certificaci&oacute;n)</h3>
                <p class="text-muted mb-0">Resultados de las encuestas respondidas por participantes en procesos de certificaci&oacute;n.</p>
            </div>

            <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
                <ol class="breadcrumb">
                    <a href="{{ url('reportes') }}" class="btn btn-rounded btn-dark back-fixed" aria-label="Regresar">
                        <span class="btn-icon-start text-dark"><i class="fa fa-arrow-left"></i></span>
                        Regresar
                    </a>
                </ol>
            </div>
            
        </div>

        {{-- Filtros --}}
        <div class="card mt-3">
            <div class="card-body">
                <form method="GET" action="{{ route('reportesEncuestasEva') }}" class="row g-2 align-items-end">
                    @puede('Encuestas de satisfaccion evaluacion', 'ver_todas_unidades_eva')
                    <div class="col-md-3">
                        <label class="form-label fw-semibold">Unidad</label>
                        <select name="unidad" class="form-control form-control-sm">
                            <option value="">— Todas —</option>
                            @foreach($unidades as $uni)
                                <option value="{{ $uni->uni_identificador }}"
                                    {{ request('unidad') == $uni->uni_identificador ? 'selected' : '' }}>
                                    {{ $uni->uni_nombre }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    @endpuede
                    <div class="col-md-2">
                        <label class="form-label fw-semibold">Año</label>
                        <select name="anio" class="form-control form-control-sm">
                            <option value="">— Todos —</option>
                            @foreach($anios as $anio)
                                <option value="{{ $anio }}" {{ request('anio', date('Y')) == $anio ? 'selected' : '' }}>
                                    {{ $anio }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-icatep-rojo1 btn-sm w-100">
                            <i class="la la-filter"></i> Filtrar
                        </button>
                    </div>
                    <div class="col-md-2">
                        <a href="{{ route('reportesEncuestasEva') }}" class="btn btn-icatep-rojo1-out btn-sm w-100">
                            <i class="la la-times"></i> Limpiar
                        </a>
                    </div>
                </form>
            </div>
        </div>

        {{-- Tarjetas resumen --}}
        @if($encuestas->count() > 0)
        <div class="row mt-3 g-3">
            <div class="col-md-2 col-sm-4">
                <div class="card text-center border-0 shadow-sm h-100">
                    <div class="card-body py-3">
                        <h2 class="fw-bold text-primary mb-0">{{ $encuestas->count() }}</h2>
                        <small class="text-black">Procesos con encuestas</small>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4">
                <div class="card text-center border-0 shadow-sm h-100">
                    <div class="card-body py-3">
                        <h2 class="fw-bold mb-0" style="color:#0d6efd;">{{ number_format($globalP1, 1) }}%</h2>
                        <small class="text-black">Tiempo entrega OK</small>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4">
                <div class="card text-center border-0 shadow-sm h-100">
                    <div class="card-body py-3">
                        <h2 class="fw-bold mb-0" style="color:#198754;">{{ number_format($globalP2, 1) }}%</h2>
                        <small class="text-black">Experiencia satisfecha</small>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4">
                <div class="card text-center border-0 shadow-sm h-100">
                    <div class="card-body py-3">
                        <h2 class="fw-bold mb-0" style="color:#6f42c1;">{{ number_format($globalP3, 1) }}%</h2>
                        <small class="text-black">Recomendaría ICATEP</small>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4">
                <div class="card text-center border-0 shadow-sm h-100">
                    <div class="card-body py-3">
                        <h2 class="fw-bold mb-0" style="color:#fd7e14;">{{ number_format($globalP4, 1) }}%</h2>
                        <small class="text-black">Evaluador/a: Bueno</small>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4">
                <div class="card text-center border-0 shadow-sm h-100">
                    <div class="card-body py-3">
                        <h2 class="fw-bold mb-0" style="color:#20c997;">{{ number_format($globalP5, 1) }}%</h2>
                        <small class="text-black">Instalaciones OK</small>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <div class="alert alert-warning alert-dismissible fade show text-black text-center" style="margin-top: 16px;">
            <strong>Nota:</strong> Los porcentajes representan la proporci&oacute;n de respuestas positivas (S&iacute; / Satisfecho / Bueno) sobre el total de encuestas respondidas por proceso.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

        {{-- Tabla principal --}}
        <div class="card mt-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Detalle por Proceso de Certificaci&oacute;n</h5>
                <span class="badge bg-secondary">{{ $encuestas->count() }} procesos</span>
            </div>
            <div class="card-body p-0">
                @if($encuestas->count() === 0)
                    <div class="p-4 text-center text-muted">
                        <i class="la la-inbox la-3x mb-2"></i>
                        <p>No hay encuestas de evaluaci&oacute;n registradas con los filtros seleccionados.</p>
                    </div>
                @else
                <div class="table-responsive">
                    <table class="table table-hover table-sm align-middle mb-0" id="tablaEncuestas" style="font-size:.82rem;">
                        <thead class="table-light">
                            <tr>
                                <th nowrap style="width:100px;">N&uacute;mero</th>
                                @puede('Encuestas de satisfaccion evaluacion', 'ver_todas_unidades_eva')
                                <th nowrap style="width:70px;">Unidad</th>
                                @endpuede
                                <th>Proceso / Curso</th>
                                <th nowrap>Evaluador/a</th>
                                <th nowrap style="width:72px;">Fecha</th>
                                <th nowrap class="text-center" style="width:70px;" title="Respuestas / Total acreditados">Resp.</th>
                                <!--
                                <th nowrap class="text-center" style="min-width:80px;color:#0d6efd;" title="¿El tiempo de entrega del Certificado fue el que esperaba?">P1 Tiempo</th>
                                <th nowrap class="text-center" style="min-width:80px;color:#198754;" title="¿Cómo calificaría su experiencia con el proceso de Certificación?">P2 Experiencia</th>
                                <th nowrap class="text-center" style="min-width:80px;color:#6f42c1;" title="¿Recomendaría al ICATEP a otras personas?">P3 Recomienda</th>
                                <th nowrap class="text-center" style="min-width:80px;color:#fd7e14;" title="¿Cómo fue el desempeño de la persona evaluadora?">P4 Evaluador/a</th>
                                <th nowrap class="text-center" style="min-width:80px;color:#20c997;" title="¿Las instalaciones fueron las adecuadas?">P5 Instalaciones</th>
                                -->
                                <th class="text-center" style="width:60px;">Detalle</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($encuestas as $row)
                            @php
                                $pendientes = max(0, (int)$row->total_acreditados - (int)$row->total_respuestas);
                            @endphp
                            <tr>
                                <td nowrap><small class="text-black">{{ $row->aul_clave_registro }}</small></td>
                                @puede('Encuestas de satisfaccion evaluacion', 'ver_todas_unidades_eva')
                                <td nowrap><span class="badge bg-secondary" style="font-size:.7rem;">{{ $row->unidad }}</span></td>
                                @endpuede
                                <td style="max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#000;"
                                    title="{{ $row->aul_curso_nombre }}">{{ $row->aul_curso_nombre }}</td>
                                <td nowrap style="max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                                    <small>{{ $row->aul_instructor_nombre ?? '—' }}</small>
                                </td>
                                <td nowrap><small class="text-black">{{ \Carbon\Carbon::parse($row->aul_fecha_inicia)->format('d/m/Y') }}</small></td>
                                <td class="text-center">
                                    <span class="badge {{ $pendientes == 0 ? 'bg-success' : 'bg-warning text-dark' }}" style="font-size:.75rem;">
                                        {{ $row->total_respuestas }}/{{ $row->total_acreditados }}
                                    </span>
                                    @if($pendientes > 0)
                                        <br><small class="text-danger" style="font-size:.7rem;">{{ $pendientes }} pend.</small>
                                    @endif
                                </td>
                                <!--
                                {{-- P1 Tiempo de entrega --}}
                                <td class="text-center">
                                    <div style="font-size:.8rem;font-weight:600;color:#0d6efd;">{{ $row->pct_p1 }}% Sí</div>
                                    <div class="progress" style="height:5px;">
                                        <div class="progress-bar" style="width:{{ $row->pct_p1 }}%;background:#0d6efd;"></div>
                                    </div>
                                    <small class="text-muted">{{ $row->p1_si }}✓ / {{ $row->p1_no }}✗</small>
                                </td>
                                {{-- P2 Experiencia --}}
                                <td class="text-center">
                                    <div style="font-size:.8rem;font-weight:600;color:#198754;">{{ $row->pct_p2 }}% Sat.</div>
                                    <div class="progress" style="height:5px;">
                                        <div class="progress-bar" style="width:{{ $row->pct_p2 }}%;background:#198754;"></div>
                                    </div>
                                    <small class="text-muted" title="Satisfecho / Medianamente / Insatisfecho">S:{{ $row->p2_satisfecho }} M:{{ $row->p2_medio }} I:{{ $row->p2_insatisfecho }}</small>
                                </td>
                                {{-- P3 Recomienda --}}
                                <td class="text-center">
                                    <div style="font-size:.8rem;font-weight:600;color:#6f42c1;">{{ $row->pct_p3 }}% Sí</div>
                                    <div class="progress" style="height:5px;">
                                        <div class="progress-bar" style="width:{{ $row->pct_p3 }}%;background:#6f42c1;"></div>
                                    </div>
                                    <small class="text-muted">{{ $row->p3_si }}✓ / {{ $row->p3_no }}✗</small>
                                </td>
                                {{-- P4 Desempeño evaluador --}}
                                <td class="text-center">
                                    <div style="font-size:.8rem;font-weight:600;color:#fd7e14;">{{ $row->pct_p4 }}% Bueno</div>
                                    <div class="progress" style="height:5px;">
                                        <div class="progress-bar" style="width:{{ $row->pct_p4 }}%;background:#fd7e14;"></div>
                                    </div>
                                    <small class="text-muted" title="Bueno / Regular / Malo">B:{{ $row->p4_bueno }} R:{{ $row->p4_regular }} M:{{ $row->p4_malo }}</small>
                                </td>
                                {{-- P5 Instalaciones --}}
                                <td class="text-center">
                                    <div style="font-size:.8rem;font-weight:600;color:#20c997;">{{ $row->pct_p5 }}% Sí</div>
                                    <div class="progress" style="height:5px;">
                                        <div class="progress-bar" style="width:{{ $row->pct_p5 }}%;background:#20c997;"></div>
                                    </div>
                                    <small class="text-muted">{{ $row->p5_si }}✓ / {{ $row->p5_no }}✗</small>
                                </td>
                                -->
                                <td class="text-center">
                                    @puede('Encuestas de satisfaccion evaluacion', 'ver_detalle_encuesta_eva')
                                    <button type="button"
                                            class="btn btn-xs btn-icatep-rojo1-out btn-ver-detalle"
                                            style="padding:2px 8px;font-size:.8rem;"
                                            data-aula-id="{{ $row->aul_id }}"
                                            data-aula-clave="{{ $row->aul_clave_registro }}"
                                            data-aula-nombre="{{ $row->aul_curso_nombre }}"
                                            title="Ver respuestas individuales">
                                        <i class="la la-eye"></i>
                                    </button>
                                    @endpuede
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @endif
            </div>
        </div>

        {{-- Leyenda preguntas --}}
        <div class="card mt-3">
            <div class="card-body py-2">
                <small class="text-muted fw-semibold me-3">Preguntas:</small>
                <span class="badge me-2" style="background:#0d6efd;">P1 — ¿El tiempo de entrega del Certificado fue el esperado? (Sí/No)</span>
                <span class="badge me-2" style="background:#198754;">P2 — ¿Cómo califica su experiencia con el proceso? (Satisfecho / Med.Satisfecho / Insatisfecho)</span>
                <span class="badge me-2" style="background:#6f42c1;">P3 — ¿Recomendaría al ICATEP? (Sí/No)</span>
                <span class="badge me-2" style="background:#fd7e14;">P4 — Desempeño de la persona evaluadora (Bueno / Regular / Malo)</span>
                <span class="badge me-2" style="background:#20c997;">P5 — ¿Las instalaciones fueron adecuadas? (Sí/No)</span>
                <hr class="my-1">
                <small class="text-black">Los porcentajes globales en las tarjetas representan el promedio de respuestas positivas entre todos los procesos mostrados.</small>
            </div>
        </div>

    </div>
</div>

{{-- =================== MODAL DETALLE =================== --}}
<div class="modal fade" id="modalDetalleEncuesta" tabindex="-1" aria-labelledby="modalDetalleLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-icatep-rojo1 text-white">
                <div>
                    <h5 class="modal-title mb-0 text-white" id="modalDetalleLabel"><i class="la la-list-alt me-2"></i>Detalle de Encuestas de Evaluaci&oacute;n</h5>
                    <small id="modalSubtitle" class="text-white-50"></small>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                {{-- Spinner --}}
                <div id="detalleSpinner" class="text-center py-5">
                    <div class="spinner-border text-primary" role="status"></div>
                    <p class="mt-2 text-muted">Cargando respuestas...</p>
                </div>
                {{-- Contenido --}}
                <div id="detalleContenido" class="d-none">
                    {{-- Resumen rápido --}}
                    <div class="px-3 pt-3 pb-2 border-bottom bg-light">
                        <div class="row g-2" id="detalleSummary"></div>
                    </div>
                    {{-- Tabla de participantes --}}
                    <div class="table-responsive">
                        <table class="table table-sm table-hover align-middle mb-0" id="tablaDetalle">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Participante</th>
                                    <th class="text-center">Fecha</th>
                                    <th class="text-center" style="color:#0d6efd;">P1 Tiempo</th>
                                    <th class="text-center" style="color:#198754;">P2 Experiencia</th>
                                    <th class="text-center" style="color:#6f42c1;">P3 Recomienda</th>
                                    <th class="text-center" style="color:#fd7e14;">P4 Evaluador/a</th>
                                    <th class="text-center" style="color:#20c997;">P5 Instalaciones</th>
                                    <th class="text-center">Reporte PDF</th>
                                </tr>
                            </thead>
                            <tbody id="tablaDetalleBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-start">
                <small class="text-muted">
                    <span class="badge bg-success me-1">&nbsp;</span>Respondi&oacute; &nbsp;
                    <span class="badge bg-danger me-1">&nbsp;</span>Pendiente
                </small>
                <button type="button" class="btn btn-secondary ms-auto btn-sm" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    const urlDetalleBase  = "{{ route('reportes.encuestas.eva.detalle',    ['aulaId' => '__ID__']) }}";
    const urlPdfAlumnoBase = "{{ route('reportes.encuestas.eva.pdf.alumno', ['aulaId' => '__AULA__', 'aaId' => '__AA__']) }}";

    // Badge de respuesta categórica
    function respBadge(valor) {
        if (!valor) return '<span class="badge bg-secondary opacity-50">—</span>';
        const map = {
            'SI':                      '<span class="badge bg-success">✓ Sí</span>',
            'NO':                      '<span class="badge bg-danger">✗ No</span>',
            'SATISFECHO':              '<span class="badge bg-success">Satisfecho</span>',
            'MEDIANAMENTE_SATISFECHO': '<span class="badge" style="background:#fd7e14;">Medianamente</span>',
            'INSATISFECHO':            '<span class="badge bg-danger">Insatisfecho</span>',
            'BUENO':                   '<span class="badge bg-success">Bueno</span>',
            'REGULAR':                 '<span class="badge" style="background:#fd7e14;">Regular</span>',
            'MALO':                    '<span class="badge bg-danger">Malo</span>',
        };
        return map[valor] || `<span class="badge bg-secondary">${valor}</span>`;
    }

    // Abrir modal
    $(document).on('click', '.btn-ver-detalle', function () {
        const aulaId     = $(this).data('aula-id');
        const aulaClave  = $(this).data('aula-clave');
        const aulaNombre = $(this).data('aula-nombre');

        $('#modalSubtitle').text(aulaClave + ' — ' + aulaNombre);
        $('#detalleSpinner').removeClass('d-none');
        $('#detalleContenido').addClass('d-none');
        $('#tablaDetalleBody').html('');
        $('#detalleSummary').html('');

        const modal = new bootstrap.Modal(document.getElementById('modalDetalleEncuesta'));
        modal.show();

        const url = urlDetalleBase.replace('__ID__', aulaId);
        $.getJSON(url)
            .done(function (res) { renderDetalle(res); })
            .fail(function () {
                $('#detalleSpinner').addClass('d-none');
                $('#tablaDetalleBody').html('<tr><td colspan="8" class="text-center text-danger">Error al cargar los datos.</td></tr>');
                $('#detalleContenido').removeClass('d-none');
            });
    });

    function renderDetalle(res) {
        const detalle      = res.detalle;
        const aulaId       = res.aula ? res.aula.aul_id : 0;
        const respondieron = detalle.filter(d => d.respondio);
        const pendientes   = detalle.filter(d => !d.respondio);

        // Conteos para el resumen
        const count = (arr, key, val) => arr.filter(d => d[key] === val).length;
        const pct   = (n, total) => total ? Math.round(n / total * 100) : 0;
        const n     = respondieron.length;

        const summaryData = [
            { label: 'Resp. / Pend.', html: `<span class="display-6 fw-bold text-success">${respondieron.length}</span> / <span class="fw-bold text-danger">${pendientes.length}</span>` },
            { label: 'P1 Tiempo OK',       val: pct(count(respondieron, 'ev_p1', 'SI'),         n), color: '#0d6efd' },
            { label: 'P2 Satisfecho',      val: pct(count(respondieron, 'ev_p2', 'SATISFECHO'), n), color: '#198754' },
            { label: 'P3 Recomienda',      val: pct(count(respondieron, 'ev_p3', 'SI'),         n), color: '#6f42c1' },
            { label: 'P4 Evaluador Bueno', val: pct(count(respondieron, 'ev_p4', 'BUENO'),      n), color: '#fd7e14' },
            { label: 'P5 Inst. OK',        val: pct(count(respondieron, 'ev_p5', 'SI'),         n), color: '#20c997' },
        ];

        let summaryHtml = '';
        summaryData.forEach(function (s, i) {
            if (i === 0) {
                summaryHtml += `<div class="col-auto"><div class="text-center">${s.html}<div><small class="text-black">${s.label}</small></div></div></div>`;
            } else {
                summaryHtml += `<div class="col-auto text-center"><div style="font-size:1.1rem;font-weight:700;color:${s.color};">${s.val}%</div><small class="text-muted">${s.label}</small></div>`;
            }
        });
        $('#detalleSummary').html(summaryHtml);

        // Filas de la tabla
        let rows = '';
        detalle.forEach(function (d, i) {
            if (d.respondio) {
                rows += `<tr class="table-light">
                    <td>${i + 1}</td>
                    <td><i class="la la-check-circle text-success me-1"></i>${d.nombre}</td>
                    <td class="text-center"><small class="text-black">${d.fecha ?? ''}</small></td>
                    <td class="text-center">${respBadge(d.ev_p1)}</td>
                    <td class="text-center">${respBadge(d.ev_p2)}</td>
                    <td class="text-center">${respBadge(d.ev_p3)}</td>
                    <td class="text-center">${respBadge(d.ev_p4)}</td>
                    <td class="text-center">${respBadge(d.ev_p5)}</td>
                    <td class="text-center">
                        <a id="reporalumno"
                           href="${urlPdfAlumnoBase.replace('__AULA__', aulaId).replace('__AA__', d.aa_id)}"
                           target="_blank"
                           class="btn btn-xs btn-icatep-rojo1-out"
                           style="padding:2px 6px;font-size:.8rem;"
                           title="Descargar reporte PDF">
                            <i class="la la-file-pdf"></i>
                        </a>
                    </td>
                </tr>`;
            } else {
                rows += `<tr class="table-danger">
                    <td>${i + 1}</td>
                    <td colspan="7"><i class="la la-times-circle text-danger me-1"></i>${d.nombre} <em class="text-black">(pendiente)</em></td>
                </tr>`;
            }
        });
        $('#tablaDetalleBody').html(rows);

        $('#detalleSpinner').addClass('d-none');
        $('#detalleContenido').removeClass('d-none');
    }

    // DataTable
    $(document).ready(function () {
        if ($('#tablaEncuestas').length) {
            $('#tablaEncuestas').DataTable({
                pageLength: 25,
                order: [[0, 'desc']],
                language: {
                    sProcessing:     "Procesando...",
                    sLengthMenu:     "Mostrar _MENU_ registros",
                    sZeroRecords:    "No se encontraron resultados",
                    sEmptyTable:     "Ningún dato disponible en esta tabla",
                    sInfo:           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                    sInfoEmpty:      "Mostrando registros del 0 al 0 de un total de 0 registros",
                    sInfoFiltered:   "(filtrado de un total de _MAX_ registros)",
                    sInfoPostFix:    "",
                    sSearch:         "Buscar:",
                    sUrl:            "",
                    sInfoThousands:  ",",
                    sLoadingRecords: "Cargando...",
                    oPaginate: {
                        sFirst:    "Primero",
                        sLast:     "Último",
                        sNext:     "Siguiente",
                        sPrevious: "Anterior"
                    },
                    oAria: {
                        sSortAscending:  ": Activar para ordenar la columna de manera ascendente",
                        sSortDescending: ": Activar para ordenar la columna de manera descendente"
                    }
                },
                responsive: true,
                columnDefs: [
                    { orderable: false, targets: -1 }
                ]
            });
        }
    });
</script>
@endpush