@extends('layout.template')
@section('title', 'ICAT | Reporte Facturas y XML Capacitandos')
@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">Descarga Facturas de Capacitandos</h3>
                    <form id="filtroForm">
                        @csrf
                        <div class="d-flex flex-wrap gap-3 mb-2 mt-3 align-items-end w-100">

                            <!-- Unidades -->
                            <div class="filter-dropdown-container" style="flex: 0 0 auto;">
                                <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=" ri-building-line 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="unidades[]" class="unit-check me-2"
                                                            value="{{ $un->identificador }}"
                                                            data-name="{{ $un->nombre_corto }}">
                                                        <span>{{ $un->nombre_corto }}</span>
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Meses (Visible) -->
                            <div class="filter-dropdown-container" style="flex: 0 0 auto;">
                                <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: 180px; border-radius: 8px; padding: 0.6rem 1rem; border: 1px solid #dddddd; background: #eeeeee;">
                                    <span id="selectedMonthsText" class="text-dark">Meses</span>
                                    <i class=" ri-calendar-line 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; 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->numero ?? $mes->id }}"
                                                            data-name="{{ $mes->nombre }}">
                                                        <span>{{ $mes->nombre }}</span>
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Clave de registro - Curso (Visible con Buscador, Ocupa todo el espacio restante) -->
                            <div class="filter-dropdown-container flex-grow-1" style="flex: 1 1 320px; min-width: 280px;">
                                <label class="text-dark mb-1 d-block"
                                    style="font-size: 0.9rem; margin-bottom: 2px !important;">Clave de registro - Curso:</label>
                                <button type="button" id="btnSelectedCourses"
                                    class="btn btn-dark d-flex align-items-center justify-content-between shadow-sm filter-toggle-btn w-100"
                                    style="border-radius: 8px; padding: 0.6rem 1rem; border: 1px solid #dddddd; background: #eeeeee;">
                                    <span id="selectedCoursesText" class="text-dark text-truncate text-start flex-grow-1 me-2">Todas  claves / cursos</span>
                                    <i class=" ri-book-2-line ms-2 text-dark flex-shrink-0"></i>
                                </button>

                                <div class="filter-dropdown-menu shadow-lg w-100" id="dropdownCursos" style="min-width: 100%; max-width: 100%;">
                                    <div class="filter-dropdown-header">
                                        <h5 class="text-dark mb-0">Clave de Registro - Curso</h5>
                                        <div class="d-flex gap-1">
                                            <button type="button" class="btn btn-xxs btn-outline-light"
                                                style="background: #fefefe; font-size: 0.7rem;" id="btnSelectAllCourses">Todos</button>
                                            <button type="button" class="btn btn-xxs btn-outline-danger"
                                                style="font-size: 0.7rem;" id="btnClearCourses">Limpiar</button>
                                        </div>
                                    </div>
                                    <div class="px-3 pt-2 pb-2 border-bottom">
                                        <div class="input-group input-group-sm">
                                            <span class="input-group-text bg-white border-end-0" style="border-radius: 6px 0 0 6px;">
                                                <i class=" ri-search-line text-muted"></i>
                                            </span>
                                            <input type="text" id="searchCourseInput" class="form-control border-start-0"
                                                placeholder="Buscar por clave de registro o curso..." style="border-radius: 0 6px 6px 0;">
                                        </div>
                                    </div>
                                    <div class="filter-dropdown-body" style="max-height: 280px; overflow-y: auto;">
                                        <div class="row compact-row" id="coursesList">
                                            @if(isset($cursos) && count($cursos) > 0)
                                                @foreach ($cursos as $c)
                                                    @php
                                                        $cClave = is_object($c) ? ($c->clave_registro ?? '') : $c;
                                                        $cNombre = is_object($c) ? ($c->curso_nombre ?? '') : $c;
                                                        $cLabel = $cClave ? ($cClave . ' - ' . $cNombre) : $cNombre;
                                                    @endphp
                                                    <div class="col-12 course-item">
                                                        <label class="unit-checkbox-label d-flex align-items-center py-1">
                                                            <input type="checkbox" name="cursos[]" class="course-check me-2"
                                                                value="{{ $cClave }}"
                                                                data-name="{{ $cLabel }}">
                                                            <span class="course-name-text text-truncate" title="{{ $cLabel }}">
                                                                <strong class="text-primary me-1">{{ $cClave }}</strong> - {{ $cNombre }}
                                                            </span>
                                                        </label>
                                                    </div>
                                                @endforeach
                                            @else
                                                <div class="col-12 text-center text-muted py-3">
                                                    <i class=" ri-information-line me-1 text-primary"></i> <small>Selecciona unidad y mes para cargar los cursos (2026)</small>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Tipo de curso (Oculto / Fijo para reutilizar a futuro) -->
                            <div class="filter-dropdown-container d-none">
                                <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=" ri-list-check 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="tipos[]" class="type-check me-2"
                                                            value="{{ $tipo->id }}"
                                                            data-name="{{ $tipo->nombre }}" checked>
                                                        <span>{{ $tipo->nombre }}</span>
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                <div id="errorTipo" class="text-danger filter-error-msg">
                                    <i class=" ri-error-warning-line me-1"></i>Seleccionar tipo
                                </div>
                            </div>

                            <!-- Año (Oculto / Siempre 2026) -->
                            <div class="filter-dropdown-container d-none">
                                <input type="radio" name="anio" class="year-radio" value="2026" checked>
                            </div>

                            <!-- Botón Buscar -->
                            <div class="filter-dropdown-container" style="flex: 0 0 auto;">
                                <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=" ri-search-line 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=" ri-arrow-left-line"></i></span>
                            Regresar
                        </a>
                    </ol>
                </div>
            </div>

            <!-- Tabla de Resultados -->
            <div class="row">
                <div class="col-12">
                    <div class="card shadow-sm"
                        style="border-radius: 12px; border: none; position: relative; overflow: hidden;">
                        <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 Reporte de Facturas de Capacitandos</h4>
                                <div class="d-flex gap-2">
                                    <!-- Botón Descargar ZIP -->
                                    <form method="POST" action="{{ route('reportes.facturasCapacitandos.zip') }}" id="formDescargarZip">
                                        @csrf
                                        <input type="hidden" name="unidades" id="zip_unidades">
                                        <input type="hidden" name="meses" id="zip_meses">
                                        <input type="hidden" name="anio" id="zip_anio">
                                        <input type="hidden" name="tipos" id="zip_tipos">
                                        <input type="hidden" name="cursos" id="zip_cursos">
                                        <button type="button" class="btn btn-secondary shadow-sm" id="btnDescargarZip" disabled
                                            style="border-radius: 8px; font-weight: 600; background-color: #2C3E50; border-color: #2C3E50;">
                                            <i class=" ri-download-2-line me-2"></i>Descargar ZIP
                                        </button>
                                    </form>

                                    <!-- Botón Exportar a Excel -->
                                    <button type="button" id="exportExcelBtn" class="btn btn-success shadow-sm" disabled
                                        style="border-radius: 8px; font-weight: 600;">
                                        <i class=" ri-file-excel-2-line me-2"></i>Exportar a Excel
                                    </button>
                                </div>
                            </div>

                            <div class="w-100 table-responsive">
                                <table id="tablaFacturasCapacitandos"
                                    class="table table-striped responsive w-100 display dataTable no-footer">
                                    <thead class="custom-thead">
                                        <tr>
                                            <th>#</th>
                                            <th>Clave Registro</th>
                                            <th>Unidad</th>
                                            <th>Tipo Curso</th>
                                            <th>Nombre Curso</th>
                                            <th>No. Control</th>
                                            <th>CURP</th>
                                            <th>Nombre Capacitando</th>
                                            <th>Estatus Comprobante</th>
                                            <th>Folio Factura</th>
                                            <th>Folio Fiscal (UUID)</th>
                                            <th>Fecha Factura</th>
                                            <th>RFC Emisor</th>
                                            <th>Nombre Emisor</th>
                                            <th>RFC Receptor</th>
                                            <th>Nombre Receptor</th>
                                            <th>Total</th>
                                            <th>Guía CIE</th>
                                            <th>Fecha Depósito</th>
                                            <th>Inicia</th>
                                            <th>Termina</th>
                                            <th>Estatus Aula</th>
                                            <th>Observaciones</th>
                                            <th>Documentos</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de Progreso para Exportar Excel -->
    <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 Visor PDF de Factura -->
    <div class="modal fade" id="modalVisorPdf" tabindex="-1" role="dialog" aria-labelledby="modalVisorPdfLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content" style="border-radius: 12px; overflow: hidden; border: none;">
                <div class="modal-header bg-dark text-white py-3">
                    <h5 class="modal-title text-white" id="modalVisorPdfLabel">
                        <i class=" ri-file-pdf-2-line me-2 text-danger"></i>Visor de Factura / Comprobante PDF
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-0" style="height: 80vh;">
                    <iframe id="iframeVisorPdf" src="" style="width: 100%; height: 100%; border: none;"></iframe>
                </div>
                <div class="modal-footer bg-light py-2">
                    <a id="btnDescargarPdfDirecto" href="#" target="_blank" download class="btn btn-sm btn-primary">
                        <i class=" ri-download-2-line me-1"></i>Abrir en pestaña nueva
                    </a>
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Visor XML -->
    <div class="modal fade" id="modalVisorXml" tabindex="-1" role="dialog" aria-labelledby="modalVisorXmlLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" role="document">
            <div class="modal-content" style="border-radius: 12px; border: none;">
                <div class="modal-header bg-dark text-white py-3">
                    <h5 class="modal-title text-white" id="modalVisorXmlLabel">
                        <i class=" ri-code-line me-2 text-primary"></i>Contenido del Comprobante Fiscal Digital (XML)
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-3">
                    <div id="xmlLoadingState" class="text-center py-4 d-none">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Cargando...</span>
                        </div>
                        <p class="mt-2 text-muted">Cargando archivo XML...</p>
                    </div>
                    <pre id="visorXmlContenido" style="background:#f8f9fa; padding:15px; border-radius:8px; max-height: 60vh; font-size:0.85rem; overflow-x: auto; color: #2C3E50; border: 1px solid #e9ecef;"></pre>
                </div>
                <div class="modal-footer bg-light py-2">
                    <a id="visorXmlDownloadBtn" href="#" download class="btn btn-sm btn-primary">
                        <i class=" ri-download-2-line me-1"></i>Descargar XML
                    </a>
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                </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;
            white-space: nowrap;
        }

        #tablaFacturasCapacitandos tbody td {
            font-weight: 600;
            color: #4a4a4a;
            vertical-align: middle;
            font-size: 0.85rem;
            white-space: nowrap;
        }

        .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-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;
        }

        .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;
        }

        .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);
        }

        .badge-subtle-success {
            background-color: #d1e7dd;
            color: #0f5132;
        }
        .badge-subtle-warning {
            background-color: #fff3cd;
            color: #664d03;
        }
        .badge-subtle-danger {
            background-color: #f8d7da;
            color: #842029;
        }
        .badge-subtle-secondary {
            background-color: #e2e3e5;
            color: #41464b;
        }

        @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')
    <script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script>
    <script>
        const baseStorage = "{{ asset('') }}";

        function agregarTimestampUrl(url) {
            if (!url) return url;
            const limpia = url.replace(/([?&])_ts=\d+(&|$)/, '$1').replace(/[?&]$/, '');
            const separador = limpia.includes('?') ? '&' : '?';
            return `${limpia}${separador}_ts=${Date.now()}`;
        }

        function construirUrlDocumento(ruta) {
            if (!ruta) return '';
            const fullSrc = ruta.startsWith('http') ? ruta : baseStorage.replace(/\/+$/, '') + '/' + ruta.replace(/^\/+/, '');
            return agregarTimestampUrl(fullSrc);
        }

        $('#tablaFacturasCapacitandos').on('draw.dt', function() {
            $('#tablaFacturasCapacitandos').DataTable().columns.adjust();
        });

        $('.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');
            }
        });

        $('.filter-dropdown-menu').on('click', function(e) {
            e.stopPropagation();
        });

        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`);
        }

        function showValidationError(selector) {
            $(selector).fadeIn();
            setTimeout(() => $(selector).fadeOut(), 3000);
        }

        function cargarCursosDinamicos() {
            let unidades = [];
            let meses = [];
            $('.unit-check:checked').each(function() {
                unidades.push($(this).val());
            });
            $('.month-check:checked').each(function() {
                meses.push($(this).val());
            });

            if (unidades.length === 0 || meses.length === 0) {
                $('#coursesList').html('<div class="col-12 text-center text-muted py-3"><i class=" ri-information-line me-1 text-primary"></i> <small>Selecciona unidad y mes para cargar los cursos (2026)</small></div>');
                $('#selectedCoursesText').text('Todas  claves / cursos');
                return;
            }

            $('#coursesList').html('<div class="col-12 text-center text-muted py-3"><i class=" ri-loader-4-line ri-spin me-1 text-primary"></i> <small>Cargando cursos del 2026...</small></div>');

            $.ajax({
                url: "{{ route('reportes.facturasCapacitandos.cursos') }}",
                type: "POST",
                data: {
                    _token: $('input[name="_token"]').val(),
                    unidades: unidades,
                    meses: meses
                },
                success: function(response) {
                    if (response.success && response.data && response.data.length > 0) {
                        let html = '';
                        response.data.forEach(function(c) {
                            let clave = c.clave_registro || '';
                            let nombre = c.curso_nombre || '';
                            let label = clave ? (clave + ' - ' + nombre) : nombre;
                            html += `
                                <div class="col-12 course-item">
                                    <label class="unit-checkbox-label d-flex align-items-center py-1">
                                        <input type="checkbox" name="cursos[]" class="course-check me-2"
                                            value="${clave}"
                                            data-name="${label}">
                                        <span class="course-name-text text-truncate" title="${label}">
                                            <strong class="text-primary me-1">${clave}</strong> - ${nombre}
                                        </span>
                                    </label>
                                </div>
                            `;
                        });
                        $('#coursesList').html(html);
                    } else {
                        $('#coursesList').html('<div class="col-12 text-center text-muted py-2"><small>No se encontraron cursos para  selección en 2026</small></div>');
                    }
                    updateSelectedText('course-check', 'selectedCoursesText', 'Todas  claves / cursos');
                },
                error: function() {
                    $('#coursesList').html('<div class="col-12 text-center text-danger py-2"><small>Error al cargar cursos</small></div>');
                }
            });
        }

        let debounceTimer;
        function debounceCursos() {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(cargarCursosDinamicos, 300);
        }

        $('.unit-check').on('change', function() {
            updateSelectedText('unit-check', 'selectedUnitsText', 'Unidades');
            if ($('.unit-check:checked').length > 0) $('#errorUnidad').fadeOut();
            debounceCursos();
        });
        $('.month-check').on('change', function() {
            updateSelectedText('month-check', 'selectedMonthsText', 'Meses');
            if ($('.month-check:checked').length > 0) $('#errorMes').fadeOut();
            debounceCursos();
        });
        $('.type-check').on('change', function() {
            updateSelectedText('type-check', 'selectedTypesText', 'Tipo de curso');
            if ($('.type-check:checked').length > 0) $('#errorTipo').fadeOut();
        });
        $(document).on('change', '.course-check', function() {
            updateSelectedText('course-check', 'selectedCoursesText', 'Todas  claves / cursos');
        });
        $('.year-radio').on('change', function() {
            $('#selectedYearText').text($(this).val());
            $('#dropdownYear').removeClass('show');
            $('.filter-toggle-btn').removeClass('transform-0.9');
        });

        $('#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');
        });
        $('#btnSelectAllCourses').on('click', function() {
            $('#coursesList .course-item:visible .course-check').prop('checked', true).trigger('change');
        });
        $('#btnClearCourses').on('click', function() {
            $('.course-check').prop('checked', false).trigger('change');
        });

        $('#searchCourseInput').on('keyup input', function() {
            let term = $(this).val().toLowerCase().trim();
            $('#coursesList .course-item').each(function() {
                let name = $(this).find('.course-name-text').text().toLowerCase();
                if (term === '' || name.includes(term)) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });

        let isInitialized = false;
        let table = $('#tablaFacturasCapacitandos').DataTable({
            responsive: false,
            autoWidth: false,
            processing: true,
            serverSide: true,
            pageLength: 10,
            lengthMenu: [
                [10, 25, 50, 100],
                [10, 25, 50, 100]
            ],
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json',
                processing: '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Cargando...</span></div>'
            },
            ajax: {
                url: "{{ route('reportes.facturasCapacitandos.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();
                },
                beforeSend: function() {
                    $('#top-loader').css('width', '50%');
                },
                complete: function() {
                    $('#top-loader').css('width', '100%');
                    setTimeout(() => $('#top-loader').css('width', '0%'), 400);
                },
                dataSrc: function(json) {
                    if (json.data && json.data.length > 0) {
                        $('#exportExcelBtn').prop('disabled', false);
                        $('#btnDescargarZip').prop('disabled', false);
                    } else {
                        $('#exportExcelBtn').prop('disabled', true);
                        $('#btnDescargarZip').prop('disabled', true);
                    }
                    return json.data;
                }
            },
            columns: [
                {
                    data: null,
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                { data: 'clave_aula', defaultContent: '-' },
                { data: 'unidad', defaultContent: '-' },
                { data: 'tipo_curso', defaultContent: '-' },
                { data: 'nombre_curso', defaultContent: '-' },
                { data: 'numero_control', defaultContent: '-' },
                { data: 'curp', defaultContent: '-' },
                {
                    data: 'alumno',
                    defaultContent: '-',
                    render: function(data, type, row) {
                        return data || row.nombre_capacitando || '-';
                    }
                },
                {
                    data: 'estatus_comprobante',
                    defaultContent: '-',
                    render: function(data, type, row) {
                        return `<span class="badge badge-${row.estatus_clase || 'secondary'}">${data || '-'}</span>`;
                    }
                },
                {
                    data: 'folio',
                    defaultContent: '-',
                    render: function(data, type, row) {
                        return data || row.folio_factura || '-';
                    }
                },
                {
                    data: 'uuid',
                    defaultContent: '-',
                    render: function(data) {
                        if (!data || data === '-') return '-';
                        return `<span class="badge-uuid" title="${data}">${data}</span>`;
                    }
                },
                { data: 'fecha_factura', defaultContent: '-' },
                { data: 'rfc_emisor', defaultContent: '-' },
                {
                    data: 'emisor',
                    defaultContent: '-',
                    render: function(data) {
                        if (!data || data === '-') return '-';
                        return `<span title="${data}">${data.length > 20 ? data.substring(0, 20) + '...' : data}</span>`;
                    }
                },
                { data: 'rfc_receptor', defaultContent: '-' },
                {
                    data: 'receptor',
                    defaultContent: '-',
                    render: function(data) {
                        if (!data || data === '-') return '-';
                        return `<span title="${data}">${data.length > 20 ? data.substring(0, 20) + '...' : data}</span>`;
                    }
                },
                {
                    data: 'total',
                    defaultContent: '-',
                    className: 'text-end font-weight-bold'
                },
                { data: 'cie', defaultContent: '-' },
                { data: 'fecha_deposito', defaultContent: '-' },
                { data: 'inicia', defaultContent: '-' },
                { data: 'termina', defaultContent: '-' },
                { data: 'estatus_aula', defaultContent: '-' },
                {
                    data: 'observaciones',
                    defaultContent: '-',
                    render: function(data) {
                        if (!data || data === '-') return '-';
                        return `<span title="${data}">${data.length > 25 ? data.substring(0, 25) + '...' : data}</span>`;
                    }
                },
                {
                    data: null,
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        let html = '<div class="d-flex gap-1">';
                        if (row.factura_pdf) {
                            html += `<button type="button" class="btn btn-xxs btn-outline-danger btn-ver-pdf" data-src="${row.factura_pdf}" title="Ver Factura PDF"><i class=" ri-file-pdf-2-line"></i> PDF</button>`;
                        }
                        if (row.factura_xml) {
                            html += `<button type="button" class="btn btn-xxs btn-outline-primary btn-ver-xml" data-xml="${row.factura_xml}" title="Ver XML"><i class=" ri-code-box-line"></i> XML</button>`;
                        }
                        if (!row.factura_pdf && !row.factura_xml) {
                            html += '<span class="badge bg-light text-muted" style="font-size:0.7rem;">Sin archivos</span>';
                        }
                        html += '</div>';
                        return html;
                    }
                }
            ],
            order: [[1, 'asc']]
        });

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

            $('.filter-dropdown-menu').removeClass('show');
            $('.filter-toggle-btn').removeClass('transform-0.9');

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

        // Visor PDF
        $(document).on('click', '.btn-ver-pdf', function() {
            const src = $(this).data('src');
            if (!src) return;
            const fullSrc = construirUrlDocumento(src);
            $('#iframeVisorPdf').attr('src', fullSrc);
            $('#btnDescargarPdfDirecto').attr('href', fullSrc);
            $('#modalVisorPdf').modal('show');
        });

        $('#modalVisorPdf').on('hidden.bs.modal', function() {
            $('#iframeVisorPdf').attr('src', '');
        });

        // Visor XML
        $(document).on('click', '.btn-ver-xml', function() {
            const rutaXml = $(this).data('xml');
            if (!rutaXml) {
                alert('No hay archivo XML disponible.');
                return;
            }

            const fullSrc = construirUrlDocumento(rutaXml);
            $('#xmlLoadingState').removeClass('d-none');
            $('#visorXmlContenido').text('').addClass('d-none');
            $('#visorXmlDownloadBtn').attr('href', fullSrc);
            $('#modalVisorXml').modal('show');

            fetch(fullSrc)
                .then(response => {
                    if (!response.ok) throw new Error('No se pudo cargar el archivo XML.');
                    return response.text();
                })
                .then(text => {
                    $('#xmlLoadingState').addClass('d-none');
                    $('#visorXmlContenido').text(text).removeClass('d-none');
                })
                .catch(err => {
                    $('#xmlLoadingState').addClass('d-none');
                    $('#visorXmlContenido').text('Error al cargar el contenido XML: ' + err.message).removeClass('d-none');
                });
        });

        // Descargar ZIP Masivo
        $('#btnDescargarZip').on('click', function() {
            let unidades = [];
            let meses = [];
            let tipos = [];
            let cursos = [];

            $('.unit-check:checked').each(function() {
                unidades.push($(this).val());
            });

            $('.month-check:checked').each(function() {
                meses.push($(this).val());
            });

            $('.type-check:checked').each(function() {
                tipos.push($(this).val());
            });

            $('.course-check:checked').each(function() {
                cursos.push($(this).val());
            });

            let anio = $('.year-radio:checked').val();

            $('#zip_unidades').val(JSON.stringify(unidades));
            $('#zip_meses').val(JSON.stringify(meses));
            $('#zip_anio').val(anio);
            $('#zip_tipos').val(JSON.stringify(tipos));
            $('#zip_cursos').val(JSON.stringify(cursos));

            $('#formDescargarZip').submit();
        });

        // Exportar a Excel
        $('#exportExcelBtn').on('click', function() {
            $('#progressModal').modal('show');
            $('#progressBar').css('width', '10%').attr('aria-valuenow', 10);
            $('#progressPercent').text('10%');
            $('#progressStatus').text('Preparando consulta...');

            var formData = $('#filtroForm').serializeArray();
            var dataObj = {};

            $.each(formData, function(i, field) {
                if (field.name.includes('[]')) {
                    let cleanName = field.name.replace('[]', '');
                    if (!dataObj[cleanName]) dataObj[cleanName] = [];
                    dataObj[cleanName].push(field.value);
                } else {
                    dataObj[field.name] = field.value;
                }
            });

            dataObj._token = $('input[name="_token"]').val();

            $('#progressBar').css('width', '40%').attr('aria-valuenow', 40);
            $('#progressPercent').text('40%');
            $('#progressStatus').text('Obteniendo datos del servidor...');

            $.ajax({
                url: "{{ route('reportes.facturasCapacitandos.export') }}",
                type: "POST",
                data: dataObj,
                success: function(response) {
                    $('#progressBar').css('width', '75%').attr('aria-valuenow', 75);
                    $('#progressPercent').text('75%');
                    $('#progressStatus').text('Construyendo archivo Excel...');

                    setTimeout(function() {
                        let records = response.data;
                        if (!records || records.length === 0) {
                            alert('No hay registros para exportar.');
                            $('#progressModal').modal('hide');
                            return;
                        }

                        let headers = [
                            "CLAVE AULA",
                            "UNIDAD",
                            "TIPO DE CURSO",
                            "NOMBRE DEL CURSO",
                            "NO. CONTROL",
                            "CURP",
                            "NOMBRE DEL CAPACITANDO",
                            "ESTATUS COMPROBANTE",
                            "FOLIO FACTURA",
                            "FOLIO FISCAL (UUID)",
                            "FECHA FACTURA",
                            "RFC EMISOR",
                            "NOMBRE EMISOR",
                            "RFC RECEPTOR",
                            "NOMBRE RECEPTOR",
                            "TOTAL",
                            "GUÍA CIE",
                            "FECHA DEPÓSITO",
                            "BECADO",
                            "ACREDITADO",
                            "INICIA AULA",
                            "TERMINA AULA",
                            "ESTATUS AULA",
                            "OBSERVACIONES",
                            "TIENE PDF",
                            "TIENE XML"
                        ];

                        let sheetData = [headers];

                        records.forEach(r => {
                            sheetData.push([
                                r.clave_aula,
                                r.unidad,
                                r.tipo_curso,
                                r.nombre_curso,
                                r.numero_control,
                                r.curp,
                                r.nombre_capacitando,
                                r.estatus_comprobante,
                                r.folio_factura,
                                r.uuid,
                                r.fecha_factura,
                                r.rfc_emisor,
                                r.emisor,
                                r.rfc_receptor,
                                r.receptor,
                                r.total,
                                r.cie,
                                r.fecha_deposito,
                                r.becado,
                                r.acreditado,
                                r.inicia,
                                r.termina,
                                r.estatus_aula,
                                r.observaciones,
                                r.tiene_pdf,
                                r.tiene_xml
                            ]);
                        });

                        let wb = XLSX.utils.book_new();
                        let ws = XLSX.utils.aoa_to_sheet(sheetData);

                        let colWidths = headers.map((h, i) => {
                            let maxLen = h.length;
                            sheetData.forEach(row => {
                                let val = row[i] ? String(row[i]) : '';
                                if (val.length > maxLen) maxLen = val.length;
                            });
                            return { wch: Math.min(maxLen + 3, 50) };
                        });
                        ws['!cols'] = colWidths;

                        XLSX.utils.book_append_sheet(wb, ws, "Facturas Capacitandos");

                        let fechaActual = new Date().toISOString().slice(0, 10).replace(/-/g, "");
                        XLSX.writeFile(wb, `Reporte_Facturas_Capacitandos_${fechaActual}.xlsx`);

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

                        setTimeout(() => {
                            $('#progressModal').modal('hide');
                            setTimeout(() => {
                                $('#progressBar').css('width', '0%').attr('aria-valuenow', 0);
                                $('#progressPercent').text('0%');
                            }, 500);
                        }, 1000);
                    }, 300);
                },
                error: function(xhr) {
                    console.error(xhr);
                    alert('Error al exportar datos. Por favor intente de nuevo.');
                    $('#progressModal').modal('hide');
                }
            });
        });
    </script>
@endpush