@extends('layout.template')

@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; 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 Especialidades</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>

            <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_especialidad" 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
                                        Especialidad</span>
                                </div>
                                <div class="p-4 border-bottom">
                                    <div class="row">
                                        <div class="col-md-8 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-4 mb-3 d-flex flex-column">
                                            <label class="form-label font-weight-bold">Unidad</label>
                                            <select class="form-control" name="pago_unidad" id="pago_unidad" required>
                                                <option value="">Seleccione...</option>
                                                @foreach($unidades as $unidad)
                                                    <option value="{{ $unidad->uni_id }}">
                                                        {{ $unidad->uni_nombre_corto }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-12 mb-3">
                                            <label class="form-label font-weight-bold">Seleccionar Especialidad</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 especialidades..." id="input_search_curso">
                                                    </div>
                                                    <div class="custom-dropdown-body" id="list_cursos">
                                                        <div class="p-3 text-center text-muted small">No hay especialidades
                                                            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 class="col-md-12 mb-3" id="container_especialidad_manual"
                                            style="display: none;">
                                            <label class="form-label font-weight-bold">Buscar Especialidad</label>
                                            <div class="custom-dropdown-container">
                                                <button type="button"
                                                    class="btn btn-light d-flex align-items-center justify-content-between w-100 custom-dropdown-toggle"
                                                    id="btn_select_especialidad_manual">
                                                    <span class="selected-text text-truncate">Buscar especialidad...</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 nombre o clave..."
                                                            id="input_search_especialidad_manual">
                                                    </div>
                                                    <div class="custom-dropdown-body" id="list_especialidades_manual">
                                                        <div class="p-3 text-center text-muted small">Escriba al menos 3
                                                            caracteres...</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <input type="hidden" name="manual_especialidad_id" id="val_especialidad_manual">
                                        </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 de la
                                        Especialidad</span>
                                </div>
                                <div id="section_detalles_especialidad" style="display: none;">
                                    {{-- Alerta de especialidad incompleta --}}
                                    <div id="alert_especialidad_incompleta"
                                        class="alert alert-warning d-flex align-items-center m-4 mb-0" role="alert"
                                        style="display: none !important;">
                                        <i class="la la-exclamation-triangle fs-3 me-3"></i>
                                        <div>
                                            <strong>Especialidad incompleta.</strong> El capacitando <strong>no ha
                                                acreditado</strong> todos los cursos asignados a esta especialidad.
                                        </div>
                                    </div>
                                    {{-- Alerta de especialidad completa --}}
                                    <div id="alert_especialidad_completa"
                                        class="alert alert-success d-flex align-items-center m-4 mb-0" role="alert"
                                        style="display: none !important;">
                                        <i class="la la-check-circle fs-3 me-3"></i>
                                        <div>
                                            <strong>Especialidad completada.</strong> El capacitando ha acreditado todos los
                                            cursos de esta especialidad.
                                        </div>
                                    </div>

                                    <div class="p-4">
                                        <h6 class="fw-bold d-flex align-items-center text-secondary mb-3">
                                            Cursos de la Especialidad
                                            <span id="badge_total_asignados" class="badge bg-secondary ms-2">0</span>
                                        </h6>
                                        <div class="table-responsive">
                                            <table class="table table-sm table-bordered mb-0" style="font-size: 0.8rem;">
                                                <thead style="background: #e8f4fd;">
                                                    <tr>
                                                        <th class="text-nowrap" style="width: 5%;">#</th>
                                                        <th class="text-nowrap">NOMBRE DEL CURSO</th>
                                                        <th class="text-nowrap text-center">HORAS</th>
                                                        <th class="text-nowrap text-center">ESTADO</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="tbody_cursos_asignados">
                                                    <!-- Dynamic Content -->
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                    <div class="p-4 pt-0" id="container_cursos_acreditados">
                                        <h6 class="fw-bold d-flex align-items-center mb-3">
                                            Cursos Acreditados del Capacitando
                                            <span id="badge_total_completados" class="badge bg-success ms-2">0</span>
                                        </h6>
                                        <div class="table-responsive">
                                            <table class="table table-sm table-bordered table-striped mb-0"
                                                style="font-size: 0.8rem;">
                                                <thead style="background: #e6f9e6;">
                                                    <tr>
                                                        <th class="text-nowrap" style="width: 5%;">#</th>
                                                        <th class="text-nowrap">CLAVE REGISTRO</th>
                                                        <th class="text-nowrap">NOMBRE DEL CURSO</th>
                                                        <th class="text-nowrap text-center">HORAS</th>
                                                        <th class="text-nowrap text-center">FECHA INICIO</th>
                                                        <th class="text-nowrap text-center">FECHA TÉRMINO</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="tbody_cursos_completados">
                                                    <!-- Dynamic Content -->
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <input type="hidden" name="es_manual" id="es_manual" value="0">

                                <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 id="section_pago_archivos" style="display: none;">
                                    <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-4 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-4 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>

                                    <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>


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



                                            <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>
                                </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;" disabled>
                                        <i class="la la-save"></i> Guardar
                                    </button>
                                </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 especialidad
                resetCursoDropdown();
                $('#section_detalles_especialidad').hide();

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

                // Reset manual specialty if showing
                $('#container_especialidad_manual').hide();
                $('#val_especialidad_manual').val('');
                $('#btn_select_especialidad_manual .selected-text').text('Buscar especialidad en catálogo...');
                $('#section_pago_archivos').hide();
                $('#section_detalles_especialidad').hide();

                $.ajax({
                    url: '{{ url("/impresiones/ajax/capacitando-especialidades") }}/' + id,
                    type: 'GET',
                    success: function (especialidades) {
                        $('#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 ESPECIALIDAD MANUALMENTE">
                                                    <span class="dropdown-item-title"><i class="la la-plus-circle me-1"></i> Registrar especialidad manualmente</span>
                                                    <span class="dropdown-item-sub">Permite ingresar los datos de la especialidad directamente</span>
                                                </div>
                                            `);

                        if (especialidades && especialidades.length > 0) {
                            especialidades.forEach(function (esp) {
                                let title = esp.esp_nombre;
                                $('#list_cursos').append(`
                                                        <div class="dropdown-item-custom" data-id="${esp.esp_id}" data-text="${title}">
                                                            <span class="dropdown-item-title">${title}</span>
                                                        </div>
                                                    `);
                            });
                        }
                    },
                    error: function () {
                        alert('Error al obtener las especialidades 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 || "").toUpperCase();
                const es_ext = clave.includes('EXT');
                const es_cae = clave.includes('CAE');
                const es_ali = clave.includes('ALI');

                if (tipoId == "1") {
                    tipo_curso_txt = "REGULAR";
                } else if (tipoId == "4") {
                    tipo_curso_txt = "EVALUACION";
                } else if (tipoId == "6") {
                    tipo_curso_txt = "ROCO";
                } 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") {
                    tipo_curso_txt = "CONOCER";
                }
                return tipo_curso_txt;
            };

            // Buscar Especialidad Manualmente (Catálogo Completo Tipo 1)
            // Función para cargar todo el catálogo manual
            function loadAllEspecialidadesManual() {
                const list = $('#list_especialidades_manual');
                list.html('<div class="p-3 text-center text-muted small"><i class="la la-spinner la-spin"></i> Cargando catálogo completo...</div>');

                $.ajax({
                    url: '{{ route("impresiones.ajax.catalogo_especialidades") }}',
                    success: function (data) {
                        list.empty();
                        if (data && data.length > 0) {
                            data.forEach(function (e) {
                                list.append(`
                                                <div class="dropdown-item-custom" data-id="${e.esp_id}" data-text="${e.esp_nombre}">
                                                    <span class="dropdown-item-title">${e.esp_nombre}</span>
                                                    <span class="dropdown-item-sub">${e.esp_clave}</span>
                                                </div>
                                            `);
                            });
                        } else {
                            list.html('<div class="p-3 text-center text-muted">No se encontraron especialidades</div>');
                        }
                    },
                    error: function () {
                        list.html('<div class="p-3 text-center text-danger small">Error al cargar catálogo</div>');
                    }
                });
            }

            $('#input_search_especialidad_manual').on('input', function () {
                const term = $(this).val().toLowerCase();
                const list = $('#list_especialidades_manual');

                // Filtro local si ya hay elementos
                if (list.find('.dropdown-item-custom').length > 0) {
                    list.find('.dropdown-item-custom').each(function () {
                        const text = $(this).data('text').toLowerCase();
                        $(this).toggle(text.indexOf(term) > -1);
                    });
                }
            });

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

                $('#val_especialidad_manual').val(id);
                $('#btn_select_especialidad_manual .selected-text').text(text);
                $('#container_especialidad_manual .custom-dropdown-container').removeClass('active');

                // Fetch detalles to show required courses list even in manual mode
                $.ajax({
                    url: '{{ route("impresiones.ajax.especialidad_detalles") }}',
                    data: { alumno_id: $('#alumno_id_hidden').val(), especialidad_id: id },
                    success: function (data) {
                        let htmlAsignados = '';
                        if (data.cursos_asignados && data.cursos_asignados.length > 0) {
                            data.cursos_asignados.forEach((curso, idx) => {
                                htmlAsignados += `
                                        <tr>
                                            <td>${idx + 1}</td>
                                            <td>${curso.cur_nombre || '-'}</td>
                                            <td class="text-center">${curso.cur_horas || '-'}</td>
                                            <td class="text-center text-muted">N/A</td>
                                        </tr>
                                    `;
                            });
                            $('#badge_total_asignados').text(data.cursos_asignados.length);
                        } else {
                            htmlAsignados = '<tr><td colspan="4" class="text-center text-muted">Sin cursos requeridos especificados.</td></tr>';
                            $('#badge_total_asignados').text('0');
                        }
                        $('#tbody_cursos_asignados').html(htmlAsignados);

                        $('#container_cursos_acreditados').hide(); // HIDE in manual mode
                        $('#badge_total_completados').text('0');
                        $('#alert_especialidad_incompleta, #alert_especialidad_completa').hide();

                        $('#section_detalles_especialidad').fadeIn();
                        // $('#section_pago_archivos').fadeIn();
                        $('button[type="submit"]').prop('disabled', false);
                    }
                });
            });

            // Seleccionar Especialidad (Automática o Manual Toggle)
            $(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') {
                    $('#es_manual').val('1');
                    $('#container_especialidad_manual').fadeIn();
                    $('#section_detalles_especialidad').hide();
                    // $('#section_pago_archivos').hide();
                    loadAllEspecialidadesManual(); // Cargar todo el catálogo ahora
                    return;
                }

                // Modo automático
                $('#es_manual').val('0');
                $('#container_especialidad_manual').hide();
                const alumnoId = $('#alumno_id_hidden').val();

                $.ajax({
                    url: '{{ route("impresiones.ajax.especialidad_detalles") }}',
                    type: 'GET',
                    data: { alumno_id: alumnoId, especialidad_id: id },
                    success: function (data) {
                        if (!data.success) {
                            alert('Error: ' + (data.message || 'Error desconocido al obtener detalles.'));
                            return;
                        }

                        const completados = data.nombres_completados || [];

                        // === Tabla 1: Cursos Asignados a la Especialidad ===
                        let htmlAsignados = '';
                        if (data.cursos_asignados && data.cursos_asignados.length > 0) {
                            data.cursos_asignados.forEach((curso, idx) => {
                                const completado = completados.includes(curso.cur_nombre);
                                const badge = completado
                                    ? '<span class="badge bg-success"><i class="la la-check"></i> Acreditado</span>'
                                    : '<span class="badge bg-danger"><i class="la la-times"></i> Pendiente</span>';
                                htmlAsignados += `
                                        <tr class="${completado ? '' : 'table-warning'}">
                                            <td>${idx + 1}</td>
                                            <td>${curso.cur_nombre || '-'}</td>
                                            <td class="text-center">${curso.cur_horas || '-'}</td>
                                            <td class="text-center">${badge}</td>
                                        </tr>
                                    `;
                            });
                            $('#badge_total_asignados').text(data.cursos_asignados.length);
                        } else {
                            htmlAsignados = '<tr><td colspan="5" class="text-center text-muted">No hay cursos asignados a esta especialidad en el catálogo.</td></tr>';
                            $('#badge_total_asignados').text('0');
                        }
                        $('#tbody_cursos_asignados').html(htmlAsignados);

                        // === Tabla 2: Cursos Completados por el Capacitando ===
                        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;
                        };

                        let htmlCompletados = '';
                        if (data.cursos_completados && data.cursos_completados.length > 0) {
                            data.cursos_completados.forEach((curso, idx) => {
                                htmlCompletados += `
                                        <tr>
                                            <td>${idx + 1}</td>
                                            <td>${curso.aul_clave_registro || '-'}</td>
                                            <td>${curso.aul_curso_nombre || '-'}</td>
                                            <td class="text-center">${curso.aul_horas_totales || '-'}</td>
                                            <td class="text-center">${formatDMY(curso.aul_fecha_inicia)}</td>
                                            <td class="text-center">${formatDMY(curso.aul_fecha_termina)}</td>
                                            <td class="text-center">${curso.aa_num_control || '-'}</td>
                                        </tr>
                                    `;
                            });
                            $('#badge_total_completados').text(data.cursos_completados.length);
                        } else {
                            htmlCompletados = '<tr><td colspan="7" class="text-center text-muted">El capacitando no ha acreditado cursos de esta especialidad.</td></tr>';
                            $('#badge_total_completados').text('0');
                        }
                        $('#tbody_cursos_completados').html(htmlCompletados);

                        // === Alertas y estado del botón ===
                        if (data.especialidad_completa) {
                            $('#alert_especialidad_completa').show().css('display', '');
                            $('#alert_especialidad_incompleta').hide();
                            $('button[type="submit"]').prop('disabled', false);
                            // $('#section_pago_archivos').fadeIn(); // Mostrar pago si está completa
                        } else {
                            $('#alert_especialidad_incompleta').show().css('display', '');
                            $('#alert_especialidad_completa').hide();
                            $('button[type="submit"]').prop('disabled', true);
                            // $('#section_pago_archivos').hide(); // Ocultar pago si está incompleta
                        }

                        $('#pago_recibo, #pago_importe').val('');
                        $('#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_especialidad').fadeIn();
                        $('#container_cursos_acreditados').show(); // SHOW in automatic mode
                    },
                    error: function (xhr) {
                        console.error('AJAX Error:', xhr);
                        alert('Error al obtener detalles de la especialidad. Verifique la consola o contacte al administrador.');
                    }
                });
            });

            function resetCursoDropdown() {
                $('#val_curso').val('');
                $('#aula_id_hidden').val('');
                $('#container_curso').find('.selected-text').text('Seleccione una especialidad...');
                $('#list_cursos').html('<div class="p-3 text-center text-muted small">Cargando especialidades...</div>');
                $('#input_search_curso').val('');
                $('#pago_recibo, #pago_importe, #pago_unidad').val('');
                $('#section_detalles_especialidad').hide();
                $('#container_especialidad_manual').hide();
                // $('#section_pago_archivos').hide();
                $('#alert_especialidad_incompleta').hide();
                $('#alert_especialidad_completa').hide();
                $('#tbody_cursos_asignados').empty();
                $('#tbody_cursos_completados').empty();
                $('button[type="submit"]').prop('disabled', true);

                $('#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_especialidad', 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 especialidad...', Array.from(formData.entries()));
                $.ajax({
                    url: '{{ route("impresiones.ajax.guardar_especialidad") }}',
                    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