@extends('layout.template')
@section('title', 'SICCAP ICATEP')
@section('content')
    <div class="content-body">
        <!-- row -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12">
                    @if ($aula)
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Aula <strong class="text-primary">
                                        {{ $aula->aul_clave_registro }}</strong></h4>
                                <style>
                                    input {
                                        text-align: center;
                                    }

                                    /* Tabla general */
                                    .presupuestos-table {
                                        font-family: 'Inter', 'Roboto', sans-serif;
                                        font-size: 14px;
                                    }

                                    /* Encabezado */
                                    table.presupuestos-table thead th {
                                        font-weight: 600;
                                        text-align: center;
                                        vertical-align: middle;
                                    }

                                    /* Filas */
                                    .presupuestos-table tbody tr:hover {
                                        background-color: #eef4ff;
                                    }

                                    /* Números */
                                    .presupuestos-table td {
                                        font-variant-numeric: tabular-nums;
                                    }


                                    .campo-validar {
                                        font-weight: bold;
                                        color: #1f2937;
                                    }

                                    .resaltar {
                                        font-weight: bold;
                                        color: #1f2937;
                                    }

                                    table.presupuestos-table tbody input.monto-federal-asignado {
                                        font-weight: bold;
                                        color: #1f2937;
                                    }

                                    table.presupuestos-table tbody input.monto-ip-asignado {
                                        font-weight: bold;
                                        color: #1f2937;
                                    }

                                    table.presupuestos-table tbody input.monto-estatal-asignado {
                                        font-weight: bold;
                                        color: #1f2937;
                                    }

                                    table.presupuestos-table tbody td.monto-secundario {
                                        color: #6b7280;
                                    }

                                    table.presupuestos-table tbody td.monto-total {
                                        font-weight: 700;
                                        color: red;

                                    }

                                    /* Botón */
                                    .btn-asignar {
                                        padding: 4px 12px;
                                        border-radius: 6px;
                                    }

                                    .btn-editar {
                                        padding: 4px 12px;
                                        border-radius: 6px;
                                    }

                                    /* Botón */
                                    .btn-estilo {
                                        border-radius: 6px;
                                    }


                                    /* DataTables ajustes */
                                    .dataTables_wrapper .dataTables_filter input,
                                    .dataTables_wrapper .dataTables_length select {
                                        border-radius: 6px;
                                        padding: 4px 6px;
                                    }
                                </style>
                                <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
                                    <ol class="breadcrumb">
                                        <a href="{{ route('indexReporteHoras') }}?aul_id={{ $id_aula }}"
                                            class="btn btn-rounded btn-dark back-fixed">
                                            <span class="btn-icon-start text-dark"><i class="fa fa-arrow-left"></i></span>
                                            Regresar
                                        </a>
                                    </ol>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="basic-form">
                                    @csrf
                                    <div class="row text-center " id="formulario_aula">
                                        <div class="accordion accordion-with-icon accordion-primary collapsed"
                                            id="accordion-six">
                                            <div class="accordion-item">

                                                <h2 class="accordion-header accordion-header-primary" id="headingOne6">
                                                    <button
                                                        class="accordion-button {{ $estatusAula == 'A1' ? '' : 'collapsed' }}"
                                                        type="button" data-bs-toggle="collapse"
                                                        data-bs-target="#collapseOne6">
                                                        <span class="la la-book-open fs-3"></span>
                                                        <span class="accordion-header-text">Datos Aula</span>
                                                    </button>
                                                </h2>
                                                <div id="collapseOne6"
                                                    class="accordion-collapse collapse {{ $estatusAula == 'A1' ? 'show' : '' }}"
                                                    aria-labelledby="headingOne6" data-bs-parent="#accordion-six">
                                                    <div class="accordion-body row">

                                                        <div class="col-lg-2 mb-3 col-md-6">
                                                            <label class="form-label">Numero de Aula</label>
                                                            <input type="text" name="numero_aula" class="form-control"
                                                                value="{{ $aula->aul_clave_registro }}" placeholder=""
                                                                id="numero_aula"
                                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                            @error('numero_aula')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_cfp"></div>
                                                        </div>
                                                        <div class="col-lg-5 mb-3 col-md-6">
                                                            <label class="form-label">Nombre del Curso</label>
                                                            <input type="text" name="nombre_curso" class="form-control"
                                                                value="{{ $aula->aul_curso_nombre }}" placeholder=""
                                                                id="nombre_curso"
                                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                            @error('nombre_curso')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_cfp"></div>
                                                        </div>
                                                        <div class="col-lg-3 mb-3 col-md-6">
                                                            <label class="form-label">Tipo de Curso</label>
                                                            <input type="text" name="tipo_curso" class="form-control"
                                                                value="{{ $tipoCurso }}" placeholder=""
                                                                id="tipo_de_curso"
                                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                            @error('tipo_curso')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_cfp"></div>
                                                            <input type="hidden" id="tipo_curso"
                                                                value="{{ $aula->aul_curso_tipo }}">
                                                        </div>
                                                        <div class="col-lg-2 mb-3 col-md-6">
                                                            <label class="form-label">Costo por Capacitando</label>
                                                            <input type="text" name="costo_alumno" class="form-control"
                                                                value="{{ $aula->aul_costo_hora_capacitando }}"
                                                                placeholder="" id="costo_alumno"
                                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                            @error('costo_alumno')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_cfp"></div>
                                                        </div>
                                                        <div class="col-lg-4 mb-3 col-md-6">
                                                            <label class="form-label">Campo de Formaciòn
                                                                Profesional</label>
                                                            <input type="text" name="cfp" class="form-control"
                                                                value="{{ $aula->aul_cfp_nombre }}" placeholder=""
                                                                id="cfp"
                                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                            @error('cfp')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_cfp"></div>
                                                        </div>
                                                        <div class="col-lg-4 mb-3 col-md-6">
                                                            <label class="form-label">Especialidad</label>
                                                            <input type="text" name="especialidad" class="form-control"
                                                                value="{{ $aula->aul_especialidad_nombre }}"
                                                                placeholder="" id="especialidad"
                                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                            @error('especialidad')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_cfp"></div>
                                                        </div>
                                                        <div class="col-lg-3 mb-3 col-md-6">
                                                            <label class="form-label">Instructor</label>
                                                            <input type="text" name="instructor" class="form-control"
                                                                value="{{ $aula->aul_instructor_nombre }}" placeholder=""
                                                                id="nombre_instructor"
                                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                            <input type="hidden" name="instructor_id"
                                                                id="instructor_id">
                                                            @error('instructor')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_cfp"></div>
                                                        </div>
                                                        <div class="col-lg-1 mb-3 col-md-6">
                                                            <label class="form-label">Costo PSC</label>
                                                            <input type="text" name="costo_psc" class="form-control"
                                                                value="{{ $aula->aul_costo_hora_psc }}" placeholder=""
                                                                id="costo_psc"
                                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                            @error('nombre_curso')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_cfp"></div>
                                                        </div>
                                                        <div class="col-lg-2 mb-3 col-md-6 d-none"
                                                            id="div_modelo_negocios">
                                                            <label class="form-label">M&oacute;delo de
                                                                Negocios</label>
                                                            <input type="text" class="form-control"
                                                                id="modelo_negocios" name="modelo_negocios"
                                                                value="{{ $claveModeloNegocio }}" readonly>
                                                        </div>
                                                        <div class="col-lg-2 mb-3 col-md-6">
                                                            <label class="form-label">N&uacute;mero de
                                                                Capacitandos</label>
                                                            <input type="number" name="minimo_capacitandos"
                                                                class="form-control"
                                                                value="{{ $aula->aul_capacitandos }}" placeholder=""
                                                                id="minimo_capacitandos" min="1" max="200"
                                                                readonly>
                                                        </div>
                                                        <div class="col-lg-1 mb-3 col-md-6">
                                                            <label class="form-label">Duraci&oacute;n </label>
                                                            <input type="text" name="duracion" class="form-control"
                                                                value="{{ $aula->aul_horas_totales }}" placeholder=""
                                                                id="duracion"
                                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                            @error('duracion')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_cfp"></div>
                                                        </div>
                                                        <div class="col-lg-2 mb-3 col-md-6">
                                                            <label class="form-label">Tipo de Formaci&oacute;n</label>
                                                            <input type="text" name="" class="form-control"
                                                                value="{{ $tipoFormacion }}" placeholder=""
                                                                id="tipo_formacion"
                                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                            <input type="hidden" name="curso_id" id="curso_id">
                                                            @error('clave_curso')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_cfp"></div>
                                                        </div>
                                                        <div class="col-lg-2 mb-3 col-md-6">
                                                            <label class="form-label">Modalidad </label>
                                                            <input type="text" class="form-control" name="modalidad"
                                                                value="{{ $aula->aul_modalidad }}" id="modalidad"
                                                                readonly>
                                                            @error('tipo_curso')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                        <div class="col-lg-3 mb-3 col-md-6" id="div_ubicacion">
                                                            <label class="form-label">Ubicaci&oacute;n </label>
                                                            <input type="text" name="" class="form-control"
                                                                value="{{ $aula->aul_ubicacion }}" placeholder=""
                                                                id=""
                                                                onkeyup="this.value = this.value.toLowerCase()" readonly>

                                                            @error('tipo_curso')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                        <div class="col-lg-2 mb-3 col-md-6 d-none" id="div_enlace">
                                                            <label class="form-label">Enlace</label>
                                                            <input type="text" name="enlace" class="form-control"
                                                                value="{{ $aula->aul_enlace }}" placeholder=""
                                                                id="enlace"
                                                                onkeyup="this.value = this.value.toLowerCase()" readonly>
                                                            @error('enlace')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_enlace"></div>
                                                        </div>
                                                        <div class="col-lg-8 mb-3 col-md-6" id="div_domicilio">
                                                            <label class="form-label">Domicilio</label>
                                                            <input type="text" name="enlace" class="form-control"
                                                                value="{{ $domicilio }}" placeholder=""
                                                                id="enlace"
                                                                onkeyup="this.value = this.value.toLowerCase()" readonly>
                                                            @error('enlace')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_enlace"></div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12 mb-3 col-md-6">
                                            <label class="form-label">Archivo XML </label>
                                            <form action="{{ route('validarCfdi') }}" method="POST"
                                                enctype="multipart/form-data" class="" id="form-validar-cfdi">
                                                @csrf
                                                <div class="d-flex">
                                                    <input type="file" name="xml" accept=".xml"
                                                        class="form-control w-50" required>
                                                    <button class="btn btn-success mx-2 w-25"
                                                        type="submit">Subir</button>
                                                </div>
                                                <input type="hidden" name="aul_id" class="form-control"
                                                    value="{{ $aula->aul_id }}">
                                                <input type="hidden" name="id_instructor" class="form-control"
                                                    value="{{ $aula->aul_instructor_id }}">
                                                <input type="hidden" name="horas_mes" class="form-control"
                                                    value="{{ $horas_mes }}">
                                                <input type="hidden" name="fecha_corresponde" class="form-control"
                                                    value="{{ $mesCorresponde }}">
                                                <input type="hidden" name="iva" class="form-control"
                                                    value="{{ $iva }}">
                                                <input type="hidden" name="total" class="form-control"
                                                    value="{{ $total }}">
                                            </form>
                                        </div>
                                        {{-- Éxito --}}
                                        <div id="alert-success" class="alert alert-success d-none text-primary"></div>
                                        <!---------------------------- DATOS CORRECTOS EN XML ---------------------------------------------------->
                                        <div class="d-none" id="add-files">
                                            <div class="accordion accordion-with-icon accordion-primary"
                                                id="accordion-observaciones">
                                                <div class="accordion-item">
                                                    <h2 class="accordion-header accordion-header-primary"
                                                        id="headingOne6">
                                                        <button class="accordion-button" type="button"
                                                            data-bs-toggle="collapse" data-bs-target="#acc_observaciones">
                                                            <span class="fa fa-check-circle"></span>
                                                            <span class="accordion-header-text">Datos correctos en XML
                                                            </span>
                                                        </button>
                                                    </h2>
                                                    <div id="acc_observaciones" class="accordion-collapse collapse show"
                                                        aria-labelledby="headingOne6"
                                                        data-bs-parent="#accordion-observaciones">
                                                        <div class="accordion-body row alert-success">
                                                            <div class="col-lg-12 mb-3 col-md-6 text-center"
                                                                id="xml-correctos">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--------------------- SUBIR FACTURA Y VERIFICACIÓN SAT -------------------------------------------->
                                            <div class="col-lg-12 mb-3 col-md-6">
                                                <form action="{{ route('guardarArchivos') }}" method="POST"
                                                    enctype="multipart/form-data">
                                                    @csrf
                                                    <div class="text-center mb-3">
                                                        <label class="form-label d-block">Factura (PDF)</label>
                                                        <input type="file" name="pdf_factura" accept="application/pdf"
                                                            class="form-control w-50 mx-auto" id="pdfFactura" required>
                                                    </div>
                                                    <div class="accordion-item mt-2 d-none w-80" id="acordeonFactura">
                                                        <h2 class="accordion-header accordion-header-primary"
                                                            id="headingOne6">
                                                            <button
                                                                class="accordion-button collapsed btn light btn-primary"
                                                                type="button" data-bs-toggle="collapse"
                                                                data-bs-target="#comprobante_estudios">
                                                                <span class="accordion-header-text">Previsualizar
                                                                    Factura</span>
                                                            </button>
                                                        </h2>
                                                        <div id="comprobante_estudios"
                                                            class="accordion-collapse collapse show"
                                                            aria-labelledby="headingOne6" data-bs-parent="#accordion-six">
                                                            <div class="accordion-body mb-0">
                                                                <!-- Vista previa PDF -->
                                                                <iframe id="previewFactura" class="mt-3 d-none"
                                                                    style="width:100%; height: 800px; border:1px solid #ddd;"></iframe>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!----------------------------------- Verificación SAT --------------------------------->
                                                    <div class="text-center mb-3 mt-4">
                                                        <label class="form-label d-block">Verificación SAT (PDF)</label>
                                                        <input type="file" name="pdf_sat" accept="application/pdf"
                                                            class="form-control w-50 mx-auto" id="pdfSat" required>
                                                    </div>
                                                    <div class="accordion-item mt-2 d-none" id="acordeonSat">
                                                        <h2 class="accordion-header accordion-header-primary"
                                                            id="headingOne7">
                                                            <button
                                                                class="accordion-button collapsed btn light btn-primary"
                                                                type="button" data-bs-toggle="collapse"
                                                                data-bs-target="#verificacion">
                                                                <span class="accordion-header-text">Previsualizar
                                                                    Verificacion</span>
                                                            </button>
                                                        </h2>
                                                        <div id="verificacion" class="accordion-collapse collapse show"
                                                            aria-labelledby="headingOne7" data-bs-parent="#accordion-six">
                                                            <div class="accordion-body mb-0">
                                                                <!-- Vista previa PDF -->
                                                                <iframe id="previewSat" class="mt-3 d-none"
                                                                    style="width:100%; height:800px; border:1px solid #ddd;"></iframe>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <button type="submit" class="btn btn-success w-50 mt-4">
                                                        Subir archivos
                                                    </button>
                                                    <input type="hidden" name="aul_id" class="form-control"
                                                        value="{{ $aula->aul_id }}">
                                                    <input type="hidden" name="id_instructor" class="form-control"
                                                        value="{{ $aula->aul_instructor_id }}">
                                                    <input type="hidden" name="horas_mes" class="form-control"
                                                        value="{{ $horas_mes }}">
                                                    <input type="hidden" name="fecha_corresponde" class="form-control"
                                                        value="{{ $mesCorresponde }}">
                                                    <input type="hidden" name="folio_factura" class="form-control"
                                                        value="" id="folio_factura">
                                                    <input type="hidden" name="horas_factura" class="form-control"
                                                        value="" id="horas_factura">
                                                    <input type="hidden" name="iva_factura" class="form-control"
                                                        value="" id="iva_factura">
                                                    <input type="hidden" name="total_factura" class="form-control"
                                                        value="" id="total_factura">
                                                    <input type="hidden" name="isr_factura" class="form-control"
                                                        value="" id="isr_factura">
                                                    <input type="hidden" name="fecha_emision" class="form-control"
                                                        value="" id="fecha_emision">
                                                        
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- Errores generales --}}
                                    <!--<div id="alert-error" class="alert alert-warning">-</div>-->
                                    <div class="alert alert-warning alert-dismissible fade show text-primary d-none"
                                        id="alert-error">
                                        <svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24"
                                            stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"
                                            stroke-linejoin="round">
                                            <path
                                                d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z">
                                            </path>
                                            <line x1="12" y1="9" x2="12" y2="13">
                                            </line>
                                            <line x1="12" y1="17" x2="12.01" y2="17">
                                            </line>
                                        </svg>
                                        <strong>Advertencia!</strong> Se encontraron diferencias en el CFDI.
                                        <button type="button" class="btn-close" data-bs-dismiss="alert"
                                            aria-label="btn-close">
                                        </button>
                                    </div>
                                    <div class="alert alert-danger alert-dismissible fade show text-danger d-none"
                                        id="alert-existe">
                                        <svg class="alert-icon text-danger" viewBox="0 0 24 24" width="24"
                                            height="24" stroke="currentColor" stroke-width="2" fill="none"
                                            stroke-linecap="round" stroke-linejoin="round">
                                            <path
                                                d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z">
                                            </path>
                                            <line x1="12" y1="9" x2="12" y2="13">
                                            </line>
                                            <line x1="12" y1="17" x2="12.01" y2="17">
                                            </line>
                                        </svg>
                                        <strong class="text-danger">Advertencia!</strong> Ya existe esta factura en el
                                        sistema y no es posible volver a cargar
                                        <button type="button" class="btn-close" data-bs-dismiss="alert"
                                            aria-label="btn-close">
                                        </button>
                                    </div>

                                    {{-- Tabla de diferencias --}}
                                    <div id="tabla-diferencias" class="d-none">

                                        <!-- <h6 class="text-danger">Diferencias encontradas:</h6> -->
                                        <table class="table table-bordered table-sm">
                                            <thead>
                                                <tr class="text-dark">
                                                    <th class="bg-light">Campo</th>
                                                    <th style="background: #b1eb74;">
                                                        Dato Esperado</th>
                                                    <th class="" style="background: #fc8686">En XML</th>
                                                </tr>
                                            </thead>
                                            <tbody id="body-diferencias"></tbody>
                                        </table>
                                    </div>

                                    <div id="tabla-correctos" class="alert alert-success d-none">
                                        <h6>Datos correctas</h6>
                                        <ul id="lista-correctos"></ul>
                                    </div>
                    @endif
                </div>
            </div>
        </div><!-- end car body-->
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="row">
        @if (session('success'))
            <div class="alert alert-primary alert-dismissible fade show" id="alert-container">
                <svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor"
                    stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="9 11 12 14 22 4"></polyline>
                    <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                </svg>
                <strong id="alert-confirmacion"> {{ session('success') }}</strong>
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" id="alert-container-error">
                <svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor"
                    stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2">
                    </polygon>
                    <line x1="15" y1="9" x2="9" y2="15"></line>
                    <line x1="9" y1="9" x2="15" y2="15"></line>
                </svg>
                <strong id="alert-confirmacion-error"> {{ session('error') }}</strong>
            </div>
        @endif


    </div>
    </div>
    </div>
    <!--</div>-->
    </div>
    </div>
    </div>

