@extends('layout.template')
@section('title', 'SICCAP ICATEP')

@section('content')
    <div class="content-body">|
        
        <div class="container-fluid">

            <div class="row page-titles mx-0">
                <div class="col-sm-6 p-md-0">
                    <div class="welcome-text">
                        <h5>Nuevo Instructor 
                            <i class="fa fa-info-circle" aria-hidden="true" data-toggle="tooltip"
                                data-bs-placement="right" title="Todos los campos marcados con * son requeridos"></i>
                        </h5>
                    </div>
                </div>
                <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('instructores') }}" 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="row">
                <div class="col-xl-12 ">
                    <div class="card">
                        <div class="card-body">
                            <div class="basic-form">
                                <form action="{{ route('instructorNuevo') }}" method="post" enctype="multipart/form-data">
                                    @csrf

                                    <div class="row">
                                        
                                        <div class="alert alert-primary alert-dismissible fade show">
                                            <i class="fas fa-user-alt"></i> <strong>Datos Personales</strong>
                                        </div>
                                        <div class="col-lg-3 mb-3 col-md-6">
                                            <label class="form-label">CURP</label>
                                            <input type="text" name="curp" class="form-control"
                                                value="{{ old('curp') }}" placeholder="" id="curp" maxlength="18">
                                            @error('curp')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                            <div class="text-danger" id="message"></div>
                                            <div class="text-danger" id="message_curp"></div>
                                            <div class="alert-danger" id="message_existe"></div>
                                        </div>
                                        <div class="col-lg-2 mb-3 col-md-6">
                                            <label class="form-label">Apellido Paterno</label>
                                            <input type="text" name="ape_paterno" class="form-control"
                                                value="{{ old('ape_paterno') }}" placeholder="" id="ape_paterno"
                                                onkeyup="this.value = this.value.toUpperCase()"
                                                required>
                                            @error('ape_paterno')
                                                <div class="text-danger" id="">{{ $message }}</div>
                                            @enderror
                                            <div class="text-danger" id="message_apePaterno"></div>
                                        </div>
                                        <div class="col-lg-2 mb-3 col-md-6">
                                            <label class="form-label">Apellido Materno</label>
                                            <input type="text" name="ape_materno" class="form-control" placeholder=""
                                                id="ape_materno" value="{{ old('ape_materno') }}" onkeyup="this.value = this.value.toUpperCase()">
                                            @error('ape_materno')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                            <div class="text-danger" id="message_apeMaterno"></div>
                                        </div>
                                        <div class="col-lg-3 mb-3 col-md-6">
                                            <label class="form-label">Nombre(s)</label>
                                            <input type="text" name="nombre_psc" class="form-control" placeholder=""
                                                id="nombre_psc" onkeyup="this.value = this.value.toUpperCase()"
                                                value="{{ old('nombre_psc') }}" placeholder="">
                                            @error('nombre_psc')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                            <div class="text-danger" id="message_nombre"></div>
                                        </div>
                                        <div class="col-lg-2 mb-3 col-md-6">
                                            <label class="form-label">Email</label>
                                            <input type="email" name="email" class="form-control" placeholder=""
                                                id="email" onkeyup="this.value = this.value.toLowerCase()"
                                                value="{{ old('email') }}" placeholder="" oninput="validarCorreo(this)">
                                            @error('email')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                            <div class="text-danger" id="message_email"></div>
                                        </div>
                                        <div class="col-lg-2 mb-3 col-md-6">
                                            <label class="form-label">RFC</label>
                                            <input type="text" name="rfc" class="form-control"
                                                value="{{ old('rfc') }}" placeholder="" id="rfc" readonly>
                                            @error('rfc')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-lg-1 mb-3 col-md-6">
                                            <label class="form-label">Homoclave</label>
                                            <input type="text" name="homoclave" class="form-control" placeholder=""
                                                id="homoclave" value="{{ old('homoclave') }}" oninput="validarLetrasNumeros(this)"
                                                maxlength="3">
                                            @error('homoclave')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                            <div class="text-danger" id="message_homoclave"></div>
                                        </div>
                                        <div class="col-lg-2 mb-3 col-md-6">
                                            <label class="form-label">Celular</label>
                                            <input type="text" name="celular" class="form-control" 
                                                value="{{ old('celular') }}" 
                                                placeholder="" 
                                                id="celular"
                                                maxlength="10"
                                                pattern="[0-9]{10}"
                                                inputmode="numeric"
                                                oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10)"
                                                title="Ingrese exactamente 10 dígitos">
                                            @error('celular')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                            <div class="text-danger" id="message_celular"></div>
                                        </div>
                                        <div class="col-lg-3 mb-3 col-md-6">
                                            <label class="form-label">Fecha Ingreso al ICATEP</label>
                                            <input name="fecha_ingreso" value=""
                                                class="datepicker-default form-control picker__input" id="datepicker"
                                                aria-haspopup="true" aria-expanded="false" aria-readonly="false"
                                                aria-owns="datepicker_root">
                                            @error('fecha_ingreso')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                            <div class="text-danger" id="message_fecha_alta"></div>
                                        </div>
                                        <div class="alert alert-primary alert-dismissible fade show">
                                            <i class="fas fa-pen-alt"></i> <strong>Informaci&oacute;n Adicional</strong>
                                        </div>
                                        <div class="col-lg-2 mb-3 col-md-6">
                                            <label class="form-label">Fecha de Nacimiento</label>
                                            <input type="text" name="fecha_nacimiento" class="form-control"
                                                value="{{ old('fecha_nacimiento') }}" id="fecha_nacimiento" readonly>
                                            @error('nombre_especialidad')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror

                                        </div>
                                        <div class="col-lg-1 mb-3 col-md-6">
                                            <label class="form-label">Edad</label>
                                            <input type="number" name="edad" class="form-control"
                                                value="{{ old('edad') }}" id="edad" readonly>
                                            @error('edad')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-lg-2 mb-3 col-md-6">
                                            <label class="form-label">Sexo</label>
                                            <input type="text" name="" class="form-control"
                                                value="{{ old('sexo_completo') }}" placeholder="" id="sexo_completo"
                                                readonly>
                                            <input type="hidden" name="sexo" value="" id="sexo">
                                            <input type="hidden" name="curriculum" value="SI">
                                            <input type="hidden" name="constancia" value="SI">
                                            @error('sexo')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-lg-4 mb-3 col-md-6">
                                            <label class="form-label">Entidad Federativa</label>
                                            <input type="text" name="entidad_fed" value="" class="form-control"
                                                value="{{ old('entidad_fed') }}" placeholder="" id="entidad_fed"
                                                readonly>
                                            <input type="hidden" name="id_estado" value="" id="id_estado">
                                            <div class="text-primary" id="entidad"></div>
                                            @error('entidad_fed')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="alert alert-primary alert-dismissible fade show">
                                            <i class="fa fa-home"></i> <strong>Domicilio</strong>
                                        </div>
                                        <div class="col-lg-3 mb-3 col-md-6">
                                            <label class="form-label">Calle</label>
                                            <input type="text" name="calle" class="form-control" placeholder=""
                                                id="calle" value="{{ old('calle') }}">
                                            @error('calle')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                            <div class="text-danger" id="message_calle"></div>
                                        </div>
                                        <div class="col-lg-1 mb-3 col-md-6">
                                            <label class="form-label">No. ext</label>
                                            <input type="text" name="num_ext" class="form-control" id="num_ext"
                                                value="{{ old('num_ext') }}">
                                            @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">
                                            <label class="form-label">No. Int.</label>
                                            <input type="text" name="num_int" class="form-control" id="num_int"
                                                value="S/N" >
                                            @error('num_int')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                            <div class="text-danger" id="message_num_int"></div>
                                        </div>
                                        <div class="col-lg-2 mb-3 col-md-6">
                                            <label class="form-label">Colonia</label>
                                            <input type="text" name="colonia" class="form-control" placeholder=""
                                                id="colonia" value="{{ old('colonia') }}" >
                                            @error('colonia')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                            <div class="text-danger" id="message_colonia"></div>
                                        </div>
                                        <div class="col-lg-1 mb-3 col-md-6">
                                            <label class="form-label">CP</label>
                                            <input type="text" name="cp" class="form-control"
                                                value="{{ old('cp') }}" placeholder=""
                                                id="cp" maxlength="5" pattern="[0-9]{1,5}"
                                                oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 5)">
                                            @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">
                                            <label class="form-label">Estado</label>
                                            <select class="form-control" id="estados" name="estados">
                                                <option value="">Seleccione</option>
                                                @foreach ($estados_mexico as $estados)
                                                    <option value="{{ $estados->esmex_id }}">{{ $estados->esmex_nombre }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('estados')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                            <div class="text-danger" id="message_estado"></div>
                                        </div>
                                        <div class="col-lg-2 mb-3 col-md-6">
                                            <label class="form-label">Municipio</label>
                                            <select class="form-control" id="lista_municipios" name="lista_municipios">
                                                <option value="">Seleccione</option>
                                            </select>
                                            @error('lista_municipios')
                                                <div id="div_municipio" class="text-danger">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                            <div class="text-danger" id="message_municipio"></div>
                                        </div>

                                        <!-- ********************************************************************** -->

                                        <div class="alert alert-primary alert-dismissible fade show">
                                            <i class="fas fa-graduation-cap"></i> <strong>Formaci&oacute;n</strong>
                                        </div>

                                        <!-- ********************************************************************** -->

                                        <div class="row">
                                            <div class="col-lg-4">
                                                <div class="mb-3">

                                                    <input type="hidden" id="selectData" name="selectData">
                                                    <label class="form-label">Ultimo grado de estudio concluido:</label>
                                                    <select class="form-control" id="grado_estudios"
                                                        name="grado_estudios">

                                                        <option data-id="1" selected value="PRIMARIA INCOMPLETA">
                                                            PRIMARIA INCOMPLETA </option>
                                                        <option data-id="2" value="PRIMARIA COMPLETA"> 
                                                            PRIMARIA COMPLETA </option>
                                                        <option data-id="3" value="SECUNDARIA INCOMPLETA"> 
                                                            SECUNDARIA INCOMPLETA </option>
                                                        <option data-id="4" value="SECUNDARIA COMPLETA"> 
                                                            SECUNDARIA COMPLETA </option>
                                                        <option data-id="5" value="CARRERA TECNICA INCOMPLETA"> 
                                                            CARRERA TECNICA INCOMPLETA </option>
                                                        <option data-id="6" value="CARRERA TECNICA COMPLETA"> 
                                                            CARRERA TECNICA COMPLETA </option>
                                                        <option data-id="7" value="BACHILLERATO INCOMPLETO">
                                                            BACHILLERATO INCOMPLETO </option>
                                                        <option data-id="8" value="BACHILLERATO COMPLETO"> 
                                                            BACHILLERATO COMPLETO </option>
                                                        <option data-id="9" value="LICENCIATURA INCOMPLETA">
                                                            LICENCIATURA INCOMPLETA </option>
                                                        <option data-id="10" value="LICENCIATURA COMPLETA"> 
                                                            LICENCIATURA COMPLETA </option>
                                                        <option data-id="11" value="POSGRADO"> POSGRADO </option>

                                                    </select>
                                                    <div class="pristine-error text-help" id="msg_gradoestudios"></div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-lg-2" id="d7" style="display: none;">
                                                <div class="mb-3">
                                                    <label class="form-label">Carrera T&eacute;cnica incompleta</label>
                                                    <input type="text" class="form-control" id="carreraTecnicaTrunca"
                                                        name="carreraTecnicaTrunca" value=""
                                                        onkeyup="javascript:this.value=this.value.toUpperCase();">
                                                </div>
                                            </div>

                                            <div class="col-lg-2" id="d8" style="display: none;">
                                                <div class="mb-3">
                                                    <label class="form-label" for="carreraTecnica">Carrera T&eacute;cnica
                                                        completa</label>
                                                    <input type="text" class="form-control" id="carreraTecnica"
                                                        name="carreraTecnica" value=""
                                                        onkeyup="javascript:this.value=this.value.toUpperCase();">
                                                </div>
                                            </div>

                                            <div class="col-lg-2" id="d10" style="display: none;">
                                                <div class="mb-3">
                                                    <label class="form-label" for="licenciaturaTrunca">Licenciatura
                                                        incompleta</label>
                                                    <input type="text" class="form-control" id="licenciaturaTrunca"
                                                        name="licenciaturaTrunca" value=""
                                                        onkeyup="javascript:this.value=this.value.toUpperCase();">
                                                </div>
                                            </div>

                                            <div class="col-lg-2" id="d11" style="display: none;">
                                                <div class="mb-3">
                                                    <label class="form-label" for="licenciatura">Nombre de la
                                                        Licenciatura</label>
                                                    <input type="text" class="form-control" id="licenciatura"
                                                        name="licenciatura" value=""
                                                        onkeyup="javascript:this.value=this.value.toUpperCase();">
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label" for="licenciatura">Otra Licenciatura
                                                        (opcional)</label>
                                                    <input type="text" class="form-control" id="licenciaturaOtra"
                                                        name="licenciaturaOtra" value=""
                                                        onkeyup="javascript:this.value=this.value.toUpperCase();">
                                                </div>
                                            </div>

                                            <div class="col-lg-2" id="d12" style="display: none;">
                                                <div class="mb-3">
                                                    <label class="form-label" for="ingenieriaTrunca">Ingenieria
                                                        Trunca</label>
                                                    <input type="text" class="form-control" id="ingenieriaTrunca"
                                                        name="ingenieriaTrunca" value=""
                                                        onkeyup="javascript:this.value=this.value.toUpperCase();">
                                                </div>
                                            </div>

                                            <div class="col-lg-2" id="d13" style="display: none;">
                                                <div class="mb-3">
                                                    <label class="form-label" for="ingenieria">Nombre de la
                                                        Ingenier&iacute;a</label>
                                                    <input type="text" class="form-control" id="ingenieria"
                                                        name="ingenieria" value=""
                                                        onkeyup="javascript:this.value=this.value.toUpperCase();">
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label" for="ingenieria">Otra Ingenier&iacute;a
                                                        (opcional)</label>
                                                    <input type="text" class="form-control" id="ingenieriaOtra"
                                                        name="ingenieriaOtra" value=""
                                                        onkeyup="javascript:this.value=this.value.toUpperCase();">
                                                </div>
                                            </div>

                                            <div class="col-lg-3" id="selLicIng" style="display: none;">
                                                <div class="mb-3">
                                                    <label class="form-label" for="licing">Licenciatura /
                                                        Ingenier&iacute;a</label>
                                                    <select class="form-control" id="licing" name="licing">
                                                        <option value="LICENCIATURA">LICENCIATURA</option>
                                                        <option value="INGENIERIA">INGENIERIA</option>
                                                    </select>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label" for="licingOtra">Otra Licenciatura /
                                                        Ingenier&iacute;a (opcional)</label>
                                                    <select class="form-control" id="licingOtra" name="licingOtra">
                                                        <option value="LICENCIATURA">LICENCIATURA</option>
                                                        <option value="INGENIERIA">INGENIERIA</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-lg-3" id="inputLicIng" style="display: none;">
                                                <div class="mb-3">
                                                    <label class="form-label" for="inputLI">Nombre de la carrera</label>
                                                    <input type="text" class="form-control" id="inputLI"
                                                        name="inputLI" value=""
                                                        onkeyup="javascript:this.value=this.value.toUpperCase();">
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label" for="inputLIOtra">Nombre de la carrera
                                                        (opcional)</label>
                                                    <input type="text" class="form-control" id="inputLIOtra"
                                                        name="inputLIOtra" value=""
                                                        onkeyup="javascript:this.value=this.value.toUpperCase();">
                                                </div>
                                            </div>

                                            <div class="col-lg-3" id="d14" style="display: none;">
                                                <div class="mb-3">
                                                    <label class="form-label" for="maestria">Nombre de la Maestría</label>
                                                    <input type="text" class="form-control" id="maestria"
                                                        name="maestria" value=""
                                                        onkeyup="javascript:this.value=this.value.toUpperCase();">
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label" for="maestria">Otra Maestría
                                                        (opcional)</label>
                                                    <input type="text" class="form-control" id="maestriaOtra"
                                                        name="maestriaOtra" value=""
                                                        onkeyup="javascript:this.value=this.value.toUpperCase();">
                                                </div>
                                            </div>

                                            <div class="col-lg-3" id="d15" style="display: none;">
                                                <div class="mb-3">
                                                    <label class="form-label" for="doctorado">Nombre del Doctorado</label>
                                                    <input type="text" multiple class="form-control" id="doctorado"
                                                        name="doctorado" value=""
                                                        onkeyup="javascript:this.value=this.value.toUpperCase();">
                                                </div>
                                            </div>
                                            <div class="col-lg-3" id="d16" style="display: none;">
                                                <div class="mb-3">
                                                    <label class="form-label" for="posgrado">Nombre del Posgrado</label>
                                                    <input type="text" multiple class="form-control" id="posgrado"
                                                        name="posgrado" value=""
                                                        onkeyup="javascript:this.value=this.value.toUpperCase();">
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="mb-3">
                                                </div>
                                            </div>

                                            <div class="col-lg-6 mb-3 col-md-6">
                                                <label class="form-label">Subir Comprobante de estudios</label>
                                                <input class="form-control" type="file" id="comp_estudios"
                                                    value="{{ old('file_comp_estudios') }}" name="file_comp_estudios"
                                                    accept="application/pdf"
                                                    data-existing-file="false">
                                                <div class="accordion-item d-none" id="div_comp_estudios">
                                                    <h2 class="accordion-header accordion-header-primary"
                                                        id="headingCompEstudios">
                                                        <button class="accordion-button btn light btn-primary"
                                                            type="button" data-bs-toggle="collapse"
                                                            data-bs-target="#collapseCompEstudios">
                                                            <span class="accordion-header-text">Vista previa</span>
                                                        </button>
                                                    </h2>
                                                    <div id="collapseCompEstudios" class="accordion-collapse collapse show"
                                                        aria-labelledby="headingCompEstudios" data-bs-parent="#accordion-six">
                                                        <div class="accordion-body">
                                                            <div id="preview_comp_estudios" class="mt-3"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="text-danger" id="message_comp_estudios"></div>
                                            </div>

                                        </div>

                                        <div class="row">
                                            <div class="mb-3">
                                            </div>
                                        </div>


                                        <div class="alert alert-primary alert-dismissible fade show">
                                            <i class="fa fa-file-text"></i> <strong>Documentaci&oacute;n</strong>
                                        </div>
                                        <div class="col-lg-3 mb-3 col-md-6">
                                            <label class="form-label">Identificaci&oacute;n</label>
                                            <select class="form-control" name="identificacion" id="">
                                                <option value="INE">INE</option>
                                                <option value="CEDULA">CEDULA</option>
                                                <option value="PASAPORTE">PASAPORTE</option>
                                            </select>
                                            @error('')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-lg-3 mb-3 col-md-6">
                                            <label class="form-label">
                                                Clave de Elector (INE) / Folio (Otros) *</label>
                                            <input type="text" name="folio_ide" class="form-control"
                                                value="{{ old('folio_ide') }}" placeholder="" id="folio_ide"
                                                onkeyup="this.value = this.value.toUpperCase()">
                                            @error('folio_ide')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                            <div class="text-danger" id="message_folio_ide"></div>
                                        </div>
                                        {{-- <div class="col-lg-1 mb-3 col-md-6">
                                            <label class="form-label">Curr&iacute;culum</label>
                                            <select class="form-control" name="curriculum" id="">
                                                <option value="SI">SI</option>
                                                <option value="NO">NO</option>
                                            </select>
                                            @error('curriculum')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div> --}}
                                        <div class="col-lg-2 mb-3 col-md-6">
                                            <label class="form-label">Acta de Nacimiento</label>
                                            <select class="form-control" name="acta" id="">
                                                <option value="SI">SI</option>
                                                <option value="NO">NO</option>
                                            </select>
                                            @error('acta')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        {{-- <div class="col-lg-2 mb-3 col-md-6">
                                            <label class="form-label">Constancia de Situación Fiscal</label>
                                            <select class="form-control" name="constancia" id="">
                                                <option value="SI">SI</option>
                                                <option value="NO">NO</option>
                                            </select>
                                            @error('constancia')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div> --}}
                                        <div class="col-lg-4 mb-3 col-md-6">
                                            <label class="form-label">Regim&eacute;n Fiscal</label>
                                            <select class="form-control" name="regimen" id="regimen">
                                                <option value="">Seleccione</option>
                                                <option
                                                    value="612 - Personas Fisicas con Actividades Empresariales y Profesionales">
                                                    612 - Personas Fisicas con Actividades Empresariales y
                                                    Profesionales </option>
                                                <option value="621 - Incorporacion Fiscal">621 -
                                                    Incorporacion Fiscal </option>
                                                <option value="626 - Simplificado de Confianza">626 - Simplificado de
                                                    Confianza </option>
                                            </select>
                                            @error('regimen')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                            <div class="text-danger" id="message_regimen"></div>
                                        </div>

                                        <div class="col-lg-6 mb-3 col-md-6">
                                            <label class="form-label">Subir Identificaci&oacute;n</label>
                                            <input class="form-control" type="file" id="identificacion"
                                                value="{{ old('file_identificacion') }}" name="file_identificacion"
                                                accept="application/pdf"
                                                data-existing-file="false">
                                            <div class="accordion-item d-none" id="div_identificacion">
                                                <h2 class="accordion-header accordion-header-primary" id="headingIdentificacion">
                                                    <button class="accordion-button btn light btn-primary" type="button"
                                                        data-bs-toggle="collapse" data-bs-target="#collapseIdentificacion">
                                                        <span class="accordion-header-text">Vista previa</span>
                                                    </button>
                                                </h2>
                                                <div id="collapseIdentificacion" class="accordion-collapse collapse show"
                                                    aria-labelledby="headingIdentificacion" data-bs-parent="#accordion-six">
                                                    <div class="accordion-body">
                                                        <div id="preview" class="mt-3"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="text-danger" id="message_ident"></div>
                                        </div>
                                        <!-- -------------------------------------------------------------------------------->
                                        <div class="col-lg-6 mb-3 col-md-6">
                                            <label class="form-label">Subir Constancia de Situación Fiscal </label>
                                            <input class="form-control" type="file" name="file_constancia" value="{{ old('file_constancia') }}" id="constancia" accept="application/pdf" data-existing-file="false">
                                            <div class="accordion-item d-none" id="div_constancia">
                                                <h2 class="accordion-header accordion-header-primary" id="headingConstancia">
                                                    <button class="accordion-button btn light btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConstancia">
                                                        <span class="accordion-header-text">Vista previa</span>
                                                    </button>
                                                </h2>
                                                <div id="collapseConstancia" class="accordion-collapse collapse show" aria-labelledby="headingConstancia" data-bs-parent="#accordion-six">
                                                    <div class="accordion-body">
                                                        <div id="preview_constancia" class="mt-3"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="text-danger" id="message_constancia"></div>
                                        </div>
                                        <!-- ----------------------------------------------------------------------------------------------------- -->
                                        <div class="col-lg-6 mb-3 col-md-6">
                                            <label class="form-label">Subir CURP</label>
                                            <input class="form-control" type="file" name="file_curp" value="{{ old('file_curp') }}" id="filecurp" accept="application/pdf" data-existing-file="false">
                                            <div class="accordion-item d-none" id="div_filecurp">
                                                <h2 class="accordion-header accordion-header-primary" id="headingCurp">
                                                    <button class="accordion-button btn light btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCurp">
                                                        <span class="accordion-header-text">Vista previa</span>
                                                    </button>
                                                </h2>
                                                <div id="collapseCurp" class="accordion-collapse collapse show" aria-labelledby="headingCurp" data-bs-parent="#accordion-six">
                                                    <div class="accordion-body">
                                                        <div id="preview_curp" class="mt-3"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="text-danger" id="message_filecurp"></div>
                                        </div>
                                        <!-- ----------------------------------------------------------------------------------------------------- -->
                                        <div class="col-lg-6 mb-3 col-md-6">
                                            <label class="form-label">Subir Comprobante de Domicilio</label>
                                            <input class="form-control" type="file" name="file_domicilio" value="{{ old('file_domicilio') }}" id="filedomicilio" accept="application/pdf" data-existing-file="false">
                                            <div class="accordion-item d-none" id="div_filedomicilio">
                                                <h2 class="accordion-header accordion-header-primary" id="headingDomicilio">
                                                    <button class="accordion-button btn light btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#acc_filedomicilio">
                                                        <span class="accordion-header-text">Vista previa</span>
                                                    </button>
                                                </h2>
                                                <div id="acc_filedomicilio" class="accordion-collapse collapse show" aria-labelledby="headingDomicilio" data-bs-parent="#accordion-six">
                                                    <div class="accordion-body">
                                                        <div id="preview_domicilio" class="mt-3"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="text-danger" id="message_filedomicilio"></div>
                                        </div>
                                         <!-- -------------------------------------------------------------------------------->
                                        
                                         <!-- -------------------------------------------------------------------------------->
                                          <div class="col-lg-6 mb-3 col-md-6">
                                            <label class="form-label">Subir Curriculum</label>
                                            <input class="form-control" type="file" name="file_curriculum"
                                                value="{{ old('file_curriculum') }}" id="curriculum"
                                                accept="application/pdf"
                                                data-existing-file="false">
                                            <div class="accordion-item d-none" id="div_curriculum">
                                                <h2 class="accordion-header accordion-header-primary" id="headingCurriculum">
                                                    <button class="accordion-button btn light btn-primary" type="button"
                                                        data-bs-toggle="collapse" data-bs-target="#collapseCurriculum">
                                                        <span class="accordion-header-text">Vista previa</span>
                                                    </button>
                                                </h2>
                                                <div id="collapseCurriculum" class="accordion-collapse collapse show"
                                                    aria-labelledby="headingCurriculum" data-bs-parent="#accordion-six">
                                                    <div class="accordion-body">
                                                        <div id="preview_curriculum" class="mt-3"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="text-danger" id="message_curriculum"></div>
                                        </div>
                                         <!-- -------------------------------------------------------------------------------->
                                        
                                        <div class="alert alert-primary alert-dismissible fade show">
                                            <i class="fas fa-file-signature"></i> <strong>Datos Bancarios</strong> 
                                        </div>

                                        <div class="row">
                                            <div class="col-lg-6 mb-3 col-md-6">
                                                <label class="form-label">Subir Estado de Cuenta </label>
                                                <input class="form-control" type="file" name="file_estado_cuenta" value="{{ old('file_estado_cuenta') }}" id="acta" accept="application/pdf" data-existing-file="false">
                                                <div class="accordion-item d-none" id="div_acta">
                                                    <h2 class="accordion-header accordion-header-primary" id="headingActa">
                                                        <button class="accordion-button btn light btn-primary" type="button"
                                                            data-bs-toggle="collapse" data-bs-target="#collapseActa">
                                                            <span class="accordion-header-text">Vista previa</span>
                                                        </button>
                                                    </h2>
                                                    <div id="collapseActa" class="accordion-collapse collapse show"
                                                        aria-labelledby="headingActa" data-bs-parent="#accordion-six">
                                                        <div class="accordion-body">
                                                            <div id="preview_acta" class="mt-3"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="text-danger" id="message_acta"></div>
                                            </div>
                                        </div>

                                         <div class="col-lg-4 mb-4 col-md-4">
                                            <label class="form-label">Nombre de Banco</label>
                                            <input type="text" name="nombre_banco" class="form-control" 
                                            value="{{ old('nombre_banco') }}" placeholder="" id="nombre_banco" maxlength="100">
                                            @error('nombre_banco')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                            <div class="text-danger" id="message_nombre_banco"></div>
                                        </div>

                                        <div class="col-lg-4 mb-4 col-md-4">
                                            <label class="form-label">Núm. de Cuenta</label>
                                            <input type="text" name="cuenta_banco" class="form-control" 
                                            value="{{ old('cuenta_banco') }}" placeholder="" id="cuenta_banco"
                                            maxlength="18" inputmode="numeric"
                                            oninput="this.value = this.value.replace(/[^0-9]/g,'').slice(0,18)">
                                            @error('cuenta_banco')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                            <div class="text-danger" id="message_cuenta_banco"></div>
                                        </div>

                                        <div class="col-lg-4 mb-4 col-md-4">
                                            <label class="form-label">Cuenta CLABE</label>
                                            <input type="text" name="clabe_banco" class="form-control" 
                                            value="{{ old('clabe_banco') }}" placeholder="" id="clabe_banco"
                                            maxlength="18" inputmode="numeric"
                                            oninput="this.value = this.value.replace(/[^0-9]/g,'').slice(0,18)">
                                            @error('clabe_banco')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                            <div class="text-danger" id="message_clabe_banco"></div>
                                        </div>

                                         <!-- -------------------------------------------------------------------------------->

                                        <div class="alert alert-primary alert-dismissible fade show">
                                            <i class="fas fa-file-signature"></i> <strong>Asignar Especialidades al Nuevo
                                                Instructor</strong> 
                                        </div>
                                        <div class="col-lg-12 mb-3 col-md-6">
                                            <label class="form-label">Especialidades</label>
                                            <select class="multi-select-placeholder" name="especialidades[]"
                                                id="especialidades" multiple>
                                                @foreach ($especialidades as $especialidad)
                                                    <option value="{{ $especialidad->esp_id }}">
                                                        {{ $especialidad->esp_nombre }} | {{ $especialidad->esp_clave }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('especialidad')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                            <div class="text-danger" id="message_especialidades"></div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-5 mb-3 col-md-5">
                                                <label class="form-label">¿Es Alineador? </label>
                                                <select class="multi-select-placeholder" name="alineaciones[]"
                                                    id="alineador" multiple>
                                                    @foreach ($certificaciones as $certificacion)
                                                        <option value="{{ $certificacion->cur_clave }}">
                                                            {{ $certificacion->cur_clave }} </option>
                                                    @endforeach
                                                </select>
                                                @error('especialidad5')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            {{ Auth::user()->perfil_id }}
                                            <div class="col-lg-5 mb-3 col-md-5">
                                                <label class="form-label">¿Es Evaluador?  </label>
                                                <select class="multi-select-placeholder" name="evaluaciones[]" id="evaluador" multiple {{ !in_array(Auth::user()->usu_perfil_id, [1, 24]) ? 'disabled' : '' }}>
                                                    @foreach ($certificaciones as $certificacion)
                                                        <option value="{{ $certificacion->cur_clave }}">
                                                            {{ $certificacion->cur_clave }} </option>
                                                    @endforeach
                                                </select>
                                                @error('especialidad5')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-lg-2 mb-3 col-md-2">
                                                <label class="form-label" for="roco">¿Es Instructor ROCO? </label>
                                                <select class="form-control" name="roco" id="roco">
                                                    <option value="1">SI</option>
                                                    <option value="0" selected>NO</option>
                                                </select>
                                                @error('roco')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="alert alert-primary alert-dismissible fade show">
                                            <i class="fas fa-search"></i> <strong>Observaciones (Quedar&aacute; grabado en
                                                el hist&oacute;rico del
                                                Instructor)</strong>
                                        </div>
                                        <div class="col-lg-12 mb-3 col-md-6">
                                            <label class="form-label">Escriba aqu&iacute; observaciones del Instructor
                                            </label>
                                            <textarea class="form-control" rows="8" name="observacion" id="comment"></textarea>
                                            @error('especialidad5')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="alert alert-danger alert-dismissible alert-alt fade show text-center d-none"
                                            id="alert_existe_curp">
                                            <strong>La CURP proporcionada ya se encuentra registrada: No es posible el registro</strong>
                                        </div>
                                        <div class="col-lg-6 mb-3 col-md-6">
                                            <button type="button" class="btn btn-light w-100" id="btn_borrador" 
                                                    onclick="validateBorrador(event)">
                                                Guardar borrador
                                            </button>
                                        </div>
                                        @puede('Instructores', 'hacer_cambios_instructor')
                                        <div class="col-lg-6 mb-3 col-md-6">
                                            <button type="submit" class="btn btn-primary w-100"
                                                onclick="validateForm(event)" id="btn_guardar">Guardar</button>
                                            <input type="hidden" name="accion_formulario" id="accion_formulario" value="">
                                        </div>
                                        @endpuede
                                        <!------------------ MODAL RECHAZAR PSC ------------------->
                                        <div class="modal fade" id="borrador" aria-modal="true" role="dialog">
                                            <div class="modal-dialog modal-dialog-centered" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header bg-primary">
                                                        <h5 class="modal-title text-white">Confirmar Borrador</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                    </div>
                                                    <div class="modal-body text-center">
                                                        <p>¿Guardar este formulario como borrador?</p>
                                                        <p>Podrás continuar con el registro más tarde.</p>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Cerrar</button>
                                                        <button type="button" class="btn btn-primary" id="btn_confirmar_borrador">Guardar</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </form>
                            </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>
@endsection

@push('scripts')
    <script>


        function convertToUpperCase(selector) {
            document.querySelectorAll(selector).forEach(input => {
                input.addEventListener('input', function(event) {
                    const cursorPos = this.selectionStart; // Guarda la posición del cursor
                    this.value = this.value.toUpperCase(); // Convierte el texto a mayúsculas
                    this.setSelectionRange(cursorPos, cursorPos); // Restaura la posición del cursor
                });
            });
        }

        $(document).ready(function() {
            convertToUpperCase('#curp, #ape_paterno, #ape_materno, #nombre_psc, #calle, #colonia, #num_ext, #num_int, #cp, #inputLI, #homoclave, #nombre_banco');
        });

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

        $('#alineador').select2();
        $('#evaluador').select2();

        $('#especialidades').select2({
            width: '100%',
            placeholder: "Seleccione hasta 5 especialidades",
            maximumSelectionLength: 5,
            closeOnSelect: false,
            allowClear: true
        });

        // Sanitizar selección antes de enviar (solo para el formulario de crear instructor)
        $('form[action="{{ route('instructorNuevo') }}"]').on('submit', function() {
            let esp = ($('#especialidades').val() || [])
                .map(s => s ? s.toString().trim() : '')
                .filter(s => s !== '' && s !== '0');
            // quitar duplicados y limitar a 5
            esp = [...new Set(esp)].slice(0, 5);
            $('#especialidades').val(esp);
        });

        $('#alineador').select2({
            width: '100%',
            placeholder: "Seleccione las alineaciones",
            closeOnSelect: false,
            allowClear: true
        });

        $('#evaluador').select2({
            width: '100%',
            placeholder: "Seleccione las evalauciones",
            closeOnSelect: false,
            allowClear: true
        });

        //function validarTexto(input) {
        //    input.value = input.value.replace(/[^a-zA-ZñÑ\s]/g, '');
        //}

        function validarLetrasNumeros(input) {
            input.value = input.value.replace(/[^a-zA-Z0-9ñÑ\s]/g, '');
        }

        function validarCorreo(input) {
            input.value = input.value.replace(/[^a-zA-Z0-9@._%+-]/g, '');
        }

        // Definir validateCURP FUERA del document.ready para que sea accesible globalmente
        function validateCURP(curp, edad) {
            const regex =
                /^([A-Z][AEIOUX][A-Z]{2}\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])[HM](AS|BC|BS|CC|CL|CM|CS|CH|DF|DG|GT|GR|HG|JC|MC|MN|MS|NT|NL|OC|PL|QT|QR|SP|SL|SR|TC|TS|TL|VZ|YN|ZS)[B-DF-HJ-NP-TV-Z]{3}[A-Z\d]\d)$/;
            const isValid = regex.test(curp);
            
            // Mostrar mensaje de error de formato en #message_curp
            if (curp.length === 0) {
                $('#message_curp').html('');
                return false;
            } else if (curp.length < 18) {
                const faltantes = 18 - curp.length;
                $('#message_curp').html('<i class="fas fa-info-circle text-info"></i> El CURP debe tener 18 caracteres. Faltan ' + faltantes + ' caracteres.');
                return false;
            } else if (curp.length === 18 && !isValid) {
                $('#message_curp').html('<i class="fas fa-exclamation-triangle text-warning"></i> El formato del CURP no es válido');
                return false;
            }
            
            // Si el CURP es válido, verificar la edad
            if (curp.length === 18 && isValid) {
                if (edad !== undefined && edad !== null && !isNaN(edad)) {
                    if (edad < 18) {
                        $('#message_curp').html('<i class="fas fa-times-circle text-danger"></i> No permitido: El instructor debe ser mayor de 18 años.');
                        /* $('#message_curp').html('<i class="fas fa-times-circle text-danger"></i> No permitido: El instructor debe ser mayor de 18 años (edad: ' + edad + ' años)'); */
                        return false;
                    } else if (edad > 95) {
                        $('#message_curp').html('<i class="fas fa-times-circle text-danger"></i> No permitido: Edad fuera del rango permitido.');
                        /* $('#message_curp').html('<i class="fas fa-times-circle text-danger"></i> No permitido: Edad fuera del rango permitido (edad: ' + edad + ' años)'); */
                        return false;
                    }
                }
                $('#message_curp').html('<i class="fas fa-check-circle text-success"></i> CURP válido');
                return true;
            }
            
            return false;
        }

        function limitInputLength(selector, maxLength) {
            $(selector).on('input', function() {
                let value = $(this).val();
                $(this).val(value.substring(0, maxLength));
            });
        }

        //VALIDACION DE CURP
        $(document).ready(function() {
            limitInputLength('#curp', 18);
            limitInputLength('#celular', 10);
            limitInputLength('#homoclave', 3);
            limitInputLength('#ape_paterno', 30);
            limitInputLength('#ape_materno', 30);
            limitInputLength('#nombre_psc', 30);
            limitInputLength('#email', 40);

            limitInputLength('#colonia', 50);
            limitInputLength('#cp', 5);

            $('#curp').on('input', function() {
                const curp = $(this).val().toUpperCase();
                $('#rfc').val(curp.substring(0, 10));

                // Calcular edad primero
                let edad = null;
                if (curp.length >= 10) {
                    const anio = parseInt(curp.substring(4, 6), 10);
                    const mes = parseInt(curp.substring(6, 8), 10) - 1;
                    const dia = parseInt(curp.substring(8, 10), 10);
                    const anioCompleto = anio >= 30 ? 1900 + anio : 2000 + anio;
                    const fechaNacimiento = new Date(anioCompleto, mes, dia);
                    const hoy = new Date();
                    
                    //Formatear fecha de nacimiento a d/m/Y
                    const diaFormateado = fechaNacimiento.getDate().toString().padStart(2, '0');
                    const mesFormateado = (fechaNacimiento.getMonth() + 1).toString().padStart(2, '0');
                    const anioFormateado = fechaNacimiento.getFullYear();
                    const fechaNacimientoFormateada = `${diaFormateado}/${mesFormateado}/${anioFormateado}`;
                    
                    //Calcular edad
                    edad = hoy.getFullYear() - fechaNacimiento.getFullYear();
                    const cumpleEsteAño = new Date(hoy.getFullYear(), mes, dia);
                    if (hoy < cumpleEsteAño) edad--;
                    
                    curp.length >= 18 ? $('#edad').val(edad) : $('#edad').val('');
                    $('#fecha_nacimiento').val(fechaNacimientoFormateada);
                }
                
                // Validar CURP con la edad calculada
                const curpValido = validateCURP(curp, edad);
                
                // Deshabilitar botones si la edad está fuera del rango
                if (curp.length === 18 && edad !== null) {
                    if (edad < 18 || edad > 95) {
                        $('#btn_borrador').prop('disabled', true);
                        $('#btn_guardar').prop('disabled', true);
                    } else if (curpValido) {
                        $('#btn_borrador').prop('disabled', false);
                        $('#btn_guardar').prop('disabled', false);
                    }
                }

                //SEXO
                const sexo = curp.charAt(10) === 'H' ? 'HOMBRE' : curp.charAt(10) === 'M' ? 'MUJER' :
                    '';
                $('#sexo').val(curp.charAt(10));
                $('#sexo_completo').val(sexo);

                //ENTIDAD FEDERATIVA
                if (curp.length >= 13) {
                    let entidad_id = curp.slice(11, 13);

                    $.ajax({
                        url: "{{ route('entidadFederativa') }}",
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            entidad_id: entidad_id

                        },
                        success: function(response) {
                            $('#entidad_fed').val(response.data.esmex_nombre || '');
                            $('#id_estado').val(response.data.esmex_id || '');
                        },
                        error: function(xhr) {
                            /*console.log('Ocurrió un error');*/
                        }
                    });

                    $.ajax({
                        url: "{{ route('validateCurp') }}",
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            curp: curp,
                        },
                        success: function(response) {
                            if (response.data == 1) {
                                $('#message_existe').html(
                                    "Esta CURP ya se encuentra registrada.");
                                $('#btn_borrador').prop('disabled', true)
                                $('#btn_guardar').prop('disabled', true)
                                $('#alert_existe_curp').removeClass('d-none');
                            } else {
                                $('#message_existe').html("");
                                $('#alert_existe_curp').addClass('d-none');
                                $('#btn_borrador').prop('disabled', false)
                                $('#btn_guardar').prop('disabled', false)

                            }
                        },
                        error: function(xhr) {
                            /*console.log('Ocurrió un error');*/
                        }
                    });

                } else {
                    $('#entidad_fed').val('');

                }
            });

        });
        // /^([A-Z][AEIOUX][A-Z]{2}\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])[HM](AS|BC|BS|CC|CL|CM|CS|CH|DF|DG|GT|GR|HG|JC|MC|MN|MS|NT|NL|OC|PL|QT|QR|SP|SL|SR|TC|TS|TL|VZ|YN|ZS)[B-DF-HJ-NP-TV-Z]{3}[A-Z\d]\d)$/;

        //LISTADO MUNICIPIOS POR ESTADO
        $('#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();

                    // Agregar opción por defecto
                    $('#lista_municipios').append('<option value="">Seleccione municipio</option>');

                    // Recorrer los datos recibidos y crear los options
                    if (response.data && response.data.length > 0) {
                        $.each(response.data, function(index, municipio) {
                            var optionValue = municipio.mu_clave + '-' + municipio.mu_nombre;
                            var optionText = municipio.mu_nombre;
                            $('#lista_municipios').append('<option value="' + optionValue + '">' + optionText + '</option>');
                        });
                    }
                    
                    // Forzar actualización del select
                    $('#lista_municipios').trigger('change');
                    
                    // Si usa Select2, refrescarlo
                    if (typeof $.fn.select2 !== 'undefined' && $('#lista_municipios').data('select2')) {
                        $('#lista_municipios').select2('destroy').select2();
                    }
                    
                    // Si usa selectpicker de Bootstrap, refrescarlo
                    if (typeof $.fn.selectpicker !== 'undefined') {
                        $('#lista_municipios').selectpicker('refresh');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error al obtener los municipios:', error);
                }
            });
        });

        //MOSTRAR GRADOD DE ESTUDIOS CORRESPONDIENTE
        // $('#grado_estudios').change(function() {
        //     var grado = $(this).val();

        //     switch (grado) {
        //         case "PRIMARIA":
        //         case "SECUNDARIA":
        //         case "BACHILLERATO INCOMPLETO":
        //             $('#div_ctecnica').addClass('d-none');
        //             $('#div_oficio').addClass('d-none');
        //             $('#div_lic_ing').addClass('d-none');
        //             $('#div_lic_ing2').addClass('d-none');
        //             $('#nom_profesion').html('Carrera Tecnica');
        //             $('#lbl_profesion').html('Nombre de la Carrera Tecnica');
        //             $('#nom_profesion').prop('required', true)
        //             $('#div_maestria').addClass('d-none');
        //             $('#div_maestria2').addClass('d-none');
        //             $('#div_doctorado').addClass('d-none');
        //             $('#div_posgrado').addClass('d-none');
        //             $('#div_lic_ing2').addClass('d-none');
        //             break;
        //         case "BACHILLERATO COMPLETO":
        //             $('#div_oficio').removeClass('d-none');
        //             $('#div_ctecnica').addClass('d-none');
        //             $('#div_profesion2').addClass('d-none');
        //             $('#div_lic_ing').addClass('d-none');
        //             $('#div_lic_ing2').addClass('d-none');
        //             $('#nombre_oficio').prop('required', true)
        //             $('#div_maestria').addClass('d-none');
        //             $('#div_maestria2').addClass('d-none');
        //             $('#div_doctorado').addClass('d-none');
        //             $('#div_posgrado').addClass('d-none');
        //             $('#lbl_oficio').text('Nombre del Oficio');
        //             $('#div_licenciatura2').removeClass('d-none');
        //             break;
        //         case "CARRERA TECNICA INCOMPLETA":
        //             $('#div_ctecnica').removeClass('d-none');
        //             $('#div_oficio').addClass('d-none');
        //             $('#div_lic_ing').addClass('d-none');
        //             $('#div_lic_ing2').addClass('d-none');
        //             $('#nom_profesion').html('Carrera Tecnica');
        //             $('#lbl_profesion').html('Nombre de la Carrera Tecnica');
        //             $('#nom_profesion').prop('required', true)
        //             $('#div_maestria').addClass('d-none');
        //             $('#div_maestria2').addClass('d-none');
        //             $('#div_doctorado').addClass('d-none');
        //             $('#div_posgrado').addClass('d-none');
        //             break;
        //         case "CARRERA TECNICA COMPLETA":
        //             $('#div_ctecnica').removeClass('d-none');
        //             $('#div_oficio').addClass('d-none');
        //             $('#div_lic_ing').addClass('d-none');
        //             $('#div_lic_ing2').addClass('d-none');
        //             $('#nom_profesion').html('Carrera Tecnica');
        //             $('#lbl_profesion').html('Nombre de la Carrera Tecnica');
        //             $('#nom_profesion').prop('required', true)
        //             $('#div_maestria').addClass('d-none');
        //             $('#div_maestria2').addClass('d-none');
        //             $('#div_doctorado').addClass('d-none');
        //             $('#div_posgrado').addClass('d-none');
        //             break;
        //         case "LICENCIATURA INCOMPLETA":
        //             $('#div_oficio').removeClass('d-none');
        //             $('#div_ctecnica').removeClass('d-none');
        //             $('#div_profesion2').removeClass('d-none');
        //             $('#lbl_profesion').html('Nombre de la Licenciatura');
        //             $('#lbl_profesion2').html('Otra Licenciatura (Opcional)');
        //             $('#nom_profesion').prop('required', true)
        //             $('#div_lic_ing').addClass('d-none');
        //             $('#div_lic_ing2').addClass('d-none');
        //             $('#div_maestria').addClass('d-none');
        //             $('#div_maestria2').addClass('d-none');
        //             $('#div_doctorado').addClass('d-none');
        //             $('#div_posgrado').addClass('d-none');
        //             $('#lbl_oficio').text('Oficio (Opcional)');
        //             break;
        //         case "LICENCIATURA COMPLETA":
        //             $('#div_oficio').removeClass('d-none');
        //             $('#div_ctecnica').removeClass('d-none');
        //             $('#div_profesion2').removeClass('d-none');
        //             $('#lbl_profesion').html('Nombre de la Licenciatura');
        //             $('#lbl_profesion2').html('Otra Licenciatura (Opcional)');
        //             $('#nom_profesion').prop('required', true)
        //             $('#div_lic_ing').addClass('d-none');
        //             $('#div_lic_ing2').addClass('d-none');
        //             $('#div_maestria').addClass('d-none');
        //             $('#div_maestria2').addClass('d-none');
        //             $('#div_doctorado').addClass('d-none');
        //             $('#div_posgrado').addClass('d-none');
        //             $('#lbl_oficio').text('Oficio (Opcional)');
        //             break;
        //         case "POSGRADO":
        //             $('#div_lic_ing').removeClass('d-none');  // Licenciatura/Ingeniería 

        //             $('#lbl_profesion').html('Nombre de la Carrera');

        //             $('#div_maestria').removeClass('d-none');
        //             $('#div_doctorado').removeClass('d-none');

        //             $('#div_lic_ing2').removeClass('d-none');
        //             $('#div_ctecnica').removeClass('d-none');
        //             $('#div_licenciatura2').removeClass('d-none');
        //             $('#div_ingenieria').addClass('d-none');
        //             $('#div_ingenieria2').addClass('d-none');
        //             $('#nom_profesion2').removeClass('d-none');
        //             $('#lbl_profesion2').html('Nombre de la Carrera (Opcional)');
        //             $('#div_maestria2').removeClass('d-none');
        //             $('#nom_profesion').prop('required', true);


        //             $('#posgrado').addClass('d-none');
        //             $('#div_posgrado').addClass('d-none');

        //             $('#div_oficio').addClass('d-none');
        //             $('#lbl_oficio').text('Oficio (Opcional)');

        //             break;
        //         default:

        //     }
        // });

        $('#grado_estudios').change(function() {
            var gradoes_id = $(this).val();
            var dataCustom = $(this).find(':selected').data('id');
            //
            for (var i = 7; i <= 16; i++) {
                $.each($('#d' + i), function() {
                    $(this).find('input').val('');
                });
            }
            //
            $('#selectData').val(dataCustom);
            //
            showhide(dataCustom);
        });

        function showhide(id) { //
            if (id < 9) {
                for (var i = 7; i <= 16; i++) {
                    $('#d' + i).hide();
                }
                $('#selLicIng').hide();
                $('#inputLicIng').hide();
                $('#d14').hide();
                $('#d15').hide();
            }
            //
            if (id == 5) {
                $('#d7').show();
            }
            if (id == 6) {
                $('#d8').show();
            }
            //
            if (id == 9) {
                $('#d10').show();
                $('#selLicIng').hide();
                $('#inputLicIng').hide();
                $('#d7').hide();
                $('#d8').hide();
                $('#d9').hide();
                $('#d14').hide();
                $('#d15').hide();
            }
            //
            if (id == 10) {
                $('#selLicIng').show();
                $('#inputLicIng').show();

                $('#d7').hide();
                $('#d8').hide();
                $('#d9').hide();
                $('#d10').hide();
                $('#d14').hide();
                $('#d15').hide();
            }
            //

            if (id == 11) {
                $('#d7').hide();
                $('#d8').hide();
                $('#d9').hide();
                $('#d10').hide();
                $('#selLicIng').show();
                $('#inputLicIng').show();
                $('#d14').show();
                $('#d15').show();
            }

        }

        //PREVISUALIZAR COMPROBANTE DE ESTUDIOS
        let objectURL = null;
        $('#comp_estudios').on('change', function() {
            const file = this.files[0];
            const preview = $('#preview_comp_estudios');

            // Liberar URL anterior si existe
            if (objectURL) {
                URL.revokeObjectURL(objectURL);
                objectURL = null;
            }

            preview.empty();
            $('#div_comp_estudios').addClass('d-none');
            if (!file) return;
            const fileType = file.type;
            const maxSize = 5 * 1024 * 1024; // 5 MB
            if (fileType !== 'application/pdf') {
                $("#message_comp_estudios").html('Solo se permiten documentos PDF');
                $('#comp_estudios').val('');
                return;
            }
            if (file.size > maxSize) {
                $("#message_comp_estudios").html('El documento excede los 5MB permitidos');
                $('#comp_estudios').val('');
                return;
            }
            // Si pasa las validaciones, mostrar vista previa
            $("#message_comp_estudios").html('');
            $('#div_comp_estudios').removeClass('d-none');
            objectURL = URL.createObjectURL(file);
            preview.html(`<iframe src="${objectURL}" width="100%" height="600px" class="border"></iframe>`);
        });

        //PREVISUALIZAR IDENTIFIACION
        $('#identificacion').on('change', function() {
            const file = this.files[0];
            const preview = $('#preview');

            // Liberar URL anterior si existe
            if (objectURL) {
                URL.revokeObjectURL(objectURL);
                objectURL = null;
            }

            preview.empty();
            $('#div_identificacion').addClass('d-none');
            if (!file) return;
            const fileType = file.type;
            const maxSize = 5 * 1024 * 1024; // 5 MB
            if (fileType !== 'application/pdf') {
                $("#message_ident").html('Solo se permiten documentos PDF');
                $('#identificacion').val('');
                return;
            }
            if (file.size > maxSize) {
                $("#message_ident").html('El documento excede los 5MB permitidos');
                $('#identificacion').val('');
                return;
            }
            // Si pasa las validaciones, mostrar vista previa
            $("#message_ident").html('');
            $('#div_identificacion').removeClass('d-none');
            objectURL = URL.createObjectURL(file);
            preview.html(`<iframe src="${objectURL}" width="100%" height="600px" class="border"></iframe>`);
        });

        //PREVISUALIZAR CURP
        $('#filecurp').on('change', function() {
            const file = this.files[0];
            const preview = $('#preview_curp');

            // Liberar URL anterior si existe
            if (objectURL) {
                URL.revokeObjectURL(objectURL);
                objectURL = null;
            }

            preview.empty();
            $('#div_filecurp').addClass('d-none');
            if (!file) return;
            const fileType = file.type;
            const maxSize = 5 * 1024 * 1024; // 5 MB
            if (fileType !== 'application/pdf') {
                $("#message_filecurp").html('Solo se permiten documentos PDF');
                $('#filecurp').val('');
                return;
            }
            if (file.size > maxSize) {
                $("#message_filecurp").html('El documento excede los 5MB permitidos');
                $('#filecurp').val('');
                return;
            }
            // Si pasa las validaciones, mostrar vista previa
            $("#message_filecurp").html('');
            $('#div_filecurp').removeClass('d-none');
            objectURL = URL.createObjectURL(file);
            preview.html(`<iframe src="${objectURL}" width="100%" height="600px" class="border"></iframe>`);
        });

        //PREVISUALIZAR DOMICILIO
        $('#filedomicilio').on('change', function() {
            const file = this.files[0];
            const preview = $('#preview_domicilio');

            // Liberar URL anterior si existe
            if (objectURL) {
                URL.revokeObjectURL(objectURL);
                objectURL = null;
            }

            preview.empty();
            $('#div_filedomicilio').addClass('d-none');
            if (!file) return;
            const fileType = file.type;
            const maxSize = 5 * 1024 * 1024; // 5 MB
            if (fileType !== 'application/pdf') {
                $("#message_filedomicilio").html('Solo se permiten documentos PDF');
                $('#filedomicilio').val('');
                return;
            }
            if (file.size > maxSize) {
                $("#message_filedomicilio").html('El documento excede los 5MB permitidos');
                $('#filedomicilio').val('');
                return;
            }
            // Si pasa las validaciones, mostrar vista previa
            $("#message_filedomicilio").html('');
            $('#div_filedomicilio').removeClass('d-none');
            objectURL = URL.createObjectURL(file);
            preview.html(`<iframe src="${objectURL}" width="100%" height="600px" class="border"></iframe>`);
        });

        //PREVISUALIZAR CURRICULUM
        $('#curriculum').on('change', function() {
            const file = this.files[0];
            const preview = $('#preview_curriculum');

            // Liberar URL anterior si existe
            if (objectURL) {
                URL.revokeObjectURL(objectURL);
                objectURL = null;
            }

            preview.empty();
            $('#div_curriculum').addClass('d-none');
            if (!file) return;
            const fileType = file.type;
            const maxSize = 5 * 1024 * 1024; // 5 MB
            if (fileType !== 'application/pdf') {
                $("#message_curriculum").html('Solo se permiten documentos PDF');
                $('#curriculum').val('');
                return;
            }
            if (file.size > maxSize) {
                $("#message_curriculum").html('El documento excede los 5MB permitidos');
                $('#curriculum').val('');
                return;
            }
            // Si pasa las validaciones, mostrar vista previa
            $("#message_curriculum").html('');
            $('#div_curriculum').removeClass('d-none');
            objectURL = URL.createObjectURL(file);
            preview.html(`<iframe src="${objectURL}" width="100%" height="600px" class="border"></iframe>`);
        });

        //PREVISUALIZAR ACTA
        $('#acta').on('change', function() {
            const file = this.files[0];
            const preview = $('#preview_acta');

            // Liberar URL anterior si existe
            if (objectURL) {
                URL.revokeObjectURL(objectURL);
                objectURL = null;
            }

            preview.empty();
            $('#div_acta').addClass('d-none');
            if (!file) return;
            const fileType = file.type;
            const maxSize = 5 * 1024 * 1024; // 5 MB
            if (fileType !== 'application/pdf') {
                $("#message_acta").html('Solo se permiten documentos PDF');
                $('#acta').val('');
                return;
            }
            if (file.size > maxSize) {
                $("#message_acta").html('El documento excede los 5MB permitidos');
                $('#acta').val('');
                return;
            }
            // Si pasa las validaciones, mostrar vista previa
            $("#message_acta").html('');
            $('#div_acta').removeClass('d-none');
            objectURL = URL.createObjectURL(file);
            preview.html(`<iframe src="${objectURL}" width="100%" height="600px" class="border"></iframe>`);
        });

        //PREVISUALIZAR CONSTANCIA
        $('#constancia').on('change', function() {
            const file = this.files[0];
            const preview = $('#preview_constancia');

            // Liberar URL anterior si existe
            if (objectURL) {
                URL.revokeObjectURL(objectURL);
                objectURL = null;
            }

            preview.empty();
            $('#div_constancia').addClass('d-none');
            if (!file) return;
            const fileType = file.type;
            const maxSize = 5 * 1024 * 1024; // 5 MB
            if (fileType !== 'application/pdf') {
                $("#message_constancia").html('Solo se permiten documentos PDF');
                $('#constancia').val('');
                return;
            }
            if (file.size > maxSize) {
                $("#message_constancia").html('El documento excede los 5MB permitidos');
                $('#constancia').val('');
                return;
            }
            // Si pasa las validaciones, mostrar vista previa
            $("#message_constancia").html('');
            $('#div_constancia').removeClass('d-none');
            objectURL = URL.createObjectURL(file);
            preview.html(`<iframe src="${objectURL}" width="100%" height="600px" class="border"></iframe>`);
        });

        function validateForm(event) {
            // Prevenir envío por defecto
            event.preventDefault();
            
            // Establecer el valor del campo oculto para indicar que es "guardar" (crear instructor)
            $('#accion_formulario').val('guardar');
            
            let isValid = true;

            // Guardar el mensaje de CURP antes de limpiar
            const curpMessage = $('#message_curp').html();
            
            // Reinicia mensajes anteriores
            $('.text-danger').text('');
            
            // Restaurar el mensaje de CURP
            $('#message_curp').html(curpMessage);
            
            // Validar formato CURP antes de continuar
            const curpValue = $('#curp').val().toUpperCase();
            if (curpValue.length === 0) {
                $('#message_curp').html('Ingrese un CURP');
                setTimeout(() => {
                    $('#curp').focus();
                    $('#curp')[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
                }, 100);
                return false;
            } else if (curpValue.length < 18) {
                $('#message_curp').html('El CURP debe tener 18 caracteres');
                setTimeout(() => {
                    $('#curp').focus();
                    $('#curp')[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
                }, 100);
                return false;
            }
            
            // Calcular edad del CURP
            const anio = parseInt(curpValue.substring(4, 6), 10);
            const mes = parseInt(curpValue.substring(6, 8), 10) - 1;
            const dia = parseInt(curpValue.substring(8, 10), 10);
            const anioCompleto = anio >= 30 ? 1900 + anio : 2000 + anio;
            const fechaNacimiento = new Date(anioCompleto, mes, dia);
            const hoy = new Date();
            let edad = hoy.getFullYear() - fechaNacimiento.getFullYear();
            const cumpleEsteAño = new Date(hoy.getFullYear(), mes, dia);
            if (hoy < cumpleEsteAño) edad--;
            
            // Validar CURP con la edad calculada
            if (!validateCURP(curpValue, edad)) {
                setTimeout(() => {
                    $('#curp').focus();
                    $('#curp')[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
                }, 100);
                return false;
            }
            
            // Validar edad específicamente
            if (edad < 18) {
                $('#message_curp').html('<i class="fas fa-times-circle text-danger"></i> No se puede guardar: El instructor debe ser mayor de 18 años');
                setTimeout(() => {
                    $('#curp').focus();
                    $('#curp')[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
                }, 100);
                return false;
            } else if (edad > 95) {
                $('#message_curp').html('<i class="fas fa-times-circle text-danger"></i> No se puede guardar: Edad fuera del rango permitido (máximo 95 años)');
                setTimeout(() => {
                    $('#curp').focus();
                    $('#curp')[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
                }, 100);
                return false;
            }

            const fields = [
                { id: '#curp', msg: 'Ingrese un CURP', target: '#message_curp' },
                { id: '#ape_paterno', msg: 'Ingrese un apellido', target: '#message_apePaterno' },
                { id: '#ape_materno', msg: 'Ingrese un apellido', target: '#message_apeMaterno'},
                { id: '#nombre_psc', msg: 'Ingrese un nombre', target: '#message_nombre' },
                { id: '#homoclave', msg: 'Requerido', target: '#message_homoclave' },                
                { id: '#email', msg: 'Ingrese un email', target: '#message_email' },
                { id: '#celular', msg: 'Ingrese un celular', target: '#message_celular' },
                { id: '#datepicker', msg: 'Ingrese una fecha', target: '#message_fecha_alta' },
                { id: '#calle', msg: 'Ingrese una calle', target: '#message_calle' },
                { id: '#num_ext', msg: 'Requerido', target: '#message_num_ext' },
                { id: '#num_int', msg: 'Requerido', target: '#message_num_int' },
                { id: '#colonia', msg: 'Ingrese una colonia', target: '#message_colonia' },
                { id: '#cp', msg: 'Requerido', target: '#message_cp' },
                { id: '#estados', msg: 'Seleccione un estado', target: '#message_estado' },
                { id: '#lista_municipios', msg: 'Seleccione un municipio', target: '#message_municipio' },
                { id: '#folio_ide', msg: 'Ingrese un folio', target: '#message_folio_ide' },
                { id: '#regimen', msg: 'Seleccione un regimen', target: '#message_regimen' },
                { id: '#comp_estudios', msg: 'Suba el comprobante de estudios en PDF', target: '#message_comp_estudios' },
                { id: '#identificacion', msg: 'Suba una identificación en PDF', target: '#message_ident' },
                { id: '#curriculum', msg: 'Suba un curriculum en PDF', target: '#message_curriculum' },
                { id: '#acta', msg: 'Suba un estado de cuenta en PDF', target: '#message_acta' },
                { id: '#constancia', msg: 'Suba una constancia de situacion fiscal en PDF', target: '#message_constancia' },
                { id: '#filecurp', msg: 'Suba el archivo CURP en PDF', target: '#message_filecurp' },
                { id: '#filedomicilio', msg: 'Suba el comprobante de domicilio en PDF', target: '#message_filedomicilio' },
                { id: '#especialidades', msg: 'Seleccione al menos una especialidad', target: '#message_especialidades' },
                { id: '#nombre_banco', msg: 'Escriba el nombre del banco', target: '#message_nombre_banco'},
                { id: '#cuenta_banco', msg: 'Escriba el número de cuenta', target: '#message_cuenta_banco'},
                { id: '#clabe_banco', msg: 'Escriba la CLABE', target: '#message_clabe_banco'}
            ];

            var grado = $('#grado_estudios').val();
            let nom_profesion = $('#nom_profesion').val();
            let maestria = $('#maestria').val();
            let doctorado = $('#doctorado').val();


            if (nom_profesion == "") {
                $('#message_nom_profesion').html('Campo Requerido');
            }

            switch (grado) {
                case "OFICIO":
                    let oficio = $('#nombre_oficio').val();
                    if (oficio == "") {
                        $('#message_oficio').html('Ingrese un Oficio');
                    }
                    break;
                case "CARRERA TECNICA":
                case "TECNICO SUPERIOR UNIVERSITARIO":
                case "LICENCIATURA":
                case "INGENIERIA":
                case "MAESTRIA":

                    if (grado != 'MAESTRIA') {
                        $('#lic_ing').val('');
                        $('#lic_ing2').val('');
                    }
                    break;
                case "POSGRADO":
                    let posgrado = $('#posgrado').val();

                    if (posgrado == "") {
                        $('#message_posgrado').html('Escriba el Nombre del Posgrado');
                    }

                    if (maestria == "") {
                        $('#message_maestria').html('Escriba el Nombre de la Maestria');
                    }
                    // 260217 GCC: Al elegir posgrado, el campo doctorado ya no es obligatorio, pero si se llena, debe tener un valor
                    // if (doctorado == "") {
                    //     $('#message_doctorado').html('Escriba el Nombre del Doctorado');
                    // }
                    break;
            }

            // Validar todos los campos del formulario
            let firstInvalidField = null;

            /*
            // solo valida un archivo nuevo (subir primera vez)
            if (isFile) {
                const hasNewFile = $input[0].files && $input[0].files.length > 0;
                
                if (!hasNewFile) {
                    $(field.target).text(field.msg);
                    isValid = false;
                    if (!firstInvalidField) {
                        firstInvalidField = $input;
                    }
                }
            }
            */

            fields.forEach(field => {
                const $input = $(field.id);
                const isFile = $input.attr('type') === 'file';

                // Para archivos, verificar si hay un archivo cargado O si ya existe en la BD
                if (isFile) {
                    const hasNewFile = $input[0].files && $input[0].files.length > 0;
                    const hasExistingFile = $input.data('existing-file'); // Verificar atributo data
                    
                    if (!hasNewFile && !hasExistingFile) {
                        $(field.target).text(field.msg);
                        isValid = false;
                        if (!firstInvalidField) {
                            firstInvalidField = $input;
                        }
                    }
                } else {
                    // Para campos normales
                    if (!$input.val()) {
                        $(field.target).text(field.msg);
                        isValid = false;
                        if (!firstInvalidField) {
                            firstInvalidField = $input;
                        }
                    }
                }
            });

            // Validación de especialidades
            const especialidades = ($('#especialidades').val() || [])
                .map(s => s ? s.toString().trim() : '')
                .filter(s => s !== '' && s !== '0');
            if (!especialidades || especialidades.length === 0) {
                $('#message_especialidades').text('Seleccione al menos una especialidad');
                isValid = false;
                if (!firstInvalidField) {
                    firstInvalidField = $('#especialidades');
                }
            }

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

            // Si todo es válido, enviar el formulario
            const formPrincipal = document.querySelector('form[action="{{ route('instructorNuevo') }}"]');
            if (formPrincipal) {
                formPrincipal.dataset.submitButtonId = 'btn_guardar';
                if (typeof formPrincipal.requestSubmit === 'function') {
                    formPrincipal.requestSubmit();
                } else {
                    formPrincipal.submit();
                }
            }
            return true;
        }

        function validateBorrador(event) {
            // Prevenir envío por defecto
            event.preventDefault();
            
            // Establecer el valor del campo oculto para indicar que es "borrador"
            $('#accion_formulario').val('borrador');
            
            let isValid = true;
            let firstInvalidField = null;

            // Guardar el mensaje de CURP antes de limpiar
            const curpMessage = $('#message_curp').html();
            
            $('.text-danger').text(''); // Limpia mensajes anteriores
            
            // Restaurar el mensaje de CURP
            $('#message_curp').html(curpMessage);

            // Validar formato CURP antes de continuar (IGUAL QUE EN validateForm)
            const curpValue = $('#curp').val().toUpperCase();
            if (curpValue.length === 0) {
                $('#message_curp').html('Ingrese un CURP');
                setTimeout(() => {
                    $('#curp').focus();
                    $('#curp')[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
                }, 100);
                return false;
            } else if (curpValue.length < 18) {
                $('#message_curp').html('El CURP debe tener 18 caracteres');
                setTimeout(() => {
                    $('#curp').focus();
                    $('#curp')[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
                }, 100);
                return false;
            }
            
            // Calcular edad del CURP
            const anio = parseInt(curpValue.substring(4, 6), 10);
            const mes = parseInt(curpValue.substring(6, 8), 10) - 1;
            const dia = parseInt(curpValue.substring(8, 10), 10);
            const anioCompleto = anio >= 30 ? 1900 + anio : 2000 + anio;
            const fechaNacimiento = new Date(anioCompleto, mes, dia);
            const hoy = new Date();
            let edad = hoy.getFullYear() - fechaNacimiento.getFullYear();
            const cumpleEsteAño = new Date(hoy.getFullYear(), mes, dia);
            if (hoy < cumpleEsteAño) edad--;
            
            // Validar CURP con la edad calculada
            if (!validateCURP(curpValue, edad)) {
                setTimeout(() => {
                    $('#curp').focus();
                    $('#curp')[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
                }, 100);
                return false;
            }
            
            // Validar edad específicamente
            if (edad < 18) {
                $('#message_curp').html('<i class="fas fa-times-circle text-danger"></i> No se puede guardar: El instructor debe ser mayor de 18 años');
                setTimeout(() => {
                    $('#curp').focus();
                    $('#curp')[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
                }, 100);
                return false;
            } else if (edad > 95) {
                $('#message_curp').html('<i class="fas fa-times-circle text-danger"></i> No se puede guardar: Edad fuera del rango permitido (máximo 95 años)');
                setTimeout(() => {
                    $('#curp').focus();
                    $('#curp')[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
                }, 100);
                return false;
            }

            const fields = [
                { id: '#curp', msg: 'Ingrese un CURP', target: '#message_curp' },
                { id: '#ape_paterno', msg: 'Ingrese un apellido', target: '#message_apePaterno' },
                { id: '#ape_materno', msg: 'Ingrese un apellido', target: '#message_apeMaterno' },
                { id: '#nombre_psc', msg: 'Ingrese un nombre', target: '#message_nombre' },
                /*
                { id: '#nombre_banco', msg: 'Escriba el nombre del banco', target: '#message_nombre_banco' },
                { id: '#cuenta_banco', msg: 'Escriba el número de cuenta', target: '#message_cuenta_banco' },
                { id: '#clabe_banco', msg: 'Escriba la CLABE', target: '#message_clabe_banco' },
                { id: '#email', msg: 'Ingrese un correo electrónico', target: '#message_email' },
                { id: '#celular', msg: 'Ingrese un número de celular', target: '#message_celular' },
                { id: '#calle', msg: 'Ingrese una calle', target: '#message_calle' },
                { id: '#num_ext', msg: 'Ingrese un número exterior', target: '#message_num_ext' },
                { id: '#colonia', msg: 'Ingrese una colonia', target: '#message_colonia' },
                { id: '#cp', msg: 'Ingrese un código postal', target: '#message_cp' }
                 */
            ];

            fields.forEach(field => {
                const $input = $(field.id);
                if (!$input.val()) {
                    $(field.target).text(field.msg); // Mostrar mensaje de error
                    isValid = false;
                    
                    if (!firstInvalidField) {
                        firstInvalidField = $input;
                    }
                }
            });

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

            $('#borrador').modal('show');
            return true;
        }

        // Manejar el clic del botón "Guardar" dentro del modal
        $(document).ready(function() {
            $('#borrador .btn-primary').on('click', function() {
                $('#accion_formulario').val('borrador');
                const formPrincipal = document.querySelector('form[action="{{ route('instructorNuevo') }}"]');
                if (formPrincipal) {
                    formPrincipal.dataset.submitButtonId = 'btn_borrador';
                    if (typeof formPrincipal.requestSubmit === 'function') {
                        formPrincipal.requestSubmit();
                    } else {
                        formPrincipal.submit();
                    }
                }
            });

            // Prevenir el envío doble del formulario
            $('form').on('submit', function(e) {
                const accion = $('#accion_formulario').val();
                
                // Si no se ha establecido acción, detener
                if (!accion) {
                    e.preventDefault();
                    return false;
                }
            });

            const formPrincipal = document.querySelector('form[action="{{ route('instructorNuevo') }}"]');
            if (formPrincipal) {
                let envioEnCurso = false;
                let ultimoBotonClickeado = null;

                formPrincipal.querySelectorAll('button[type="submit"], input[type="submit"]').forEach(function(btn) {
                    btn.addEventListener('click', function() {
                        ultimoBotonClickeado = btn;
                    });
                });

                const btnBorrador = document.getElementById('btn_borrador');
                if (btnBorrador) {
                    btnBorrador.addEventListener('click', function() {
                        ultimoBotonClickeado = btnBorrador;
                        formPrincipal.dataset.submitButtonId = 'btn_borrador';
                    });
                }

                formPrincipal.addEventListener('submit', function(event) {
                    if (event.defaultPrevented) {
                        return;
                    }

                    if (envioEnCurso) {
                        event.preventDefault();
                        return;
                    }

                    envioEnCurso = true;

                    let botonActivo = event.submitter || ultimoBotonClickeado;
                    if (!botonActivo && formPrincipal.dataset.submitButtonId) {
                        botonActivo = document.getElementById(formPrincipal.dataset.submitButtonId);
                    }

                    if (botonActivo) {
                        botonActivo.innerHTML = 'Guardando...';
                        botonActivo.disabled = true;
                    }

                    formPrincipal.querySelectorAll('button[type="submit"], input[type="submit"]').forEach(function(btn) {
                        btn.disabled = true;
                    });

                    if (btnBorrador) {
                        btnBorrador.disabled = true;
                    }
                });
            }

            // Mapa de diacríticos a caracteres sin acento
            const diacriticsMap = {
                'á': 'a', 'é': 'e', 'í': 'i', 'ó': 'o', 'ú': 'u', 'ý': 'y',
                'Á': 'A', 'É': 'E', 'Í': 'I', 'Ó': 'O', 'Ú': 'U', 'Ý': 'Y',
                'à': 'a', 'è': 'e', 'ì': 'i', 'ò': 'o', 'ù': 'u',
                'À': 'A', 'È': 'E', 'Ì': 'I', 'Ò': 'O', 'Ù': 'U',
                'â': 'a', 'ê': 'i', 'î': 'i', 'ô': 'o', 'û': 'u',
                'Â': 'A', 'Ê': 'E', 'Î': 'I', 'Ô': 'O', 'Û': 'U',
                'ã': 'a', 'õ': 'o', 'Ã': 'A', 'Õ': 'O',
                'ä': 'a', 'ë': 'e', 'ï': 'i', 'ö': 'o', 'ü': 'u',
                'Ä': 'A', 'Ë': 'E', 'Ï': 'I', 'Ö': 'O', 'Ü': 'U',
                'ç': 'c', 'Ç': 'C'
            };

            // Función remover diacríticos y permitir solo a-z, ñ y espacios
            function normalizeText(text) {
                return text.split('').map(function(char) {
                    if (diacriticsMap[char]) {
                        return diacriticsMap[char];
                    }
                    if (/[a-zA-ZñÑ\s]/.test(char)) {
                        return char;
                    }
                    return '';
                }).join('');
            }

            // Función para calcular la nueva posición del cursor después de normalizar
            function calculateNewCursorPosition(originalText, oldCursorPos) {
                let validCharsBefore = 0;
                for (let i = 0; i < oldCursorPos && i < originalText.length; i++) {
                    const char = originalText[i];
                    if (diacriticsMap[char] || /[a-zA-ZñÑ\s]/.test(char)) {
                        validCharsBefore++;
                    }
                }
                return validCharsBefore;
            }

            // Aplica y quita acentos a los siguientes campos:
            const textFields = [
                '#carreraTecnicaTrunca',
                '#carreraTecnica',
                '#licenciaturaTrunca',
                '#licenciatura',
                '#licenciaturaOtra',
                '#inputLIOtra',
                '#inputLI',
                '#ingenieriaTrunca',
                '#ingenieria',
                '#ingenieriaOtra',
                '#ape_paterno',
                '#ape_materno',
                '#nombre_psc',
                '#maestria',
                '#maestriaOtra',
                '#doctorado',
            ];

            textFields.forEach(function(fieldId) {
                $(fieldId).on('input', function() {
                    const $input = $(this);
                    const originalValue = $input.val();
                    const normalizedValue = normalizeText(originalValue);
                    
                    if (originalValue !== normalizedValue) {
                        const cursorPosition = this.selectionStart;
                        const newCursorPosition = calculateNewCursorPosition(originalValue, cursorPosition);
                        $input.val(normalizedValue);
                        setTimeout(() => {
                            this.setSelectionRange(newCursorPosition, newCursorPosition);
                        }, 0);
                    }
                });

                $(fieldId).on('paste', function(e) {
                    e.preventDefault();
                    const pastedText = (e.originalEvent || e).clipboardData.getData('text/plain').toUpperCase();
                    const normalizedText = normalizeText(pastedText);
                    const $input = $(this);
                    const start = this.selectionStart;
                    const end = this.selectionEnd;
                    const currentValue = $input.val();
                    const newValue = currentValue.substring(0, start) + normalizedText + currentValue.substring(end);
                    $input.val(normalizeText(newValue));
                    const newCursorPos = start + normalizedText.length;
                    this.setSelectionRange(newCursorPos, newCursorPos);
                });
            });
        });

    </script>
@endpush