@extends('layout.template')
@section('title', 'SICCAP ICATEP | Reporte de Encuestas')
@push('scripts')
<style>
    /* Botones de paginación en #tablaEncuestas — reemplaza --primary por --cui-icatep-rojo1 */
    #tablaEncuestas_wrapper .dataTables_paginate .paginate_button {
        color: var(--cui-icatep-rojo1) !important;
    }

    /* Botón activo (página actual) */
    #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;
    }

    /* Hover sobre cualquier botón de página */
    #tablaEncuestas_wrapper .dataTables_paginate .paginate_button:hover {
        background: var(--cui-icatep-rojo1) !important;
        border-color: var(--cui-icatep-rojo1) !important;
        color: #ffffff !important;
    }

    /* Botones "Anterior" y "Siguiente" */
    #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-chart-bar me-2"></i>Reporte de Encuestas de Satisfacción</h3>
                <p class="text-muted mb-0">Promedios por sección calculados sobre las encuestas completadas por aula.</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('reportesEncuestas') }}" class="row g-2 align-items-end">
                    @puede('Encuestas de satisfaccion', 'ver_todas_unidades_encuesta')
                    <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_corto }}
                                </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', '2026') == $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('reportesEncuestas') }}" class="btn btn-icatep-rojo1-out btn-sm w-100">
                            <i class="la la-times"></i> Limpiar
                        </a>
                    </div>
                </form>
            </div>
        </div>

        {{-- Tarjetas resumen general --}}
        @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, 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, 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, 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, 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, 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" style="margin-top: 16px;">
            <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="tablaEncuestas" style="font-size:.82rem;">
                        <thead class="table-light">
                            <tr>
                                <th nowrap style="width:100px;">Número_A</th>
                                @puede('Encuestas de satisfaccion', 'ver_todas_unidades_encuesta')
                                <th style="width:70px;">Unidad</th>
                                @endpuede
                                <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);
                            @endphp
                            <tr>
                                <td style="width:100px;"><small class="text-black">{{ $row->aul_clave_registro }}</small></td>
                                @puede('Encuestas de satisfaccion', 'ver_todas_unidades_encuesta')
                                <td><small class="text-black">{{ $row->unidad }}</small></td>
                                @endpuede
                                <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">{{ \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 }} pendientes</small>
                                    @endif
                                </td>
                                {{-- S1 --}}
                                <td class="text-center" style="width:68px;">
                                    @include('application.Alumnos._barra_pct', ['pct' => $row->pct_s1, 'color' => '6f42c1'])
                                </td>
                                {{-- S2 --}}
                                <td class="text-center" style="width:68px;">
                                    @include('application.Alumnos._barra_pct', ['pct' => $row->pct_s2, 'color' => 'fd7e14'])
                                </td>
                                {{-- S3 --}}
                                <td class="text-center" style="width:68px;">
                                    @include('application.Alumnos._barra_pct', ['pct' => $row->pct_s3, 'color' => '20c997'])
                                </td>
                                {{-- S4 --}}
                                <td class="text-center" style="width:68px;">
                                    @include('application.Alumnos._barra_pct', ['pct' => $row->pct_s4, 'color' => 'dc3545'])
                                </td>
                                {{-- Global --}}
                                <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>
                                {{-- Botones de acciones --}}
                                <td class="text-center" style="width:110px;">
                                    @puede('Encuestas de satisfaccion', 'ver_detalle_encuesta')
                                    <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')
                                    <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')
                                    <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')
                                    <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')
                                    <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')
                                    <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 reporte disponible con encuestas completas">
                                        <i class="la la-file-pdf"></i>
                                    </button>
                                    @endpuede
                                    @puede('Encuestas de satisfaccion', 'descargar_excel_encuesta')
                                    <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>

    </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>
    const urlDetalleBase = "{{ route('reportes.encuestas.detalle', ['aulaId' => '__ID__']) }}";

    // ---- Helpers ----
    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');
    }

    // ---- 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="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);

        // Resumen
        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);

        // Filas de la tabla
        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');
    }

    // ---- Botón comentarios ----
    $(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();
    });

    // DataTable simple
    $(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 } // deshabilitar orden en columna de botón
                ]
            });
        }
    });
</script>
@endpush