@extends('layout.template')
@section('title', 'SICCAP ICATEP')
@section('content')
    <div class="content-body">
        <!-- row -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12 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="fa fa-arrow-left"></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.,  -->
                                        <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->uni_id }}">
                                                        {{ $unidad->uni_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">PARA EL TRABAJO</option>
                                                <option value="2">EN EL TRABAJO</option>
                                                <option value="4">EVALUACI&Oacute;N</option>
                                                <option value="6">ROCO</option>
                                                 <!-------------------------------------------------- SECCION CONOCER -------------------------------------------------->
                                                <option value="7">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="cur_id" value="" id="cur_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="fa fa-cubes"></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 las 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 la 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="fa fa-cloud-upload"></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="fa fa-save 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="la la-book-open 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="aul_registro_cursos_id"
                                            name="aul_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="fa fa-building"></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="cp" class="form-control"
                                                        value="{{ old('cp') }}" placeholder="" id="cp"
                                                        onkeyup="this.value = this.value.toUpperCase()">
                                                    @error('cp')
                                                        <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="num_ext" class="form-control"
                                                        value="{{ old('num_ext') }}" placeholder="" id="num_ext"
                                                        onkeyup="this.value = this.value.toUpperCase()">
                                                    @error('num_ext')
                                                        <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="num_int" class="form-control" value="S/N"
                                                        placeholder="" id="num_int"
                                                        onkeyup="this.value = this.value.toUpperCase()">
                                                    <div class="text-danger" id="message_num_int"></div>
                                                    @error('num_int')
                                                        <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" 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->esmex_id }}">
                                                                {{ $estados->esmex_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="" id="lista_municipios">
                                                        <option value="">Seleccione</option>
                                                    </select>
                                                    @error('cp')
                                                        <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="text" name="telefono" class="form-control"
                                                        value="{{ old('telefono') }}" placeholder="" id="telefono"
                                                        onkeyup="this.value = this.value.toUpperCase()">
                                                    @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="la la-user-friends 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 la 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="la la-calendar 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="cur_id" value="" id="cur_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="las la-calendar-week la-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="mdi mdi-alert"></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>
                            <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="fa fa-exclamation-triangle fs-3 text-danger mx-2"></i><strong>La
                                                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 class="row">
        @if (session('success'))
            <div class="alert alert-primary alert-dismissible fade show" id="alert-container">
                <svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2"
                    fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="9 11 12 14 22 4"></polyline>
                    <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                </svg>
                <strong id="alert-confirmacion"> {{ session('success') }}</strong>
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" id="alert-container-error">
                <svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2"
                    fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2">
                    </polygon>
                    <line x1="15" y1="9" x2="9" y2="15"></line>
                    <line x1="9" y1="9" x2="15" y2="15"></line>
                </svg>
                <strong id="alert-confirmacion-error"> {{ session('error') }}</strong>
            </div>
        @endif
    </div>
    </div>
    </div>
    <!--</div>-->
    </div>
    </div>
    </div>

@endsection

@push('scripts')
    <script>
        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 la 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 la ruta
                columns: [{
                    data: "alu_curp"
                },
                {
                    data: "nombre_alumno"
                },
                {
                    data: null,
                    render: function (data) {
                        var id_alumno = data.alu_id;

                        return `
                                <button type="submit" class="btn btn-primary shadow btn-xs btn-add seleccionarCapacitando" data-id="${data.alu_id}" data-curp="${data.alu_curp}" data-nombre="${data.nombre_alumno}" data-unidad="${data.uni_nombre}"> 
                                        <i class="fas fa-user-graduate"></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;

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

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

                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 las 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 la 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 las 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 la 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.cur_id}">
                                        ${curso.cur_clave} | ${curso.cur_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 la 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.ins_id}-${instructor.ins_nombre} ${instructor.ins_ape_pat} ${instructor.ins_ape_mat}"
                                                                                            data-id="${instructor.ins_id}">${instructor.ins_nombre} ${instructor.ins_ape_pat} ${instructor.ins_ape_mat}</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;
                $('#cur_id').val(estandarId);

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

                return; // salir de la función
            }
            else {
                const cursoId = $(this).find('option:selected').data('id');
                $('#cur_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.ins_cer_clave}" data-id="${curso.ins_cer_clave}">${curso.ins_cer_clave} | ${curso.cer_nombre} </option>`
                                );
                            } else {
                                $cursos.append(
                                    `<option value="">Seleccione</option>` +
                                    `<option value="${curso.cur_id}" data-id="${curso.cur_id}">${curso.cur_nombre} | ${curso.cur_tipo_formacion} </option>`
                                );
                            }
                            /*} else {
                                $cursos.append(
                                    `<option value="">Seleccione</option>` +
                                    `<option value="${curso.reg_cur_curso_id}" data-id="${curso.reg_cur_curso_id}">${curso.reg_cur_curso_nombre} | ${curso.mod_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 la 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.mod_id}">${curso.mod_clave} | ${curso.mod_porcentaje}% | CAP. ${curso.mod_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 la recarga de la 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.uni_zona_costo;
                    if (cursos.length > 0) {
                        $('#formulario_aula').removeClass('d-none');
                        let curso = cursos[0]; // Accede al primer objeto del array
                        let duracion = curso.cur_horas = parseInt(curso.cur_horas);

                        /* if(tipoCurso==4){
                         $('#cfp').val("CONOCER");
                         $('#especialidad').val("CONOCER");
                         $('#nombre_curso').val(curso.cer_nombre);
                         $('#clave_curso').val(curso.cer_clave);
                         $('#duracion').val(curso.cer_evaluacion_horas);
                         $('#minimo_capacitandos').val(15);
                         $('#costo_psc').val(curso.cer_evaluacion_costo_psc);
                         $('#costo_alumno').val(curso.cer_alineacion_costo);
                         $('#tipo_de_curso').val("EVALUACIÓN");
                         $('#curso_id').val(curso.cer_id);
                         $('#aul_registro_cursos_id').val(0);
                         $('#id_tipo_curso').val(4);
                         $('#tipo_formacion').val(curso.cer_sector_nombre);

                         }else{*/
                        if (tipoCurso == 4) {
                            $('#cfp').val("CONOCER");
                            $('#especialidad').val("CONOCER");
                            $('#tipo_formacion').val(curso.cer_sector_nombre);
                            $('#tipo_de_curso').val("EVALUACIÓN");
                            $('#id_tipo_curso').val(4);
                        } 
                        else {
                            $('#cfp').val(curso.cfp_nombre);
                            $('#especialidad').val(curso.esp_nombre);
                            $('#tipo_de_curso').val(curso.tip_nombre);
                            $('#tipo_formacion').val(curso.cur_tipo_formacion);
                            $('#id_tipo_curso').val(curso.cur_tipo_id);
                            $('#duracion').val(curso.cur_horas);

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

                        }

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


                        $('#nombre_curso').val(curso.cur_nombre);
                        $('#clave_curso').val(curso.cur_clave);
                        $('#mostrar_clave_curso').val(curso.cur_clave);

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

                        $('#curso_id').val(curso.cur_id);
                        $('#aul_registro_cursos_id').val(curso.reg_cur_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.cur_tipo_id;
                        //let id_modelo = curso.reg_cur_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].mod_clave);
                                        $('#costo_psc').val(response.data[0]
                                            .mod_hora_instructor);
                                        $('#cap_modelo').val(response.data[0]
                                            .mod_numero_capacitandos);
                                        $('#id_modelo').val(response.data[0]
                                            .mod_id);
                                        $('#costo_alumno').val(response.data[0]
                                            .mod_costo_capacitando);
                                        $('#minimo_capacitandos').val(response
                                            .data[0].mod_numero_capacitandos
                                        );
                                        $('#duracion').val(response.data[0]
                                            .mod_horas);

                                        let duracion = Number(response.data[0]
                                            .mod_horas);
                                        let capacitandos = Number(response.data[
                                            0].mod_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 la 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
                                .mu_nombre + '">' + municipio.mu_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="fa fa-spinner fa-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: '#cp',
                msg: 'Requerido',
                target: '#message_cp'
            },
            {
                id: '#nombre_vialidad',
                msg: 'Requerido',
                target: '#message_nombre_vialidad'
            },
            {
                id: '#num_ext',
                msg: 'Requerido',
                target: '#message_num_ext'
            },
            {
                id: '#colonia',
                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 != 6) {
                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", "#cp", function () {
            let cp = $(this).val();
            if (cp.length === 5) {
                $.ajax({
                    url: "/tlaloc/cp/" + cp,
                    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 la 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
                                .mu_clave + '">' + municipio.mu_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();
        $('#cur_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.ins_id}-${instructor.ins_nombre} ${instructor.ins_ape_pat} ${instructor.ins_ape_mat}">${instructor.ins_nombre} ${instructor.ins_ape_pat} ${instructor.ins_ape_mat}</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 la 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.mod_clave}" data-mod-id="${item.mod_id}" class="text-center">
                                                                                <td nowrap>${item.mod_clave}</td>
                                                                                <td>${item.mod_numero_capacitandos}</td>
                                                                                <td>${item.mod_costo_capacitando}</td>
                                                                                <td>${item.mod_numero_madres_solteras || 0}</td>
                                                                                <td>${item.mod_costo_madre_soltera}</td>
                                                                                <td>${item.mod_horas}</td>
                                                                                <td>${item.mod_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 mod_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 la 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 la 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 la 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 la 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 la 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 las 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('');
        });

    </script>
@endpush