@extends('layout.template')
@section('title', 'ICAT')
@section('content')
    <div class="content-body">
        <!-- row -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12 col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <!--AULA-->
                            <h4 class="card-title">Crear Aula Unidad <strong class="text-primary">{{ $nombreUnidad }}
                                </strong></h4>
                            <input type="hidden" id="idUnidadParaModelos" value="{{ $unidad }}">
                            <style>
                                .fecha-curso {
                                    background-color: #7ed321 !important;
                                    color: black !important;
                                    font-weight: bold;
                                }

                                .fecha-inhabil {
                                    background-color: #FF1616 !important;
                                    color: white !important;
                                    font-weight: bold;
                                }
                            </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="{{ url('aulas') }}" class="btn btn-rounded btn-dark back-fixed"
                                        aria-label="Regresar">
                                        <span class="btn-icon-start text-dark"><i class=" ri-arrow-left-line"></i></span>
                                        Regresar
                                    </a>
                                </ol>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="basic-form">
                                <form action="{{ route('buscarCursoRegistrado') }}" class="buscar_registro_curso"
                                    method="post" id="formulario">
                                    @csrf
                                    <input type="hidden" name="tipo_curso" id="tipo_curso_hidden" value="">
                                    <div class="row"> <!-- Unidad, tipo de curso, PSC, Cursos Aut., Modelo N.,  -->
                                        <form action="{{ route('buscarCursoRegistrado') }}" class="buscar_registro_curso"
                                            method="post" id="formulario">
                                            @csrf
                                            <input type="hidden" name="tipo_curso" id="tipo_curso_hidden" value="">
                                            <div class="row">
                                                <div class="col-lg-2 mb-3 col-md-6 d-none" id="divUnidad">
                                                    <label class="form-label">Unidad de Capacitaci&oacute;n</label>
                                                    <select name="unidad" class="form-control" id="unidad" required>
                                                        @if ($puedeVerTodasLasUnidades)
                                                            <option value="">Seleccione</option>
                                                        @endif
                                                        @foreach ($unidadCapacitacion as $unidad)
                                                            <option value="{{ $unidad->id }}">
                                                                {{ $unidad->nombre }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('unidad')
                                                        <div class="text-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                                <div class="col-lg-2 mb-3 col-md-6">
                                                    <label class="form-label">Tipo de Curso</label>
                                                    <select class="form-control" name="tipo_curso" id="tipo_curso" required
                                                        {{ $puedeVerTodasLasUnidades == 1 ? 'disabled' : '' }}>
                                                        <option value=""> Seleccione</option>
                                                        <option value="1"
                                                            class="{{ $cursos_para_el_trabajo == 0 || is_null($cursos_para_el_trabajo) ? 'text-danger bg-light' : 'text-success' }}"
                                                            {{ $cursos_para_el_trabajo == 0 || is_null($cursos_para_el_trabajo) ? 'disabled' : '' }}>
                                                            PARA EL TRABAJO
                                                            {{ is_null($cursos_para_el_trabajo) ? '0' : $cursos_para_el_trabajo }}
                                                        </option>
                                                        <option value="2"
                                                            class="{{ $cursos_en_el_trabajo == 0 || is_null($cursos_en_el_trabajo) ? 'text-danger bg-light' : 'text-success' }}"
                                                            {{ $cursos_en_el_trabajo == 0 || is_null($cursos_en_el_trabajo) ? 'disabled' : '' }}>
                                                            EN EL TRABAJO
                                                            {{ is_null($cursos_en_el_trabajo) ? '0' : $cursos_en_el_trabajo }}
                                                        </option>
                                                        <option value="4"
                                                            class="{{ $cursos_evaluacion == 0 || is_null($cursos_evaluacion) ? 'text-danger bg-light' : 'text-success' }}"
                                                            {{ $cursos_evaluacion == 0 || is_null($cursos_evaluacion) ? 'disabled' : '' }}>
                                                            EVALUACI&Oacute;N
                                                            {{ is_null($cursos_evaluacion) ? '0' : $cursos_evaluacion }}
                                                        </option>
                                                        <option value="6"
                                                            class="{{ $cursos_roco == 0 || is_null($cursos_roco) ? 'text-danger bg-light' : '' }}"
                                                            {{ $cursos_roco == 0 || is_null($cursos_roco) ? 'disabled' : '' }}>
                                                            ROCO {{ is_null($cursos_roco) ? '0' : $cursos_roco }}
                                                        </option>
                                                        <!-------------------------------------------------- SECCION CONOCER -------------------------------------------------->
                                                        <option value="7"
                                                            class="{{ $cursos_conocer == 0 || is_null($cursos_conocer) ? 'text-danger bg-light' : 'text-success' }}"
                                                            {{ $cursos_conocer < 1 || is_null($cursos_conocer) ? 'disabled' : '' }}>
                                                            CONOCER
                                                            {{ is_null($cursos_conocer) ? '0' : $cursos_conocer }}
                                                        </option>
                                                        <!-------------------------------------------------- END SECCION CONOCER -------------------------------------------------->
                                                    </select>
                                                    @error('tipo_curso')
                                                        <div class="text-danger">{{ $message }}</div>
                                                    @enderror
                                                    <div class="text-danger" id="message_tipo"></div>
                                                </div>
                                                <div class="col-lg-5 mb-3 col-md-6" id="divInstructor">
                                                    <label class="form-label">Instructores Autorizados</label>
                                                    <select name="instructor" class="form-control" id="instructor" required>
                                                        <option value=""> Seleccione</option>
                                                    </select>
                                                    @error('instructor')
                                                        <div class="text-danger">{{ $message }}</div>
                                                    @enderror
                                                    <input type="hidden" name="instructor" id="instructor_hidden"
                                                        value="">
                                                    <div class="text-danger" id="message_instructor"></div>
                                                </div>
                                                <div class="col-lg-5 mb-3 col-md-6" id="divCursos">
                                                    <label class="form-label">Cursos Autorizados / Competencias</label>
                                                    <select name="curso" class="form-select" id="curso" required>
                                                        <option value="">Seleccione un curso</option>
                                                    </select>
                                                    @error('curso')
                                                        <div class="text-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                                <!-------------------------------------------------- SECCION CONOCER -------------------------------------------------->
                                                <div class="col-lg-3 col-md-3 mb-3 d-none" id="tipoCertificadoConocer">
                                                    <label class="form-label" for="tipoConocer">Tipo de
                                                        Certificado</label>
                                                    <select class="form-control" id="tipoConocer" name="tipoConocer">
                                                        <option data-id="0" value="">Seleccione una opción
                                                        </option>
                                                        <option data-id="1" value="EXPEDICIÓN">EXPEDICIÓN</option>
                                                        <option data-id="2" value="REPOSICIÓN">REPOSICIÓN</option>
                                                        <option data-id="3" value="CORRECCIÓN">CORRECCIÓN</option>
                                                    </select>
                                                </div>
                                                <!-------------------------------------------------- END SECCION CONOCER -------------------------------------------------->
                                                <div class="row align-items-end d-none" id="divModeloNegocio">
                                                    <div class="col-lg-4 col-md-6 mb-3" id="divCursos">
                                                        <label class="form-label">Modelo de Negocio</label>
                                                        <select name="modelo" class="form-select" id="modelo">
                                                            <option value="">Seleccione un curso</option>
                                                        </select>
                                                        @error('curso')
                                                            <div class="text-danger">{{ $message }}</div>
                                                        @enderror
                                                        <div class="text-danger" id="message_modelo"></div>
                                                    </div>
                                                    <div class="col-lg-8 col-md-6 mb-3">
                                                        <div class="col-lg-4 col-md-6">
                                                            <!-- Label fantasma para alinear -->
                                                            <label class="form-label invisible">Aceptar</label>
                                                            <button type="submit" class="btn btn-success w-100 "
                                                                id="" onclick="validateCurso(event)">
                                                                Aceptar
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12 col-md-6 d-flex justify-content-end m-3"
                                                    id="divBtnAceptar">
                                                    <button type="submit" class="btn btn-success w-25"
                                                        id="btn_buscar_curso" onclick="validateCurso(event)">
                                                        Aceptar
                                                    </button>
                                                </div>
                                                <input type="hidden" name="id" value="" id="id">

                                                {{-- --------------------------------------------------------- --}}
                                                <div class="accordion accordion-with-icon accordion-primary d-none"
                                                    id="accordion-modelo">
                                                    <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_modelo">
                                                                <span class=" ri-box-3-line"></span>
                                                                <span class="accordion-header-text">Buscar Modelo de
                                                                    Negocio por
                                                                    monto $ </span>
                                                            </button>
                                                        </h2>
                                                        <div id="acc_modelo" class="accordion-collapse collapse show"
                                                            aria-labelledby="headingOne6"
                                                            data-bs-parent="#accordion-modelo">
                                                            <div class="accordion-body row">
                                                                <input type="hidden" name="idMod" id="idModInput">
                                                                <!--<p>Modelo de Negocio seleccionado: <span id="modeloSeleccionado">-----</span><input
                                                                                                                                                                                                                                                                                                                    type="hidden" name="idMod" id="idModInput"></p>-->
                                                                <div class="col-lg-12 col-md-6 mb-3  row">
                                                                    <!-- $ total de ingreso por capacitandos, $ total de ingreso por madres, $ total de pago al instructor -->
                                                                    <div class="col-lg-3 col-md-6 mb-3">
                                                                        <div class="row">
                                                                            <!-- # capacitandos, $ por capacitando, $ total de ingreso de los capacitandos -->
                                                                            <div class="col">
                                                                                <label for="numeroDeCapacitandos"
                                                                                    class="form-label"># de
                                                                                    Capacitandos</abel>
                                                                                    <input type="text"
                                                                                        class="form-control select-on-click filtro-busqueda"
                                                                                        id="numeroDeCapacitandos"
                                                                                        name="numeroDeCapacitandos"
                                                                                        autocomplete="off" placeholder=""
                                                                                        value="0" pattern="[0-9]*"
                                                                                        inputmode="numeric"
                                                                                        oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                                                                    <div class="invalid-feedback"></div>
                                                                            </div>
                                                                            <div class="col">
                                                                                <label for="ingresoPorCapacitando"
                                                                                    class="form-label">$ por
                                                                                    Capacitando</label>
                                                                                <input type="text"
                                                                                    class="form-control select-on-click filtro-busqueda"
                                                                                    id="ingresoPorCapacitando"
                                                                                    name="ingresoPorCapacitando"
                                                                                    autocomplete="off" placeholder=""
                                                                                    value="0"
                                                                                    pattern="^\d+(\.\d{1,2})?$"
                                                                                    inputmode="decimal"
                                                                                    oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1'); this.value = this.value.replace(/^(\d+(\.\d{0,2})?).*$/, '$1');">
                                                                                <div class="invalid-feedback"></div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="row">
                                                                            <!-- # madres, $ por madre, $ total de ingreso de  madres -->
                                                                            <div class="col">
                                                                                <label for="numeroDeMadres"
                                                                                    class="form-label">#
                                                                                    de Madres
                                                                                    Solteras</label>
                                                                                <input type="text"
                                                                                    class="form-control select-on-click filtro-busqueda"
                                                                                    id="numeroDeMadres"
                                                                                    name="numeroDeMadres"
                                                                                    autocomplete="off" placeholder=""
                                                                                    value="0" pattern="[0-9]*"
                                                                                    inputmode="numeric"
                                                                                    oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                                                                <div class="invalid-feedback"></div>
                                                                            </div>
                                                                            <div class="col">
                                                                                <label for="ingresoPorMadre"
                                                                                    class="form-label">$
                                                                                    por Madre
                                                                                    Soltera</label>
                                                                                <input type="text"
                                                                                    class="form-control select-on-click filtro-busqueda"
                                                                                    id="ingresoPorMadre"
                                                                                    name="ingresoPorMadre"
                                                                                    autocomplete="off" placeholder=""
                                                                                    value="0"
                                                                                    oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1'); this.value = this.value.replace(/^(\d+(\.\d{0,2})?).*$/, '$1');">
                                                                                <div class="invalid-feedback"></div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="row">
                                                                            <!-- # de horas, $ pago por hora, $ pago total del instructor -->
                                                                            <div class="col">
                                                                                <label for="horasDelCurso"
                                                                                    class="form-label"># de
                                                                                    Horas</label>
                                                                                <input type="text"
                                                                                    class="form-control select-on-click filtro-busqueda"
                                                                                    id="horasDelCurso"
                                                                                    name="horasDelCurso"
                                                                                    autocomplete="off" placeholder=""
                                                                                    value="0" pattern="[0-9]*"
                                                                                    inputmode="numeric"
                                                                                    oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                                                                <div class="invalid-feedback"></div>
                                                                            </div>
                                                                            <div class="col">
                                                                                <label for="pagoPorHoraAlPSC"
                                                                                    class="form-label">$
                                                                                    por Hora a PSC
                                                                                    <small>(sin impuestos)</small></label>
                                                                                <input type="text"
                                                                                    class="form-control select-on-click filtro-busqueda"
                                                                                    id="pagoPorHoraAlPSC"
                                                                                    name="pagoPorHoraAlPSC"
                                                                                    autocomplete="off" placeholder=""
                                                                                    value="0"
                                                                                    pattern="^\d+(\.\d{1,2})?$"
                                                                                    inputmode="decimal"
                                                                                    oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1'); this.value = this.value.replace(/^(\d+(\.\d{0,2})?).*$/, '$1');">
                                                                                <div class="invalid-feedback"></div>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <div class="col-lg-9 col-md-6 "
                                                                        id="resultadoBusquedaMN">
                                                                        <!-- Aquí se mostrarán los resultados de  búsqueda en una tabla con datatable y scroll vertical -->
                                                                        <table id="tablaResultadosMN"
                                                                            class="table table-hover table-bordered w-100">
                                                                            <thead>
                                                                                <tr class="alert-primary text-light">
                                                                                    <th class="auto-width">Modelo de
                                                                                        Negocio</th>
                                                                                    <th class="auto-width"># Capacitandos
                                                                                    </th>
                                                                                    <th class="auto-width">$ x Capacitando
                                                                                    </th>
                                                                                    <th class="auto-width"># Madres
                                                                                        Solteras</th>
                                                                                    <th class="auto-width">$ x Madre
                                                                                        Soltera</th>
                                                                                    <th class="auto-width"># Horas</th>
                                                                                    <th class="auto-width">$ x Hora PSC
                                                                                    </th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                <!-- Los datos se llenarán dinámicamente mediante AJAX -->
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-------------------------------------------------- SECCION CONOCER -------------------------------------------------->
                                                <!-------------------------------------------------- SECCION CONOCER -------------------------------------------------->
                                                <!-------------------------------------------------- SECCION CONOCER -------------------------------------------------->
                                                <!-------------------------------------------------- SECCION CONOCER -------------------------------------------------->
                                                <!-------------------------------------------------- SECCION CONOCER -------------------------------------------------->
                                                <!-------------------------------------------------- SECCION CONOCER -------------------------------------------------->

                                                <div class="accordion accordion-with-icon accordion-primary d-none"
                                                    id="accordion-conocer">
                                                    <div class="accordion-item">
                                                        <div id="acc_conocer" class="accordion-collapse collapse show"
                                                            aria-labelledby="headingOne6"
                                                            data-bs-parent="#accordion-conocer">
                                                            <div class="row">
                                                                <div class="col-lg-12 col-md-12">
                                                                    <div class="accordion accordion-with-icon accordion-primary"
                                                                        id="accordion-add-capacitandos">
                                                                        <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_add_capacitandos">
                                                                                    <span
                                                                                        class=" ri-upload-cloud-2-line"></span>
                                                                                    <span
                                                                                        class="accordion-header-text">Capacitando</span>
                                                                                </button>
                                                                            </h2>
                                                                            <div id="acc_add_capacitandos"
                                                                                class="accordion-collapse collapse show"
                                                                                aria-labelledby="headingOne6"
                                                                                data-bs-parent="#accordion-add-capacitandos">
                                                                                <div class="accordion-body row">
                                                                                    @include('application.Aulas.view_aula_cap')
                                                                                    <div class="msg-error mb-3 text-danger d-none"
                                                                                        id="div_msg_error">
                                                                                        <strong id="msg_error"></strong>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <div id="seccionDatosCapacitando" class="d-none">
                                                                        <!-- Datos del capacitando seleccionado -->
                                                                        <input type="hidden" id="id_alumno_form"
                                                                            name="id_alumno" value="">
                                                                        <table id="capacitandos"
                                                                            class="table display dataTable no-footertable capacitandos-table"
                                                                            style="width:100%" role="grid"
                                                                            id="example33"
                                                                            aria-describedby="example3_info">
                                                                            <thead>
                                                                                <tr class="">
                                                                                    <th class="sorting auto-width"
                                                                                        tabindex="0"
                                                                                        aria-controls="example3"
                                                                                        rowspan="1" colspan="1"
                                                                                        aria-label="Education: activate to sort column ascending">
                                                                                        CURP</th>
                                                                                    <th class="sorting auto-width"
                                                                                        tabindex="0"
                                                                                        aria-controls="example3"
                                                                                        rowspan="1" colspan="1"
                                                                                        aria-label="Education: activate to sort column ascending"
                                                                                        nowrap>NOMBRE</th>
                                                                                    <th class="sorting auto-width"
                                                                                        tabindex="0"
                                                                                        aria-controls="example3"
                                                                                        rowspan="1" colspan="1"
                                                                                        aria-label="Education: activate to sort column ascending"
                                                                                        nowrap>UNIDAD</th>
                                                                                    <th class="sorting auto-width"
                                                                                        tabindex="0"
                                                                                        aria-controls="example3"
                                                                                        rowspan="1" colspan="1"
                                                                                        aria-label="Education: activate to sort column ascending"
                                                                                        nowrap>FOLIO DEL CERTIFICADO</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <div class="dataTables_scrollBody"
                                                                                style="position: relative; overflow: auto; max-height: 42vh; width: 100%;">
                                                                                <tbody>
                                                                                    <tr id="capacitando_seleccionado">
                                                                                        <td>
                                                                                            <input type="hidden"
                                                                                                id="id_alumno_form"
                                                                                                name="id_alumno_form">
                                                                                            <span id="curp_form"></span>
                                                                                        </td>
                                                                                        <td><span id="nombre_form"></span>
                                                                                        </td>
                                                                                        <td><span id="unidad_form"></span>
                                                                                        </td>
                                                                                        <td>
                                                                                            <input type="text"
                                                                                                class="form-control"
                                                                                                id="folio_form"
                                                                                                name="folio_form"
                                                                                                placeholder=""
                                                                                                oninput="this.value = this.value.toUpperCase()"
                                                                                                disabled>
                                                                                            <div class="text-danger small"
                                                                                                id="message_folio"></div>
                                                                                        </td>
                                                                                    </tr>
                                                                                </tbody>
                                                                            </div>
                                                                        </table>

                                                                        <div class="row mt-3 d-none" id="paraCorreccion">
                                                                            <!-- Fila de los 3 selectores de corrección -->

                                                                            <div class="col-lg-4 col-md-4">
                                                                                <label class="form-label">Corrección en
                                                                                    Nombre</label>
                                                                                <select class="form-control"
                                                                                    id="correccionNombre"
                                                                                    name="correccionNombre">
                                                                                    <option data-seleccion="0"
                                                                                        value="NO">NO
                                                                                    </option>
                                                                                    <option data-seleccion="1"
                                                                                        value="SI">SI
                                                                                    </option>
                                                                                </select>
                                                                            </div>
                                                                            <div class="col-lg-4 col-md-4">
                                                                                <label class="form-label">Corrección en
                                                                                    CURP</label>
                                                                                <select class="form-control"
                                                                                    id="correccionCurp"
                                                                                    name="correccionCurp">
                                                                                    <option data-seleccion="0"
                                                                                        value="NO">NO
                                                                                    </option>
                                                                                    <option data-seleccion="1"
                                                                                        value="SI">SI
                                                                                    </option>
                                                                                </select>
                                                                            </div>
                                                                            <div class="col-lg-4 col-md-4">
                                                                                <label class="form-label">Corrección en
                                                                                    Foto</label>
                                                                                <select class="form-control"
                                                                                    id="correccionFoto"
                                                                                    name="correccionFoto">
                                                                                    <option data-seleccion="0"
                                                                                        value="NO">NO
                                                                                    </option>
                                                                                    <option data-seleccion="1"
                                                                                        value="SI">SI
                                                                                    </option>
                                                                                </select>
                                                                            </div>
                                                                            <!-- <div class="col-lg-3 col-md-4">
                                                                                                                                                                                    <label class="form-label">FOLIO DE SOLICITUD</label>
                                                                                                                                                                                    <input type="text" class="form-control" id="folio2_form" name="folio2_form" placeholder="" oninput="this.value = this.value.toUpperCase()" disabled>
                                                                                                                                                                                    <div class="text-danger small" id="message_folio2"></div>
                                                                                                                                                                                </div> -->
                                                                        </div>

                                                                        <!-- Fila de campos adicionales (aparecen debajo) -->
                                                                        <div class="row mt-3 d-none"
                                                                            id="filaCamposCorreccion">
                                                                            <!-- Columna para corrección de nombre (siempre ocupa su espacio) -->
                                                                            <div class="col-lg-4 col-md-4">
                                                                                <div class="d-none"
                                                                                    id="divNombreCorreccion">
                                                                                    <label class="form-label">Nombre
                                                                                        Actual</label>
                                                                                    <input type="text"
                                                                                        class="form-control"
                                                                                        id="nombreActual"
                                                                                        name="nombreActual" readonly
                                                                                        style="background-color:rgb(192, 212, 222); text-transform: uppercase;">
                                                                                    <label
                                                                                        class="form-label mt-2">Documento
                                                                                        dice:</label>
                                                                                    <input type="text"
                                                                                        class="form-control"
                                                                                        id="nombreCorrecto"
                                                                                        name="nombreCorrecto"
                                                                                        style="background-color:rgb(192, 212, 222); text-transform: uppercase;">
                                                                                    <div class="text-danger small"
                                                                                        id="message_nombreCorrecto"></div>
                                                                                </div>
                                                                            </div>
                                                                            <!-- Columna para corrección de CURP (siempre ocupa su espacio) -->
                                                                            <div class="col-lg-4 col-md-4">
                                                                                <div class="d-none"
                                                                                    id="divCurpCorreccion">
                                                                                    <label class="form-label">CURP
                                                                                        Actual</label>
                                                                                    <input type="text"
                                                                                        class="form-control"
                                                                                        id="curpActual" name="curpActual"
                                                                                        readonly
                                                                                        style="background-color:rgb(213, 204, 221); text-transform: uppercase;">
                                                                                    <label
                                                                                        class="form-label mt-2">Documento
                                                                                        dice:</label>
                                                                                    <input type="text"
                                                                                        class="form-control"
                                                                                        id="curpCorrecto"
                                                                                        name="curpCorrecto"
                                                                                        style="background-color:rgb(213, 204, 221); text-transform: uppercase;">
                                                                                    <div class="text-danger small"
                                                                                        id="message_curpCorrecto"></div>
                                                                                </div>
                                                                            </div>
                                                                            <!-- Columna para corrección de foto (siempre ocupa su espacio) -->
                                                                            <div class="col-lg-4 col-md-4">
                                                                                <div class="d-none"
                                                                                    id="divFotoCorreccion">
                                                                                    <label class="form-label">Corrección en
                                                                                        Foto
                                                                                        (nota)</label>
                                                                                    <textarea class="form-control" id="fotoNota" name="fotoNota" rows="4"
                                                                                        placeholder="Escriba aquí una breve anotación..."
                                                                                        style="background-color:rgb(213, 196, 196); text-transform: uppercase; resize: none;"></textarea>
                                                                                    <div class="text-danger small"
                                                                                        id="message_fotoNota"></div>
                                                                                </div>
                                                                            </div>
                                                                        </div>

                                                                        <!--------------------------------------------- INCLUDE DE FACTURAS ------------------------------------->
                                                                        @include('application.Aulas.pago_conocer')
                                                                        <!--------------------------------------------- INCLUDE DE FACTURAS ------------------------------------->

                                                                        <div class="row mt-5">
                                                                            <div class="col-md">
                                                                                <div class="d-grid gap-2">
                                                                                    <button class="btn btn-primary"
                                                                                        type="button"
                                                                                        id="guardarConocer"><i
                                                                                            class=" ri-save-line 2x"></i>
                                                                                        GUARDAR PARA REVISIÓN </button>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-------------------------------------------------- END SECCION CONOCER -------------------------------------------------->
                                                <!-------------------------------------------------- END SECCION CONOCER -------------------------------------------------->
                                                <!-------------------------------------------------- END SECCION CONOCER -------------------------------------------------->
                                                <!-------------------------------------------------- END SECCION CONOCER -------------------------------------------------->
                                                <!-------------------------------------------------- END SECCION CONOCER -------------------------------------------------->
                                                <!-------------------------------------------------- END SECCION CONOCER -------------------------------------------------->
                                            </div>

                                        </form>
                                        <form action="{{ route('crearAula') }}" method="post">
                                            @csrf
                                            <div class="row d-none" id="formulario_aula">
                                                <div class="alert alert-primary alert-dismissible fade show bg-primary">
                                                    <i class=" ri-book-open-line text-white fs-3 float-start mx-1"></i> <span
                                                        class="text-white">Datos del
                                                        Aula</span>
                                                </div>
                                                <div class="col-lg-4 mb-3 col-md-6">
                                                    <label class="form-label">Nombre del Curso</label>
                                                    <input type="text" name="nombre_curso" class="form-control"
                                                        value="{{ old('nombre_curso') }}" 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-4 mb-3 col-md-6">
                                                    <label class="form-label">Especialidad</label>
                                                    <input type="text" name="especialidad" class="form-control"
                                                        value="{{ old('especialidad') }}" 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>
                                                    <input type="hidden" value="" name="clave_especialidad"
                                                        id="clave_especialidad">
                                                </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="{{ old('cfp') }}" 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-3 mb-3 col-md-6">
                                                    <label class="form-label">Instructor</label>
                                                    <input type="text" name="instructor" class="form-control"
                                                        value="{{ old('instructor') }}" 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-2 mb-3 col-md-6">
                                                    <label class="form-label">Tipo de Curso</label>
                                                    <input type="text" name="tipo_curso" class="form-control"
                                                        value="{{ old('tipo_curso') }}" placeholder=""
                                                        id="tipo_de_curso" onkeyup="this.value = this.value.toUpperCase()"
                                                        readonly>
                                                    <input type="hidden" name="id_tipo_curso" class="form-control"
                                                        value="" placeholder="" id="id_tipo_curso">
                                                    @error('id_tipo_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">Tipo de Formaci&oacute;n</label>
                                                    <input type="text" name="" class="form-control"
                                                        value="{{ old('clave_curso') }}" placeholder=""
                                                        id="tipo_formacion"
                                                        onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                    @error('clave_curso')
                                                        <div class="text-danger">{{ $message }}</div>
                                                    @enderror
                                                    <div class="text-danger" id="message_cfp"></div>
                                                </div>
                                                <input type="hidden" name="clave_curso" value="" placeholder=""
                                                    id="clave_curso">
                                                <input type="hidden" name="clave_registro" value=""
                                                    placeholder="" id="clave_registro">
                                                <input type="hidden" name="curso_id" id="curso_id">
                                                <input type="hidden" value="" id="registro_cursos_id"
                                                    name="registro_cursos_id">
                                                <input type="hidden" value="" id="id_modelo" name="id_modelo">
                                                <input type="hidden" value="" id="cap_modelo" name="cap_modelo">
                                                <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="{{ old('duracion') }}" 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">Costo por Capacitando</label>
                                                    <input type="text" name="costo_alumno" class="form-control"
                                                        value="{{ old('costo_alumno') }}" 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="row">
                                                    <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="" readonly>
                                                    </div>
                                                    <div class="col-lg-2 mb-3 col-md-6">
                                                        <label class="form-label">Costo del PSC</label>
                                                        <input type="text" name="costo_psc" class="form-control"
                                                            value="{{ old('nombre_curso') }}" 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">
                                                        <label class="form-label">Capacitandos</label>
                                                        <input type="number" name="minimo_capacitandos"
                                                            class="form-control" value="{{ old('minimo_capacitandos') }}"
                                                            placeholder="" id="minimo_capacitandos" min="15"
                                                            max="900">
                                                    </div>
                                                    <div class="col-lg-2 mb-3 col-md-6">
                                                        <label class="form-label">Clave Curso</label>
                                                        <input type="text" name="mostrar_clave_curso"
                                                            class="form-control" value="" placeholder=""
                                                            id="mostrar_clave_curso"
                                                            onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                    </div>
                                                    <div class="col-lg-2 mb-3 col-md-6">
                                                        <label class="form-label">Modalidad </label>
                                                        <select class="form-control" name="modalidad" id="modalidad"
                                                            required>
                                                            <option value="">Seleccione</option>
                                                            <option value="PRESENCIAL">PRESENCIAL</option>
                                                            <option value="EN LINEA">EN LINEA</option>
                                                            <option value="MIXTO">MIXTO</option>
                                                        </select>
                                                        @error('tipo_curso')
                                                            <div class="text-danger">{{ $message }}</div>
                                                        @enderror
                                                        <div class="text-danger" id="message_modalidad"></div>
                                                    </div>
                                                    <div class="col-lg-2 mb-3 col-md-6 d-none" id="div_ubicacion">
                                                        <label class="form-label">Ubicaci&oacute;n </label>
                                                        <select class="form-control" name="ubicacion" id="ubicacion"
                                                            required>
                                                            <option value="UNIDAD">UNIDAD</option>
                                                            <option value="EXTRAMUROS">EXTRAMUROS</option>
                                                        </select>
                                                        @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_equipo">
                                                        <label class="form-label">Equipo </label>
                                                        <select class="form-control" name="equipo" id="equipo"
                                                            required>
                                                            <option value="SI">SI</option>
                                                            <option value="NO">NO</option>
                                                        </select>
                                                        @error('tipo_curso')
                                                            <div class="text-danger">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                    <div class="col-lg-4 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="{{ old('enlace') }}" placeholder="" id="enlace"
                                                            onkeyup="this.value = this.value.toLowerCase()">
                                                        @error('enlace')
                                                            <div class="text-danger">{{ $message }}</div>
                                                        @enderror
                                                        <div class="text-danger" id="message_enlace"></div>
                                                    </div>
                                                    <div class="col-lg-12 mb-3 col-md-6 row d-none" id="div_extramuros">
                                                        <div class="alert alert-primary alert-dismissible fade show">
                                                            <i class=" ri-building-line"></i> <strong>Datos
                                                                Extramuros</strong>
                                                        </div>
                                                        <div class="col-lg-1 mb-3 col-md-6" id="div_enlace">
                                                            <label class="form-label">CP</label>
                                                            <input type="text" name="codigo_postal" class="form-control"
                                                                value="{{ old('codigo_postal') }}" placeholder=""
                                                                id="codigo_postal"
                                                                onkeyup="this.value = this.value.toUpperCase()">
                                                            @error('codigo_postal')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_cp"></div>
                                                        </div>
                                                        <div class="col-lg-2 mb-3 col-md-6" id="div_enlace">
                                                            <label class="form-label">Vialidad</label>
                                                            <select id="tipo_vialidad" class="form-control"
                                                                name="tipo_vialidad">
                                                                <option value="CALLE">CALLE</option>
                                                                <option value="AMPLIACION">AMPLIACIÓN</option>
                                                                <option value="ANDADOR">ANDADOR</option>
                                                                <option value="AVENIDA">AVENIDA</option>
                                                                <option value="BOULEVARD">BOULEVARD</option>
                                                                <option value="CALLEJON">CALLEJÓN</option>
                                                                <option value="CALZADA">CALZADA</option>
                                                                <option value="CAMINO">CAMINO</option>
                                                                <option value="CARRETERA">CARRETERA</option>
                                                                <option value="CIRCUITO">CIRCUITO</option>
                                                                <option value="CIRCUITO_INTERIOR">CIRCUITO INTERIOR
                                                                </option>
                                                                <option value="CIRCUNVALACION">CIRCUNVALACIÓN</option>
                                                                <option value="CONTINUACION">CONTINUACIÓN</option>
                                                                <option value="CORREDOR">CORREDOR</option>
                                                                <option value="CORTO">CORTO</option>
                                                                <option value="DIAGONAL">DIAGONAL</option>
                                                                <option value="EJE_VIAL">EJE VIAL</option>
                                                                <option value="PASAJE">PASAJE</option>
                                                                <option value="PEATONAL">PEATONAL</option>
                                                                <option value="PERIFERICO">PERIFÉRICO</option>
                                                                <option value="PRIVADA">PRIVADA</option>
                                                                <option value="PROLONGACION">PROLONGACIÓN</option>
                                                                <option value="RETORNO">RETORNO</option>
                                                                <option value="RUTA">RUTA</option>
                                                                <option value="SENDERO">SENDERO</option>
                                                                <option value="SUPERCARRETERA">SUPERCARRETERA</option>
                                                                <option value="TERRACERIA">TERRACERÍA</option>
                                                                <option value="TRANVIA">TRANVÍA</option>
                                                                <option value="VIADUCTO">VIADUCTO</option>
                                                            </select>

                                                            <div class="text-danger" id="message_tipo_vialidad"></div>
                                                        </div>
                                                        <div class="col-lg-2 mb-3 col-md-6" id="div_enlace">
                                                            <label class="form-label">Nombre Vialidad</label>
                                                            <input type="text" name="nombre_vialidad"
                                                                class="form-control" value="{{ old('nombre_vialidad') }}"
                                                                placeholder="" id="nombre_vialidad"
                                                                onkeyup="this.value = this.value.toUpperCase()">
                                                            @error('nombre_vialidad')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_nombre_vialidad"></div>
                                                        </div>
                                                        <div class="col-lg-1 mb-3 col-md-6" id="div_enlace">
                                                            <label class="form-label">Num. Ext.</label>
                                                            <input type="text" name="numero_exterior" class="form-control"
                                                                value="{{ old('numero_exterior') }}" placeholder=""
                                                                id="numero_exterior"
                                                                onkeyup="this.value = this.value.toUpperCase()">
                                                            @error('numero_exterior')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_num_ext"></div>
                                                        </div>
                                                        <div class="col-lg-1 mb-3 col-md-6" id="div_enlace">
                                                            <label class="form-label">Num. Int.</label>
                                                            <input type="text" name="numero_interior" class="form-control"
                                                                value="S/N" placeholder="" id="numero_interior"
                                                                onkeyup="this.value = this.value.toUpperCase()">
                                                            <div class="text-danger" id="message_num_int"></div>
                                                            @error('numero_interior')
                                                                <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" id="div_enlace">
                                                            <label class="form-label">Colonia</label>
                                                            <select class="form-control" id="colonia" name="colonia">
                                                                <option value="">Seleccione</option>
                                                                <option value="otra">Otra</option>
                                                            </select>
                                                            <input type="text" name="colonia_input"
                                                                class="form-control d-none" id="colonia_input"
                                                                onkeyup="this.value = this.value.toUpperCase()"
                                                                placeholder="Otra colonia...">
                                                            <div class="text-danger" id="message_colonia"></div>

                                                            @error('colonia')
                                                                <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" id="div_enlace">
                                                            <label class="form-label">Estado</label>
                                                            <select class="form-control" name="estados" id="estados">
                                                                <option value="">Seleccione</option>
                                                                @foreach ($estados_mexico as $estados)
                                                                    <option value="{{ $estados->id }}">
                                                                        {{ $estados->nombre }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                            <div class="text-danger" id="message_estados"></div>
                                                            <input type="hidden" name="estado" id="estado"
                                                                value="">
                                                            <input type="hidden" name="municipio" id="municipio"
                                                                value="">
                                                            <div class="text-danger" id="message_estados"></div>
                                                        </div>
                                                        <div class="col-lg-3 mb-3 col-md-6" id="div_enlace">
                                                            <label class="form-label">Municipio</label>
                                                            <select class="form-control" name="lista_municipios"
                                                                id="lista_municipios">
                                                                <option value="">Seleccione</option>
                                                            </select>
                                                            @error('codigo_postal')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_lista_municipios"></div>
                                                        </div>
                                                        <div class="col-lg-2 mb-3 col-md-6" id="div_enlace">
                                                            <label class="form-label">T&eacute;lefono</label>
                                                            <input type="number" name="telefono" class="form-control"
                                                                value="{{ old('telefono') }}" placeholder=""
                                                                id="telefono" maxlength="10"
                                                                oninput="this.value = this.value.replace(/\D/g, '').slice(0,10);">
                                                            @error('telefono')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_telefono"></div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="d-none" id="div_convenio">

                                                    <div class="accordion accordion-primary" id="accordionExample">
                                                        {{-- // INICIA NUEVO ACORDEON PARA CONVENIO --}}
                                                        <div class="accordion-item">

                                                            <h2 class="accordion-header">
                                                                <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#panelConvenio" aria-expanded="false"
                                                                    aria-controls="panelConvenio">
                                                                    <i
                                                                        class=" ri-team-line text-white fs-3 float-start mx-1 p-0"></i>Convenio
                                                                </button>
                                                            </h2>

                                                            <div id="panelConvenio" class="accordion-collapse collapse">

                                                                <div class="accordion-body">
                                                                    <div class="row">
                                                                        <div class="col-lg-3 mb-3 col-md-6">
                                                                            <label class="form-label">Numero de
                                                                                convenio</label>
                                                                            <input type="text" name="numero_convenio"
                                                                                class="form-control"
                                                                                value="{{ old('numero_convenio') }}"
                                                                                placeholder="" id="numero_convenio"
                                                                                onkeyup="this.value = this.value.toUpperCase()">
                                                                            @error('numero_convenio')
                                                                                <div class="text-danger">{{ $message }}
                                                                                </div>
                                                                            @enderror
                                                                            <div class="text-danger"
                                                                                id="message_numero_convenio">
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-3 mb-3 col-md-6">
                                                                            <label class="form-label">Nombre de 
                                                                                Empresa</label>
                                                                            <input type="text" name="nombre_empresa"
                                                                                class="form-control"
                                                                                value="{{ old('nombre_empresa') }}"
                                                                                placeholder="" id="nombre_empresa"
                                                                                onkeyup="this.value = this.value.toUpperCase()">
                                                                            @error('nombre_empresa')
                                                                                <div class="text-danger">{{ $message }}
                                                                                </div>
                                                                            @enderror
                                                                            <div class="text-danger"
                                                                                id="message_nombre_empresa">
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-3 mb-3 col-md-6">
                                                                            <label class="form-label">Nombre del
                                                                                Representante</label>
                                                                            <input type="text"
                                                                                name="nombre_representante"
                                                                                class="form-control"
                                                                                value="{{ old('nombre_representante') }}"
                                                                                placeholder="" id="nombre_representante"
                                                                                onkeyup="this.value = this.value.toUpperCase()">
                                                                            @error('nombre_representante')
                                                                                <div class="text-danger">{{ $message }}
                                                                                </div>
                                                                            @enderror
                                                                            <div class="text-danger"
                                                                                id="message_nombre_representante"></div>
                                                                        </div>
                                                                        <div class="col-lg-3 mb-3 col-md-6">
                                                                            <label class="form-label">Puesto del
                                                                                Representante</label>
                                                                            <input type="text"
                                                                                name="puesto_representante"
                                                                                class="form-control"
                                                                                value="{{ old('puesto_representante') }}"
                                                                                placeholder="" id="puesto_representante"
                                                                                onkeyup="this.value = this.value.toUpperCase()">
                                                                            @error('puesto_representante')
                                                                                <div class="text-danger">{{ $message }}
                                                                                </div>
                                                                            @enderror
                                                                            <div class="text-danger"
                                                                                id="message_puesto_representante"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                            </div>

                                                        </div>
                                                        {{-- // FIN NUEVO ACORDEON PARA CONVENIO --}}

                                                    </div>

                                                    <!-- AQUI IVA EL CÓDIGO DEL CONVENIO ORIGINAL -->

                                                </div>

                                                <!-- ... Programacion del curso ... -->
                                                <div class="alert alert-primary alert-dismissible fade show bg-primary">
                                                    <i class=" ri-calendar-line text-white fs-3 float-start mx-1 p-0"></i>
                                                    <span class="text-white">Programar Aula</span>
                                                </div>
                                                <div class="row col-lg-6 mb-3 col-md-6">
                                                    <div class="col-lg-12 mb-3 col-md-6">
                                                        <label class="form-label">Fecha Inicio</label>
                                                        <input type="text" name="fecha_inicio" value=""
                                                            class="form-control" id="fecha_inicio"
                                                            placeholder="Seleccione fecha">
                                                        @error('fecha_inicio')
                                                            <div class="text-danger">{{ $message }}</div>
                                                        @enderror
                                                        <div class="text-danger" id="message_fecha_inicio"></div>
                                                    </div>
                                                    <div class="col-lg-12 mb-3 col-md-6">
                                                        <label class="form-label">Fecha Termino</label>
                                                        <input type="text" class="form-control" name="fecha_termino"
                                                            value="" id="fecha_termino" readonly>
                                                        @error('fecha_termino')
                                                            <div class="text-danger">{{ $message }}</div>
                                                        @enderror
                                                        <div class="text-danger" id="message_fecha_termino"></div>
                                                    </div>
                                                    <div class="col-lg-12 mb-3 col-md-6 d-flex justify-content-center"
                                                        id="">
                                                        <div class="" id="dias_curso"> </div>
                                                    </div>

                                                    @php
                                                        $dias = [
                                                            'Lunes',
                                                            'Martes',
                                                            'Miercoles',
                                                            'Jueves',
                                                            'Viernes',
                                                            'Sabado',
                                                            'Domingo',
                                                        ];
                                                        function generarHorarios($inicio, $fin)
                                                        {
                                                            $horarios = [];
                                                            for ($h = $inicio; $h <= $fin; $h++) {
                                                                $horarios[] = sprintf('%02d:00', $h);
                                                                if ($h < $fin) {
                                                                    $horarios[] = sprintf('%02d:30', $h);
                                                                }
                                                            }
                                                            return $horarios;
                                                        }

                                                        $horarios_inicio = generarHorarios(6, 21);
                                                        $horarios_fin = generarHorarios(6, 22);

                                                    @endphp
                                                    <div class="text-danger" id="message_dias"></div>
                                                    @foreach ($dias as $dia)
                                                        @php
                                                            $dia_id = strtolower($dia);
                                                        @endphp
                                                        <div class="row align-items-center">
                                                            <div class="col-lg-6 mb-3 col-md-6 d-flex align-items-center">
                                                                <div class="form-check custom-checkbox mb-0 me-3">
                                                                    <input type="checkbox"
                                                                        class="form-check-input dia-checkbox"
                                                                        id="customCheckBox_{{ $dia_id }}"
                                                                        data-dia="{{ $dia_id }}"
                                                                        name="dias[{{ $dia_id }}][activo]">
                                                                    <label class="form-check-label ms-2"
                                                                        for="customCheckBox_{{ $dia_id }}">{{ $dia }}</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 mb-3 col-md-6 d-flex align-items-center">
                                                                <select class="form-control ms-2 horario-select"
                                                                    name="dias[{{ $dia_id }}][inicio]"
                                                                    id="horario_inicio_{{ $dia_id }}" disabled>
                                                                    <option value="">Inicia</option>
                                                                    @foreach ($horarios_inicio as $hora)
                                                                        <option value="{{ $hora }}">
                                                                            {{ $hora }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>

                                                                <select class="form-control ms-2 horario-select"
                                                                    name="dias[{{ $dia_id }}][fin]"
                                                                    id="horario_fin_{{ $dia_id }}" disabled>
                                                                    <option value="">Termina</option>
                                                                    @foreach ($horarios_fin as $hora)
                                                                        <option value="{{ $hora }}">
                                                                            {{ $hora }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                    <div class="col-lg-12    mb-3 col-md-6">
                                                        <button type="button" class="btn btn-primary w-100"
                                                            id="btn-programar">Programar Fechas y horarios</button>
                                                        <input type="hidden" name="id" value=""
                                                            id="id">
                                                    </div>
                                                </div>
                                                <input type="hidden" name="id_instructor" id="instructor_id"
                                                    value="">
                                                <div class="col-lg-6 mb-3 col-md-6 text-center" id="resumen">
                                                    <h5>Calculo de días</h5>
                                                    <div class="card align-items-center">
                                                        <i class=" ri-calendar-schedule-line ri-size-5x my-0" id=""></i>
                                                        <ul class="list-group list-group-flush text-center">
                                                            <li class="list-group-item"><span class="mb-0">Horas
                                                                    Totales:</span><strong id="hrsTotales"></strong></li>
                                                            <li class="list-group-item"><span class="mb-0">Horas por
                                                                    Mes:
                                                                    :</span><strong id="hrsMes"></strong></li>
                                                            <li class="list-group-item">
                                                                <span class="mb-0">Horas por semana:</span>
                                                                <ul>
                                                                    <strong id="hrsSemana"></strong>
                                                                </ul>
                                                            </li>
                                                            <li class="list-group-item"><span class="mb-0">N&uacute;mero
                                                                    de
                                                                    Sesiones:</span><strong id="sesiones"></strong>
                                                            </li>
                                                            <li class="list-group-item text-center">
                                                                <span class="mb-0">D&iacute;as Inh&aacute;biles:</span>
                                                            </li>
                                                        </ul>
                                                        <div class="col-lg-6 mb-3 col-md-6 text-center">
                                                            <strong class="mb-0" id="dias_inhabiles"></strong>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-12 mb-3 col-md-6 d-flex justify-content-center">
                                                <button type="submit" class="btn btn-success w-50 d-none"
                                                    id="btn-guardar-aula">Crear Aula</button>
                                            </div>
                                            <input type="hidden" name="horas_por_mes" id="horas_por_mes">
                                            <input type="hidden" name="horas_por_semana" id="horas_por_semana">
                                            <input type="hidden" value="" name="num_sesiones" id="num_sesiones">
                                            <input type="hidden" value="" name="idUnidad" id="idUnidad">
                                            <div class="alert alert-danger left-icon-big alert-dismissible fade show d-none"
                                                id="alert_conflicto_aula">
                                                <div class="media">
                                                    <div class="alert-left-icon-big">
                                                        <span><i class=" ri-alarm-warning-line"></i></span>
                                                    </div>
                                                    <div class="media-body">
                                                        <h5 class="mt-1 mb-2 text-danger">Advertencia! </h5>
                                                        <strong class="mb-0 text-primary" id="conflicto_aula"></strong>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    {{-- Cursos autorizados --
                                                <div class="row mb-4">
                                                    <div class="col-12">
                                                        <h5 class="mb-3">Cursos Autorizados</h5>
                                                    </div>
                                                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                                                        <div class="card border-primary shadow-sm h-100">
                                                            <div class="card-body text-center">
                                                                <h6 class="text-primary">Para el Trabajo</h6>
                                                                <h3>{{ $cursosAutorizados[1] ?? 2 }}</h3>
                                                                <small class="text-muted">Cursos autorizados</small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                                                        <div class="card border-success shadow-sm h-100">
                                                            <div class="card-body text-center">
                                                                <h6 class="text-success">En el Trabajo</h6>
                                                                <h3>{{ $cursosAutorizados[2] ?? 0 }}</h3>
                                                                <small class="text-muted">Cursos autorizados</small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                                                        <div class="card border-warning shadow-sm h-100">
                                                            <div class="card-body text-center">
                                                                <h6 class="text-warning">Evaluación</h6>
                                                                <h3>{{ $cursosAutorizados[4] ?? 5 }}</h3>
                                                                <small class="text-muted">Cursos autorizados</small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                                                        <div class="card border-info shadow-sm h-100">
                                                            <div class="card-body text-center">
                                                                <h6 class="text-info">ROCO</h6>
                                                                <h3>{{ $cursosAutorizados[6] ?? 0 }}</h3>
                                                                <small class="text-muted">Cursos autorizados</small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                                                        <div class="card border-danger shadow-sm h-100">
                                                            <div class="card-body text-center">
                                                                <h6 class="text-danger">CONOCER</h6>
                                                                <h3>{{ $cursosAutorizados[7] ?? 1 }}</h3>
                                                                <small class="text-muted">Cursos autorizados</small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>-- }}
                                    {{-- ============================= --}}
                                    {{-- FORMULARIO PARA ACTIVAR CURSOS --}}
                                    {{-- ============================= --}}
                                    @puede('Aulas', 'activar_cursos_unidades')
                                        <div class="">
                                            <div class="border-top">
                                                <h5 class="mb-3 mt-2">
                                                    <i class=" ri-book-open-line fs-2"></i>
                                                    {{--<i class=" ri-building-4-line fs-2"></i>--}}
                                                    Activar cursos
                                                </h5>
                                                <form action="{{ route('guardarCursosAutorizados') }}" method="POST"
                                                    id="formCursosAutorizados">
                                                    @csrf
                                                    <div class="row align-items-end">
                                                        {{-- UNIDAD --}}
                                                        <div class="col-lg-4 col-md-6 mb-3">
                                                            <label for="tipo_curso_autorizado" class="form-label">
                                                                Unidad de Capacitaci&oacute;n
                                                            </label>
                                                            <select name="unidad" id="unidad_autorizada"
                                                                class="form-control" required>
                                                                <option value="">Seleccione una unidad
                                                                </option>
                                                                @foreach ($unidadCapacitacion as $unidad)
                                                                    <option value="{{ $unidad->id }}"
                                                                        {{ old('unidad') == $unidad->id ? 'selected' : '' }}>
                                                                        {{ $unidad->nombre }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        {{-- TIPO DE CURSO --}}
                                                        <div class="col-lg-3 col-md-6 mb-3">
                                                            <label for="tipo_curso_autorizado" class="form-label">
                                                                Tipo de Curso
                                                            </label>
                                                            <select name="tipo_curso" id="tipo_curso_autorizado"
                                                                class="form-control" required>
                                                                <option value="">
                                                                    Seleccione
                                                                </option>
                                                                <option value="1"
                                                                    {{ old('tipo_curso') == 1 ? 'selected' : '' }}>
                                                                    PARA EL TRABAJO
                                                                </option>
                                                                <option value="2"
                                                                    {{ old('tipo_curso') == 2 ? 'selected' : '' }}>
                                                                    EN EL TRABAJO
                                                                </option>
                                                                <option value="4"
                                                                    {{ old('tipo_curso') == 4 ? 'selected' : '' }}>
                                                                    EVALUACIÓN
                                                                </option>
                                                                <option value="6"
                                                                    {{ old('tipo_curso') == 6 ? 'selected' : '' }}>
                                                                    ROCO
                                                                </option>
                                                                <option value="7"
                                                                    {{ old('tipo_curso') == 7 ? 'selected' : '' }}>
                                                                    CONOCER
                                                                </option>
                                                            </select>
                                                        </div>
                                                        {{-- CANTIDAD --}}
                                                        <div class="col-lg-2 col-md-6 mb-3">
                                                            <label for="cantidad_autorizada" class="form-label">
                                                                Cantidad
                                                            </label>
                                                            <input type="number" name="cantidad" id="cantidad_autorizada"
                                                                class="form-control" min="1" step="1"
                                                                required value="{{ old('cantidad') }}">
                                                        </div>
                                                        <input type="hidden" name="cursos_para_el_trabajo"
                                                            value="{{ $cursos_para_el_trabajo }}">
                                                        {{-- BOTÓN --}}
                                                        <div class="col-lg-3 col-md-6 mb-3">
                                                            <button type="submit" class="btn btn-primary w-100">
                                                                <i class=" ri-save-line"></i>
                                                                Guardar
                                                            </button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                        {{-- ============================= --}}
                                        {{-- CURSOS AUTORIZADOS --}}
                                        {{-- ============================= --}}
                                        <div class="card shadow-sm mb-4">
                                            {{-- <div class="">
                                                <h5 class="mb-0">
                                                    <i class=" ri-book-open-line fs-2"></i>
                                                    Cursos Autorizados
                                                </h5>
                                            </div --}}
                                            <div class="card-body">
                                                {{-- RESUMEN DE CURSOS AUTORIZADOS --}}
                                                <div class="row mb-2">
                                                    <div class="row mb-4">
                                                        <div class="col-lg col-md-4 col-sm-6 mb-3">
                                                            <div class="card border-primary shadow-sm h-100">
                                                                <div class="card-body text-center">
                                                                    <h6 class="text-primary">PARA EL TRABAJO</h6>
                                                                    <h3 id="total_tipo_1">-</h3>
                                                                    <small class="text-muted">Cursos
                                                                        autorizados</small>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg col-md-4 col-sm-6 mb-3">
                                                            <div class="card border-success shadow-sm h-100">
                                                                <div class="card-body text-center">
                                                                    <h6 class="text-success">EN EL TRABAJO</h6>
                                                                    <h3 id="total_tipo_2">-</h3>
                                                                    <small class="text-muted">Cursos
                                                                        autorizados</small>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg col-md-4 col-sm-6 mb-3">
                                                            <div class="card border-warning shadow-sm h-100">
                                                                <div class="card-body text-center">
                                                                    <h6 class="text-warning">EVALUACIÓN</h6>
                                                                    <h3 id="total_tipo_4">-</h3>
                                                                    <small class="text-muted">Cursos
                                                                        autorizados</small>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg col-md-4 col-sm-6 mb-3">
                                                            <div class="card border-info shadow-sm h-100">
                                                                <div class="card-body text-center">
                                                                    <h6 class="text-info">ROCO</h6>
                                                                    <h3 id="total_tipo_6">-</h3>
                                                                    <small class="text-muted">Cursos
                                                                        autorizados</small>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg col-md-4 col-sm-6 mb-3">
                                                            <div class="card border-danger shadow-sm h-100">
                                                                <div class="card-body text-center">
                                                                    <h6 class="text-danger">CONOCER</h6>
                                                                    <h3 id="total_tipo_7">-</h3>
                                                                    <small class="text-muted">Cursos
                                                                        autorizados</small>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @if (session('success'))
                                                        <div class="alert alert-primary alert-dismissible fade show"
                                                            id="alert-container">
                                                            <i class="ri-checkbox-circle-line alert-icon" aria-hidden="true"></i>
                                                            <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">
                                                            <i class="ri-close-circle-line alert-icon" aria-hidden="true"></i>
                                                            <strong id="alert-confirmacion-error">
                                                                {{ session('error') }}</strong>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endpuede
                                    <div class="modal fade" id="modalFechaFinal" aria-modal="true" role="dialog">
                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header bg-warning">
                                                    <h5 class="modal-title">Advertencia!!</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                                                    </button>
                                                </div>
                                                <div class="modal-body text-center">
                                                    <i
                                                        class=" ri-alert-line fs-3 text-danger mx-2"></i><strong>
                                                        fecha final del curso sobrepasa el año actual</strong><br>
                                                    <strong>Fecha Final </strong><strong class="text-danger"
                                                        id="st_fecha_final"></strong>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-danger light"
                                                        data-bs-dismiss="modal">Cerrar</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            </div><!-- end car body-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    <!--</div>-->
    </div>
    </div>
    </div>

@endsection

@push('scripts')
    <script>
        flatpickr("#fecha_inicio", {
            dateFormat: "d/m/Y",
            locale: 'es',
            minDate: new Date().setDate(1), // primer día del mes
            maxDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0), // último día del mes t
            onReady: function(selectedDates, dateStr, instance) {
                instance.input.style.color = "black";
                instance.input.style.backgroundColor = "white"; // opcional
            }
        });

        flatpickr("#fechaConocer", {
            dateFormat: "d/m/Y",
            locale: "es"
        });

        flatpickr("#fecha_deposito_grupal", {
            dateFormat: "d/m/Y",
            locale: "es",
            maxDate: "today"
        });

        $('#curso').select2({
            placeholder: "Seleccione",
            allowClear: true,
            disabled: true
        });

        $('#modelo').select2({
            placeholder: "Seleccione",
            allowClear: true,
            disabled: true
        })

        $('#instructor').select2({
            placeholder: "Seleccione",
            allowClear: true,
            disabled: true,
        });


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

        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        });

        // Variable global para conocer
        const var_global = {
            tipoConocer: 0,
            idEstandar: 0,
        };

        // CONOCER
        $(document).on('click', '.seleccionarCapacitando', function(e) {
            e.preventDefault();

            var curpCapacitando = $(this).data('curp');
            var nombreCapacitando = $(this).data('nombre');
            var unidadCapacitando = $(this).data('unidad');

            let idAlumno = $(this).data('id');
            $('#id_alumno_form').val(idAlumno);
            $('#curp_form').text(curpCapacitando);
            $('#nombre_form').text(nombreCapacitando);
            $('#unidad_form').text(unidadCapacitando);

            // Mostrar  sección de datos del capacitando
            $('#seccionDatosCapacitando').removeClass('d-none');

            // Marcar que hay capacitando seleccionado
            capacitandoSeleccionado = true;

            // Si ya se seleccionó CORRECCIÓN, mostrar los campos de corrección ahora
            if ($('#tipoConocer').val() === 'CORRECCIÓN') {
                $('#paraCorreccion').removeClass('d-none');
            }
        });

        $(document).ready(function() {

            // ================================================== INICIO CONOCER ==================================================
            const urlCa = "{{ route('seleccionarSoloCapacitandos') }}";

            //Tabla para mostrar capacitandos registrados
            let tablaCapacitandos = $('.add-capacitandos-table').DataTable({
                ordering: false, // Disable automatic ordering
                serverSide: true,
                processing: true,
                language: {
                    url: "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
                },
                pageLength: 3,
                lengthMenu: [
                    [1, 2, 3, 5, 10],
                    [1, 2, 3, 5, 10]
                ],
                stateSave: true,
                stateDuration: 10000,
                ajax: urlCa, // Obtener datos de  ruta
                columns: [{
                        data: "curp"
                    },
                    {
                        data: "nombre_alumno"
                    },
                    {
                        data: null,
                        render: function(data) {
                            var id_alumno = data.id;

                            return `
                                <button type="submit" class="btn btn-primary shadow btn-xs btn-add seleccionarCapacitando" data-id="${data.id}" data-curp="${data.curp}" data-nombre="${data.nombre_alumno}" data-unidad="${data.nombre}"> 
                                        <i class=" ri-graduation-cap-line"></i> Seleccionar
                                </button> `;
                        }
                    }
                ]
            });

            $('#tipoConocer').on('change', function() {
                // data-id
                var dataIdConocer = $(this).children('option:selected').data('id');

                $('#id_alumno_form').val('');
                $('#curp_form').text('');
                $('#nombre_form').text('');
                $('#unidad_form').text('');
                $('#folio_form').val('');
                $('#folio2_form').val('');

                // ── Limpiar campos de pago CONOCER ──
                // Resetear file inputs
                $('#factura_unica_pdf').val('');
                $('#factura_unica_xml').val('');
                // Resetear nombres de archivos
                $('#nombre_pdf').text('Sin archivo');
                $('#nombre_xml').text('Sin archivo');
                // Resetear mensajes de error
                $('#message_pdf').text('');
                $('#message_xml').text('');
                // Resetear CIE y Fecha Depósito
                $('#cie_grupal').val('');
                $('#fecha_deposito_grupal').val('');
                // Ocultar previews y limpiar contenido
                $('#preview_factura_unica').addClass('d-none');
                $('#preview_pdf').empty();
                $('#xml_content').text('');
                $('#xml_no_disponible').show();
                // Resetear campos de corrección
                $('#nombreActual').val('');
                $('#nombreCorrecto').val('');
                $('#curpActual').val('');
                $('#curpCorrecto').val('');
                $('#fotoNota').val('');

                if (dataIdConocer == 0) {
                    $('#accordion-conocer').addClass('d-none');
                    $('#paraCorreccion').addClass('d-none');
                } else if (dataIdConocer == 1 || dataIdConocer == 2) {
                    $('#accordion-conocer').removeClass('d-none');
                    $('#paraCorreccion').addClass('d-none');
                } else if (dataIdConocer == 3) {
                    $('#accordion-conocer').removeClass('d-none');
                    $('#paraCorreccion').removeClass('d-none');
                }

                tablaCapacitandos.ajax.reload();

            });

            // ================================================== END CONOCER============================================================================

            $('#modalidad').on('change', function() {
                var modalidad = $(this).val();

                switch (true) {
                    case modalidad == 'MIXTO':
                        $('#div_enlace').removeClass('d-none');
                        $('#div_ubicacion').removeClass('d-none');
                        break;
                    case modalidad == 'EN LINEA':
                        $('#div_enlace').removeClass('d-none');
                        $('#div_ubicacion').addClass('d-none');
                        break;
                    case modalidad == 'PRESENCIAL':
                        $('#div_ubicacion').removeClass('d-none');
                        $('#div_enlace').addClass('d-none');
                        break;
                    default:
                        $('#div_enlace').addClass('d-none');
                }
            });

            $('.dia-checkbox').on('change', function() {
                var dia = $(this).data('dia');
                var checked = $(this).is(':checked');
                $('#horario_inicio_' + dia).prop('disabled', !checked);
                //$('#horario_fin_' + dia).prop('disabled', !checked);
                $('#horario_inicio_' + dia).selectpicker('refresh');
                $('#horario_fin_' + dia).selectpicker('refresh');
            });

            $('#ubicacion').on('change', function() {
                var ubicacion = $(this).val();
                if (ubicacion == "EXTRAMUROS") {
                    $('#div_extramuros').removeClass('d-none');
                    $('#div_equipo').removeClass('d-none');
                } else {
                    $('#div_extramuros').addClass('d-none');
                    $('#div_equipo').addClass('d-none');
                }
            });

            $('#instructor').on('change', function() {
                var valor = $(this).val();
                const partes = valor.split('-'); // Separa en ["1", "Erasmo Lopez Suarez"]
                const nombreInstructor = partes[1] || '';
                $('#nombre_instructor').val(nombreInstructor);
                $('#instructor_id').val(partes[0]); // Asigna el ID del instructor

                $('#instructor_hidden').val(valor);
            });

            $('#btn-programar').on('click', function() {
                const fechaInicioStr = $('#fecha_inicio').val();
                const fechaTerminoStr = $('#fecha_termino').val();
                //const totalHorasCurso = 210;
                const idInstructor = $('#instructor_id').val();

                const capacitandos = $('#minimo_capacitandos').val();
                const tipoCurso = $('#tipo_curso').val();
                let totalHorasCurso = Number($('#duracion').val());

                if (!fechaInicioStr) {
                    $('#message_fecha_inicio').text('Seleccione una fecha de inicio.');
                    return;
                } else {
                    $('#message_fecha_inicio').text('');
                }

                const fechaInicio = parseFechaDatepicker(fechaInicioStr);
                if (!fechaInicio) {
                    alert('Formato de fecha inválido.');
                    return;
                }

                const seleccionados = [];
                let horarioInvalido = false;

                function parseHora(hora) {
                    const [h, m] = hora.split(':').map(Number);
                    return h + (m / 60);
                }

                let totalHoras = 0;

                $('.dia-checkbox:checked').each(function() {
                    const dia = $(this).data('dia').toLowerCase();
                    const inicio = $('#horario_inicio_' + dia).val();
                    const fin = $('#horario_fin_' + dia).val();

                    const horasSeleccionadas = parseHora(fin) - parseHora(inicio);
                    totalHoras += horasSeleccionadas;

                    if (inicio && fin) {
                        if (inicio === fin) {
                            horarioInvalido = true;
                        }
                        seleccionados.push({
                            dia,
                            inicio,
                            fin
                        });
                    }
                });

                if (totalHoras > totalHorasCurso) {
                    $('#message_dias').html(' horas seleccionadas exceden  duración del curso.');
                    return;
                } else {
                    $('#message_dias').text('');
                }

                if (horarioInvalido) {
                    $('#message_dias').html('El horario de inicio y fin no puede ser igual en ningún día.');
                    return;
                } else {
                    $('#message_dias').text('');
                }

                if (seleccionados.length === 0) {
                    $('#message_dias').html('Seleccione al menos un día con horario válido.');
                    return;
                } else {
                    $('#message_dias').text('');
                }

                const horasPorDia = {};
                seleccionados.forEach(bloque => {
                    const inicio = parseHora(bloque.inicio);
                    const fin = parseHora(bloque.fin);
                    horasPorDia[bloque.dia] = fin - inicio;
                });


                const diasSeleccionados = seleccionados.map(b => b.dia);
                let fechaActual = new Date(fechaInicio);
                let horasAcumuladas = 0;
                let horasPorSemana = {};
                let horasPorMes = {};
                let sesiones = 0;
                let contadorSemana = 1; // AJUSTE: contador personalizado
                const fechasCurso = []; //array para almacenar fechas del curso

                $.ajax({
                    url: "{{ route('fechasDeshabilitadas') }}", // Asegúrate de tener esta ruta definida
                    method: 'GET',
                    dataType: "json",
                    success: function(response) {
                        let data = response.data; // dias_deshabilitados

                        /* *-------------------------------------------- */
                        let fechas2025 = data
                            .filter(item => item.fecha_formateada.startsWith("2025-"))
                            .map(item => {
                                const [año, mes, día] = item.fecha_formateada.split("-");
                                return `${día}/${mes}/${año}`; // Formato d/m/Y
                            });

                        const diasFestivos = data.map(item => {
                            const [año, mes, día] = item.fecha_formateada.split('-');
                            return new Date(parseInt(año), parseInt(mes) - 1, parseInt(
                                día));
                        });

                        while (horasAcumuladas < totalHorasCurso) {
                            const nombreDia = obtenerNombreDia(fechaActual).toLowerCase();

                            if (esDiaFestivo(fechaActual, diasFestivos)) {
                                fechaActual.setDate(fechaActual.getDate() + 1);
                                continue;
                            }

                            if (diasSeleccionados.includes(nombreDia) && horasPorDia[
                                    nombreDia] > 0) {
                                const horasDia = horasPorDia[nombreDia];
                                const horasRestantes = totalHorasCurso - horasAcumuladas;
                                const horasAAgregar = Math.min(horasDia, horasRestantes);
                                const claveSemana =
                                    `Semana ${contadorSemana}`; // semana relativa
                                const mes = fechaActual.getMonth() + 1;
                                const año = fechaActual.getFullYear();
                                const claveMes =
                                    `${mes < 10 ? '0' + mes : mes}-${año}`; // formato consistente

                                horasPorSemana[claveSemana] = (horasPorSemana[claveSemana] ||
                                    0) + horasAAgregar;
                                horasPorMes[claveMes] = (horasPorMes[claveMes] || 0) +
                                    horasAAgregar;
                                // Agregar  fechas del curso al array
                                fechasCurso.push(formatFechaISO(fechaActual));

                                sesiones += 1;
                                horasAcumuladas += horasAAgregar;
                            }
                            // Avanzar semana cada domingo
                            if (fechaActual.getDay() === 0) {
                                contadorSemana++;
                            }

                            if (horasAcumuladas >= totalHorasCurso) break;
                            fechaActual.setDate(fechaActual.getDate() + 1);
                        }

                        const fechaFinalStr = formatFecha(fechaActual);

                        const anioActual = new Date().getFullYear();
                        if (fechaActual.getFullYear() > anioActual) {
                            $('#modalFechaFinal').modal('show');
                            $('#st_fecha_final').text(fechaFinalStr);
                            return;
                        }


                        $('#fecha_termino').val(fechaFinalStr);
                        $('#resumen').find('#prog_horas').val(horasAcumuladas);
                        $('#hrsTotales').html(`&nbsp;${horasAcumuladas}`);
                        $('#hrsMes').html(`${formatearDesglose(horasPorMes)}`);
                        $('#hrsSemana').html(`${formatearDesglose(horasPorSemana)}`);
                        $('#sesiones').html(`&nbsp;${sesiones}`);




                        // Convertir a formato deseado
                        const resultado = Object.entries(horasPorMes).map(([mes, horas]) => ({
                            mes: mes,
                            horas: horas
                        }));

                        // Guardar como JSON en el input hidden

                        $('#num_sesiones').val(sesiones);
                        $('#horas_por_mes').val(JSON.stringify(resultado));

                        const resultadoSemana = Object.entries(horasPorSemana).map(([semana,
                            horas
                        ]) => ({
                            semana: semana,
                            horas: horas
                        }));

                        // Guardar como JSON en el input hidden
                        $('#horas_por_semana').val(JSON.stringify(resultadoSemana));

                        var datosFormulario = $('#miFormulario').serialize();
                        let diasData = {};

                        $('.dia-checkbox').each(function() {
                            let dia = $(this).data('dia');

                            if ($(this).is(':checked')) {
                                diasData[dia] = {
                                    activo: true,
                                    inicio: $(`#horario_inicio_${dia}`).val(),
                                    fin: $(`#horario_fin_${dia}`).val()
                                };
                            }
                        });
                        // Enviar los datos por AJAX
                        $.ajax({

                            url: "{{ route('validarHorario') }}", // Cambia esto por  URL correcta
                            type: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                fecha_inicio: fechaInicioStr,
                                fecha_termino: fechaFinalStr,
                                dias: diasData,
                                id_instructor: idInstructor
                            },
                            success: function(response) {

                                let respuesta = response.data;

                                if (respuesta == false) {
                                    $('#btn-guardar-aula').removeClass('d-none');
                                    $('#alert_conflicto_aula').addClass('d-none');

                                } else {
                                    $('#alert_conflicto_aula').removeClass(
                                        'd-none');
                                    $('#conflicto_aula').html(respuesta);
                                    $('#btn-guardar-aula').addClass('d-none');
                                }
                            },
                            error: function(xhr, status, error) {
                                console.log("error");
                            }
                        });

                        /* ------------- Empieza informacion de Datepickeer ------------------------*/
                        // Mostrar en el HTML separadas por coma
                        let html = fechas2025.join(', ');
                        $('#dias_inhabiles').html(html);
                        // Guardar todas  fechas para Flatpickr
                        let todasFechas = data.map(item => item.fecha_formateada);

                        flatpickr("#dias_curso", {
                            locale: 'es',
                            dateFormat: "d/m/Y",
                            inline: true,
                            onDayCreate: function(_, __, ___, dayElem) {
                                const fecha = dayElem.dateObj.toISOString().split(
                                    'T')[0];
                                const RangoFechas = fechasCurso;

                                if (RangoFechas.includes(fecha)) {
                                    dayElem.classList.add("fecha-curso");
                                    dayElem.title = "Día festivo";
                                }

                                if (todasFechas.includes(fecha)) {
                                    dayElem.classList.add("fecha-inhabil");
                                    dayElem.title = "Día festivo";
                                }
                            }
                        });
                    },
                    error: function(xhr) {
                        console.log("Error en  solicitud AJAX:", xhr);
                    }
                });
            });

            function parseFechaDatepicker(fechaStr) {
                const partes = fechaStr.split('/');
                if (partes.length !== 3) return null;
                const [dia, mes, año] = partes.map(Number);
                return new Date(año, mes - 1, dia);
            }

            function parseHora(horaStr) {
                const [h, m] = horaStr.split(':').map(Number);
                return h + (m / 60);
            }

            function obtenerNombreDia(fecha) {
                const dias = ['domingo', 'lunes', 'martes', 'miercoles', 'jueves', 'viernes', 'sabado'];
                return dias[fecha.getDay()];
            }

            function esDiaFestivo(fecha, festivos) {
                return festivos.some(festivo =>
                    festivo.getDate() === fecha.getDate() &&
                    festivo.getMonth() === fecha.getMonth() &&
                    festivo.getFullYear() === fecha.getFullYear()
                );
            }

            function formatFecha(fecha) {
                const dia = String(fecha.getDate()).padStart(2, '0');
                const mes = String(fecha.getMonth() + 1).padStart(2, '0');
                const año = fecha.getFullYear();
                return `${dia}/${mes}/${año}`;
            }

            function formatearDesglose(obj) {
                return Object.entries(obj)
                    .map(([clave, horas]) => `<li>${clave} - Horas : ${horas}</li>`)
                    .join('');
            }

            function formatFechaISO(fecha) {
                return fecha.toISOString().split('T')[0];
            }

            const instructor = $('#instructor').val();
            const curso = $('#curso').val();

            //PERMISOS
            const puedeVerTodosLosCursos = {{ $puedeVerTodosLosCursos }};
            const puedeVerTodasLasUnidades = "{{ $puedeVerTodasLasUnidades }}";

            if (puedeVerTodasLasUnidades) {
                $('#divUnidad').removeClass('d-none');
                $('#divInstructor').removeClass('col-lg-5');
                $('#divInstructor').addClass('col-lg-4');
                $('#divCursos').removeClass('col-lg-5');
                $('#divCursos').addClass('col-lg-4');
            }



            $('#unidad').on('change', function() {
                let valor = $(this).val();
                $('#tipo_curso').prop('disabled', false);
                $('#tipo_curso').selectpicker('refresh');
                $('#idUnidad').val(valor);
                $('#formulario_aula').addClass('d-none');
                $('#instructor').prop('disabled', true);
                $('#instructor').empty();
                $('#instructor').val('').selectpicker('refresh');
                $('#curso').prop('disabled', true);
                $('#curso').empty();
                $('#curso').val('').selectpicker('refresh');

                //CONOCER
                $('#tipoConocer').selectpicker('refresh');
            });

            $('#tipo_curso').on('change', function() {
                const idUnidad = $('#unidad').val();
                const tipoCurso = $('#tipo_curso').val();
                var_global.tipoConocer = $('#tipo_curso').val();

                $('#formulario_aula').addClass('d-none');
                $('#div_convenio').addClass('d-none');
                clearConvenioMessages();
                $('#btn-guardar-aula').addClass('d-none');
                $('#fecha_inicio').val(null).trigger('change');
                $('#div_modelo_negocios').addClass('d-none');
                $('#curso').prop('disabled', true);

                const baseUrl = "{{ url('aulas/seleccionar-instructor') }}";
                if (tipoCurso == 1) {
                    $('#accordion-modelo').addClass('d-none');
                    $('#divModeloNegocio').addClass('d-none');
                    $('#divBtnAceptar').removeClass('d-none');
                }

                // Si es CONOCER
                if (var_global.tipoConocer == 7) {
                    // ocultamos id="divInstructor"
                    $('#divInstructor').addClass('d-none');
                    $('#btn_buscar_curso').addClass('d-none');
                    // mostramos fecha y tipo de certificado   
                    $('#fechaInicioConocer').removeClass('d-none');
                    $('#tipoCertificadoConocer').removeClass('d-none');

                    // Cargar via ajax los estándares en id="curso"
                    const baseUrlConocer = "{{ route('listaEstandaresConocer') }}";
                    $.ajax({
                        url: baseUrlConocer,
                        type: 'GET',
                        success: function(response) {
                            const $cursos = $('#curso');
                            $cursos.empty();
                            $cursos.prop('disabled', false);

                            // Opción por defecto (UNA SOLA VEZ)
                            $cursos.append('<option value="">Seleccione CONOCER</option>');

                            if (response.data && response.data.length > 0) {
                                response.data.forEach(curso => {
                                    $cursos.append(`
                                    <option value="${curso.id}">
                                        ${curso.clave} | ${curso.nombre}
                                    </option>
                                `);
                                });
                            } else {
                                $cursos.append(
                                    '<option value="">No hay estándares disponibles</option>'
                                );
                            }

                            $cursos.trigger('change'); // Refresca Select2
                        },
                        error: function(xhr, status, error) {
                            console.error('Error al obtener los estándares CONOCER:', error);
                        }
                    });
                    return; // Salir de  función para no ejecutar el resto del código
                } else {
                    // mostramos id="divInstructor"
                    $('#divInstructor').removeClass('d-none');
                    $('#btn_buscar_curso').removeClass('d-none');

                    // ocultamos fecha y tipo conocer
                    $('#fechaInicioConocer').addClass('d-none');
                    $('#tipoCertificadoConocer').addClass('d-none');
                    // $('#fechaConocer').addClass('d-none');
                    // $('#tipoConocer').addClass('d-none');
                    $('#accordion-conocer').addClass('d-none');

                }


                $.ajax({
                    url: baseUrl,
                    type: 'GET',
                    data: {
                        idUnidad: idUnidad,
                        tipoCurso: tipoCurso,
                    },
                    success: function(response) {
                        const $instructores = $('#instructor');
                        $instructores.empty();
                        $instructores.append(
                            '<option value="">Seleccione un instructor</option>');
                        $instructores.prop('disabled', false);
                        if (response.data?.length) {
                            response.data.forEach(instructor => {

                                $instructores.append(
                                    `<option class="bg-danger" value="${instructor.id}-${instructor.nombre} ${instructor.apellido_paterno} ${instructor.apellido_materno}"
                                                                                            data-id="${instructor.id}">${instructor.nombre} ${instructor.apellido_paterno} ${instructor.apellido_materno}</option>`
                                );
                            });
                        } else {
                            $('#formulario_aula').addClass('d-none');
                            $instructores.empty();
                            $instructores.append(
                                `<option value="0" class="text-danger">No hay instructores autorizados </option>`
                            );
                            $instructores.val("0").trigger('change');
                            $instructores.prop('disabled', true);
                        }
                        $('#instructor').selectpicker('refresh');
                        $instructores.trigger('change');
                    },
                    error: function(xhr, status, error) {
                        console.error('Error al obtener los instructores:', error);
                    }
                });
            });

            $('#curso').on('change', function() {
                // si es CONOCER
                if (var_global.tipoConocer == 7) {
                    const estandarId = $(this).val();
                    var_global.idEstandar = estandarId;
                    $('#id').val(estandarId);

                    // todos los accordions se ocultan
                    $('#accordion-modelo').addClass('d-none');
                    $('#divModeloNegocio').addClass('d-none');

                    return; // salir de  función
                } else {
                    const cursoId = $(this).find('option:selected').data('id');
                    $('#id').val(cursoId);
                }
            });

            $('#instructor').on('change', function() {
                const tipoCurso = $('#tipo_curso').val();
                const id = $(this).find('option:selected').data('id');
                const idUnidad = $('#unidad').val();
                const baseUrl = "{{ url('aulas/seleccionar-instructor-curso') }}";
                const url = `${baseUrl}/${id}`;
                $.get(url, {
                        id: id,
                        tipoCurso: tipoCurso,
                        idUnidad: idUnidad,
                    })
                    .done(function(response) {
                        const $cursos = $('#curso');
                        $cursos.empty();
                        if (response.data?.length) {
                            $('#curso').prop('disabled', false);
                            response.data.forEach(curso => {
                                if (tipoCurso == 4) {
                                    $cursos.append(
                                        `<option value="">Seleccione</option>` +
                                        `<option value="${curso.clave}" data-id="${curso.clave}">${curso.clave} | ${curso.nombre} </option>`
                                    );
                                } else {
                                    $cursos.append(
                                        `<option value="">Seleccione</option>` +
                                        `<option value="${curso.id}" data-id="${curso.id}">${curso.nombre} | ${curso.tipo_formacion} </option>`
                                    );
                                }
                                /*} else {
                                    $cursos.append(
                                        `<option value="">Seleccione</option>` +
                                        `<option value="${curso.curso_id}" data-id="${curso.curso_id}">${curso.curso_nombre} | ${curso.clave} </option>`
                                    );
                                }*/
                            });
                        } else {
                            $cursos.append(
                                '<option value="">Seleccione un tipo de curso</option>');
                        }
                        $cursos.trigger('change'); // Refresca Select2
                    })
                    .fail(function(xhr, status, error) {
                        console.error('Error al obtener los cursos:', error);
                    });
            });

            $('#curso').on('change', function() {
                // Si es CONOCER
                if (var_global.tipoConocer == 7) {
                    return; // salir de  función
                } else {
                    const baseUrl = "{{ url('aulas/show-modelos-aula') }}";
                    const tipoCurso = $('#tipo_curso').val();
                    const url = `${baseUrl}`;
                    const cursoId = $(this).val();
                    const unidad = $('#unidad').val();

                    if (!cursoId) {
                        $('#modelo').prop('disabled', true).empty()
                            .append('<option value="">Seleccione</option>');
                        return;
                    }
                    $('#modelo').prop('disabled', false);
                    if (tipoCurso != 1) {
                        $('#accordion-modelo').removeClass('d-none');
                        $('#divModeloNegocio').removeClass('d-none');
                        $('#divBtnAceptar').addClass('d-none');

                    }
                    //$.get(url, )
                    $.get(baseUrl, {
                            tipo_curso: tipoCurso,
                            id_unidad: unidad
                        })
                        .done(function(response) {
                            const $cursos = $('#modelo');

                            $cursos.empty();
                            if (response.data?.length) {
                                response.data.forEach(curso => {
                                    $cursos.append(
                                        `<option value="">Seleccione</option>` +
                                        `<option value="${curso.id}">${curso.clave} | ${curso.porcentaje}% | CAP. ${curso.total_capacitandos}    </option>`
                                    );
                                });
                            } else {
                                $cursos.append(
                                    '<option value="">Seleccione un tipo de curso</option>');
                            }
                            $cursos.trigger('change'); // Refresca Select2
                        })
                        .fail(function(xhr, status, error) {
                            console.error('Error al obtener los cursos:', error);
                        });
                }
            });

            $(".buscar_registro_curso").on("submit", function(e) {
                e.preventDefault(); // Previene  recarga de  página
                let tipoCurso = $('#tipo_curso').val();
                let modelo = $('#modelo').val();
                $('#tipo_curso_hidden').val(tipoCurso);
                if (modelo == "" && tipoCurso != '1' || modelo == null && tipoCurso != '1') {
                    $('#message_modelo').text('Seleccione una opcion');
                    return;
                }
                $('#message_modelo').text('');

                flatpickr("#fecha_inicio", {
                    dateFormat: "d/m/Y",
                    locale: 'es',
                    onDayCreate: function(_, __, ___, dayElem) {

                    }
                    /*minDate: new Date().setDate(1), // primer día del mes
                    maxDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0), // último día del mes t*/
                    /*onReady: function(selectedDates, dateStr, instance) {
                    instance.input.style.color = "black";
                    instance.input.style.backgroundColor = "white"; // opcional
                    },
                    position: "above"*/
                });


                const id = $('#curso').val();
                let form = $(this);
                let actionUrl = form.attr("action");
                let formData = form.serialize();
                $('#acc_modelo').collapse('hide');
                $.ajax({
                    url: actionUrl,
                    type: "POST",
                    data: formData,
                    dataType: "json",
                    success: function(response) {

                        let cursos = response.data;
                        let costoAlumno = response.costoCapacitando.zona_costo;
                        if (cursos.length > 0) {
                            $('#formulario_aula').removeClass('d-none');
                            let curso = cursos[0]; // Accede al primer objeto del array
                            let duracion = curso.horas = parseInt(curso.horas);

                            /* if(tipoCurso==4){
                             $('#cfp').val("CONOCER");
                             $('#especialidad').val("CONOCER");
                             $('#nombre_curso').val(curso.nombre);
                             $('#clave_curso').val(curso.clave);
                             $('#duracion').val(curso.evaluacion_horas);
                             $('#minimo_capacitandos').val(15);
                             $('#costo_psc').val(curso.evaluacion_costo_psc);
                             $('#costo_alumno').val(curso.alineacion_costo);
                             $('#tipo_de_curso').val("EVALUACIÓN");
                             $('#curso_id').val(curso.id);
                             $('#registro_cursos_id').val(0);
                             $('#id_tipo_curso').val(4);
                             $('#tipo_formacion').val(curso.sector_nombre);

                             }else{*/
                            if (tipoCurso == 4) {
                                $('#cfp').val("CONOCER");
                                $('#especialidad').val("CONOCER");
                                $('#tipo_formacion').val(curso.sector_nombre);
                                $('#tipo_de_curso').val("EVALUACIÓN");
                                $('#id_tipo_curso').val(4);
                            } else {
                                $('#cfp').val(curso.nombre);
                                $('#especialidad').val(curso.nombre);
                                $('#tipo_de_curso').val(curso.nombre);
                                $('#tipo_formacion').val(curso.tipo_formacion);
                                $('#id_tipo_curso').val(curso.tipo_id);
                                $('#duracion').val(curso.horas);

                                $('#clave_especialidad').val(curso.clave);

                            }

                            if (tipoCurso == 6) {
                                $('#tipo_de_curso').val("ROCO");
                                $('#id_tipo_curso').val(6);
                            }


                            $('#nombre_curso').val(curso.nombre);
                            $('#clave_curso').val(curso.clave);
                            $('#mostrar_clave_curso').val(curso.clave);

                            $('#minimo_capacitandos').val(curso.minimo_capacitandos);
                            $('#costo_psc').val(parseFloat(curso.costo_hora).toFixed(2));
                            $('#costo_alumno').val(costoAlumno);

                            $('#curso_id').val(curso.id);
                            $('#registro_cursos_id').val(curso.id);



                            //}

                            let tipoFormacion = $('#tipo_formacion').val();
                            let tipo = $('#id_tipo_curso').val();
                            if (tipoFormacion == 'CAE' || tipoFormacion == 'ALI') {
                                $('#div_convenio').removeClass('d-none');
                                if (tipoFormacion == 'CAE') {
                                    $('#panelConvenio').addClass('show');
                                    $('#panelConvenio').closest('.accordion-item').find(
                                        '.accordion-button').removeClass('collapsed').attr(
                                        'aria-expanded', 'true');
                                } else {
                                    $('#panelConvenio').removeClass('show');
                                    $('#panelConvenio').closest('.accordion-item').find(
                                        '.accordion-button').addClass('collapsed').attr(
                                        'aria-expanded', 'false');
                                    clearConvenioMessages();
                                }
                            } else {
                                $('#div_convenio').addClass('d-none');
                                clearConvenioMessages();
                            }
                            let tipo_curso = curso.tipo_id;
                            //let id_modelo = curso.modelo_id;
                            let id_modelo = $('#modelo').val();
                            tipo_curso == 2 || tipoCurso == 4 || tipoCurso == 6 ? $(
                                    '#minimo_capacitandos').prop(
                                    'disabled', true) :
                                $('#minimo_capacitandos').prop('disabled', false);
                            $('#minimo_capacitandos').val(15);
                            if (tipo_curso != 1 || tipoCurso != 1) {
                                $('#div_modelo_negocios').removeClass('d-none');
                                const id = id_modelo;
                                const baseUrl = "{{ route('showModelo', ['id' => '_ID']) }}"
                                    .replace('_ID', id);
                                $.ajax({
                                    url: baseUrl,
                                    method: 'GET',
                                    dataType: 'json',
                                    success: function(response) {
                                        if (response.data && response.data.length >
                                            0) {
                                            $('#modelo_negocios').val(response.data[
                                                0].clave);
                                            $('#costo_psc').val(response.data[0]
                                                .hora_instructor);
                                            $('#cap_modelo').val(response.data[0]
                                                .numero_capacitandos);
                                            $('#id_modelo').val(response.data[0]
                                                .id);
                                            $('#costo_alumno').val(response.data[0]
                                                .costo_capacitando);
                                            $('#minimo_capacitandos').val(response
                                                .data[0].numero_capacitandos
                                            );
                                            $('#duracion').val(response.data[0]
                                                .horas);

                                            let duracion = Number(response.data[0]
                                                .horas);
                                            let capacitandos = Number(response.data[
                                                0].numero_capacitandos);

                                            if (tipoCurso == 4) {
                                                let totalHrssCurso = duracion *
                                                    capacitandos;
                                                $('#duracion').val(totalHrssCurso);
                                            }
                                        } else {
                                            $('#modelo_negocios').val('');
                                            $('#costo_psc').val('0.00');
                                        }
                                    },
                                    error: function(xhr, status, error) {
                                        console.error('Error al obtener el modelo:',
                                            error);
                                    }
                                });
                            }
                        } else {
                            $('#cfp').val('');
                        }
                    },
                    error: function(xhr) {
                        console.error("Error en  solicitud:", xhr.responseText);
                    }
                });
            });
        });

        $('#estados').change(function() {
            var id = $('select[name="estados"] option:selected').val();
            var varMunicipio = $('#nombre_municipio').val();

            $.ajax({
                url: "{{ route('listadoMunicipios') }}", // Ruta para obtener los municipios
                method: 'POST',
                data: {
                    id_estado: id,
                    _token: '{{ csrf_token() }}' // Agregar el token CSRF para seguridad
                },
                success: function(response) {
                    // Limpiar el select de municipios antes de agregar nuevos options
                    $('#lista_municipios').empty();

                    // Recorrer los datos recibidos y crear los options
                    if (response.data && response.data.length > 0) {
                        $.each(response.data, function(index, municipio) {
                            $('#lista_municipios').append('<option value="' + municipio
                                .nombre + '">' + municipio.nombre + '</option>');

                        });
                    } else {
                        º
                        $('#lista_municipios').append(
                            '<option value="">Seleccione Estado</option>');
                    }
                    $('#lista_municipios').selectpicker('refresh');
                },
                error: function(xhr, status, error) {
                    console.error('Error al obtener los municipios:', error);
                }
            });
        });


        const horarios = [
            '06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00', '09:30',
            '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30',
            '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30',
            '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00'
        ];

        function horaToMin(hora) {
            const [h, m] = hora.split(':').map(Number);
            return h * 60 + m;
        }

        // Deshabilita el botón para crear aula despues del primer click
        $(document).ready(function() {
            let formSubmitted = false; // Variable de control

            // Si el formulario se envía con submit event
            $('form[action="{{ route('crearAula') }}"]').on('submit', function(e) {
                if (formSubmitted) {
                    e.preventDefault();
                    //console.log("Formulario ya enviado, bloqueando...");
                    return false;
                }
                // Validar formulario
                if (!validate(e)) {
                    //console.log("Validación fallida");
                    return false;
                }
                // Marcar formulario como enviado
                formSubmitted = true;
                // Deshabilitar botón y cambiar texto
                $('#btn-guardar-aula').prop('disabled', true)
                    .html('<i class=" ri-loader-4-line ri-spin"></i> Creando Aula...');
            });
        });

        $(document).ready(function() {
            $('.horario-select[name$="[inicio]"]').on('change', function() {
                const diaId = this.id.replace('horario_inicio_', '');
                const $selectFin = $(`#horario_fin_${diaId}`);
                const inicioMin = horaToMin($(this).val());
                const minFin = inicioMin + 60;
                const maxFin = inicioMin + 480;

                // Limpiar y deshabilitar el select de fin
                $selectFin.empty().prop('disabled', false);

                // Agregar opciones válidas
                horarios.forEach(hora => {
                    const min = horaToMin(hora);
                    if (min >= minFin && min <= maxFin) {
                        $selectFin.append(`<option value="${hora}">${hora}</option>`);
                    }
                });

                // Refrescar el selectpicker
                $selectFin.selectpicker('refresh');
            });
        });

        function clearConvenioMessages() {
            $('#message_numero_convenio').text('');
            $('#message_nombre_empresa').text('');
            $('#message_nombre_representante').text('');
            $('#message_puesto_representante').text('');
        }

        function validate(event) {
            let isValid = true;
            let firstInvalidField = null;

            const fields = [{
                    id: '#modalidad',
                    msg: 'Requerido',
                    target: '#message_modalidad'
                },
                {
                    id: '#enlace',
                    msg: 'Requerido',
                    target: '#message_enlace'
                },
                {
                    id: '#codigo_postal',
                    msg: 'Requerido',
                    target: '#message_cp'
                },
                {
                    id: '#nombre_vialidad',
                    msg: 'Requerido',
                    target: '#message_nombre_vialidad'
                },
                {
                    id: '#numero_exterior',
                    msg: 'Requerido',
                    target: '#message_num_ext'
                },
                {
                    id: '#colonia',
                    msg: 'Requerido',
                    target: '#message_colonia'
                },
                {
                    id: '#colonia_input',
                    msg: 'Requerido',
                    target: '#message_colonia'
                },
                {
                    id: '#estados',
                    msg: 'Requerido',
                    target: '#message_estados'
                },
                {
                    id: '#lista_municipios',
                    msg: 'Requerido',
                    target: '#message_lista_municipios'
                },
                {
                    id: '#telefono',
                    msg: 'Requerido',
                    target: '#message_telefono'
                }



            ];

            // Limpiar mensajes previos
            fields.forEach(field => {
                $(field.target).text('');
            });



            // Validación
            fields.forEach(field => {
                const $input = $(field.id);


                if (!$input.is(':visible')) {
                    return;
                }

                const value = $input.val();
                const isEmpty = value === null || value === "";

                if (isEmpty) {
                    $(field.target).text(field.msg);
                    isValid = false;

                    if (!firstInvalidField) {
                        firstInvalidField = $input;
                        console.warn("Campo inválido:", field.id);
                    }
                }
            });

            // Validar campos de convenio solo si el tipo de formación es CAE
            const tipoFormacionVal = $('#tipo_formacion').val();
            const unidad = $('#idUnidadParaModelos').val();
            if (tipoFormacionVal === 'CAE' && unidad != {{ \App\Support\UnidadIcat::idAccionMovil() ?? 'null' }}) {
                const convenioFields = [{
                        id: '#numero_convenio',
                        msg: 'Requerido',
                        target: '#message_numero_convenio'
                    },
                    {
                        id: '#nombre_empresa',
                        msg: 'Requerido',
                        target: '#message_nombre_empresa'
                    },
                    {
                        id: '#nombre_representante',
                        msg: 'Requerido',
                        target: '#message_nombre_representante'
                    },
                    {
                        id: '#puesto_representante',
                        msg: 'Requerido',
                        target: '#message_puesto_representante'
                    },
                ];

                convenioFields.forEach(field => {
                    $(field.target).text('');
                });

                convenioFields.forEach(field => {
                    const $input = $(field.id);
                    const value = $input.val();
                    const isEmpty = value === null || value === '';

                    if (isEmpty) {
                        $(field.target).text(field.msg);
                        isValid = false;

                        if (!firstInvalidField) {
                            firstInvalidField = $input;
                        }
                    }
                });
            }

            if (!isValid) {
                if (event) event.preventDefault();
                if (firstInvalidField) firstInvalidField.focus();
                return false;
            }

            return true;
        }

        function validateCurso(event) {
            let isValid = true;
            let firstInvalidField = null;
            let tipoCurso = $('#tipo_curso').val();


            // Si es conocer = 7 validar que seleccione un estandar
            if (var_global.tipoConocer === 7) {
                const estandar = $('#curso').val();
                if (!estandar) {
                    $('#message_curso').text('Seleccione un estándar');
                    isValid = false;
                    firstInvalidField = $('#curso');
                } else {
                    $('#message_curso').text('');
                }

                if (!isValid) {
                    if (event) event.preventDefault();
                    if (firstInvalidField) firstInvalidField.focus();
                    return false;
                }

                return true;
            }

            if (tipoCurso !== "1") {

                return;
            }



            const fields = [{
                    id: '#instructor_hidden',
                    msg: 'Seleccione un instructor',
                    target: '#message_instructor'
                },

                {
                    id: '#tipo_curso',
                    msg: 'Seleccione un tipo',
                    target: '#message_tipo'
                },
                /*{
                    id: '#modelo',
                    msg: 'Seleccione una opcion',
                    target: '#message_modelo'
                }*/
            ];

            // Limpiar mensajes previos
            fields.forEach(field => {
                $(field.target).text('');
            });

            // Validación
            fields.forEach(field => {
                const $input = $(field.id);


                const value = $input.val();
                const isEmpty = value === null || value === "";

                if (isEmpty) {
                    $(field.target).text(field.msg);
                    isValid = false;

                    if (!firstInvalidField) {
                        firstInvalidField = $input;

                    }
                }
            });

            if (!isValid) {
                if (event) event.preventDefault();
                if (firstInvalidField) firstInvalidField.focus();
                return false;
            }

            return true;
        }



        $(document).on("input", "#codigo_postal", function() {
            let codigo_postal = $(this).val();
            if (codigo_postal.length === 5) {
                $.ajax({
                    url: "/tlaloc/cp/" + codigo_postal,
                    type: "GET",
                    dataType: "json",
                    success: function(res) {
                        if (res.success) {
                            let sel = $("#colonia");
                            sel.empty();
                            res.data.forEach(function(item) {
                                $("#municipio2").val(item.municipio);
                                sel.append(
                                    `<option value="${item.asentamiento.toUpperCase()}">${item.asentamiento.toUpperCase()}</option>`
                                );
                                setTimeout(() => {
                                    if (item.clave_municipio) {
                                        let claveMunicipio = String(item
                                            .clave_municipio).replace(/^0+/, '');
                                        $("#lista_municipios option").each(function() {
                                            if ($(this).val() ==
                                                claveMunicipio) {
                                                $(this).prop("selected", true);
                                                //$("#lista_municipios").val(item.clave_estado); // opcional
                                                return false; // salir del each
                                            }
                                        });
                                        $('#lista_municipios').selectpicker('refresh');
                                        $("#lista_municipios").trigger("change");
                                    }
                                }, 900);
                                // Seleccionar el estado correspondiente si coincide  clave
                                if (item.clave_estado) {
                                    $("#estados option").each(function() {
                                        if ($(this).val() == item.clave_estado) {
                                            $(this).prop("selected", true);
                                            $("#estados").val(item
                                                .clave_estado); // opcional 
                                            $("#estado").val(item.estado.toUpperCase());
                                            $("#municipio").val(item.municipio
                                                .toUpperCase());
                                            return false; // salir del each
                                        }
                                    });
                                    $('#estados').selectpicker('refresh');
                                    $("#estados").trigger("change");
                                }
                            });
                            sel.append('<option value="otra">OTRA</option>');
                        } else {
                            alert(res.message);
                            $("#estado2").val('');
                            $("#municipio2").val('');
                            $("#colonia").empty().append(
                                '<option value="otra">Seleccione colonia</option>');
                        }
                        $('#colonia').selectpicker('refresh');
                    },
                    error: function(xhr) {
                        console.error("Error al llamar Tlaloc:", xhr.responseText);
                    }
                });
            }
        });

        $('#colonia').on('change', function() {
            var opc = $(this).val();

            $('#colonia_input').addClass('d-none');

            if (opc == "otra") {
                $('#colonia_input').removeClass('d-none');
            }
        });

        $('#estados').change(function() {
            var id = $('select[name="estados"] option:selected').val();
            var varMunicipio = $('#nombre_municipio').val();

            $.ajax({
                url: "{{ route('listadoMunicipios') }}", // Ruta para obtener los municipios
                method: 'POST',
                data: {
                    id_estado: id,
                    _token: '{{ csrf_token() }}' // Agregar el token CSRF para seguridad
                },
                success: function(response) {
                    // Limpiar el select de municipios antes de agregar nuevos options
                    $('#lista_municipios').empty();
                    // Recorrer los datos recibidos y crear los options
                    if (response.data && response.data.length > 0) {
                        $.each(response.data, function(index, municipio) {
                            $('#lista_municipios').append('<option value="' + municipio
                                .clave + '-' + municipio.nombre + '">' + municipio
                                .nombre +
                                '</option>');
                        });
                    } else {
                        $('#lista_municipios').append(
                            '<option value="">Seleccione Estado</option>');
                    }
                    $('#lista_municipios').selectpicker('refresh');
                },
                error: function(xhr, status, error) {
                    console.error('Error al obtener los municipios:', error);
                }
            });
        });

        //CAMBIAR ELECCION DE CURSO
        /* $('#curso').on('change', function() {
                                                                         const baseUrl = "{{ url('aulas/seleccionar-instructor') }}";
            const id = $('#curso').val();
            $('#id').val(id); // Actualiza el campo oculto con el ID del curso seleccionado
            const url = `${baseUrl}`;

            let tipoCurso = $('#tipo_curso').val();

            if (!tipoCurso) {
                $('#formulario_aula').addClass('d-none');
                return false;
            }

            if (id) {
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: {
                        id: id,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function (response) {
                        const $instructores = $('#instructor');
                        $instructores.empty();
                        //Insertar opción inicial
                        $instructores.append(
                            '<option value="">Seleccione un instructor</option>');
                        // Solo habilita si hay curso seleccionado
                        $instructores.prop('disabled', false);
                        if (response.data?.length) {
                            response.data.forEach(instructor => {
                                $instructores.append(
                                    `<option class="bg-danger" value="${instructor.id}-${instructor.nombre} ${instructor.apellido_paterno} ${instructor.apellido_materno}">${instructor.nombre} ${instructor.apellido_paterno} ${instructor.apellido_materno}</option>`
                                );
                            });

                        } else {
                            $('#formulario_aula').addClass('d-none');
                            $instructores.empty();
                            $instructores.append(
                                `<option value="0" class="text-danger">No hay instructores autorizados </option>`
                            );
                            $instructores.val("0").trigger('change');
                            $instructores.prop('disabled', true);

                        }
                        // Refrescar UI si usas selectpicker
                        $('#instructor').selectpicker('refresh');
                        // Para select2
                        $instructores.trigger('change');
                    },
                    error: function (xhr, status, error) {
                        console.error('Error al obtener los instructores:', error);
                    }
                });
            }
                                                                    });*/

        $(document).ready(function() {
            $('#tablaResultadosMN').DataTable({
                scrollY: '300px',
                scrollX: true, // 🔑 evita desalineación
                scrollCollapse: true,
                fixedHeader: true, // 🔑 header sincronizado
                ordering: false,
                paging: false,
                searching: false,
                info: false,
                autoWidth: true,
                language: {
                    url: "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
                }
            });

            let timeout = null;

            $('.filtro-busqueda').on('input', function() {
                // Evita ejecutar AJAX por cada tecla (debounce)
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    realizarBusqueda();
                }, 400); // milisegundos
            });

            function realizarBusqueda() {
                console.log("Realizando búsqueda con filtros:" +
                    "\nUnidad: " + $('#idUnidadParaModelos').val());
                let data = {
                    unidad: $('#idUnidadParaModelos').val(),
                    numeroDeCapacitandos: $('#numeroDeCapacitandos').val(),
                    ingresoPorCapacitando: $('#ingresoPorCapacitando').val(),
                    numeroDeMadres: $('#numeroDeMadres').val(),
                    ingresoPorMadre: $('#ingresoPorMadre').val(),
                    horasDelCurso: $('#horasDelCurso').val(),
                    pagoPorHoraAlPSC: $('#pagoPorHoraAlPSC').val(),
                    _token: '{{ csrf_token() }}'
                };

                $.ajax({
                    url: "{{ route('buscarModelosDeNegocio') }}", // ajusta  ruta
                    method: "POST",
                    data: data,
                    success: function(response) {
                        actualizarTabla(response);
                    },
                    error: function() {
                        console.error('Error al buscar modelos de negocio');
                    }
                });
            }

            function actualizarTabla(data) {
                let tbody = $('#tablaResultadosMN tbody');
                tbody.empty();

                if (data.length === 0) {
                    tbody.append(`
                                                                            <tr>
                                                                                <td colspan="7" class="text-center">Sin resultados</td>
                                                                            </tr>
                                                                        `);
                    return;
                }
                data.forEach(item => {
                    tbody.append(`
                                                                            <tr data-mod-clave="${item.clave}" data-mod-id="${item.id}" class="text-center">
                                                                                <td nowrap>${item.clave}</td>
                                                                                <td>${item.numero_capacitandos}</td>
                                                                                <td>${item.costo_capacitando}</td>
                                                                                <td>${item.numero_madres_solteras || 0}</td>
                                                                                <td>${item.costo_madre_soltera}</td>
                                                                                <td>${item.horas}</td>
                                                                                <td>${item.hora_instructor}</td>
                                                                            </tr>
                                                                        `);
                });
            }

        });

        $(document).on('click', '#tablaResultadosMN tbody tr', function() {
            // Quitar selección previa
            $('#tablaResultadosMN tbody tr').removeClass('selected');
            // Marcar fila seleccionada
            $(this).addClass('selected');
            // Obtener clave
            let modClave = $(this).data('mod-clave');
            let modId = $(this).data('mod-id');
            // Mostrar en el span
            $('#modeloSeleccionado').text(modClave);
            $('#idModInput').val(modId);

            $('#modelo').val(modId).trigger('change');
            //$('#modelo').selectpicker('refresh');
        });


        // FUNCIONALIDAD CAMPOS CONOCER - Mostrar/Ocultar según selección
        // Evento para tipo de certificado - mostrar/ocultar sección de correcciones y habilitar/deshabilitar FOLIO
        $('#tipoConocer').on('change', function() {
            var tipoSeleccionado = $(this).val();

            // Habilitar FOLIO para REPOSICIÓN y CORRECCIÓN, deshabilitar para EXPEDICIÓN o vacío
            if (tipoSeleccionado === 'REPOSICIÓN' || tipoSeleccionado === 'CORRECCIÓN') {
                $('#folio_form').prop('disabled', false);
            } else {
                $('#folio_form').prop('disabled', true);
                $('#folio_form').val(''); // Limpiar el valor si se deshabilita
            }

            if (tipoSeleccionado === 'CORRECCIÓN') {
                $('#folio2_form').prop('disabled', false);
                $('#folio2_form').val(''); // Limpiar el valor si se deshabilita
                $('#paraCorreccion').removeClass('d-none');

            } else {
                $('#folio2_form').prop('disabled', true);
                $('#paraCorreccion').addClass('d-none');
                $('#filaCamposCorreccion').addClass('d-none');
                // Resetear valores cuando no es CORRECCIÓN
                $('#correccionNombre').val('NO').trigger('change');
                $('#correccionCurp').val('NO').trigger('change');
                $('#correccionFoto').val('NO').trigger('change');
            }
        });

        // Función para verificar si mostrar  fila de campos adicionales
        function verificarFilaCampos() {
            var nombreVisible = !$('#divNombreCorreccion').hasClass('d-none');
            var curpVisible = !$('#divCurpCorreccion').hasClass('d-none');
            var fotoVisible = !$('#divFotoCorreccion').hasClass('d-none');

            if (nombreVisible || curpVisible || fotoVisible) {
                $('#filaCamposCorreccion').removeClass('d-none');
            } else {
                $('#filaCamposCorreccion').addClass('d-none');
            }
        }

        // Evento para corrección de nombre
        $('#correccionNombre').on('change', function() {
            var valor = $(this).val();

            if (valor === 'SI') {
                // Obtener el nombre del capacitando seleccionado
                var nombreCapacitando = $('#nombre_form').text();
                $('#nombreActual').val(nombreCapacitando);
                $('#divNombreCorreccion').removeClass('d-none');
            } else {
                $('#divNombreCorreccion').addClass('d-none');
                $('#nombreActual').val('');
                $('#nombreCorrecto').val('');
            }
            verificarFilaCampos();
        });

        // Evento para corrección de CURP
        $('#correccionCurp').on('change', function() {
            var valor = $(this).val();

            if (valor === 'SI') {
                // Obtener  CURP del capacitando seleccionado
                var curpCapacitando = $('#curp_form').text();
                $('#curpActual').val(curpCapacitando);
                $('#divCurpCorreccion').removeClass('d-none');
            } else {
                $('#divCurpCorreccion').addClass('d-none');
                $('#curpActual').val('');
                $('#curpCorrecto').val('');
            }
            verificarFilaCampos();
        });

        // Evento para corrección de foto
        $('#correccionFoto').on('change', function() {
            var valor = $(this).val();

            if (valor === 'SI') {
                $('#divFotoCorreccion').removeClass('d-none');
            } else {
                $('#divFotoCorreccion').addClass('d-none');
                $('#fotoNota').val('');
            }
            verificarFilaCampos();
        });





        // Función para guardar datos de sección CONOCER
        $('#guardarConocer').on('click', function(e) {
            e.preventDefault();

            // ── Limpiar mensajes de error anteriores ──
            $('#message_folio').text('');
            $('#message_folio2').text('');
            $('#message_nombreCorrecto').text('');
            $('#message_curpCorrecto').text('');
            $('#message_fotoNota').text('');
            $('#message_pdf').text('');
            $('#message_xml').text('');
            $('#message_cie').text('');
            $('#message_fecha_deposito').text('');

            let isValid = true;
            let firstInvalidField = null;

            // 1️⃣ Validar que se haya seleccionado un capacitando
            if (!$('#id_alumno_form').val()) {
                alert('Debe seleccionar un capacitando antes de guardar.');
                return;
            }

            // 2️⃣ Validar tipo de certificado seleccionado
            var tipoCert = $('#tipoConocer').val();
            if (!tipoCert) {
                alert('Debe seleccionar un Tipo de Certificado.');
                return;
            }

            // 3️⃣ Validar FOLIO (requerido para REPOSICIÓN y CORRECCIÓN)
            if (tipoCert === 'REPOSICIÓN' || tipoCert === 'CORRECCIÓN') {
                if (!$('#folio_form').val().trim()) {
                    $('#message_folio').text('El folio del certificado es requerido');
                    isValid = false;
                    if (!firstInvalidField) firstInvalidField = $('#folio_form');
                }
            }


            // 4️⃣ Validar campos de corrección (solo si es CORRECCIÓN)
            if (tipoCert === 'CORRECCIÓN') {
                // Validar que al menos una corrección esté en SI
                var nombreSI = $('#correccionNombre').val() === 'SI';
                var curpSI = $('#correccionCurp').val() === 'SI';
                var fotoSI = $('#correccionFoto').val() === 'SI';

                if (!nombreSI && !curpSI && !fotoSI) {
                    alert('Para CORRECCIÓN debe seleccionar "SI" en al menos una opción: Nombre, CURP o Foto.');
                    $('#correccionNombre').focus();
                    $('#correccionNombre')[0].scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
                    return;
                }

                // Corrección en Nombre
                if (nombreSI) {
                    if (!$('#nombreCorrecto').val().trim()) {
                        $('#message_nombreCorrecto').text('Ingrese el nombre correcto');
                        isValid = false;
                        if (!firstInvalidField) firstInvalidField = $('#nombreCorrecto');
                    }
                }
                // Corrección en CURP
                if (curpSI) {
                    if (!$('#curpCorrecto').val().trim()) {
                        $('#message_curpCorrecto').text('Ingrese el CURP correcto');
                        isValid = false;
                        if (!firstInvalidField) firstInvalidField = $('#curpCorrecto');
                    }
                }
                // Corrección en Foto
                if (fotoSI) {
                    if (!$('#fotoNota').val().trim()) {
                        $('#message_fotoNota').text('Ingrese una nota sobre  corrección de foto');
                        isValid = false;
                        if (!firstInvalidField) firstInvalidField = $('#fotoNota');
                    }
                }
                // Corrección en FOLIO DE SOLICITUD
                /*
                    if (!$('#folio2_form').val().trim()) {
                        $('#message_folio2').text('El folio de solicitud es requerido');
                        isValid = false;
                        if (!firstInvalidField) firstInvalidField = $('#folio2_form');
                    }
                        */
            }

            // 5️⃣ Validar PDF
            var hasPDF = $('#factura_unica_pdf')[0].files && $('#factura_unica_pdf')[0].files.length > 0;
            if (!hasPDF) {
                $('#message_pdf').text('Suba el archivo PDF');
                isValid = false;
                if (!firstInvalidField) firstInvalidField = $('#factura_unica_pdf');
            }

            // 6️⃣ Validar XML
            var hasXML = $('#factura_unica_xml')[0].files && $('#factura_unica_xml')[0].files.length > 0;
            if (!hasXML) {
                $('#message_xml').text('Suba el archivo XML');
                isValid = false;
                if (!firstInvalidField) firstInvalidField = $('#factura_unica_xml');
            }

            // 7️⃣ Validar CIE
            if (!$('#cie_grupal').val().trim()) {
                $('#message_cie').text('Ingrese  Guía CIE');
                isValid = false;
                if (!firstInvalidField) firstInvalidField = $('#cie_grupal');
            }

            // 8️⃣ Validar Fecha Depósito
            if (!$('#fecha_deposito_grupal').val()) {
                $('#message_fecha_deposito').text('Seleccione  fecha de depósito');
                isValid = false;
                if (!firstInvalidField) firstInvalidField = $('#fecha_deposito_grupal');
            }

            // Si hay errores, enfocar el primer campo inválido
            if (!isValid) {
                if (firstInvalidField) {
                    firstInvalidField.focus();
                    firstInvalidField[0].scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
                }
                return;
            }

            // ── Si todo es válido, recopilar datos y enviar con FormData ──
            let formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');

            // Datos del capacitando
            formData.append('id_alumno', $('#id_alumno_form').val());
            formData.append('curp', $('#curp_form').text());
            formData.append('nombre', $('#nombre_form').text());
            formData.append('unidad', $('#unidad_form').text());

            // Datos del curso autorizado
            formData.append('curso_id', $('#curso').val());
            formData.append('curso_nombre', $('#curso option:selected').text().trim());

            // Datos del tipo de certificado
            formData.append('tipo_certificado', $('#tipoConocer').val());
            formData.append('fechaConocer', $('#fechaConocer').val());

            // Datos del comprobante
            formData.append('fecha_recibo', $('#fecha_recibo_form').val());
            formData.append('folio', $('#folio_form').val());
            formData.append('folio2', $('#folio2_form').val());

            // Pago CONOCER
            formData.append('cie', $('#cie_grupal').val());
            formData.append('fecha_deposito', $('#fecha_deposito_grupal').val());

            // Correcciones (solo si es tipo CORRECCIÓN)
            formData.append('correccion_nombre', $('#correccionNombre').val());
            formData.append('nombre_actual', $('#nombreActual').val());
            formData.append('nombre_correcto', $('#nombreCorrecto').val());
            formData.append('correccion_curp', $('#correccionCurp').val());
            formData.append('curp_actual', $('#curpActual').val());
            formData.append('curp_correcto', $('#curpCorrecto').val());
            formData.append('correccion_foto', $('#correccionFoto').val());
            formData.append('foto_nota', $('#fotoNota').val());

            // ✅ Agregar archivos PDF y XML
            var pdfFile = $('#factura_unica_pdf')[0].files[0];
            var xmlFile = $('#factura_unica_xml')[0].files[0];
            if (pdfFile) formData.append('factura_unica_pdf', pdfFile);
            if (xmlFile) formData.append('factura_unica_xml', xmlFile);

            // Enviar datos al controlador
            $.ajax({
                url: "{{ route('guardarConocer') }}",
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success && response.redirect) {
                        window.location.href = response.redirect;
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error al enviar datos:', error);
                    alert('Error al guardar. Favor de contactar al DTI.');
                }
            });
        });

        /* Funciones para preview de documentos PDF y XML */
        $('#factura_unica_pdf').on('change', function() {
            const fileName = this.files[0] ? this.files[0].name : 'Sin archivo';
            $('#nombre_pdf').text(fileName);
            const file = this.files[0];
            const preview = $('#preview_pdf');
            preview.empty();

            if (!file) {
                $("#message_pdf").html('');
                $('#preview_factura_unica').addClass('d-none');
                return;
            }

            const fileType = file.type;
            const maxSize = 5 * 1024 * 1024; // 5 MB

            if (fileType !== 'application/pdf') {
                $("#message_pdf").html('Solo se permiten documentos PDF');
                $(this).val('');
                $('#nombre_pdf').text('Sin archivo');
                return;
            }
            if (file.size > maxSize) {
                $("#message_pdf").html('El documento excede los 5MB permitidos');
                $(this).val('');
                $('#nombre_pdf').text('Sin archivo');
                return;
            }
            // Si pasa  validaciones, mostrar vista previa
            $("#message_pdf").html('');
            $('#preview_factura_unica').removeClass('d-none');
            const objectURL = URL.createObjectURL(file);
            preview.append(
                `<iframe src="${objectURL}" width="100%" height="100%" class="border" frameborder="0"></iframe>`
            );
        });

        $('#factura_unica_xml').on('change', function() {
            const fileName = this.files[0] ? this.files[0].name : 'Sin archivo';
            $('#nombre_xml').text(fileName);
            const file = this.files[0];

            if (!file) {
                $("#message_xml").html('');
                $('#xml_content').text('');
                $('#xml_no_disponible').removeClass('d-none');
                return;
            }

            const fileType = file.type;
            const maxSize = 5 * 1024 * 1024; // 5 MB

            if (fileType !== 'application/xml' && !file.name.endsWith('.xml')) {
                $("#message_xml").html('Solo se permiten archivos XML');
                $(this).val('');
                $('#nombre_xml').text('Sin archivo');
                return;
            }

            if (file.size > maxSize) {
                $("#message_xml").html('El archivo excede los 5MB permitidos');
                $(this).val('');
                $('#nombre_xml').text('Sin archivo');
                return;
            }

            // Leer y mostrar XML
            const reader = new FileReader();
            reader.onload = function(e) {
                const xmlContent = e.target.result;
                $('#xml_content').text(xmlContent);
                $('#xml_no_disponible').addClass('d-none');
                $('#preview_factura_unica').removeClass('d-none');
            };
            reader.readAsText(file);

            $("#message_xml").html('');
        });

        /*$('#unidad_autorizada').on('change', function() {

            let unidad = $(this).val();

            // Reiniciar contadores
            $('#total_tipo_1').text('0');
            $('#total_tipo_2').text('0');
            $('#total_tipo_4').text('0');
            $('#total_tipo_6').text('0');
            $('#total_tipo_7').text('0');

            if (!unidad) {
                return;
            }

            $.ajax({
                url: "{{ url('/aulas/cursos-autorizados-por-unidad') }}/" + unidad,
                type: "GET",

                beforeSend: function() {
                    $('#total_tipo_1, #total_tipo_2, #total_tipo_4, #total_tipo_6, #total_tipo_7')
                        .text('...');
                },

                success: function(response) {
                    $('#total_tipo_1').text(response.tipo_1);
                    $('#total_tipo_2').text(response.tipo_2);
                    $('#total_tipo_4').text(response.tipo_4);
                    $('#total_tipo_6').text(response.tipo_6);
                    $('#total_tipo_7').text(response.tipo_7);
                },
                error: function(xhr) {
                    console.log(xhr.responseText);
                    $('#total_tipo_1, #total_tipo_2, #total_tipo_4, #total_tipo_6, #total_tipo_7')
                        .text('0');
                }
            });
        });*/
        function cargarCursosPorUnidad(unidad) {

            // Reiniciar contadores
            $('#total_tipo_1').text('0');
            $('#total_tipo_2').text('0');
            $('#total_tipo_4').text('0');
            $('#total_tipo_6').text('0');
            $('#total_tipo_7').text('0');

            if (!unidad) {
                return;
            }

            $.ajax({
                url: "{{ url('/aulas/cursos-autorizados-por-unidad') }}/" + unidad,
                type: "GET",

                beforeSend: function() {
                    $('#total_tipo_1, #total_tipo_2, #total_tipo_4, #total_tipo_6, #total_tipo_7')
                        .text('...');
                },

                success: function(response) {
                    $('#total_tipo_1').text(response.tipo_1);
                    $('#total_tipo_2').text(response.tipo_2);
                    $('#total_tipo_4').text(response.tipo_4);
                    $('#total_tipo_6').text(response.tipo_6);
                    $('#total_tipo_7').text(response.tipo_7);
                },

                error: function(xhr) {
                    console.log(xhr.responseText);

                    $('#total_tipo_1, #total_tipo_2, #total_tipo_4, #total_tipo_6, #total_tipo_7')
                        .text('0');
                }
            });
        }

        // Cuando cambia el select
        $('#unidad_autorizada').on('change', function() {
            cargarCursosPorUnidad($(this).val());
        });

        // Cuando carga  página
        $(document).ready(function() {
            let unidad = $('#unidad_autorizada').val();

            if (unidad) {
                cargarCursosPorUnidad(unidad);
            }
        });
    </script>
@endpush