@extends('layout.template')

@section('content')

    <div class="content-body">
        <div class="container-fluid">
            <!-- Header Section -->
            <div class="row page-titles mx-0 mt-4 shadow-sm"
                style="border-radius: 12px; border: none; background: white; padding: 1.5rem;">
                <div class="col-sm-12 p-md-0 card-body">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                        <div>
                            <h3 class="mb-2" style="font-weight: 700; color: #2C3E50;">Impresión de Duplicados</h3>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('impresiones.index') }}"
                                class="btn btn-outline-secondary d-flex align-items-center gap-2 shadow-sm"
                                style="border-radius: 8px; font-weight: 600;">
                                <i class="la la-arrow-left"></i> Regresar
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Main Content Card -->
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card shadow-sm border-0" style="border-radius: 12px;">
                        <div class="card-body">
                            <!-- Seleccion de curso -->
                            <form id="form_duplicado" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="accordion-header accordion-header-primary"
                                    style="border-radius: 6px; background: #2C3E50; padding: 1rem 1.5rem;">
                                    <span class="la la-user-check fs-3 text-white me-2"></span>
                                    <span class="accordion-header-text text-white h5 mb-0">Selección de Capacitando y
                                        Curso</span>
                                </div>
                                <div class="p-4 border-bottom">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label font-weight-bold">Buscar Capacitando</label>
                                            <div class="custom-dropdown-container" id="container_capacitando">
                                                <button type="button"
                                                    class="btn btn-light d-flex align-items-center justify-content-between w-100 custom-dropdown-toggle"
                                                    id="btn_select_capacitando">
                                                    <span class="selected-text text-truncate">Buscar por nombre, CURP o No.
                                                        Control...</span>
                                                    <i class="la la-search ms-2"></i>
                                                </button>
                                                <div class="custom-dropdown-menu shadow-lg">
                                                    <div class="custom-dropdown-search-wrapper">
                                                        <input type="text" class="form-control custom-dropdown-search"
                                                            placeholder="Escriba para buscar (mín. 3 letras)..."
                                                            id="input_search_capacitando">
                                                    </div>
                                                    <div class="custom-dropdown-body" id="list_capacitandos">
                                                        <div class="p-3 text-center text-muted small">Empiece a escribir
                                                            para
                                                            buscar...</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <input type="text" name="alumno_id_hidden" id="alumno_id_hidden"
                                                style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;"
                                                required>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label font-weight-bold">Seleccionar Curso</label>
                                            <div class="custom-dropdown-container disabled" id="container_curso">
                                                <button type="button"
                                                    class="btn btn-light d-flex align-items-center justify-content-between w-100 custom-dropdown-toggle"
                                                    id="btn_select_curso" disabled>
                                                    <span class="selected-text text-truncate">Seleccione primero un
                                                        capacitando...</span>
                                                    <i class="la la-angle-down ms-2"></i>
                                                </button>
                                                <div class="custom-dropdown-menu shadow-lg">
                                                    <div class="custom-dropdown-search-wrapper">
                                                        <input type="text" class="form-control custom-dropdown-search"
                                                            placeholder="Filtrar cursos..." id="input_search_curso">
                                                    </div>
                                                    <div class="custom-dropdown-body" id="list_cursos">
                                                        <div class="p-3 text-center text-muted small">No hay cursos
                                                            disponibles
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <input type="text" name="aula_id_hidden" id="aula_id_hidden"
                                                style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;"
                                                required>
                                        </div>
                                    </div>
                                </div>


                                <div class="accordion-header accordion-header-primary"
                                    style="border-radius: 6px; background: #2C3E50; padding: 1rem 1.5rem;">
                                    <span class="la la-book-open fs-3 text-white me-2"></span>
                                    <span class="accordion-header-text text-white h5 mb-0">Detalles del Curso</span>
                                </div>
                                <div class="p-4">
                                    <div class="row">
                                        <div class="col-9 mb-3">
                                            <label class="form-label font-weight-bold">Nombre del Curso</label>
                                            <!-- Standard Input for Automatic Mode -->
                                            <input type="text" id="det_nombre_curso" name="manual_nombre_curso"
                                                class="form-control" placeholder="Nombre completo del curso..." readonly>

                                            <!-- Searchable Dropdown for Manual Mode -->
                                            <div id="container_curso_manual" class="custom-dropdown-container d-none">
                                                <button type="button"
                                                    class="btn btn-light d-flex align-items-center justify-content-between w-100 custom-dropdown-toggle"
                                                    id="btn_select_curso_manual">
                                                    <span class="selected-text text-truncate">Buscar curso en
                                                        catálogo...</span>
                                                    <i class="la la-search ms-2"></i>
                                                </button>
                                                <div class="custom-dropdown-menu shadow-lg">
                                                    <div class="custom-dropdown-search-wrapper">
                                                        <input type="text" class="form-control custom-dropdown-search"
                                                            placeholder="Escriba el nombre o clave del curso..."
                                                            id="input_search_curso_manual">
                                                    </div>
                                                    <div class="custom-dropdown-body" id="list_cursos_manual">
                                                        <div class="p-3 text-center text-muted small">Empiece a escribir
                                                            para
                                                            buscar...</div>
                                                    </div>
                                                </div>
                                                <input type="hidden" name="manual_curso_id" id="val_curso_manual">
                                            </div>
                                        </div>
                                        <div class="col-3 mb-3">
                                            <label class="form-label font-weight-bold">Tipo de Curso</label>
                                            <input type="text" id="det_tipo_curso" name="manual_tipo_curso"
                                                class="form-control" placeholder="Tipo de curso..." readonly>
                                        </div>
                                        <div class="col-3 mb-3">
                                            <label class="form-label font-weight-bold">Duración (Horas)</label>
                                            <input type="number" id="det_horas" name="manual_horas" class="form-control"
                                                placeholder="Ej: 40" readonly required>
                                        </div>
                                        <div class="col-3 mb-3">
                                            <label class="form-label font-weight-bold">Unidad</label>
                                            <input type="text" id="det_unidad" name="manual_unidad" class="form-control"
                                                placeholder="Unidad de capacitación..." readonly required>
                                        </div>
                                        <div class="col-3 mb-3">
                                            <label class="form-label font-weight-bold">Fecha Inicio</label>
                                            <div class="input-group">
                                                <input type="text" id="det_fecha_inicio" name="manual_fecha_inicio"
                                                    class="form-control flatpicker" readonly required>
                                                <span class="input-group-text"><i class="las la-calendar fs-4"></i></span>
                                            </div>
                                        </div>
                                        <div class="col-3 mb-3">
                                            <label class="form-label font-weight-bold">Fecha Término</label>
                                            <div class="input-group">
                                                <input type="text" id="det_fecha_termino" name="manual_fecha_termino"
                                                    class="form-control flatpicker" readonly required>
                                                <span class="input-group-text"><i class="las la-calendar fs-4"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 3. Historical Record Table (Vista Aula style) -->
                                <div id="section_registro_aula" class="mb-4" style="display: none;">
                                    <div class="table-responsive">
                                        <table class="table table-sm table-bordered mb-0"
                                            style="font-size: 0.75rem;">
                                            <thead class="bg-light">
                                                <tr>
                                                    <th class="text-nowrap">NO. DE CONTROL</th>
                                                    <th class="text-nowrap">NOMBRE</th>
                                                    <th class="text-nowrap">UNIDAD</th>
                                                    <th class="text-nowrap">¿CÓMO SE ENTERÓ?</th>
                                                    <th class="text-nowrap">BECADO</th>
                                                    <th class="text-nowrap">No. RECIBO</th>
                                                    <th class="text-nowrap">FECHA RECIBO</th>
                                                    <th class="text-nowrap">IMPORTE</th>
                                                    <th class="text-nowrap">ACREDITADO</th>
                                                    <th class="text-nowrap">FOLIO DOC.</th>
                                                    <th class="text-nowrap">FECHA ENTREGA</th>
                                                </tr>
                                            </thead>
                                            <tbody id="row_registro_aula">
                                                <!-- Dynamic Content -->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <!-- 4. Payment Information Section (Simplified) -->
                                <input type="hidden" name="es_manual" id="es_manual" value="0">

                                <!-- Campos ocultos para datos XML -->
                                <input type="hidden" name="xml_folio_val" id="xml_folio_val">
                                <input type="hidden" name="xml_uuid_val" id="xml_uuid_val">
                                <input type="hidden" name="xml_fecha_val" id="xml_fecha_val">
                                <input type="hidden" name="xml_rfc_emisor_val" id="xml_rfc_emisor_val">
                                <input type="hidden" name="xml_emisor_val" id="xml_emisor_val">
                                <input type="hidden" name="xml_total_val" id="xml_total_val">

                                <div class="accordion-header accordion-header-primary"
                                    style="border-radius: 6px; background: #2C3E50; padding: 1rem 1.5rem;">
                                    <span class="la la-wallet fs-3 text-white me-2"></span>
                                    <span class="accordion-header-text text-white h5 mb-0">Información del Nuevo Pago</span>
                                </div>
                                <div class="p-4 border-bottom">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label font-weight-bold">No. Recibo</label>
                                            <input type="text" id="pago_recibo" name="pago_recibo" class="form-control"
                                                placeholder="Folio del recibo..." required>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label font-weight-bold">Importe</label>
                                            <input type="number" id="pago_importe" name="pago_importe" step="0.01"
                                                class="form-control" placeholder="0.00" required>
                                        </div>
                                    </div>
                                </div>

                                <!-- 4. File Upload Section -->
                                <div class="accordion-header accordion-header-primary"
                                    style="border-radius: 6px; background: #2C3E50; padding: 1rem 1.5rem;">
                                    <span class="la la-file-upload fs-3 text-white me-2"></span>
                                    <span class="accordion-header-text text-white h5 mb-0">Comprobante de pago</span>
                                </div>
                                <div class="p-4 row">
                                    <div class="col-md-6 ">
                                        <div class="">
                                            <label class="form-label font-weight-bold">Subir Comprobante (PDF)</label>
                                            <input type="file" id="comp_archivo" name="comp_archivo" class="form-control"
                                                accept="application/pdf" required>
                                            <div id="file_name_display" class="my-1 text-muted small"></div>
                                        </div>


                                        <!-- PDF Preview -->
                                        <div class=mt-4" id="div_preview_container" style="display: none;">
                                            <div class="accordion accordion-with-icon accordion-primary"
                                                id="accordion-preview">
                                                <div class="accordion-item border-primary">
                                                    <h2 class="accordion-header accordion-header-primary"
                                                        id="heading_preview">
                                                        <button
                                                            class="accordion-button btn light btn-primary collapsed py-2"
                                                            type="button" data-bs-toggle="collapse"
                                                            data-bs-target="#collapse_preview"
                                                            style="background: #f1f7ff; color: #3b71ca;">
                                                            <span class="la la-eye fs-4 me-2"></span>
                                                            <span class="accordion-header-text">Vista previa del Comprobante
                                                                (PDF)</span>
                                                        </button>
                                                    </h2>
                                                    <div id="collapse_preview" class="accordion-collapse collapse"
                                                        aria-labelledby="heading_preview">
                                                        <div class="accordion-body p-0" id="preview_pago_content"
                                                            style="height: 600px; background: #eee;">
                                                            <!-- Iframe will be injected here -->
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 ">
                                        <div class="">
                                            <label class="form-label font-weight-bold">Archivo XML</label>
                                            <input type="file" id="xml_archivo" name="xml_archivo" class="form-control"
                                                accept="text/xml, application/xml" required>
                                            <div id="xml_name_display" class="my-1 text-muted small"></div>
                                        </div>



                                        <!-- XML Info/Preview -->
                                        <div class="" id="div_xml_container" style="display: none;">
                                            <div class="accordion accordion-with-icon accordion-info" id="accordion-xml">
                                                <div class="accordion-item border-info">
                                                    <h2 class="accordion-header accordion-header-info" id="heading_xml">
                                                        <button class="accordion-button btn light btn-info collapsed py-2"
                                                            type="button" data-bs-toggle="collapse"
                                                            data-bs-target="#collapse_xml"
                                                            style="background: #f0faff; color: #0078d4;">
                                                            <span class="la la-file-code fs-4 me-2"></span>
                                                            <span class="accordion-header-text">Datos Factura (XML)</span>
                                                        </button>
                                                    </h2>
                                                    <div id="collapse_xml" class="accordion-collapse collapse"
                                                        aria-labelledby="heading_xml">
                                                        <div class="accordion-body bg-dark" id="xml_data_content">
                                                            <div
                                                                class="d-flex justify-content-between align-items-center mb-2">
                                                                <h6 class="mb-0 text-white"><i
                                                                        class="la la-code me-2"></i>Contenido del XML</h6>
                                                                <button type="button"
                                                                    class="btn btn-outline-light text-white btn-xs"
                                                                    id="btn_ver_xml_modal">
                                                                    <i class="la la-expand me-1"></i> Pantalla Completa
                                                                </button>
                                                            </div>
                                                            <pre id="visorXmlContent" class="border p-3"
                                                                style="white-space: pre-wrap; word-break: break-word; background:#f8f9fa; max-height:500px; overflow:auto; font-size: 11px; font-family: 'Courier New', Courier, monospace;"></pre>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-12 mt-4 mb-4 text-center align-items-center">
                                        <button type="submit" class="btn btn-success mt-4 w-50 font-weight-bold shadow-sm"
                                            style="height: 48px;">
                                            <i class="la la-save"></i> Guardar
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>

    <!-- MODAL PARA VER XML DE LA FACTURA -->
    <div class="modal fade" id="modalXml" tabindex="-1" aria-labelledby="modalXmlLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-info">
                    <h5 class="modal-title text-white" id="modalXmlLabel">XML</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body">
                    <pre id="visorXmlContentModal" class="border p-3"
                        style="white-space: pre-wrap; word-break: break-word; background:#f8f9fa; max-height:600px; overflow:auto; font-size: 11px; font-family: 'Courier New', Courier, monospace;"></pre>
                </div>
            </div>
        </div>
    </div>

    <!-- MODAL DE ÉXITO -->
    <div class="modal fade" id="modalSuccess" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content text-center p-4">
                <div class="modal-body">
                    <div class="mb-4">
                        <i class="la la-check-circle text-success" style="font-size: 45px;"></i>
                    </div>
                    <h4 class="modal-title mb-2" id="successTitle">¡Éxito!</h4>
                    <p class="text-muted" id="successMessage"></p>
                    <div class="mt-4">
                        <div class="spinner-border text-primary spinner-border-sm me-2" role="status"></div>
                        <span class="small text-muted">Redirigiendo...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Styles -->
    <style>
        .accordion-header-primary {
            background: #3B71CA;
            display: flex;
            align-items: center;
        }

        .accordion-header-info {
            background: #0078d4;
            display: flex;
            align-items: center;
        }

        .accordion-header-text {
            font-weight: 600;
        }

        .preview-box {
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .preview-box iframe,
        .preview-box img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .table thead th {
            font-size: 11px;
            letter-spacing: 1px;
            text-transform: uppercase;
            font-weight: 700;
            color: #7E8299;
        }

        .table tbody td {
            vertical-align: middle;
            color: #3F4254;
            font-weight: 500;
        }

        .form-control:read-only {
            background-color: #f8f9fa;
            border-color: #dee2e6;
        }

        .form-control:not(:read-only) {
            border-color: #3B71CA;
            background-color: #fff;
        }

        input.form-control {
            text-align: center;
        }

        .table-input {
            border: 1px solid #ced4da;
            border-radius: 4px;
            padding: 4px 8px;
            width: 100%;
            font-size: 0.9rem;
            text-align: center;
            background-color: #fff;
        }

        .table-input:focus {
            border-color: #3B71CA;
            outline: none;
            box-shadow: 0 0 0 0.1rem rgba(59, 113, 202, 0.1);
        }

        .btn-delete-row {
            color: #ef4444;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-delete-row:hover {
            background-color: #fee2e2;
            color: #b91c1c;
        }

        .dropdown-item-manual {
            background-color: #fff4e5;
            border-top: 1px solid #ffcc80;
            color: #e65100;
        }

        .dropdown-item-manual:hover {
            background-color: #ffe0b2;
        }

        #section_detalles {
            display: none;
        }

        /* Custom Dropdown Styles */
        .custom-dropdown-container {
            position: relative;
            width: 100%;
        }

        .custom-dropdown-toggle {
            text-align: left;
            border: 1px solid #ced4da;
            border-radius: 8px;
            padding: 0.6rem 1rem;
            background-color: #fff !important;
            transition: all 0.2s;
        }

        .custom-dropdown-toggle:hover {
            border-color: #3B71CA;
        }

        .custom-dropdown-container.active .custom-dropdown-toggle {
            border-color: #3B71CA;
            box-shadow: 0 0 0 0.2rem rgba(59, 113, 202, 0.25);
        }

        .custom-dropdown-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            z-index: 1050;
            background: #fff;
            border: 1px solid rgba(0, 0, 0, .15);
            border-radius: 8px;
            margin-top: 5px;
            animation: fadeIn 0.2s ease-out;
            max-height: 400px;
            flex-direction: column;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .custom-dropdown-container.active .custom-dropdown-menu {
            display: flex;
        }

        .custom-dropdown-search-wrapper {
            padding: 0.75rem;
            border-bottom: 1px solid #eee;
        }

        .custom-dropdown-search {
            border-radius: 6px;
            border: 1px solid #ddd;
        }

        .custom-dropdown-body {
            overflow-y: auto;
            max-height: 300px;
        }

        .dropdown-item-custom {
            padding: 0.75rem 1rem;
            cursor: pointer;
            transition: background 0.2s;
            border-bottom: 1px solid #f8f9fa;
            display: flex;
            flex-direction: column;
        }

        .dropdown-item-custom:last-child {
            border-bottom: none;
        }

        .dropdown-item-custom:hover {
            background-color: #f1f5fb;
        }

        .dropdown-item-custom.selected {
            background-color: #e7f0fd;
            border-left: 4px solid #3B71CA;
        }

        .dropdown-item-title {
            font-weight: 600;
            color: #333;
            font-size: 0.9rem;
        }

        .dropdown-item-sub {
            font-size: 0.75rem;
            color: #6c757d;
        }

        .custom-dropdown-container.disabled {
            opacity: 0.7;
            pointer-events: none;
        }

        .custom-dropdown-container.disabled .custom-dropdown-toggle {
            background-color: #e9ecef !important;
        }
    </style>
