@extends('layout.template')
@section('title', 'SICCAP ICATEP | Reporte Capacitandos en Aulas')
@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 Capacitandos en Aulas</h3>
                    <form id="filtroForm">
                        @csrf
                        <div class="d-flex flex-wrap gap-4 mb-2 mt-3 justify-content-between">
                            <div class="d-flex flex-wrap gap-4">

                                <div class="filter-dropdown-container">
                                    <label class="text-dark mb-1 d-block"
                                        style="font-size: 0.9rem; margin-bottom: 2px !important;">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">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="unidadcap[]" class="unit-check me-2"
                                                                value="{{ $un->uni_identificador }}"
                                                                data-name="{{ $un->uni_nombre_corto }}">
                                                            <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>

                                <div class="filter-dropdown-container">
                                    <label class="text-dark mb-1 d-block"
                                        style="font-size: 0.9rem; margin-bottom: 2px !important;">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">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;" id="btnSelectAllTypes"
                                                    style="font-size: 0.7rem;">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="tipo[]" class="type-check me-2"
                                                                value="{{ $tipo->tip_id }}" data-name="{{ $tipo->tip_nombre }}">
                                                            <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;">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">Seleccionar Meses</h5>
                                            <div class="d-flex justify-content-end ">
                                                <button type="button" class="btn btn-xxs btn-outline-light"
                                                    style="background: #fefefe;" id="btnSelectAllMonths"
                                                    style="font-size: 0.7rem;">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="mes[]" class="month-check me-2"
                                                                value="{{ $mes->mes_id }}" data-name="{{ $mes->mes_nombre }}">
                                                            <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;">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">{{ date('Y') }}</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">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 }}" {{ $anio == date('Y') ? 'checked' : '' }}>
                                                            <span>{{ $anio }}</span>
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="filter-dropdown-container">
                                <label class="text-dark mb-1 d-block"
                                    style="font-size: 0.9rem; margin-bottom: 2px !important;">&nbsp;</label>
                                <button type="submit" class="btn btn-primary shadow-sm"
                                    style="border-radius: 8px; padding: 0.6rem 1.5rem; font-weight: 600;">
                                    <i class="fa fa-search me-2"></i>Buscar
                                </button>
                            </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">
                                <h4 class="card-title mb-0" style="font-weight: 700; color: #2C3E50;">Resultados</h4>
                                <button type="button" id="exportExcelBtn" class="btn btn-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>
                            <div class="w-100">
                                <table id="tablaCapacitandosAulas"
                                    class="table table-striped responsive w-100 display dataTable no-footer">
                                    <thead class="custom-thead">
                                        <tr>
                                            <th>NUMERO DE AULA</th>
                                            <th>UNIDAD</th>
                                            <th>CURSO</th>
                                            <th>TIPO CURSO</th>
                                            <th>NOMBRE CURSO</th>
                                            <th>CLAVE CURSO</th>
                                            <th>INSTRUCTOR</th>
                                            <th>INICIA CURSO</th>
                                            <th>TERMINA CURSO</th>
                                            <th>NO. CONTROL</th>
                                            <th>CAPACITANDO</th>
                                            <th>CURP</th>
                                            <th>TELEFONO</th>
                                            <th>EMAIL</th>
                                            <th>IMPORTE</th>
                                            <th>POBLACIÓN INDÍGENA</th>
                                            <th>ESTATUS MIGRATORIO</th>
                                            <th>DIRECCION</th>
                                            <th>MUNICIPIO</th>
                                            <th>ESTADO</th>
                                            <th>HORAS</th>
                                            <th>CONVENIO</th>
                                            <th>ESTATUS</th>
                                            <th>TOTAL ALUMNOS</th>
                                            <th>MODALIDAD</th>
                                            <th>UBICACION</th>
                                            <th>DOMICILIO</th>
                                            <th>HORARIO</th>
                                            <th>BECADO</th>
                                            <th>EDO. CIVIL</th>
                                            <th>POB. VULNERABLE</th>
                                            <th>DISCAPACIDAD</th>
                                            <th>MEDIO ENTERO</th>
                                            <th>SEXO</th>
                                            <th>GRADO ESTUDIOS</th>
                                            <th>EDAD</th>
                                            <th>ACREDITADO</th>
                                            <th>FOLIO DOC.</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </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>
    <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>
