@extends('layout.template')
@section('title', 'SICCAP ICATEP | Reporte Mensual Encuestas')
@push('scripts')
    <style>
        .custom-thead {background: #E7EBEF !important;}
        .custom-thead th {color: #444 !important;border-bottom: 1px solid #dee2e6 !important;
            padding: 12px 15px !important;font-weight: 600 !important;text-transform: uppercase;
            font-size: 0.85rem;}
        #tablaReferencias tbody td {font-weight: 600;color: #4a4a4a;vertical-align: middle;
            font-size: 0.85rem;}
        #tablaReferencias tbody td:first-child {color: var(--primary) !important;}
        .filter-dropdown-container {position: relative;display: inline-block;padding-bottom: 5px;}
        .filter-error-msg {position: absolute;bottom: -18px;left: 5px;font-size: 0.8rem;font-weight: 600;
            display: none;white-space: nowrap;}
        /* Top Loader Styles */
        .top-loader-container {position: absolute;top: 0;left: 0;width: 100%;height: 3px;background: transparent;
            overflow: hidden;z-index: 10;}
        .top-loader-bar {width: 0%;height: 100%;background: #556ee6;transition: width 0.3s ease;}
        /* Table Enhancements */
        #tablaReferencias tbody tr {transition: background 0.15s ease;}
        #tablaReferencias tbody tr:hover {background-color: #f8fafc !important;}
        /* Empty State Illustration */
        .empty-state-container {padding: 4rem 1rem;text-align: center;}
        .empty-state-icon {font-size: 4rem;color: #e2e8f0;margin-bottom: 1.5rem;}
        .empty-state-title {font-size: 1.25rem;font-weight: 700;color: #475569;margin-bottom: 0.5rem;}
        .empty-state-text {color: #94a3b8;max-width: 300px;margin: 0 auto;}
        .filter-dropdown-menu {display: none;position: absolute;border: 1px solid #2C3E5050;top: 100%;
            left: 0;z-index: 1000;min-width: 400px;background-color: #fff;border-radius: 12px;overflow: hidden;
            margin-top: 5px;transform-origin: top left;animation: growAnimation 0.2s ease-out forwards;}
            @keyframes growAnimation {from {transform: scale(0.8);opacity: 0;}
            to {transform: scale(1);opacity: 1;}}
        .filter-dropdown-menu.show {display: block;}
        .filter-dropdown-header {padding: 0.8rem;color: white;display: flex;justify-content: space-between;align-items: center;}
        .filter-dropdown-body {padding: 0 1.2rem 1.2rem 1.2rem;max-height: 400px;overflow-y: auto;}
        .unit-checkbox-label {cursor: pointer;padding: 5px 8px;border-radius: 6px;transition: background 0.2s;display: flex;
            align-items: center;width: 100%;margin-bottom: 2px;font-size: 0.85rem;}
        .unit-checkbox-label:hover {background-color: #f1f1f1;}
        .filter-section-title {font-weight: 700;color: #2C3E50;border-bottom: 2px solid #2C3E50;margin-bottom: 40px;padding-bottom: 5px;
            font-size: 0.95rem;}
        .compact-row {margin-right: -5px;margin-left: -5px;}
        .compact-row>[class*="col-"] {padding-right: 5px;padding-left: 5px;}
        .transform-0.9 {transform: scale(0.9);}
        @media screen and (max-width: 576px) {.filter-dropdown-menu {min-width: 300px;position: fixed;top: 50%;left: 50%;
                transform: translate(-50%, -50%) !important;margin-top: 0;width: 90%;}}
    </style>
@endpush
@section('content')
    <div class="content-body">
        <div class="container-fluid">

            <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-2">Reporte de Encuestas de Satisfacción Avanzado</h3>
                    <form id="filtroForm" method="GET" action="{{ route('reportes.encuestas.mensual') }}">
                        <div class="d-flex flex-wrap gap-4 mb-2 mt-3 justify-content-between">
                            <div class="d-flex flex-wrap gap-4">


<!-- unidades -->
                                <div class="filter-dropdown-container">
                                    <label class="text-dark mb-1 d-block"
                                        style="font-size: 0.9rem; margin-bottom: 2px !important;">1. Seleccionar unidades:</label>
                                    <button type="button" id="btnSelectedUnits"
                                        class="btn btn-dark d-flex align-items-center justify-content-between shadow-sm filter-toggle-btn"
                                        style="min-width: 200px; border-radius: 8px; padding: 0.6rem 1rem; border: 1px solid #dddddd; background: #eeeeee;">
                                        <span id="selectedUnitsText" class="text-dark">Unidades</span>
                                        <i class="fa fa-building ms-2 text-dark"></i>
                                    </button>

                                    <div class="filter-dropdown-menu shadow-lg" id="dropdownUnidades">
                                        <div class="filter-dropdown-header">
                                            <h5 class="text-dark mb-0">1. Seleccionar Unidades</h5>
                                            <div class="d-flex">
                                                <button type="button" class="btn btn-xxs btn-primary" id="btnSelectAllUnits"
                                                    style="font-size: 0.7rem;">Seleccionar Todas</button>
                                            </div>
                                        </div>
                                        <div class="filter-dropdown-body">
                                            <div class="row compact-row" id="unidadesList">
                                                @foreach($unidades as $un)
                                                    <div class="col-md-6 col-12">
                                                        <label class="unit-checkbox-label">
                                                            <input type="checkbox" name="unidades[]" class="unit-check me-2"
                                                                value="{{ $un->uni_identificador }}"
                                                                data-name="{{ $un->uni_nombre_corto }}"
                                                                {{ in_array((string)$un->uni_identificador, array_map('strval', $selectedUnidades)) ? 'checked' : '' }}>
                                                            <span>{{ $un->uni_nombre_corto }}</span>
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                    <div id="errorUnidad" class="text-danger filter-error-msg">
                                        <i class="fa fa-exclamation-circle me-1"></i>Seleccionar unidad
                                    </div>
                                </div>
<!-- fin unidades -->


                                <div class="filter-dropdown-container">
                                    <label class="text-dark mb-1 d-block"
                                        style="font-size: 0.9rem; margin-bottom: 2px !important;">2. Tipo de curso:</label>
                                    <button type="button" id="btnSelectedTypes"
                                        class="btn btn-dark d-flex align-items-center justify-content-between shadow-sm filter-toggle-btn"
                                        style="min-width: 200px; border-radius: 8px; padding: 0.6rem 1rem; border: 1px solid #dddddd; background: #eeeeee;">
                                        <span id="selectedTypesText" class="text-dark">Tipo de curso</span>
                                        <i class="fa fa-list ms-2 text-dark"></i>
                                    </button>

                                    <div class="filter-dropdown-menu shadow-lg" id="dropdownTipos">
                                        <div class="filter-dropdown-header">
                                            <h5 class="text-dark mb-0">2. Seleccionar tipo de curso</h5>
                                            <div class="d-flex justify-content-end ">
                                                <button type="button" class="btn btn-xxs btn-outline-light"
                                                    style="background: #fefefe; font-size: 0.7rem;" id="btnSelectAllTypes">Seleccionar Todos</button>
                                            </div>
                                        </div>
                                        <div class="filter-dropdown-body">
                                            <div class="row compact-row">
                                                @foreach($tiposCursos as $tipo)
                                                    <div class="col-md-6 col-12">
                                                        <label class="unit-checkbox-label">
                                                            <input type="checkbox" name="tipos[]" class="type-check me-2"
                                                                value="{{ $tipo->tip_id }}" data-name="{{ $tipo->tip_nombre }}"
                                                                {{ in_array((string)$tipo->tip_id, array_map('strval', $selectedTipos)) ? 'checked' : '' }}>
                                                            <span>{{ $tipo->tip_nombre }}</span>
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                    <div id="errorTipo" class="text-danger filter-error-msg">
                                        <i class="fa fa-exclamation-circle me-1"></i>Seleccionar tipo
                                    </div>
                                </div>

                                <div class="filter-dropdown-container">
                                    <label class="text-dark mb-1 d-block"
                                        style="font-size: 0.9rem; margin-bottom: 2px !important;">3. Seleccionar meses:</label>
                                    <button type="button" id="btnSelectedMonths"
                                        class="btn btn-dark d-flex align-items-center justify-content-between shadow-sm filter-toggle-btn"
                                        style="min-width: 200px; border-radius: 8px; padding: 0.6rem 1rem; border: 1px solid #dddddd; background: #eeeeee;">
                                        <span id="selectedMonthsText" class="text-dark">Meses</span>
                                        <i class="fa fa-calendar ms-2 text-dark"></i>
                                    </button>

                                    <div class="filter-dropdown-menu shadow-lg" id="dropdownMeses">
                                        <div class="filter-dropdown-header">
                                            <h5 class="text-dark mb-0">3. Seleccionar Meses</h5>
                                            <div class="d-flex justify-content-end ">
                                                <button type="button" class="btn btn-xxs btn-outline-light"
                                                    style="background: #fefefe; font-size: 0.7rem;" id="btnSelectAllMonths">Seleccionar Todos</button>
                                            </div>
                                        </div>
                                        <div class="filter-dropdown-body">
                                            <div class="row compact-row">
                                                @foreach($meses as $mes)
                                                    <div class="col-md-6 col-12">
                                                        <label class="unit-checkbox-label">
                                                            <input type="checkbox" name="meses[]" class="month-check me-2"
                                                                value="{{ $mes->mes_id }}" data-name="{{ $mes->mes_nombre }}"
                                                                {{ in_array((string)$mes->mes_id, array_map('strval', $selectedMeses)) ? 'checked' : '' }}>
                                                            <span>{{ $mes->mes_nombre }}</span>
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                    <div id="errorMes" class="text-danger filter-error-msg">
                                        <i class="fa fa-exclamation-circle me-1"></i>Seleccionar mes
                                    </div>
                                </div>

                                <div class="filter-dropdown-container">
                                    <label class="text-dark mb-1 d-block"
                                        style="font-size: 0.9rem; margin-bottom: 2px !important;">4. Seleccionar año:</label>
                                    <button type="button" id="btnSelectedYear"
                                        class="btn btn-dark d-flex align-items-center justify-content-between shadow-sm filter-toggle-btn"
                                        style="min-width: 150px; border-radius: 8px; padding: 0.6rem 1rem; border: 1px solid #dddddd; background: #eeeeee;">
                                        <span id="selectedYearText" class="text-dark">{{ $selectedAnio }}</span>
                                        <i class="fa fa-calendar-check ms-2 text-dark"></i>
                                    </button>

                                    <div class="filter-dropdown-menu shadow-lg" id="dropdownYear" style="min-width: 150px;">
                                        <div class="filter-dropdown-header">
                                            <h5 class="text-dark mb-0">4. Año</h5>
                                        </div>
                                        <div class="filter-dropdown-body">
                                            <div class="row compact-row">
                                                @foreach($anios as $anio)
                                                    <div class="col-12">
                                                        <label class="unit-checkbox-label">
                                                            <input type="radio" name="anio" class="year-radio me-2"
                                                                value="{{ $anio }}" {{ (string)$anio == (string)$selectedAnio ? 'checked' : '' }}>
                                                            <span>{{ $anio }}</span>
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="filter-dropdown-container">
                                <div class="d-flex gap-2">
                                    <div style="display: flex;align-items: center;flex-flow: column;">
                                        <label class="text-dark mb-1 d-block"
                                        style="font-size: 0.9rem; margin-bottom: 2px !important;">5. Filtrar Datos</label>
                                        <button type="submit" class="btn btn-outline-primary shadow-sm"
                                            style="border-radius: 8px; padding: 0.6rem 1.5rem; font-weight: 600;">
                                            <i class="fa fa-filter me-2"></i>Filtrar
                                        </button>
                                    </div>
                                    @puede('Encuestas de satisfaccion', 'descargar_excel_general_avanzada')
                                    <div style="display: flex;align-items: center;flex-flow: column;">
                                        <label class="text-dark mb-1 d-block"
                                        style="font-size: 0.9rem; margin-bottom: 2px !important;">6. Exportar Excel</label>
                                        <button type="button" id="exportExcelBtn" class="btn btn-outline-success shadow-sm" disabled
                                            style="border-radius: 8px; font-weight: 600;">
                                            <i class="fa fa-file-excel me-2"></i>Exportar a Excel
                                        </button>
                                    </div>
                                    @endpuede
                                    <div style="display: flex;align-items: center;flex-flow: column;">
                                        <label class="text-dark mb-1 d-block"
                                        style="font-size: 0.9rem; margin-bottom: 2px !important;">Quitar Filtro</label>
                                        <a href="{{ route('reportes.encuestas.mensual') }}" class="btn btn-outline-secondary shadow-sm"
                                            style="border-radius: 8px; padding: 0.6rem 1.5rem; font-weight: 600;">
                                            <i class="fa fa-times me-2"></i>Limpiar
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex"
                    style="position: absolute; right: 30px; top: 20px;">
                    <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>

            <div class="row">
                <div class="col-12">
                    <div class="card shadow-sm" style="border-radius: 12px; border: none; position: relative; overflow: hidden;">
                        <!-- Top Loader -->
                        <div class="top-loader-container">
                            <div class="top-loader-bar" id="top-loader"></div>
                        </div>

                        <div class="card-body">

                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <div style="display: flex;"><h4 class="card-title mb-0" style="font-weight: 700; color: #2C3E50;">Resultados</h4>&nbsp;</div>
                                <div style="display: flex;"><strong>Nota:</strong>&nbsp;El valor del porcentaje de cada secci&oacute;n depende del n&uacute;mero de encuestas respondidas.</div>
                            </div>

                            <div class="w-100">
                                <!-- aqui va la tabla -->

                                {{-- 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">Aulas 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:#6f42c1;">{{ number_format($globalS1 ?? 0, 1) }}%</h2>
                                                <small class="text-black">Planeación</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($globalS2 ?? 0, 1) }}%</h2>
                                                <small class="text-black">Desempeño</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($globalS3 ?? 0, 1) }}%</h2>
                                                <small class="text-black">Mat. Didáctico</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:#dc3545;">{{ number_format($globalS4 ?? 0, 1) }}%</h2>
                                                <small class="text-black">Satisfacción</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 text-success mb-0">{{ number_format($globalPromedio ?? 0, 1) }}%</h2>
                                                <small class="text-black">Promedio global</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif

                                <!--
                                <div class="alert alert-warning alert-dismissible fade show text-black text-center mt-3">
                                    <strong>Nota:</strong> El valor del porcentaje de cada secci&oacute;n depende del n&uacute;mero de encuestas respondidas.
                                    <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 Aula</h5>
                                        <span class="badge bg-secondary">{{ $encuestas->count() }} aulas</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 registradas con los filtros seleccionados.</p>
                                            </div>
                                        @else
                                        <div class="table-responsive">
                                            <table class="table table-hover table-sm align-middle mb-0" id="tablaEncuestasMes" style="font-size:.82rem;">
                                                <thead class="table-light">
                                                    <tr>
                                                        <th nowrap style="width:100px;">Número_A</th>
                                                        @if($puedeVerTodasUnidades)
                                                        <th style="width:70px;">Unidad</th>
                                                        @endif
                                                        <th style="max-width:160px;">Curso</th>
                                                        <th nowrap style="width:72px;">Inicio</th>
                                                        <th nowrap class="text-center" style="width:70px;" title="Respuestas / Total acreditados">Resp.</th>
                                                        <th nowrap class="text-center" style="width:68px;color:#6f42c1;" title="Planeación y Organización del Curso">Plan y Org.</th>
                                                        <th nowrap class="text-center" style="width:68px;color:#fd7e14;" title="Desempeño del/la Instructor/a">Desempeño</th>
                                                        <th nowrap class="text-center" style="width:68px;color:#20c997;" title="Material Didáctico">Mat. Didact.</th>
                                                        <th nowrap class="text-center" style="width:68px;color:#dc3545;" title="Aplicabilidad y Satisfacción General">Satisfacción</th>
                                                        <th nowrap class="text-center fw-bold" style="width:70px;">Global</th>
                                                        <th class="text-center" style="width:110px;">Acciones</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($encuestas as $row)
                                                    @php
                                                        $pct        = (float)$row->pct_global;
                                                        $colorClass = $pct >= 75 ? 'success' : ($pct >= 50 ? 'warning' : 'danger');
                                                        $pendientes = max(0, (int)$row->total_acreditados - (int)$row->total_respuestas);
                                                        $s1 = (float)($row->pct_s1 ?? 0);
                                                        $s2 = (float)($row->pct_s2 ?? 0);
                                                        $s3 = (float)($row->pct_s3 ?? 0);
                                                        $s4 = (float)($row->pct_s4 ?? 0);
                                                    @endphp
                                                    <tr>
                                                        <td style="width:100px;"><small class="text-black">{{ $row->aul_clave_registro }}</small></td>
                                                        @if($puedeVerTodasUnidades)
                                                        <td><small class="text-black">{{ $row->unidad }}</small></td>
                                                        @endif
                                                        <td style="max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#000;"
                                                            title="{{ $row->aul_curso_nombre }}">{{ $row->aul_curso_nombre }}</td>
                                                        <td nowrap><small class="text-black">{{ $row->fecha_inicia_fmt }}</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 }} pendientes</small>
                                                            @endif
                                                        </td>
                                                        <td class="text-center" style="width:68px;">
                                                            <div style="font-size:.85rem;font-weight:600;color:#6f42c1;">{{ number_format($s1,1) }}%</div>
                                                            <div class="progress" style="height:6px;"><div class="progress-bar" role="progressbar" style="width:{{ $s1 }}%;background-color:#6f42c1;"></div></div>
                                                        </td>
                                                        <td class="text-center" style="width:68px;">
                                                            <div style="font-size:.85rem;font-weight:600;color:#fd7e14;">{{ number_format($s2,1) }}%</div>
                                                            <div class="progress" style="height:6px;"><div class="progress-bar" role="progressbar" style="width:{{ $s2 }}%;background-color:#fd7e14;"></div></div>
                                                        </td>
                                                        <td class="text-center" style="width:68px;">
                                                            <div style="font-size:.85rem;font-weight:600;color:#20c997;">{{ number_format($s3,1) }}%</div>
                                                            <div class="progress" style="height:6px;"><div class="progress-bar" role="progressbar" style="width:{{ $s3 }}%;background-color:#20c997;"></div></div>
                                                        </td>
                                                        <td class="text-center" style="width:68px;">
                                                            <div style="font-size:.85rem;font-weight:600;color:#dc3545;">{{ number_format($s4,1) }}%</div>
                                                            <div class="progress" style="height:6px;"><div class="progress-bar" role="progressbar" style="width:{{ $s4 }}%;background-color:#dc3545;"></div></div>
                                                        </td>
                                                        <td class="text-center" style="width:70px;">
                                                            <div class="fw-bold mb-1">{{ number_format($row->pct_global, 1) }}%</div>
                                                            <div class="progress" style="height:6px;">
                                                                <div class="progress-bar bg-{{ $colorClass }}"
                                                                     role="progressbar"
                                                                     style="width:{{ $row->pct_global }}%">
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="text-center" style="width:110px;">
                                                            @puede('Encuestas de satisfaccion', 'ver_detalle_encuesta_avanzada')
                                                            <button type="button"
                                                                    class="btn btn-xs btn-icatep-rojo1-out btn-ver-detalle"
                                                                    style="padding:2px 6px;font-size:.8rem;"
                                                                    data-aula-id="{{ $row->en_aula_id }}"
                                                                    data-aula-clave="{{ $row->aul_clave_registro }}"
                                                                    data-aula-nombre="{{ $row->aul_curso_nombre }}"
                                                                    title="Ver detalle de respuestas">
                                                                <i class="la la-eye"></i>
                                                            </button>
                                                            @endpuede
                                                            @if($pendientes == 0)
                                                                @puede('Encuestas de satisfaccion', 'descargar_pdf_encuesta_avanzada')
                                                                <a href="{{ route('reportes.encuestas.pdf', ['aulaId' => $row->en_aula_id]) }}"
                                                                   class="btn btn-xs btn-icatep-rojo1-out"
                                                                   style="padding:2px 6px;font-size:.8rem;"
                                                                   target="_blank" title="Descargar PDF">
                                                                    <i class="la la-file-pdf"></i>
                                                                </a>
                                                                @endpuede
                                                                @puede('Encuestas de satisfaccion', 'descargar_pdf_comentarios_avanzada')
                                                                <a href="{{ route('reporte.comentarios.pdf', ['aulaId' => $row->en_aula_id]) }}"
                                                                   class="btn btn-xs btn-icatep-rojo1-out"
                                                                   style="padding:2px 6px;font-size:.8rem;"
                                                                   target="_blank" title="Descargar comentarios PDF">
                                                                    <i class="la la-file-pdf"></i>
                                                                </a>
                                                                @endpuede
                                                                @puede('Encuestas de satisfaccion', 'descargar_excel_encuesta_avanzada')
                                                                <a href="{{ route('reportes.encuestas.excel', ['aulaId' => $row->en_aula_id]) }}"
                                                                   class="btn btn-xs btn-outline-success"
                                                                   style="padding:2px 6px;font-size:.8rem;"
                                                                   title="Descargar Excel con detalle de respuestas">
                                                                    <i class="la la-file-excel"></i>
                                                                </a>
                                                                @endpuede
                                                            @else
                                                                @puede('Encuestas de satisfaccion', 'descargar_pdf_encuesta_avanzada')
                                                                <button type="button" class="btn btn-xs btn-icatep-rojo1-out"
                                                                        style="padding:2px 6px;font-size:.8rem;opacity:0.5;cursor:not-allowed;" disabled
                                                                        title="PDF disponible cuando todos respondan">
                                                                    <i class="la la-file-pdf"></i>
                                                                </button>
                                                                @endpuede
                                                                @puede('Encuestas de satisfaccion', 'descargar_pdf_comentarios_avanzada')
                                                                <button type="button" class="btn btn-xs btn-icatep-rojo1-out"
                                                                        style="padding:2px 6px;font-size:.8rem;opacity:0.5;cursor:not-allowed;" disabled
                                                                        title="PDF disponible cuando todos respondan">
                                                                    <i class="la la-file-pdf"></i>
                                                                </button>
                                                                @endpuede
                                                                @puede('Encuestas de satisfaccion', 'descargar_excel_encuesta_avanzada')
                                                                <button type="button" class="btn btn-xs btn-outline-success"
                                                                        style="padding:2px 6px;font-size:.8rem;opacity:0.5;cursor:not-allowed;" disabled
                                                                        title="Excel disponible cuando todos respondan">
                                                                    <i class="la la-file-excel"></i>
                                                                </button>
                                                                @endpuede
                                                            @endif
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                        @endif
                                    </div>
                                </div>

                                {{-- Leyenda secciones --}}
                                <div class="card mt-3">
                                    <div class="card-body py-2">
                                        <small class="text-muted fw-semibold me-3">Secciones:</small>
                                        <span class="badge me-2" style="background:#6f42c1;">Planeación y Organización del Curso (5 preguntas)</span>
                                        <span class="badge me-2" style="background:#fd7e14;">Desempeño del/la Instructor/a (10 preguntas)</span>
                                        <span class="badge me-2" style="background:#20c997;">Material Didáctico (5 preguntas)</span>
                                        <span class="badge me-2" style="background:#dc3545;">Aplicabilidad y Satisfacción General (4 preguntas)</span>
                                        <hr class="my-1">
                                        <small class="text-black">Escala de valores: 1→0% · 2→25% · 3→50% · 4→75% · 5→100%</small>
                                    </div>
                                </div>

                                <!--  fin de la tabla -->
                            </div>

                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- Progress Modal for Export -->
    <div class="modal fade" id="progressModal" tabindex="-1" role="dialog" aria-labelledby="progressModalLabel"
        aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content" style="border-radius: 15px; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.1);">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title" id="progressModalLabel" style="font-weight: 700; color: #333;">Exportando a Excel</h5>
                </div>
                <div class="modal-body text-center pb-4 pt-3">
                    <p id="progressStatus" class="mb-3" style="font-weight: 600; color: #444;">Preparando descarga...</p>
                    <div class="progress" style="height: 12px; border-radius: 10px; background: #e9ecef; margin: 0 20px;">
                        <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success"
                            role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
                            style="width: 0%; border-radius: 10px;">
                        </div>
                    </div>
                    <p id="progressPercent" class="mt-2 mb-0" style="font-size: 0.85rem; color: #6c757d; font-weight: 600;">
                        0%</p>
                </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</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 del detalle --}}
                    <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 alumnos --}}
                        <div class="table-responsive">
                            <table class="table table-sm table-hover align-middle mb-0" id="tablaDetalle">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Alumno/a</th>
                                        <th class="text-center">Fecha</th>
                                        <th class="text-center" style="color:#6f42c1;">Plan y org.</th>
                                        <th class="text-center" style="color:#fd7e14;">Desempeño</th>
                                        <th class="text-center" style="color:#20c997;">Mat. Didact.</th>
                                        <th class="text-center" style="color:#dc3545;">Satisf.</th>
                                        <th class="text-center" style="color:#198754;">Global</th>
                                        <th class="text-center" style="width:40px;">Coment.</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ó &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>

    {{-- Modal de comentarios --}}
    <div class="modal fade" id="modalComentarios" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">Comentarios y Sugerencias</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p id="textoComentarios" style="white-space:pre-wrap; color:#000;"></p>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        // ---- Modal Detalle ----
        const urlDetalleBase = "{{ route('reportes.encuestas.detalle', ['aulaId' => '__ID__']) }}";

        function pctBar(pct, color) {
            if (pct === null || pct === undefined) return '<span class="text-muted">-</span>';
            const clamp = Math.min(100, Math.max(0, pct));
            return `<div style="font-size:.8rem;font-weight:600;color:#${color};">${pct.toFixed(1)}%</div>
                    <div class="progress" style="height:5px;">
                      <div class="progress-bar" style="width:${clamp}%;background:#${color};"></div>
                    </div>`;
        }

        function colorGlobal(pct) {
            if (pct === null) return 'secondary';
            return pct >= 75 ? 'success' : (pct >= 50 ? 'warning' : 'danger');
        }

        $(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="9" class="text-center text-danger">Error al cargar los datos.</td></tr>');
                    $('#detalleContenido').removeClass('d-none');
                });
        });

        function renderDetalle(res) {
            const detalle      = res.detalle;
            const respondieron = detalle.filter(d => d.respondio);
            const pendientes   = detalle.filter(d => !d.respondio);

            const avg = (key) => {
                const vals = respondieron.map(d => d[key]).filter(v => v !== null);
                return vals.length ? (vals.reduce((a, b) => a + b, 0) / vals.length) : null;
            };
            const s = [
                { label: 'S1 Planeación',   key: 'pct_s1',     color: '6f42c1' },
                { label: 'S2 Instructor/a', key: 'pct_s2',     color: 'fd7e14' },
                { label: 'S3 Material',     key: 'pct_s3',     color: '20c997' },
                { label: 'S4 Satisfacción', key: 'pct_s4',     color: 'dc3545' },
                { label: 'Global',          key: 'pct_global', color: '198754' },
            ];

            let summaryHtml = `<div class="col-auto">
                <div class="text-center">
                  <span class="display-6 fw-bold text-success">${respondieron.length}</span> / <span class="fw-bold text-danger">${pendientes.length}</span>
                  <div><small class="text-black">Resp. / Pend.</small></div>
                </div></div>`;
            s.forEach(sec => {
                const v = avg(sec.key);
                summaryHtml += `<div class="col-auto text-center">
                    <div style="font-size:1.1rem;font-weight:700;color:#${sec.color};">${v !== null ? v.toFixed(1) + '%' : '-'}</div>
                    <small class="text-muted">${sec.label}</small></div>`;
            });
            $('#detalleSummary').html(summaryHtml);

            let rows = '';
            detalle.forEach(function (d, i) {
                if (d.respondio) {
                    const cls = colorGlobal(d.pct_global);
                    const comentBtn = d.comentarios
                        ? `<button class="btn btn-xs btn-outline-secondary btn-comentario" style="padding:1px 5px;font-size:.75rem;"
                                 data-comentario="${encodeURIComponent(d.comentarios)}"
                                 title="Ver comentarios"><i class="la la-comment"></i></button>`
                        : '';
                    rows += `<tr class="table-light">
                        <td>${i + 1}</td>
                        <td class="text-black"><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" style="min-width:80px;">${pctBar(d.pct_s1, '6f42c1')}</td>
                        <td class="text-center" style="min-width:80px;">${pctBar(d.pct_s2, 'fd7e14')}</td>
                        <td class="text-center" style="min-width:80px;">${pctBar(d.pct_s3, '20c997')}</td>
                        <td class="text-center" style="min-width:80px;">${pctBar(d.pct_s4, 'dc3545')}</td>
                        <td class="text-center" style="min-width:90px;">
                            <div class="fw-bold">${d.pct_global !== null ? d.pct_global.toFixed(1) + '%' : '-'}</div>
                            <div class="progress" style="height:6px;">
                              <div class="progress-bar bg-${cls}" style="width:${d.pct_global ?? 0}%"></div>
                            </div>
                        </td>
                        <td class="text-center">${comentBtn}</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>
                        <td></td>
                    </tr>`;
                }
            });
            $('#tablaDetalleBody').html(rows);

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

        $(document).on('click', '.btn-comentario', function () {
            const texto = decodeURIComponent($(this).data('comentario'));
            $('#textoComentarios').text(texto);
            const mc = new bootstrap.Modal(document.getElementById('modalComentarios'));
            mc.show();
        });

        // Dropdown Toggle Logic
        $('.filter-toggle-btn').on('click', function (e) {
            e.stopPropagation();
            let $target = $(this).siblings('.filter-dropdown-menu');
            $('.filter-dropdown-menu').not($target).removeClass('show');
            $('.filter-toggle-btn').not(this).removeClass('transform-0.9');
            $(this).toggleClass('transform-0.9');
            $target.toggleClass('show');
        });

        $(document).on('click', function (e) {
            if (!$(e.target).closest('.filter-dropdown-container').length) {
                $('.filter-dropdown-menu').removeClass('show');
                $('.filter-toggle-btn').removeClass('transform-0.9');
            }
        });

        // Update selected text logic
        function updateSelectedText(checkboxClass, textId, defaultText) {
            let selected = [];
            $(`.${checkboxClass}:checked`).each(function () {
                selected.push($(this).data('name'));
            });

            if (selected.length === 0) {
                $(`#${textId}`).text(defaultText);
            } else if (selected.length === 1) {
                $(`#${textId}`).text(selected[0]);
            } else {
                $(`#${textId}`).text(`${selected.length} seleccionados`);
            }
        }



        // Form validation error helper
        function showValidationError(selector) {
            $(selector).fadeIn();
            setTimeout(() => {
                $(selector).fadeOut();
            }, 3000);
        }

        $('.unit-check').on('change', function () {
            updateSelectedText('unit-check', 'selectedUnitsText', 'Unidades');
            if ($('.unit-check:checked').length > 0) $('#errorUnidad').fadeOut();
        });
        $('.month-check').on('change', function () {
            updateSelectedText('month-check', 'selectedMonthsText', 'Meses');
            if ($('.month-check:checked').length > 0) $('#errorMes').fadeOut();
        });
        $('.type-check').on('change', function () {
            updateSelectedText('type-check', 'selectedTypesText', 'Tipo de curso');
            if ($('.type-check:checked').length > 0) $('#errorTipo').fadeOut();
        });

        $('.year-radio').on('change', function () {
            $('#selectedYearText').text($(this).val());
            $('#dropdownYear').removeClass('show');
            $('.filter-toggle-btn').removeClass('transform-0.9');
        });

        // Select All Logic
        $('#btnSelectAllUnits').on('click', function () {
            let allChecked = $('.unit-check:not(:checked)').length === 0;
            $('.unit-check').prop('checked', !allChecked).trigger('change');
        });

        $('#btnSelectAllMonths').on('click', function () {
            let allChecked = $('.month-check:not(:checked)').length === 0;
            $('.month-check').prop('checked', !allChecked).trigger('change');
        });

        $('#btnSelectAllTypes').on('click', function () {
            let allChecked = $('.type-check:not(:checked)').length === 0;
            $('.type-check').prop('checked', !allChecked).trigger('change');
        });

        // Reflejar pre-selección del servidor al cargar
        updateSelectedText('unit-check',  'selectedUnitsText',  'Unidades');
        updateSelectedText('month-check', 'selectedMonthsText', 'Meses');
        updateSelectedText('type-check',  'selectedTypesText',  'Tipo de curso');

        $('#filtroForm').on('submit', function () {
            $(this).find('button[type="submit"]').prop('disabled', true)
                   .html('<i class="fa fa-spinner fa-spin me-2"></i>Filtrando...');
        });

        // Paginación con DataTable
        @if($encuestas->count() > 0)
        $(document).ready(function () {
            $('#tablaEncuestasMes').DataTable({
                pageLength: 10,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'Todos']],
                order: [[ {{ $puedeVerTodasUnidades ? 3 : 2 }}, 'desc']],
                responsive: true,
                deferRender: true,
                processing: true,
                language: {
                    sEmptyTable:     'No hay datos disponibles en la 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)',
                    sLengthMenu:     'Mostrar _MENU_ registros',
                    sLoadingRecords: 'Cargando...',
                    sProcessing:     'Procesando...',
                    sSearch:         'Buscar:',
                    sZeroRecords:    'No se encontraron resultados',
                    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'
                    }
                },
                columnDefs: [
                    { orderable: false, targets: -1 }
                ]
            });
        });
        @endif

        // Excel Export — habilitar si hay resultados
        @if($encuestas->count() > 0)
        $('#exportExcelBtn').prop('disabled', false);
        @endif

        // Excel Export Logic — llama al servidor con los mismos filtros del form,
        // el servidor ejecuta la query completa y devuelve TODOS los resultados filtrados.
        $('#exportExcelBtn').on('click', function () {
            const params = new URLSearchParams($('#filtroForm').serialize());
            window.location.href = "{{ route('reportes.encuestas.mensual.excel') }}" + '?' + params.toString();
        });

        // (legacy block removed)
        if (false) {
            const formData = $('#filtroForm').serializeArray();
            let dataParams = {};
            $.each(formData, function (i, field) {
                if (field.name.includes('[]')) {
                    let cleanName = field.name.replace('[]', '');
                    if (!dataParams[cleanName]) dataParams[cleanName] = [];
                    dataParams[cleanName].push(field.value);
                } else {
                    dataParams[field.name] = field.value;
                }
            });
            dataParams._token = $('input[name="_token"]').val();

            $('#progressModal').modal('show');
            $('#progressBar').css('width', '10%').attr('aria-valuenow', 10);
            $('#progressPercent').text('10%');
            $('#progressStatus').text('Solicitando datos...');

            $.ajax({
                url: "{{ route('reportes.aulas.export') }}",
                type: "POST",
                data: dataParams,
                success: function (response) {
                    $('#progressBar').css('width', '40%').attr('aria-valuenow', 40);
                    $('#progressPercent').text('40%');
                    $('#progressStatus').text('Procesando datos...');

                    const data = response.data;
                    if (!data || data.length === 0) {
                        alert('No hay datos para exportar.');
                        $('#progressModal').modal('hide');
                        return;
                    }

                    // Process into Excel Format
                    const excelData = data.map(row => ({
                        'NUMERO DE AULA': row.clave_registro || '',
                        'UNIDAD': row.unidad || '',
                        'CURSO': row.curso || '',
                        'TIPO CURSO': row.tipo_curso || '',
                        'NOMBRE CURSO': row.nombre_curso || '',
                        'CAMPO DE FORMACION PROFESIONAL': row.cfp || '',
                        'ESPECIALIDAD': row.especialidad || '',
                        'EXPEDIENTE DE INSTRUCTOR': row.expediente || '',
                        'INSTRUCTOR': row.instructor || '',
                        'SEXO': row.sexo || '',
                        'GRADO ESTUDIOS': row.grado_estudios || '',
                        'OFICIO': row.oficio || '',
                        'PROFESION': row.profesion || '',
                        'PROFESION 2': row.profesion2 || '',
                        'NOMBRE LIC/ING': row.lic_ing || '',
                        'LIC/ING 2': row.lic_ing2 || '',
                        'MAESTRIA': row.maestria || '',
                        'MAESTRIA 2': row.maestria2 || '',
                        'DOCTORADO': row.doctorado || '',
                        'POSGRADO': row.posgrado || '',
                        'CONTRATO': row.contrato || '',
                        'HRS. ENE': row.hers_ene || 0,
                        'HRS. FEB': row.hers_feb || 0,
                        'HRS. MAR': row.hers_mar || 0,
                        'HRS. ABR': row.hers_abr || 0,
                        'HRS. MAY': row.hers_may || 0,
                        'HRS. JUN': row.hers_jun || 0,
                        'HRS. JUL': row.hers_jul || 0,
                        'HRS. AGO': row.hers_ago || 0,
                        'HRS. SEP': row.hers_sep || 0,
                        'HRS. OCT': row.hers_oct || 0,
                        'HRS. NOV': row.hers_nov || 0,
                        'HRS. DIC': row.hers_dic || 0,
                        'CLAVE MDN': row.clave_mdn || '',
                        'CONVENIO': row.convenio || '',
                        'PAGO PSC': row.pago_psc || '',
                        'PAGO ALUMNO': row.pago_alumno || '',
                        'IMPARTIDO EN': row.impartido_en || '',
                        'UBICACION': row.ubicacion || '',
                        'INICIA CURSO': row.inicia_curso || '',
                        'TERMINA CURSO': row.termina_curso || '',
                        'HORARIO': row.horario || '',
                        'CAPACITANDOS': row.capacitandos || '',
                        'PERIODO': row.periodo || '',
                        'DURACIÓN': row.horas || 0,
                        'ESTATUS AULA': row.estatus_aula || '',
                        'OBSERVACIONES': row.observaciones || '',
                        'FECHA DE CREACIÓN': row.fecha_creacion || ''
                    }));

                    $('#progressBar').css('width', '70%').attr('aria-valuenow', 70);
                    $('#progressPercent').text('70%');
                    $('#progressStatus').text('Generando archivo Excel...');

                    setTimeout(() => {
                        const ws = XLSX.utils.json_to_sheet(excelData);
                        const wb = XLSX.utils.book_new();
                        XLSX.utils.book_append_sheet(wb, ws, "Aulas");

                        const today = new Date();
                        const filename = 'Reporte_Aulas_' +
                            today.getFullYear() +
                            ('0' + (today.getMonth() + 1)).slice(-2) +
                            ('0' + today.getDate()).slice(-2) + '.xlsx';

                        XLSX.writeFile(wb, filename);

                        $('#progressBar').css('width', '100%').attr('aria-valuenow', 100);
                        $('#progressPercent').text('100%');
                        $('#progressStatus').text('¡Descarga completa!');

                        setTimeout(() => {
                            $('#progressModal').modal('hide');
                        }, 800);
                    }, 500);
                },
                error: function () {
                    alert('Error al exportar los datos.');
                    $('#progressModal').modal('hide');
                }
            });
        } // end if (false)
    </script>
@endpush