@endsection

@push('scripts')
    <script>
        $(document).ready(function () {

            // Inicializar todos los pickers con la configuración básica
            const pickers = flatpickr(".flatpicker", {
                dateFormat: "d/m/Y",
                locale: 'es',
                allowInput: true
            });

            // Sincronizar Fecha Inicio con Fecha Término
            const inputInicio = document.getElementById('det_fecha_inicio');
            const inputTermino = document.getElementById('det_fecha_termino');

            if (inputInicio && inputTermino) {
                // Flatpickr guarda la instancia en la propiedad _flatpickr del elemento
                setTimeout(() => {
                    const fpInicio = inputInicio._flatpickr;
                    const fpTermino = inputTermino._flatpickr;
                    
                    if (fpInicio && fpTermino) {
                        fpInicio.set('onChange', function(selectedDates) {
                            if (selectedDates.length > 0) {
                                fpTermino.setDate(selectedDates[0]);
                            }
                        });
                    }
                }, 100);
            }

            let debounceTimer;
            const debounce = (callback, time) => {
                window.clearTimeout(debounceTimer);
                debounceTimer = window.setTimeout(callback, time);
            };

            // Abrir Dropdowns
            $('.custom-dropdown-toggle').on('click', function (e) {
                e.stopPropagation();
                const container = $(this).closest('.custom-dropdown-container');
                const menu = container.find('.custom-dropdown-menu'); // unused but here for clarity
                const isActive = container.hasClass('active');

                $('.custom-dropdown-container').removeClass('active');
                if (!isActive) {
                    container.addClass('active');
                    container.find('.custom-dropdown-search').focus();
                }
            });

            // Cerrar cuando se hace clic fuera
            $(document).on('click', function (e) {
                if (!$(e.target).closest('.custom-dropdown-container').length) {
                    $('.custom-dropdown-container').removeClass('active');
                }
            });

            // Buscar Capacitando
            $('#input_search_capacitando').on('keyup', function () {
                const query = $(this).val();
                const list = $('#list_capacitandos');

                if (query.length < 3) {
                    list.html('<div class="p-3 text-center text-muted small">Escriba al menos 3 caracteres...</div>');
                    return;
                }

                debounce(() => {
                    list.html('<div class="p-3 text-center text-muted small"><i class="la la-spinner la-spin"></i> Buscando...</div>');

                    $.ajax({
                        url: '{{ route("impresiones.ajax.buscar_capacitandos") }}',
                        dataType: 'json',
                        data: { q: query },
                        success: function (data) {
                            list.empty();
                            if (data.length > 0) {
                                data.forEach(item => {
                                    list.append(`
                                                        <div class="dropdown-item-custom" data-id="${item.id}" data-text="${item.text}" data-unidad="${item.unidad_nombre || ''}">
                                                            <span class="dropdown-item-title">${item.text}</span>
                                                        </div>
                                                    `);
                                });
                            } else {
                                list.html('<div class="p-3 text-center text-muted small">No se encontraron resultados</div>');
                            }
                        },
                        error: function () {
                            list.html('<div class="p-3 text-center text-muted small text-danger">Error al buscar</div>');
                        }
                    });
                }, 300);
            });

            // Seleccionar Capacitando
            $(document).on('click', '#list_capacitandos .dropdown-item-custom', function () {
                const id = $(this).data('id');
                const text = $(this).data('text');
                const unidad = $(this).data('unidad');
                const container = $('#container_capacitando');

                $('#alumno_id_hidden').val(id).attr('data-unidad', unidad);
                container.find('.selected-text').text(text);
                container.removeClass('active');

                // Limpiar y deshabilitar curso
                resetCursoDropdown();
                $('#section_detalles').fadeOut();

                // Cargar cursos
                $('#list_cursos').html('<div class="p-3 text-center text-muted small"><i class="la la-spinner la-spin"></i> Cargando cursos...</div>');
                $('#container_curso').removeClass('disabled');
                $('#btn_select_curso').prop('disabled', false);

                $.ajax({
                    url: '{{ url("/impresiones/ajax/capacitando-cursos") }}/' + id,
                    type: 'GET',
                    success: function (cursos) {
                        $('#list_cursos').empty();

                        // Agregar opción manual primero
                        $('#list_cursos').append(`
                                            <div class="dropdown-item-custom dropdown-item-manual" data-id="manual" data-text="REGISTRAR CURSO MANUALMENTE">
                                                <span class="dropdown-item-title"><i class="la la-plus-circle me-1"></i> Registrar curso manualmente</span>
                                                <span class="dropdown-item-sub">Permite ingresar los datos del curso directamente</span>
                                            </div>
                                        `);

                        if (cursos && cursos.length > 0) {
                            cursos.forEach(function (curso) {
                                let title = curso.aul_curso_nombre;
                                let sub = `Clave: ${curso.aul_clave_registro}`;
                                $('#list_cursos').append(`
                                                    <div class="dropdown-item-custom" data-id="${curso.aul_id}" data-text="${title} [${curso.aul_clave_registro}]">
                                                        <span class="dropdown-item-title">${title}</span>
                                                        <span class="dropdown-item-sub">${sub}</span>
                                                    </div>
                                                `);
                            });
                        }
                    },
                    error: function () {
                        alert('Error al obtener los cursos del capacitando.');
                    }
                });
            });

            // Filtrar Cursos
            $('#input_search_curso').on('keyup', function () {
                const query = $(this).val().toLowerCase();
                $('#list_cursos .dropdown-item-custom').each(function () {
                    const text = $(this).text().toLowerCase();
                    $(this).toggle(text.indexOf(query) > -1);
                });
            });

            // Calcular tipo de curso
            const calculateTipoCurso = (tipoId, curClave) => {
                let tipo_curso_txt = "";
                const clave = (curClave || "").toString().trim().toUpperCase();
                const es_ext = clave.includes('EXT');
                const es_cae = clave.includes('CAE');
                const es_ali = clave.includes('ALI');
                const name = ($('#det_nombre_curso').val() || "").toUpperCase();
                if (tipoId == "6" || clave.includes('-ROC') || name.includes(' ROCO') || name.startsWith('ROCO')) {
                    tipo_curso_txt = "ROCO";
                } else if (tipoId == "1" || tipoId == "REGULAR") {
                    tipo_curso_txt = "REGULAR";
                } else if (tipoId == "4" || tipoId == "EVALUACION") {
                    tipo_curso_txt = "EVALUACION";
                } else if (es_ext) {
                    tipo_curso_txt = "EXTENSION";
                } else if (es_cae) {
                    tipo_curso_txt = "CAE";
                } else if (es_ali) {
                    tipo_curso_txt = "ALINEACION";
                } else if (tipoId == "7" || tipoId == "CONOCER") {
                    tipo_curso_txt = "CONOCER";
                }
                return tipo_curso_txt;
            };

            // Buscar Curso Manualmente
            $('#input_search_curso_manual').on('keyup', function () {
                const term = $(this).val();
                if (term.length < 3) return;

                const list = $('#list_cursos_manual');

                debounce(() => {
                    list.html('<div class="p-3 text-center text-muted small"><i class="la la-spinner la-spin"></i> Buscando...</div>');

                    $.ajax({
                        url: '{{ route("impresiones.ajax.buscar_cursos") }}',
                        data: { q: term },
                        success: function (data) {
                            list.empty();
                            if (data.length > 0) {
                                data.forEach(function (c) {
                                    list.append(`
                                                        <div class="dropdown-item-custom" data-id="${c.id}" data-text="${c.text}" data-clave="${c.cur_clave}" data-tipo="${c.cur_tipo_id}">
                                                            <span class="dropdown-item-title">${c.text}</span>
                                                            <span class="dropdown-item-sub">Clave: ${c.cur_clave}</span>
                                                        </div>
                                                    `);
                                });
                            } else {
                                list.html('<div class="p-3 text-center text-muted">No se encontraron cursos</div>');
                            }
                        }
                    });
                }, 300);
            });

            $(document).on('click', '#list_cursos_manual .dropdown-item-custom', function () {
                const id = $(this).data('id');
                const text = $(this).data('text');
                const clave = $(this).data('clave');
                const tipoId = $(this).data('tipo');

                $('#val_curso_manual').val(id);
                $('#det_nombre_curso').val(text);
                $('#btn_select_curso_manual .selected-text').text(text);
                $('#container_curso_manual').removeClass('active');
                $('#det_tipo_curso').val(calculateTipoCurso(tipoId, clave));
            });

            // Seleccionar Curso
            $(document).on('click', '#list_cursos .dropdown-item-custom', function () {
                const id = $(this).data('id');
                const text = $(this).data('text');
                const container = $('#container_curso');

                $('#val_curso').val(id);
                $('#aula_id_hidden').val(id);
                container.find('.selected-text').text(text);
                container.removeClass('active');

                if (id === 'manual') {
                    setManualMode(true);
                    $('#section_detalles').fadeIn();
                    return;
                }

                setManualMode(false);
                const alumnoId = $('#alumno_id_hidden').val();

                $.ajax({
                    url: '{{ route("impresiones.ajax.curso_detalles") }}',
                    type: 'GET',
                    data: { alumno_id: alumnoId, aula_id: id },
                    success: function (data) {
                        if (data.curso) {
                            $('#det_nombre_curso').val(data.curso.aul_curso_nombre || '');
                            $('#det_horas').val(data.curso.aul_horas_totales || '');
                            $('#det_unidad').val(data.curso.aul_unidad_nombre || '');
                            $('#det_tipo_curso').val(calculateTipoCurso(data.curso.tipo_id, data.curso.cur_clave));

                            const formatDMY = (dateStr) => {
                                if (!dateStr || dateStr.includes('/') || dateStr === '0000-00-00') return dateStr || '';
                                const parts = dateStr.split('-');
                                return parts.length === 3 ? `${parts[2]}/${parts[1]}/${parts[0]}` : dateStr;
                            };

                            $('#det_fecha_inicio').val(formatDMY(data.curso.aul_fecha_inicia));
                            $('#det_fecha_termino').val(formatDMY(data.curso.aul_fecha_termina));

                            $('#pago_recibo, #pago_importe').val('');

                            if (data.registro) {
                                let courseDate = data.curso.aul_fecha_inicia || '';
                                let yearMatch = courseDate.match(/\d{4}/);
                                let courseYear = yearMatch ? parseInt(yearMatch[0]) : 0;
                                let displayNumControl = (courseYear > 0 && courseYear < 2026) 
                                    ? (data.registro.alu_num_control || data.registro.aa_num_control || '-')
                                    : (data.registro.aa_num_control || '-');

                                let html = `
                                                    <tr>
                                                        <td>${displayNumControl}</td>
                                                        <td>${data.registro.full_name || '-'}</td>
                                                        <td>${data.registro.unidad_nombre || '-'}</td>
                                                        <td>${data.registro.aa_como_se_entero || '-'}</td>
                                                        <td>${data.registro.aa_becado || '-'}</td>
                                                        <td>${data.registro.aa_recibo || '-'}</td>
                                                        <td>${data.registro.aa_fecha_recibo || '-'}</td>
                                                        <td>${data.registro.aa_importe ? '$' + data.registro.aa_importe : '-'}</td>
                                                        <td>
                                                            ${data.registro.aa_acreditado === 'SI'
                                        ? '<span class="badge badge-success">SÍ</span>'
                                        : (data.registro.aa_acreditado === 'NO' ? '<span class="badge badge-danger">NO</span>' : `<span class="badge badge-secondary">${data.registro.aa_acreditado || 'N/A'}</span>`)}
                                                        </td>
                                                        <td>${data.registro.aa_folio_documento || '-'}</td>
                                                        <td>${data.registro.aa_fecha_entrega || '-'}</td>
                                                    </tr>
                                                `;
                                $('#row_registro_aula').html(html);
                                $('#section_registro_aula').fadeIn();
                            } else {
                                $('#section_registro_aula').hide();
                            }

                            $('#div_xml_container').hide();
                            $('[id^="xml_"][id$="_val"]').val('');
                            $('#xml_name_display').empty();
                            $('#xml_archivo').val('');
                            $('#xml_data_content span').text('-');
                            $('#visorXmlContent, #visorXmlContentModal').empty();

                            $('#section_detalles').fadeIn();
                        }
                    },
                    error: function () {
                        alert('Error al obtener detalles del curso.');
                    }
                });
            });

            function setManualMode(isManual) {
                $('#es_manual').val(isManual ? '1' : '0');
                const inputs = $('#det_horas, #det_fecha_inicio, #det_fecha_termino');

                if (isManual) {
                    $('#det_nombre_curso').addClass('d-none').val('');
                    $('#container_curso_manual').removeClass('d-none');
                    $('#btn_select_curso_manual .selected-text').text('Buscar curso en catálogo...');
                    $('#val_curso_manual').val('');
                    $('#det_tipo_curso').val('');
                    inputs.prop('readonly', false).val('');
                    $('#det_unidad').prop('readonly', true).val($('#alumno_id_hidden').attr('data-unidad') || '');
                } else {
                    $('#det_nombre_curso').removeClass('d-none');
                    $('#container_curso_manual').addClass('d-none');
                    inputs.prop('readonly', true);
                    $('#det_unidad').prop('readonly', true);
                }
                $('#pago_recibo, #pago_importe').val('');
                $('#section_registro_aula').hide();
                $('#row_registro_aula').empty();
                $('#div_xml_container').hide();
                $('#xml_name_display').empty();
                $('#xml_archivo').val('');
                $('#xml_data_content span').text('-');
                $('#visorXmlContent, #visorXmlContentModal').empty();
            }

            function resetCursoDropdown() {
                $('#val_curso').val('');
                $('#aula_id_hidden').val('');
                $('#container_curso').find('.selected-text').text('Seleccione un curso...');
                $('#list_cursos').html('<div class="p-3 text-center text-muted small">Cargando cursos...</div>');
                $('#input_search_curso').val('');
                setManualMode(false);
                $('#pago_recibo, #pago_importe').val('');
                $('#section_registro_aula').fadeOut();
                $('#row_registro_aula').empty();

                $('#div_preview_container').fadeOut();
                $('#preview_pago_content').empty();
                $('#file_name_display').empty();
                $('#comp_archivo').val('');
                $('#div_xml_container').fadeOut();
                $('#xml_name_display').empty();
                $('#xml_archivo').val('');
                $('#xml_data_content span').text('-');
                $('#visorXmlContent, #visorXmlContentModal').empty();
            }

            // Cerrar menús desplegables al hacer clic fuera
            $(document).on('click', function (e) {
                if (!$(e.target).closest('.custom-dropdown-container').length) {
                    $('.custom-dropdown-container').removeClass('active');
                }
            });

            // Selección de archivo XML (Extraer datos del XML)
            $('#xml_archivo').on('change', function () {
                const file = this.files[0];
                if (file) {
                    $('#xml_name_display').text(file.name);

                    if (file.type === 'application/xml' || file.name.endsWith('.xml')) {
                        const reader = new FileReader();
                        reader.onload = function (e) {
                            const xmlText = e.target.result;
                            $('#visorXmlContent').text(xmlText);

                            const parser = new DOMParser();
                            const xmlDoc = parser.parseFromString(xmlText, "text/xml");

                            // Basic CFDI 4.0/3.3 parsing
                            try {
                                const comprobante = xmlDoc.getElementsByTagName("cfdi:Comprobante")[0] || xmlDoc.getElementsByTagName("Comprobante")[0];
                                const emisor = xmlDoc.getElementsByTagName("cfdi:Emisor")[0] || xmlDoc.getElementsByTagName("Emisor")[0];
                                const timbre = xmlDoc.getElementsByTagName("tfd:TimbreFiscalDigital")[0];

                                $('#xml_folio').text(comprobante.getAttribute("Folio") || '-');
                                $('#xml_uuid').text(timbre ? timbre.getAttribute("UUID") : '-');
                                $('#xml_fecha').text(comprobante.getAttribute("Fecha") || '-');
                                $('#xml_rfc').text(emisor ? emisor.getAttribute("Rfc") : '-');
                                $('#xml_total').text(comprobante.getAttribute("Total") ? `$${comprobante.getAttribute("Total")}` : '-');
                                $('#xml_emisor').text(emisor ? emisor.getAttribute("Nombre") : '-');

                                // Set hidden values for the form
                                $('#xml_folio_val').val(comprobante.getAttribute("Folio") || '');
                                $('#xml_uuid_val').val(timbre ? timbre.getAttribute("UUID") : '');
                                $('#xml_fecha_val').val(comprobante.getAttribute("Fecha") || '');
                                $('#xml_rfc_emisor_val').val(emisor ? emisor.getAttribute("Rfc") : '');
                                $('#xml_emisor_val').val(emisor ? emisor.getAttribute("Nombre") : '');
                                $('#xml_total_val').val(comprobante.getAttribute("Total") || '');

                                $('#div_xml_container').fadeIn();
                            } catch (error) {
                                console.error("Error parsing XML:", error);
                                // Don't show error if it's just a different namespace, but show the container
                                $('#div_xml_container').fadeIn();
                            }
                        };
                        reader.readAsText(file);
                    } else {
                        $('#div_xml_container').fadeOut();
                        $('#xml_name_display').empty();
                    }
                } else {
                    $('#div_xml_container').fadeOut();
                    $('#xml_name_display').empty();
                }
            });

            $('#btn_ver_xml_modal').on('click', function () {
                $('#visorXmlContentModal').text($('#visorXmlContent').text());
                $('#modalXml').modal('show');
            });

            // Vista Previa del archivo
            $('#comp_archivo').on('change', function () {
                const file = this.files[0];
                if (file) {
                    $('#file_name_display').text(file.name);

                    if (file.type === 'application/pdf') {
                        const blobUrl = URL.createObjectURL(file);
                        $('#preview_pago_content').html(`<iframe src="${blobUrl}" style="width: 100%; height: 100%; border: none;"></iframe>`);
                        $('#div_preview_container').fadeIn();
                    } else {
                        $('#div_preview_container').fadeOut();
                        $('#preview_pago_content').empty();
                    }
                } else {
                    $('#div_preview_container').fadeOut();
                    $('#preview_pago_content').empty();
                    $('#file_name_display').empty();
                }
            });

            // Lógica de envío del formulario
            $(document).on('submit', '#form_duplicado', function (e) {
                e.preventDefault();

                if (!this.checkValidity()) {
                    this.reportValidity();
                    return;
                }

                const formData = new FormData(this);
                const submitBtn = $(this).find('button[type="submit"]');

                submitBtn.prop('disabled', true).html('<i class="la la-spinner la-spin"></i> Guardando...');

                console.log('Enviando duplicado...', Array.from(formData.entries()));
                $.ajax({
                    url: '{{ route("impresiones.ajax.guardar_duplicado") }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        if (response.success) {
                            $('#successMessage').text(response.message);
                            $('#modalSuccess').modal('show');
                            
                            setTimeout(function() {
                                window.location.href = response.redirect;
                            }, 2000);
                        } else {
                            alert('Error: ' + response.message);
                            submitBtn.prop('disabled', false).html('<i class="la la-save"></i> Guardar');
                        }
                    },
                    error: function () {
                        alert('Ocurrió un error al procesar la solicitud.');
                        submitBtn.prop('disabled', false).html('<i class="la la-save"></i> Guardar e Imprimir');
                    }
                });
            });
        });
    </script>
@endpush