@endsection

@push('scripts')
    <!-- SheetJS for Excel Export -->
    <script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script>

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

        // DataTable Logic
        let isInitialized = false;
        let table = $('#tablaCapacitandosAulas').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('reportes.capacitandos.data') }}",
                type: "POST",
                data: function (d) {
                    if (!isInitialized) {
                        d.initial = 'true';
                    }
                    var formData = $('#filtroForm').serializeArray();
                    $.each(formData, function (i, field) {
                        if (field.name.includes('[]')) {
                            let cleanName = field.name.replace('[]', '');
                            if (!d[cleanName]) d[cleanName] = [];
                            d[cleanName].push(field.value);
                        } else {
                            d[field.name] = field.value;
                        }
                    });
                    d._token = $('input[name="_token"]').val();
                }
            },
            columns: [
                {
                    data: 'aul_clave_registro'
                },
                {
                    data: 'nombre_unidad'
                },
                {
                    data: 'curso'
                },
                {
                    data: 'tipo_curso'
                },
                {
                    data: 'aul_curso_nombre'
                },
                {
                    data: 'cr_clave'
                },
                {
                    data: 'aul_instructor_nombre'
                },
                {
                    data: 'aul_fecha_inicia'
                },
                {
                    data: 'aul_fecha_termina'
                },
                {
                    data: 'al_num_control'
                },
                {
                    data: 'capacitando'
                },
                {
                    data: 'al_curp'
                },
                {
                    data: 'al_celular'
                },
                {
                    data: 'al_email'
                },
                {
                    data: 'aa_importe'
                },
                {
                    data: 'alu_indigena'
                },
                {
                    data: 'alu_extranjero'
                },
                {
                    data: 'direccion'
                },
                {
                    data: 'al_municipio'
                },
                {
                    data: 'esmex_nombre'
                },
                {
                    data: 'aul_horas_totales'
                },
                {
                    data: 'aul_convenio_clave'
                },
                {
                    data: 'estatus_aula'
                },
                {
                    data: 'aul_capacitandos'
                },
                {
                    data: 'aul_modalidad'
                },
                {
                    data: 'aul_ubicacion'
                },
                {
                    data: 'aul_domicilio'
                },
                {
                    data: 'aul_dias_imparte'
                },
                {
                    data: 'aa_becado'
                },
                {
                    data: 'al_edo_civ'
                },
                {
                    data: 'al_pob_vul'
                },
                {
                    data: 'al_discapacidad'
                },
                {
                    data: 'aa_como_se_entero'
                },
                {
                    data: 'al_sexo'
                },
                {
                    data: 'al_grado_estudios'
                },
                {
                    data: 'edad'
                },
                {
                    data: 'aa_acreditado'
                },
                {
                    data: 'aa_folio_diploma'
                }
            ],
            language: {
                url: "//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json",
                infoFiltered: "",
                emptyTable: `
                    <div class="empty-state-container">
                        <div class="empty-state-icon">
                            <i class="fa fa-folder-open"></i>
                        </div>
                        <h4 class="empty-state-title">Sin resultados</h4>
                        <p class="empty-state-text">No encontramos datos con los filtros seleccionados. Intente ajustar su búsqueda.</p>
                    </div>
                `
            },
            preDrawCallback: function () {
                // Start Top Loader
                $('#top-loader').css('width', '30%');
            },
            drawCallback: function (settings) {
                // Finish Top Loader
                $('#top-loader').css('width', '100%');
                setTimeout(() => {
                    $('#top-loader').css('width', '0%');
                }, 400);

                // Enable/Disable Excel button based on data
                if (settings.aoData.length > 0) {
                    $('#exportExcelBtn').prop('disabled', false);

                    // Update KPI Cards
                    const totalRecords = settings.json ? settings.json.recordsTotal : 0;
                    $('#stat-total-aulas').text(totalRecords);

                    // Use uniqueUnitsCount from backend
                    const uniqueUnits = settings.json ? settings.json.uniqueUnitsCount : 0;
                    $('#stat-total-unidades').text(uniqueUnits);

                    $('#kpi-row').fadeIn();
                    $('.kpi-card').addClass('kpi-pulse');
                    setTimeout(() => $('.kpi-card').removeClass('kpi-pulse'), 1500);
                } else {
                    $('#exportExcelBtn').prop('disabled', true);
                    if (isInitialized) $('#kpi-row').fadeOut();
                }

                isInitialized = true;

                // Reset search button state
                const searchBtn = $('#filtroForm button[type="submit"]');
                searchBtn.prop('disabled', false).html('<i class="fa fa-search me-2"></i>Buscar');
            }
        });

        $('#filtroForm').on('submit', function (e) {
            e.preventDefault();

            let isValid = true;

            if ($('.unit-check:checked').length === 0) {
                showValidationError('#errorUnidad');
                isValid = false;
            }
            if ($('.month-check:checked').length === 0) {
                showValidationError('#errorMes');
                isValid = false;
            }
            if ($('.type-check:checked').length === 0) {
                showValidationError('#errorTipo');
                isValid = false;
            }

            if (!isValid) return false;

            // Loading state
            $(this).find('button[type="submit"]').prop('disabled', true).html('<i class="fa fa-spinner fa-spin me-2"></i>Buscando...');

            isInitialized = true;
            table.ajax.reload();
        });

        // Excel Export Logic
        $('#exportExcelBtn').on('click', function () {
            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.capacitandos.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.aul_clave_registro || '',
                        'UNIDAD': row.nombre_unidad || '',
                        'CURSO': row.curso || '',
                        'TIPO CURSO': row.tipo_curso || '',
                        'NOMBRE CURSO': row.aul_curso_nombre || '',
                        'CLAVE CURSO': row.cr_clave || '',
                        'INSTRUCTOR': row.aul_instructor_nombre || '',
                        'INICIA CURSO': row.aul_fecha_inicia || '',
                        'TERMINA CURSO': row.aul_fecha_termina || '',
                        'NO. CONTROL': row.al_num_control || '',
                        'CAPACITANDO': row.capacitando || '',
                        'CURP': row.al_curp || '',
                        'TELEFONO': row.al_celular || '',
                        'EMAIL': row.al_email || '',
                        'IMPORTE': row.aa_importe || '',
                        'POBLACIÓN INDÍGENA': row.alu_indigena || '',
                        'ESTATUS MIGRATORIO': row.alu_extranjero || '',
                        'DIRECCION': row.direccion || '',
                        'MUNICIPIO': row.al_municipio || '',
                        'ESTADO': row.esmex_nombre || '',
                        'HORAS': row.aul_horas_totales || '',
                        'CONVENIO': row.aul_convenio_clave || '',
                        'ESTATUS': row.estatus_aula || '',
                        'TOTAL ALUMNOS': row.aul_capacitandos || '',
                        'MODALIDAD': row.aul_modalidad || '',
                        'UBICACION': row.aul_ubicacion || '',
                        'DOMICILIO': row.aul_domicilio || '',
                        'HORARIO': row.aul_dias_imparte || '',
                        'BECADO': row.aa_becado || '',
                        'EDO. CIVIL': row.al_edo_civ || '',
                        'POB. VULNERABLE': row.al_pob_vul || '',
                        'DISCAPACIDAD': row.al_discapacidad || '',
                        'MEDIO ENTERO': row.aa_como_se_entero || '',
                        'SEXO': row.al_sexo || '',
                        'GRADO ESTUDIOS': row.al_grado_estudios || '',
                        'EDAD': row.edad || '',
                        'ACREDITADO': row.aa_acreditado || '',
                        'FOLIO DOC.': row.aa_folio_diploma || ''
                    }));

                    $('#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, "Capacitandos en Aulas");

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

                        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');
                }
            });
        });
    </script>
@endpush