@endsection

@push('scripts')
    <script>
        setTimeout(function() {
            $(".msg-error").fadeOut("slow");
        }, 4000); // 4 segundos*/

        if ($.fn.DataTable.isDataTable('#responsiveTable')) {
            $('#responsiveTable').DataTable().destroy();
        }


        $(document).ready(function() {
            const todosAsignados = @json($todosAsignados);
            const tipo_curso = $('#tipo_curso').val();

            if (todosAsignados == true) {
                $('#divRequisicion').removeClass('d-none');
            }

            let modalidad = $('#modalidad').val();

            if (modalidad == 'MIXTO') {
                $('#div_ubicacion').removeClass('d-none');
                $('#div_enlace').removeClass('d-none');
            }
            $('#modalValidarFactura').on('shown.bs.modal', function() {
                $('#btnConfirmarFactura').focus();
            });

            $(".accordion-collapse").each(function() {
                let $accordion = $(this);
                let id = $accordion.attr("id");
                if (!id) return; // si no tiene id, saltar
                // Revisar si estaba abierto en la última visita
                if (localStorage.getItem("accordion_" + id) === "abierto") {
                    $accordion.addClass("show"); // mostrar visualmente
                    $accordion.attr("aria-expanded", "true"); // para accesibilidad
                    $accordion.prev(".accordion-header").find(".accordion-button").removeClass(
                        "collapsed"); // quitar collapsed
                }
                // Guardar estado cuando se abre
                $accordion.on("shown.bs.collapse", function() {
                    localStorage.setItem("accordion_" + id, "abierto");
                });
                // Guardar estado cuando se cierra
                $accordion.on("hidden.bs.collapse", function() {
                    localStorage.setItem("accordion_" + id, "cerrado");
                });
            });
        });

        let tipo_de_curso = $('#tipo_curso').val();
        var capacitandosPorAgregar = parseInt($('#capacitandosPorAgregar').val(), 10) || 0;
        let btnAcredito = null;
        const id_aula = $('#aul_id').val();
        const estatusCapacitandos = $('#estatusCapacitandos').val();
        const urlCapacitandos = "{{ route('showCapacitandosAula', ['id' => '_ID']) }}".replace('_ID', id_aula);
        let estatus_aula = $('#aul_estatus').val();
        const estatusAula = '{{ $aula->aul_estatus_numero }}';

        setTimeout(function() {
            if (capacitandosPorAgregar <= 0) {
                $('.agregar-capacitando').addClass('d-none');
            }
        }, 400);

        if (tipo_de_curso == 2) {
            $('#div_modelo_negocios').removeClass('d-none');
        }
        if ("{{ !$domicilio }}") {
            $('#div_domicilio').addClass('d-none');
        }

        $('#responsiveTable').DataTable({
            responsive: true,
            paging: false,
            ordering: false,
            searching: false,
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/es-ES.json'
            },
            columnDefs: [{
                targets: [0, 1, 2, 6, 7, 8, 9],
                className: 'text-center'
            }]
        });

        $('#form-validar-cfdi').on('submit', function(e) {
            e.preventDefault();
            let formData = new FormData(this);
            // limpiar vistas
            $('#alert-success, #alert-error').addClass('d-none');
            $('#tabla-diferencias').addClass('d-none');
            $('#body-diferencias').html('');
            $('#lista-correctos').text('');
            $.ajax({
                url: "{{ route('validarCfdi') }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function(response) {
                      // hay diferencias
                    if (response.existe === true ) {
                         $('#alert-existe').removeClass('d-none');
                       return;
                    }

                    if (response.correctos && response.correctos.length > 0) {
                        response.correctos.forEach(item => {
                            $('#lista-correctos').append(
                                `<li class="text-success"><i class="fa fa-check-circle"></i> ${item}</li>`
                            );
                        });
                        $('#tabla-correctos').removeClass('d-none');
                    }
                  
                    if (response.success === false && response.diferencias && response.validar_factura ===1) {
                        response.diferencias.forEach(function(item) {
                            $('#body-diferencias').append(`
                        <tr class="">
                            <td class="campo-validar">${item.campo}</td>
                            <td class="text-success fw-bold alert-success" style="background: rgba(126, 211, 33, 0.1);">${item.esperado}</td>
                            <td class="text-danger fw-bold alert-danger" style="background: rgba(255, 22, 22, 0.15);">${item.xml}</td>
                        </tr>
                    `);
                        });
                        $('#tabla-diferencias').removeClass('d-none');
                        $('#alert-error')
                            .removeClass('d-none')
                        //.text(response.mensaje);
                      
                        return;
                    } else {
                        $('#tabla-correctos').addClass('d-none');
                        $('#add-files').removeClass('d-none');

                    }
                    //todo correcto
                    $('#alert-success')
                        .removeClass('d-none')
                        .text(response.mensaje);
                    if (response.correctos && response.correctos.length > 0 || response.validar_factura === 0) {
                        response.correctos.forEach(item => {
                            $('#xml-correctos').append(
                                `<li class="text-success"><i class="fa fa-check-circle"></i> ${item}</li>`
                            );
                        });
                    }

                    if (response.folio_factura) {
                        $('#folio_factura').val(response.folio_factura);
                    }

                    if (response.iva_factura) {
                        $('#iva_factura').val(response.iva_factura);
                    }

                    if (response.horas_factura) {
                        $('#horas_factura').val(response.horas_factura);
                    }

                    if (response.total_factura) {
                        $('#total_factura').val(response.total_factura);
                    }

                    if (response.isr_factura) {
                        $('#isr_factura').val(response.isr_factura); 
                    }

                     if (response.isr_factura) {
                        $('#fecha_emision').val(response.fecha_emision);
                    }

                    if (response.success === false) {
                       
                        $('#add-files').addClass('d-none');
                       return;
                    }

                },
                error: function(xhr) {
                    const res = xhr.responseJSON;
                    if (xhr.status === 422 && res.errors) {
                        let errores = '';
                        $.each(res.errors, function(key, value) {
                            errores += `<li>${value[0]}</li>`;
                        });
                        $('#alert-error')
                            .removeClass('d-none')
                            .html(`<ul>${errores}</ul>`);
                    }

                    if (xhr.status === 200 && res.errors == "existe") {
                        $('#add-files').addClass('d-none');
                    }


                }
            });
        });

        $(document).ready(function() {

            function mostrarVistaPreviaPDF(input, iframeSelector) {
                const file = input.files[0];
                if (!file) return;

                if (file.type !== 'application/pdf') {
                    alert('Solo se permiten archivos PDF');
                    $(input).val('');
                    return;
                }

                const fileURL = URL.createObjectURL(file);

                $(iframeSelector)
                    .attr('src', fileURL)
                    .removeClass('d-none');
            }

            $('#pdfFactura').on('change', function() {
                mostrarVistaPreviaPDF(this, '#previewFactura');
                $('#acordeonFactura').removeClass('d-none');

            });

            $('#pdfSat').on('change', function() {
                mostrarVistaPreviaPDF(this, '#previewSat');
                $('#acordeonSat').removeClass('d-none');
            });

        });


        /* $('#pdfFactura').on('change', function() {
             const file = this.files[0];
             if (!file) return;

             const url = URL.createObjectURL(file);

            /* $('#previewFactura')
                 .removeClass('d-none')*/

        // Abrir accordion
        /*const collapseFactura = new bootstrap.Collapse(
                    document.getElementById('comprobante_estudios'), {
                        toggle: true
                    }
                );
            });

            // VERIFICACIÓN SAT
            $('#pdfSat').on('change', function() {
                const file = this.files[0];
                if (!file) return;

                const url = URL.createObjectURL(file);

                $('#previewSat')
                    .removeClass('d-none');
                // Abrir accordion
                const collapseSat = new bootstrap.Collapse(
                    document.getElementById('verificacion'), {
                        toggle: true
                    }
                );
            });*/
    </script>
@endpush