@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> Factura</h4>
                                <style>
                                    .btn-ver-xml {
                                        display: inline-flex;
                                        align-items: center;
                                        gap: 8px;
                                        cursor: pointer;
                                        color: #2563eb;
                                        font-weight: 600;
                                        padding: 6px 10px;
                                        border-radius: 8px;
                                        transition: all 0.2s ease;
                                    }

                                    .btn-ver-xml:hover {
                                        background: linear-gradient(90deg, #e0f2fe, #f0f9ff);
                                        box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
                                    }

                                    .btn-ver-xml:hover svg {
                                        transform: rotate(-5deg) scale(1.1);
                                    }



                                    #xml-tree ul {
                                        list-style: none;
                                        margin-left: 20px;
                                        padding-left: 15px;
                                        border-left: 1px dashed #ccc;
                                        font-family: monospace;
                                    }

                                    #xml-tree li {
                                        margin: 4px 0;
                                    }

                                    #xml-tree .nodo {
                                        cursor: pointer;
                                        font-weight: bold;
                                        color: #2563eb;
                                    }

                                    #xml-tree li.cerrado>ul {
                                        display: none;
                                    }

                                    .monto-destacado {
                                        font-size: 25px;
                                        font-weight: 700;
                                        color: #15803d;
                                        /* verde elegante */
                                        background-color: #f0fdf4;
                                        /* verde muy claro */
                                        border: 2px solid #22c55e;
                                        border-radius: 10px;
                                        font-variant-numeric: tabular-nums;
                                        letter-spacing: 1px;
                                        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
                                        text-align: center;

                                    }

                                    .monto-secundario {
                                        color: #1d4ed8;
                                        background-color: #eff6ff;
                                        border: 2px solid #3b82f6;
                                        font-size: 22px;
                                        font-weight: 700;
                                        /*border-radius: 10px;*/
                                        font-variant-numeric: tabular-nums;
                                        letter-spacing: 1px;
                                        text-align: center;
                                    }

                                    .texto-factura {
                                        font-weight: bold;
                                        color: #1f2937;
                                        text-align: center;
                                    }

                                    .texto-folio {
                                        font-weight: bold;
                                        color: #1f2937;
                                        text-align: center;
                                        font-variant-numeric: tabular-nums;
                                        letter-spacing: 1px;
                                    }

                                    input,
                                    .form-control {
                                        text-align: center;
                                    }
                                </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('indexVerificarFacturas') }}"
                                            class="btn btn-rounded btn-dark back-fixed" aria-label="Regresar">
                                            <span class="btn-icon-start text-dark"><i class="fa fa-arrow-left"></i></span>
                                            Regresar
                                        </a>
                                    </ol>
                                </div>
                            </div>
                            <div class="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="accordion accordion-with-icon accordion-primary" id="accordion-six">
                                            <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="#datos_factura">
                                                        <span class="las la-file-invoice-dollar fs-3"></span>
                                                        <span class="accordion-header-text">Datos Factura</span>
                                                    </button>
                                                </h2>
                                                <div id="datos_factura" class="accordion-collapse collapse show"
                                                    aria-labelledby="headingOne6" data-bs-parent="#accordion-six">
                                                    <div class="accordion-body row">
                                                        <div class="col-lg-4 mb-3 col-md-6">
                                                            <label class="form-label">Folio </label>
                                                            <input type="text" name="numero_aula" class="form-control"
                                                                value="{{ $folio_factura }}" placeholder=""
                                                                id="numero_aula" readonly>
                                                        </div>
                                                        <div class="col-lg-2 mb-3 col-md-6">
                                                            <label class="form-label">Subtotal</label>
                                                            <input type="text" name="nombre_curso"
                                                                class="form-control"
                                                                value="$ {{ number_format($subtotal, 2, '.', ',') }}"
                                                                placeholder="" id="nombre_curso" readonly>
                                                        </div>
                                                        <div class="col-lg-2 mb-3 col-md-6">
                                                            <label class="form-label">IVA</label>
                                                            <input type="text" name="tipo_curso" class="form-control"
                                                                value="{{ number_format($iva, 2, '.', ',') }}"
                                                                placeholder="" id="tipo_de_curso" readonly>
                                                        </div>
                                                        <div class="col-lg-2 mb-3 col-md-6">
                                                            <label class="form-label">ISR</label>
                                                            <input type="text" name="tipo_curso" class="form-control"
                                                                value="{{ number_format($isr, 2, '.', ',') }}"
                                                                placeholder="" id="tipo_de_curso"readonly>
                                                        </div>
                                                        <div class="col-lg-2 mb-3 col-md-6">
                                                            <label class="form-label">TOTAL</label>
                                                            <input type="text" name="tipo_curso" class="form-control"
                                                                value="$ {{ number_format($total, 2, '.', ',') }}"
                                                                placeholder="" id="tipo_de_curso" readonly>
                                                        </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">
                                                        </div>
                                                        <div class="col-lg-2 mb-3 col-md-6">
                                                            <label class="form-label">RFC </label>
                                                            <input type="text" name="" class="form-control"
                                                                value="{{ $rfc_psc }}" readonly>
                                                        </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>
                                                        </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>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-item mt-2" id="acordeonSat">
                                            <h2 class="accordion-header accordion-header-primary" id="headingOne7">
                                                <button class="accordion-button btn light btn-primary" type="button"
                                                    data-bs-toggle="collapse" data-bs-target="#factura">
                                                    <span class="accordion-header-text">Revisar Factura</span>
                                                </button>
                                            </h2>
                                            <div id="factura" class="accordion-collapse collapse show"
                                                aria-labelledby="headingOne7" data-bs-parent="#accordion-six">
                                                <div class="accordion-body mb-0">
                                                    <!-- Vista previa PDF -->
                                                    <iframe
                                                        src="{{ asset('storage/facturas/psc/' . strtolower($unidad_nombre) . '/' . strtolower($tipoCurso) . '/' . $folio_factura . '.pdf') }}"
                                                        style="width:100%; height:100vh; border:none;">
                                                    </iframe>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-item mt-2" 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">Revisar 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
                                                        src="{{ asset('storage/facturas/psc/' . strtolower($unidad_nombre) . '/' . strtolower($tipoCurso) . '/' . $folio_factura . '_V.pdf') }}"
                                                        style="width:100%; height:100vh; border:none;">
                                                    </iframe>
                                                </div>
                                            </div>
                                        </div>
                                        <h3>
                                            <a class="btn-ver-xml"
                                                data-url="{{ asset('storage/facturas/psc/' . strtolower($unidad_nombre) . '/' . strtolower($tipoCurso) . '/' . $folio_factura . '.xml') }}"
                                                onclick="abrirXml(this.dataset.url); return false;"
                                                style="cursor: pointer; hover: underline;">
                                                Ver XML
                                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="50"
                                                    height="50" viewBox="0 0 48 48">
                                                    <path fill="#1e88e5"
                                                        d="M40.69,35.42c-9.15,11.88-21.41,8.8-26.23,6.1 c-7.35-4.11-12.5-13.68-9.44-23.25c0.9-2.82,2.27-5.23,3.98-7.23c1.67,0.13,3.65,0.13,6-0.04c14-1,18,11,17,14 c-0.51,1.53-2.32,2.02-3.97,2.13c0.16-0.22,0.36-0.54,0.64-1.02c0.87-1.54,0.98-4.49-1.73-6.27c-2.61-1.7-5.43-0.65-6.88,1.28 c-1.45,1.92-0.88,4.81-0.37,6.09c2.2,5.52,6.26,6.95,9.02,7.78c2.76,0.83,6.86,0.71,9.05-0.19c2.18-0.91,2.8-1.43,3.22-0.97 C41.41,34.29,41.11,34.82,40.69,35.42z">
                                                    </path>
                                                    <path fill="#0d47a1"
                                                        d="M40.732,35.42c-3.48,4.52-7.41,6.87-11.21,7.91 c-0.03,0.01-0.06,0.01-0.08,0.02c-2.2,0.42-3.95,0.08-5.85-0.29c-3.09-0.6-7.35-4.01-8.38-10.18c-0.88-5.31,1.63-9.81,5.59-12.54 c-0.26,0.24-0.49,0.5-0.7,0.78c-1.45,1.92-0.88,4.81-0.37,6.09c2.2,5.52,6.26,6.95,9.02,7.78c2.76,0.83,6.86,0.71,9.05-0.19 c2.18-0.91,2.8-1.43,3.22-0.97C41.452,34.29,41.152,34.82,40.732,35.42z">
                                                    </path>
                                                    <path fill="#00e5ff"
                                                        d="M26.94,4.25c0.02,0.26,0.03,0.54,0.03,0.81c0,3.78-1.75,7.14-4.48,9.32 c-1.02-0.52-2.21-0.94-3.65-1.22c-4.07-0.78-10.63,1.1-13.3,5.77c-0.88,1.53-1.25,3.1-1.41,4.55c0.04-1.71,0.33-3.46,0.89-5.21 C8.31,8.01,17.86,3.05,26.94,4.25z">
                                                    </path>
                                                    <path fill="#00e676"
                                                        d="M41.4,27.89c-2.76,2.78-6.27,2.86-8.67,2.73 c-2.41-0.12-3.59-0.82-4.69-1.5c-1.11-0.69-0.48-1.37-0.37-1.52c0.11-0.15,0.38-0.41,1-1.49c0.29-0.51,0.5-1.18,0.54-1.91 c4.62-3.43,7.96-8.49,9.16-14.34c2.92,2.95,4.3,6.21,4.79,7.61C44.04,19.99,44.71,24.56,41.4,27.89z">
                                                    </path>
                                                    <path fill="#1de9b6"
                                                        d="M38.37,9.85v0.01c-1.2,5.85-4.54,10.91-9.16,14.34c0.03-0.42,0-0.87-0.1-1.32 c0-0.02-0.01-0.04-0.01-0.05c-0.25-1.47-0.99-3.33-2.22-4.77c-1.22-1.44-2.52-2.73-4.39-3.68c2.73-2.18,4.48-5.54,4.48-9.32 c0-0.27-0.01-0.55-0.03-0.81c0.4,0.05,0.79,0.11,1.19,0.19C32.74,5.33,36.04,7.49,38.37,9.85z">
                                                    </path>
                                                </svg>
                                            </a>
                                        </h3>
                                        @if ($estatus_factura != 3)
                                            <div class="row text-center mt-4">
                                                <div class="col-lg-6 mb-3 col-md-6 justify-content-center "
                                                    id="divRechazarAula">
                                                    <button type="button" class="btn btn-danger w-100 mt-3"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#rechazar">Rechazar</button>
                                                </div>
                                                <div class="col-lg-6 mb-3 col-md-6 justify-content-center "
                                                    id="autorizarAula">
                                                    <button type="button" class="btn btn-success w-100 mt-3"
                                                        data-bs-toggle="modal" data-bs-target="#autorizar">Autorizar
                                                    </button>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                    @if ($estatus_factura == 3)
                                        <div class="alert alert-success alert-dismissible fade show text-center">
                                            <div class="media">
                                                <div class="media-body">
                                                    <h5 class="mt-1 mb-1 text-primary"><i class="fas fa-check-circle"></i>
                                                        Esta factura ya se encuentra
                                                        autorizada.</h5>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    {{-- 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>
                                    <!---------------------------------- MODAL AUTORIZAR AULA ---------------------------->
                                    <div class="modal fade" id="autorizar" aria-modal="true" role="dialog">
                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header alert-success">
                                                    <h5 class="modal-title">Autorizar Factura</h5>
                                                    <h5 class="modal-title text-success">
                                                        &nbsp;{{ $aula->aul_clave_registro }}</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                                                    </button>
                                                </div>
                                                <div class="modal-body text-center align-items-center">
                                                    <form action="{{ route('autorizarFactura') }}" method="post" id="formAutorizar">
                                                        <strong>{{ $aula->aul_curso_nombre }}</strong><br>
                                                        <label
                                                            class="form-label mt-2 {{ $pago_estatal == 0 ? 'd-none' : '' }}">Pago
                                                            Estatal </label>
                                                        <div
                                                            class="d-flex justify-content-center {{ $pago_estatal == 0 ? 'd-none' : '' }}">
                                                            <input type="text"
                                                                class="form-control w-50 text-center monto-destacado"
                                                                value="$ {{ number_format($total, 2, '.', ',') }}"
                                                                readonly>
                                                        </div>
                                                        <input type="hidden" name="monto_estatal" value="{{ $pago_estatal == 0 ? 0 : $total}}">
                                                        <label
                                                            class="form-label mt-2 {{ $pago_federal == 0 ? 'd-none' : '' }}">Pago
                                                            Federal </label>
                                                          
                                                        <div
                                                            class="d-flex justify-content-center {{ $pago_federal == 0 ? 'd-none' : '' }}">
                                                            <input type="text"
                                                                class="form-control w-50 text-center monto-destacado"
                                                                value="$ {{ number_format($total, 2, '.', ',') }}"  name=""
                                                                readonly>
                                                        </div>
                                                          <input type="hidden" name="monto_federal" value="{{ $pago_federal == 0 ? 0 : $total}}">
                                                        <label
                                                            class="form-label mt-2 {{ $pago_ip == 0 ? 'd-none' : '' }}">Pago
                                                            IP </label>
                                                        <div
                                                            class="d-flex justify-content-center {{ $pago_ip == 0 ? 'd-none' : '' }}">
                                                            <input type="text"
                                                                class="form-control w-50 text-center monto-destacado"
                                                                value="$ {{ number_format($total, 2, '.', ',') }}" name=""
                                                                readonly>
                                                        </div>
                                                          <input type="hidden" name="monto_ip" value="{{ $pago_ip == 0 ? 0 : $total}}">
                                                </div>

                                                @csrf
                                                <div class="modal-footer d-flex">
                                                    <button type="button" class="btn btn-danger light"
                                                        data-bs-dismiss="modal">Cerrar</button>
                                                    <button type="submit" class="btn btn-primary" id="btnConfirmarAutorizar">Confirmar</button>
                                                    <input type="hidden" name="id_factura" value="{{ $id_factura }}">
                                                </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <!---------------------------------- MODAL RECHAZAR AULA ---------------------------->
                                    <div class="modal fade" id="rechazar" aria-modal="true" role="dialog">
                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header alert-danger">
                                                    <h5 class="modal-title">Rechazar Factura</h5>
                                                    <h5 class="modal-title text-danger">
                                                        &nbsp;{{ $aula->aul_clave_registro }}</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                                                    </button>
                                                </div>
                                                <form action="{{ route('rechazarFactura') }}" method="post" id="formRechazar">
                                                    @csrf
                                                    <div class="modal-body text-center">
                                                        <strong>{{ $aula->aul_curso_nombre }}</strong>
                                                        <textarea class="form-control mt-3" rows="2" name="observacion" id="comment"
                                                            onkeyup="this.value = this.value.toUpperCase()" placeholder="Escriba sus observaciones*" required></textarea>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-primary light"
                                                            data-bs-dismiss="modal">Cerrar</button>
                                                        <button type="submit" class="btn btn-danger" id="btnConfirmarRechazar">Confirmar</button>
                                                        <input type="hidden" name="id_factura"
                                                            value="{{ $id_factura }}">
                                                    </div>
                                                </form>

                                            </div>
                                        </div>
                                    </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();
            console.log(tipo_curso);
            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');
        }


        $('#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) {
                    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');
                    }
                    // hay diferencias
                    if (response.success === false && response.diferencias) {
                        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.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);
                    }


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

    
        function abrirXml(url) {
            const w = 1000;
            const h = 800;
            const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
            const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
            const width = window.innerWidth || document.documentElement.clientWidth || screen.width;
            const height = window.innerHeight || document.documentElement.clientHeight || screen.height;
            const left = dualScreenLeft + (width - w) / 2;
            const top = dualScreenTop + (height - h) / 2;
            window.open(
                url,
                'visorXML',
                `scrollbars=yes,resizable=yes,width=${w},height=${h},top=${top},left=${left}`
            );
        }

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

            $('#formAutorizar').on('submit', function() {
                const btn = $('#btnConfirmarAutorizar');
                btn.prop('disabled', true)
                   .html('<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> Procesando...');
                setTimeout(function() {
                    btn.prop('disabled', false).html('Confirmar');
                }, 10000);
            });

            $('#formRechazar').on('submit', function() {
                const btn = $('#btnConfirmarRechazar');
                btn.prop('disabled', true)
                   .html('<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> Procesando...');
                setTimeout(function() {
                    btn.prop('disabled', false).html('Confirmar');
                }, 10000);
            });

        });
    </script>
@endpush