@extends('layout.template')
@section('title', 'ICAT')

@section('content')
    <div class="content-body">
        <!-- row -->
        <div class="container-fluid">
            
            <div class="row page-titles mx-0">
                <div class="col-sm-6 p-md-0">
                    <div class="welcome-text">
                        <h5>
                            Datos de Capacitando <i class=" ri-information-line" aria-hidden="true" data-toggle="tooltip" data-bs-placement="right" title="Todos los campos marcados con * son requeridos"></i>
                            Número de control : {{ $datos_cap->numero_control }}
                        </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('capacitandos') }}" class="btn btn-rounded btn-dark back-fixed" aria-label="Regresar">
                            <span class="btn-icon-start text-dark"><i class=" ri-arrow-left-line"></i></span>
                            Regresar
                        </a>
                    </ol>
                </div>
            </div>
            
            <div class="row">
                <div class="col-xl-12 col-xxl-12 col-sm-12">
                    <div class="card">
                        
                        <div class="card-body">
                            @if (session('success'))
                                <div class="alert alert-primary alert-dismissible fade show" id="alert-container">
                                    <i class="ri-checkbox-circle-line alert-icon" aria-hidden="true"></i>
                                    <strong id="alert-confirmacion"> {{ session('success') }}</strong>
                                </div>
                            @endif
                            @if (session('error'))
                                <div class="alert alert-danger alert-dismissible fade show" id="alert-container-error">
                                    <i class="ri-close-circle-line alert-icon" aria-hidden="true"></i>
                                    <strong id="alert-confirmacion-error"> {{ session('error') }}</strong>
                                </div>
                            @endif

                            <form id="formAgregar" action="{{ route('actualizaCapacitando') }}" method="POST" >
                                @csrf 
                                @method('POST')
                                <fieldset>
                                    <div class="alert alert-primary alert-dismissible fade show">
                                        <i class=" ri-edit-2-line"></i> <strong>Datos Personales</strong> 
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <div class="form-group">
                                                <label class="form-label" for="Enter_First_Name">Apellido Paterno *</label>
                                                <input type="hidden" name="id_capacitando" value="{{ $datos_cap->id }}">
                                                <input type="text" class="form-control" id="apellido_paterno" name="apellido_paterno" value="{{ $datos_cap->apellido_paterno }}" class='form-control'>
                                                @if ($errors->has('apellido_paterno'))
                                                    <div class="text-danger">
                                                        {{ $errors->first('apellido_paterno') }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group">
                                                <label class="form-label" for="Enter_Last_Name">Apellido Materno *</label>
                                                <input type="text" class="form-control" id="apellido_materno" name="apellido_materno"  value="{{ $datos_cap->apellido_materno }}" class='form-control'>
                                                @if ($errors->has('apellido_materno'))
                                                    <div class="text-danger">
                                                        {{ $errors->first('apellido_materno') }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group">
                                                <label class="form-label" for="Email">Nombre(s) *</label>
                                                <input type="text" class="form-control" id="nombre" name="nombre"  value="{{ $datos_cap->nombre }}" class='form-control'>
                                                @if ($errors->has('nombre'))
                                                    <div class="text-danger">
                                                        {{ $errors->first('nombre') }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group">
                                                <label class="form-label" for="emil">Email *</label>
                                                <input type="email" class="form-control" id="email" name="email" value="{{ $datos_cap->email }}" class='form-control'>
                                                @if ($errors->has('email'))
                                                    <div class="text-danger">
                                                        {{ $errors->first('email') }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-3">
                                            <div class="form-group">
                                                <label class="form-label">Estado Civil *</label>
                                                <select class="form-control" name="estado_civil" >
                                                        <option selected value="{{ $datos_cap->estado_civil }}">{{ $datos_cap->estado_civil}}</option>
                                                        <option value="SOLTERO(A)">SOLTERO(A)</option>
                                                        <option value="CASADO(A)">CASADO(A)</option>
                                                        <option value="VIUDO(A)">VIUDO(A)</option>
                                                        <option value="UNIÓN LIBRE">UNIÓN LIBRE</option>
                                                </select>
                                                @if ($errors->has('estado_civil'))
                                                    <div class="text-danger">
                                                        {{ $errors->first('estado_civil') }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="form-group">
                                                <label class="form-label">Población Vulnerable *</label>
                                                <select class="form-control" name="poblacion_vulnerable" >
                                                        <option selected value="{{  $datos_cap->poblacion_vulnerable }}"> {{ $datos_cap->poblacion_vulnerable }}</option>
                                                        <option value="{{ old('poblacion_vulnerable', 'NINGUNA') }}">NINGUNA</option>
                                                        <option value="{{ old('poblacion_vulnerable', 'MADRE TRABAJADORA') }}">MADRE TRABAJADORA</option>
                                                        <option value="{{ old('poblacion_vulnerable', 'MADRE SOLTERA') }}">MADRE SOLTERA</option>
                                                        <option value="{{ old('poblacion_vulnerable', 'PADRE SOLTERO') }}">PADRE SOLTERO</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="form-group">
                                                <label class="form-label">Interno(a) Cereso *</label>
                                                <select class="form-control" name="recluso" >
                                                    <option selected value="{{  $datos_cap->recluso }}"> {{ $datos_cap->recluso }} </option>
                                                    <option value="NO" {{ old('recluso', 'NO') }}>NO</option>
                                                    <option value="INTERNO(A) CERESO" {{ old('recluso', 'INTERNO(A) CERESO') }}>SI</option>
                                                </select>
                                                @if ($errors->has('recluso'))
                                                    <div class="text-danger">
                                                        {{ $errors->first('recluso') }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="form-group">
                                                <label class="form-label">Discapacidad *</label>
                                                <select class="form-control" name="discapacidad" >
                                                        <option selected value="{{  $datos_cap->discapacidad }}">{{  $datos_cap->discapacidad }}</option>
                                                        <option value="{{ old('discapacidad', 'NINGUNA') }}">NINGUNA</option>
                                                        <option value="{{ old('discapacidad', 'VISUAL') }}">VISUAL</option>
                                                        <option value="{{ old('discapacidad', 'AUDITIVA') }}">AUDITIVA</option>
                                                        <option value="{{ old('discapacidad', 'LENGUAJE') }}">LENGUAJE</option>
                                                        <option value="{{ old('discapacidad', 'MOTRIZ') }}">MOTRIZ</option>
                                                        <option value="{{ old('discapacidad', 'COGNITIVA (MENTAL)') }}">COGNITIVA (MENTAL)</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div id="div_grado_estudios" class="form-group">
                                                <label class="form-label">Nivel de Estudios *</label>
                                                <select class="form-control" id="grado_estudios"  name="grado_estudios" >
                                                    <option selected value="{{  $datos_cap->grado_estudios }}"> {{ $datos_cap->grado_estudios}} </option>
                                                    <option value="PRIMARIA TRUNCA" {{ $datos_cap->grado_estudios == 'PRIMARIA TRUNCA' || $datos_cap->grado_estudios == 'PRIMARIA INCOMPLETA' ? 'selected' : '' }}>PRIMARIA INCOMPLETA</option>
                                                    <option value="PRIMARIA" {{ $datos_cap->grado_estudios == 'PRIMARIA' || $datos_cap->grado_estudios == 'PRIMARIA COMPLETA' ? 'selected' : '' }}>PRIMARIA COMPLETA</option>
                                                    <option value="SECUNDARIA TRUNCA" {{ $datos_cap->grado_estudios == 'SECUNDARIA TRUNCA' || $datos_cap->grado_estudios == 'SECUNDARIA INCOMPLETA' ? 'selected' : '' }}>SECUNDARIA INCOMPLETA</option>
                                                    <option value="SECUNDARIA" {{ $datos_cap->grado_estudios == 'SECUNDARIA' || $datos_cap->grado_estudios == 'SECUNDARIA COMPLETA' ? 'selected' : '' }}>SECUNDARIA COMPLETA</option>
                                                    <option value="BACHILLERATO INCOMPLETO" {{ $datos_cap->grado_estudios == 'NIVEL MEDIO SUPERIOR TRUNCA' || $datos_cap->grado_estudios == 'BACHILLERATO INCOMPLETO' ? 'selected' : '' }}>BACHILLERATO INCOMPLETO</option>
                                                    <option value="NIVEL MEDIO SUPERIOR" {{ $datos_cap->grado_estudios == 'NIVEL MEDIO SUPERIOR' || $datos_cap->grado_estudios == 'BACHILLERATO COMPLETO' ? 'selected' : '' }}>BACHILLERATO COMPLETO</option>
                                                    <option value="CARRERA TECNICA TRUNCA" {{ $datos_cap->grado_estudios == 'CARRERA TECNICA TRUNCA' || $datos_cap->grado_estudios == 'CARRERA TECNICA INCOMPLETA' ? 'selected' : '' }}>CARRERA TECNICA INCOMPLETA</option>
                                                    <option value="CARRERA TECNICA" {{ $datos_cap->grado_estudios == 'CARRERA TECNICA' || $datos_cap->grado_estudios == 'CARRERA TECNICA COMPLETA' ? 'selected' : '' }}>CARRERA TECNICA COMPLETA</option>
                                                    <option value="LICENCIATURA TRUNCA" {{ $datos_cap->grado_estudios == 'LICENCIATURA TRUNCA' || $datos_cap->grado_estudios == 'LICENCIATURA INCOMPLETA' ? 'selected' : '' }}>LICENCIATURA INCOMPLETA</option>
                                                    <option value="LICENCIATURA" {{ $datos_cap->grado_estudios == 'LICENCIATURA' || $datos_cap->grado_estudios == 'LICENCIATURA COMPLETA' ? 'selected' : '' }}>LICENCIATURA COMPLETA</option>
                                                    <option value="POSGRADO" {{ $datos_cap->grado_estudios == 'MAESTRIA' || $datos_cap->grado_estudios == 'DOCTORADO' || $datos_cap->grado_estudios == 'POSGRADO' ? 'selected' : '' }}>POSGRADO</option>
                                                    <option value="NINGUNO" {{ old('grado_estudios', '') == 'NINGUNO' ? 'selected' : '' }}>NINGUNO</option>
                                                </select>
                                                @if ($errors->has('grado_estudios'))
                                                    <div class="text-danger">
                                                        {{ $errors->first('grado_estudios') }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-2 col-md">
                                            <div class="mb-2">
                                                <label class="form-label" for="indigena">Poblaci&oacute;n Ind&iacute;gena *</label>
                                                <select class="form-control" name="indigena" id="indigena">
                                                    <option value="" {{ old('indigena', $datos_cap->indigena ?? '') == '' ? 'selected' : '' }}>Seleccione:</option>
                                                    <option value="NO" {{ old('indigena', $datos_cap->indigena ?? '') == 'NO' ? 'selected' : '' }}>NO</option>
                                                    <option value="SI" {{ old('indigena', $datos_cap->indigena ?? '') == 'SI' ? 'selected' : '' }}>SI</option>
                                                </select>
                                                @if ($errors->has('indigena'))
                                                    <div class="text-danger">
                                                        {{ $errors->first('indigena') }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-lg-5 col-md">
                                            <div class="mb-2">
                                                <label class="form-label">Formato F2-2 (extranjero)HRTH</label>
                                                <select class="form-control" id="formato_22" name="formato_22" onchange="toggleExtranjeroOptions(this)">
                                                        <option selected value="{{ $datos_cap->formato_22}}">{{ $datos_cap->formato_22 }}</option>
                                                        <option value="NO">NO</option>
                                                        <option value="SI">SI</option>
                                                </select>
                                                @if ($errors->has('formato_22'))
                                                    <div class="text-danger">
                                                        {{ $errors->first('formato_22') }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-lg-5 col-md">
                                            <div class="mb-3">
                                                <label class="form-label">Estatus Migratorio</label>
                                                <select class="form-control" id="extranjero" name="extranjero">
                                                    <option selected value="{{ $datos_cap->extranjero }}">{{ $datos_cap->extranjero }}</option>
                                                </select>
                                                @if ($errors->has('extranjero'))
                                                    <div class="text-danger">
                                                        {{ $errors->first('extranjero') }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    @php
                                        if ($datos_cap->curp != null && $datos_cap->curp != '') {
                                            $edad = \Carbon\Carbon::parse($datos_cap->fecha_nacimiento)->age;
                                        }
                                    @endphp

                                    <div class="row">
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <input type="hidden" id="curp_ok" name="curp_ok" value="">
                                                <label class="form-label">CURP *</label>
                                                <input type="text" class="form-control" id="curp_input" name="curp_input" oninput="validarInput(this)" value="{{ $datos_cap->curp }}" readonly>
                                            </div>
                                            <small id="curpMensaje" class="form-text text-secondary" style="display: none;">Formato: Válido</small>
                                            @if ($errors->has('curp_input'))
                                                <div id="div_curp" class="text-danger">
                                                    {{ $errors->first('curp_input') }}
                                                </div>
                                            @endif
                                        </div>

                                        <div class="col-lg-2">
                                            <div class="mb-3">
                                                <label class="form-label">RFC </label>
                                                <input type="text" class="form-control" id="rfc" name="rfc" value=" {{ $datos_cap->rfc }}" onkeyup="javascript:this.value=this.value.toUpperCase();" readonly>
                                            </div>
                                        </div>

                                        @php
                                            if (strlen($datos_cap->rfc) == 13) {
                                                // Homoclave is valid, no additional input needed
                                            } else { 
                                        @endphp
                                                <div class="col-lg-1">
                                                    <div class="mb-3">
                                                        <label class="form-label">Homoclave </label>
                                                        <input type="text" class="form-control" id="homoclave" name="homoclave" value="" maxlength="3">
                                                    </div>
                                                </div>
                                        @php
                                            }
                                        @endphp


                                        <div class="col-lg-2">
                                            <div class="mb-3">
                                                <label class="form-label">Personal de ICAT</label>
                                                <select class="form-control" name="personal_icat" class='form-control' onkeyup="javascript:this.value=this.value.toUpperCase();">
                                                        <option selected value="{{   $datos_cap->personal_icat }}"> {{ $datos_cap->personal_icat }} </option>
                                                        <option value = "{{ old('personal_icat', 'NO') }}">NO</option>
                                                        <option value = "{{ old('personal_icat', 'SI') }}">SI</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-2">
                                            <div class="mb-3">
                                                <label class="form-label">Celular *</label>
                                                <input type="text" name="celular" class="form-control" 
                                                        value="{{ $datos_cap->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">
                                                @if ($errors->has('celular'))
                                                    <div class="text-danger">
                                                        {{ $errors->first('celular') }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-lg-2">
                                            <div class="mb-3">
                                                <label class="form-label" name="fec_ingreso">Fecha Ingreso *</label>
                                                <div class="input-hasicon mb-xl-0 mb-3">
                                                    <input name="fecha_ingreso" class="datepicker-default form-control" id="datepicker" value="{{  $datos_cap->fecha_ingreso }}" required>
                                                    <div class="icon"><i class=" ri-calendar-line"></i></div>
                                                </div>
                                                @if ($errors->has('fecha_ingreso'))
                                                    <div id="fecha_reg" class="text-danger">
                                                        {{ $errors->first('fecha_ingreso') }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="alert alert-primary alert-dismissible fade show">
                                        <i class=" ri-edit-2-line"></i> <strong>Informaci&oacute;n Adicional</strong> 
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <input type="hidden" id="fecNac" name="fecNac" value="{{ $datos_cap->fecha_nacimiento }}">
                                                <label class="form-label">Fecha de Nacimiento</label>
                                                <div id="fecNacimiento">{{ $datos_cap->fecha_nacimiento}}</div>
                                            </div>
                                        </div>
                                        
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <input type="hidden" id="eda" name="eda" value="{{ $edad }}">
                                                <label class="form-label">Edad</label>
                                                <div id="edad">{{$edad}}</div>
                                            </div>
                                        </div>
                                        
                                        <div class="col-lg-2">
                                            <div class="mb-3">
                                                <input type="hidden" id="sex" name="sex" value="{{ $datos_cap->sexo }}">
                                                <label class="form-label">Sexo</label>
                                                <div id="sexo">{{ $datos_cap->sexo }}</div>
                                            </div>
                                        </div>

                                        <div class="col-lg-2">
                                            <div class="mb-3">
                                                <input type="hidden" id="tercer" name="tercer" value="{{ $datos_cap->tercera_edad }}">
                                                <label class="form-label">Tercera Edad</label>
                                                <div id="tercera">{{ $datos_cap->tercera_edad }}</div>
                                            </div>
                                        </div>

                                        <div class="col-lg-2">
                                            <div class="mb-3">
                                                <input type="hidden" id="entFed" name="entFed" >
                                                <label class="form-label">Entidad Federativa de Nacimiento</label>
                                                <div id="entFedNac">{{ $entidadNacimiento }}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="alert alert-primary alert-dismissible fade show">
                                        <i class=" ri-edit-2-line"></i> <strong>Domicilio</strong>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-2">
                                            <div class="mb-3">
                                                <label class="form-label">Calle *</label>
                                                <input type="text" class="form-control" id="calle" name="calle" value="{{ $datos_cap->calle }}" class='form-control'>
                                                @if ($errors->has('calle'))
                                                    <div class="text-danger">
                                                        {{ $errors->first('calle') }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-lg-1">
                                            <div class="mb-3">
                                                <label class="form-label">No. Ext.*</label>
                                                <input type="text" class="form-control" id="numero_exterior" name="numero_exterior" value="{{ $datos_cap->numero_exterior }}" class='form-control'>
                                                @if ($errors->has('numero_exterior'))
                                                    <div class="text-danger">
                                                        {{ $errors->first('numero_exterior') }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-lg-1">
                                            <div class="mb-3">
                                                <label class="form-label">No. Int.</label>
                                                <input type="text" class="form-control" name="numero_interior" value="{{ $datos_cap->numero_interior }}" class='form-control'>
                                            </div>
                                        </div>
                                        <div class="col-lg-2">
                                            <div class="mb-3">
                                                <label class="form-label">Colonia *</label>
                                                <input type="text" class="form-control" id="colonia" name="colonia" value="{{ $datos_cap->colonia }}" class='form-control'>
                                                @if ($errors->has('colonia'))
                                                    <div class="text-danger">
                                                        {{ $errors->first('colonia') }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-lg-1">
                                            <div class="mb-3">
                                                <label class="form-label">C.P. *</label>
                                                <input type="text" class="form-control" id="codigo_postal" name="codigo_postal" value="{{ $datos_cap->codigo_postal }}" oninput="restrictToNumbers(this);" maxlength="5" pattern="\d{1,5}" title="Introduce hasta 5 dígitos numéricos">
                                                @if ($errors->has('codigo_postal'))
                                                    <div class="text-danger">
                                                        {{ $errors->first('codigo_postal') }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-lg-2">
                                            <div class="mb-3">
                                                <label class="form-label">Estado *</label>
                                                <select class="form-control" id="estados" name="estados" style="width: 100%;" >
                                                    <option selected value='{{ $datos_cap->estado }}'>{{ $nombreEstadoActual ?? ($estadoActual->nombre ?? '') }}</option>
                                                        @foreach ($estadosMexico as $estados)
                                                            <option value="{{ $estados->id }}">{{ $estados->nombre }}</option>
                                                        @endforeach
                                                </select>
                                                @if ($errors->has('estados'))
                                                    <div class="text-danger">
                                                        {{ $errors->first('estados') }}
                                                    </div>  
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-lg-2">
                                            <div class="mb-3">
                                                <label class="form-label">Municipio *</label>
                                                    <select class="form-control" id="lista_municipios" name="lista_municipios" >
                                                        <option value="{{ $datos_cap->municipio }}">{{ $datos_cap->municipio }}</option>
                                                    </select>
                                                @if ($errors->has('lista_municipios'))
                                                    <div id="div_municipio" class="text-danger">
                                                        {{ $errors->first('lista_municipios') }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-lg-1">
                                            <div class="mb-3">
                                                <label class="form-label">Teléfono </label>
                                                <input type="text" name="telefono" class="form-control" 
                                                        value="{{ $datos_cap->telefono }}" 
                                                        placeholder="" 
                                                        id="tel" 
                                                        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">
                                            </div>
                                            @if ($errors->has('telefono'))
                                                <div id="div_tel" class="text-danger">
                                                    {{ $errors->first('telefono') }}
                                                </div>  
                                            @endif
                                        </div>                            
                                    </div>
                                    <div class="alert alert-primary alert-dismissible fade show">
                                        <i class=" ri-edit-2-line"></i> <strong>Empresa / Instituci&oacute;n</strong>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label">Nombre</label>
                                                <input type="text" class="form-control" id="empresa" name="empresa" value="{{ $datos_cap->empresa }}" class='form-control'>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label">Dirección</label>
                                                <input type="text" class="form-control" id="direccion_empresa" name="direccion_empresa" value="{{ $datos_cap->direccion_empresa }}" class='form-control'>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label">Puesto</label>
                                                <input type="text" class="form-control" id="puesto" name="puesto" value="{{$datos_cap->puesto }}" class='form-control'>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label">Teléfono</label>
                                                <input type="text" name="telefono_empresa" class="form-control" 
                                                        value="{{ $datos_cap->telefono_empresa }}" 
                                                        placeholder="" 
                                                        id="telefono_empresa" 
                                                        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">
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="alert alert-primary alert-dismissible fade show">
                                        <i class=" ri-edit-2-line"></i> <strong>Documentaci&oacute;n Entregada</strong>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg col-md" id="d1" style="display: none;">
                                        <input type="hidden" id="selectData" name="selectData">
                                            <div class="mb-3">
                                                <label class="form-label">Carta menor de edad</label>
                                                <select class="form-control" id="menor" name="menor" >
                                                    <option selected value="{{ $datos_cap->menor}} ">{{ $datos_cap->menor}} </option>
                                                    <option value="SI">SI</option>
                                                    <option value="NO">NO</option>
                                                </select>
                                                
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md">
                                            <div class="mb-3">
                                                <label class="form-label">Identificación</label>
                                                <select class="form-control" id="identificacion" name="identificacion" >
                                                    <option selected value="{{ $datos_cap->identificacion }} ">{{ $datos_cap->identificacion }} </option>
                                                        
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md">
                                            <div class="mb-3">
                                                <label class="form-label">Fotograf&iacute;as</label>
                                                <select class="form-control" name="foto" >
                                                        <option selected value="{{ $datos_cap->foto}}">{{ $datos_cap->foto}} </option>
                                                        <option value="{{ old('foto', 'SI') }}">SI</option>
                                                        <option value="{{ old('foto', 'NO') }}">NO</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md">
                                            <div class="mb-3">
                                                <label class="form-label">Acta de Nac.</label>
                                                <select class="form-control" name="acta_nacimiento" >
                                                        <option selected value="{{ $datos_cap->acta_nacimiento }}">{{ $datos_cap->acta_nacimiento }}</option>
                                                        <option value="{{ old('acta_nacimiento', 'SI') }}">SI</option>
                                                        <option value="{{ old('acta_nacimiento', 'NO') }}">NO</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md">
                                            <div class="mb-3">
                                                <label class="form-label">Comprobante de domicilio</label>
                                                <select class="form-control" name="comprobante_domicilio" >
                                                        <option selected value="{{ $datos_cap->comprobante_domicilio}}">{{ $datos_cap->comprobante_domicilio }}</option>
                                                        <option value="{{ old('comprobante_domicilio', 'SI') }}">SI</option>
                                                        <option value="{{ old('comprobante_domicilio', 'NO') }}">NO</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md">
                                            <div class="mb-3">
                                                <label class="form-label">Comprobante de estudios</label>
                                                <select class="form-control" name="comprobante_estudios" >
                                                        <option selected value="{{ $datos_cap->comprobante_estudios}}">{{ $datos_cap->comprobante_estudios }}</option>
                                                        <option value="{{ old('comprobante_estudios', 'SI') }}">SI</option>
                                                        <option value="{{ old('comprobante_estudios', 'NO') }}">NO</option>
                                                </select>
                                            </div>
                                        </div>
                                        
                                        
                                        {{-- <div class="col-lg-2 col-md">
                                            <div class="mb-2">
                                                <label class="form-label">Formato F2-2 (extranjero)HRTH</label>
                                                <select class="form-control" id="formato_22" name="formato_22" onchange="toggleExtranjeroOptions(this)">
                                                        <option selected value="{{ $datos_cap->formato_22}}">{{ $datos_cap->formato_22 }}</option>
                                                        <option value="NO">NO</option>
                                                        <option value="SI">SI</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-lg-2 col-md">
                                            <div class="mb-3">
                                                <label class="form-label">Extranjero</label>
                                                <select class="form-control" id="extranjero" name="extranjero">
                                                    <option selected value="{{ $datos_cap->extranjero }}">{{ $datos_cap->extranjero }}</option>
                                                    
                                                </select>
                                            </div>
                                        </div> --}}
                                    </div>
                                    <hr><br>
                                    
                                        @if ($datos_cap->status != 'B') 
                                            @puede('Capacitandos','hacer_cambios_capacitandos')
                                            <div class="row">
                                                <div class='col-xl-12 col-md-6 d-grid'>
                                                    <button type="submit" id="id_btnGuardar" name="btnGuardar" value="1" class="btn btn-primary waves-effect waves-light"><i class=" ri-save-line font-size-16 align-middle"></i>Actualizar Informacion</button>
                                                </div>
                                            </div>
                                            @endpuede
                                        @else
                                            @puede('Capacitandos','alta_capacitando')
                                                <div class="row">
                                                    <div class='col-xl-6 col-md-6 d-grid'>
                                                        <button type="submit" id="id_btnBorrador" name="btnBorrador" value="1" class="btn btn-light"><i class=" ri-eraser-line font-size-16 align-middle"></i> Guardar Borrador</button>
                                                    </div>
                                                    <div class='col-xl-6 col-md-6 d-grid'>
                                                        <button type="submit" id="id_btnGuardar" name="btnGuardar" value="1" class="btn btn-primary waves-effect waves-light"><i class=" ri-save-line font-size-16 align-middle"></i>Terminar Guardado</button>
                                                    </div>
                                                </div>
                                            @endpuede
                                        @endif
                                   
                                <fieldset>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    
@endsection

@push('scripts')
    <script>
        $('#identificacion').append('<option value="INE">INE</option>');
        $('#identificacion').append('<option value="PASAPORTE">PASAPORTE</option>');
        $('#identificacion').append('<option value="OTRO">OTRO</option>');
        $('#identificacion').append('<option value="NO">NO</option>');


        $('#extranjero').append('<option value="NO">NO</option>');
        $('#extranjero').append('<option value="MIGRANTE">MIGRANTE</option>');
        $('#extranjero').append('<option value="REPATRIADO">REPATRIADO</option>');

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

        $(document).ready(function() {
            convertToUpperCase('#apellido_paterno, #apellido_materno, #nombre, #curp_input, #homoclave, #calle, #numero_exterior, #numero_interior, #colonia, #codigo_postal, #empresa, #direccion_empresa, #puesto');
        });

        function toggleExtranjeroOptions(f22Select) {
            const extranjeroSelect = document.getElementById('extranjero');
                // Recorrer los datos recibidos y crear los options
                if (f22Select.value === 'SI') {
                    $('#extranjero').empty(); // Limpiar el select de extranjero
                        $('#extranjero').append('<option value="SI">SI</option>');
                } else {
                    $('#extranjero').empty(); // Limpiar el select de extranjero
                    $('#extranjero').append('<option value="NO">NO</option>');
                    $('#extranjero').append('<option value="MIGRANTE">MIGRANTE</option>');
                    $('#extranjero').append('<option value="REPATRIADO">REPATRIADO</option>');
                }
                $('#extranjero').selectpicker('refresh');
            }

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

        $(document).ready(function () {
            //
            // flatpickr('#fecha_ingreso', {
            //     dateFormat  : "d/m/Y",
            // });
            setTimeout(function() {
                $("#alert-container-error").fadeOut("slow");
                $("#alert-container").fadeOut("slow"); // Desaparece alerta
            }, 4000); // 4 segundos


            $('#apellido_paterno,#apellido_materno,#nombre,#email,#celular,#calle,#numero_exterior,#colonia,#codigo_postal').on("input", function() {
                $(this).siblings(".text-danger").fadeOut("slow"); // Oculta el mensaje de error
            });


            $('#estados').on('input change', function() {
                $(this).closest('.mb-3').find('.text-danger').fadeOut("slow");
                $('#div_municipio').find('.text-danger').fadeOut("slow"); // Oculta el mensaje de error
                $('#div_municipio').hide();
            });

        
            $('#tel').on("input", function() {
                $('#div_tel').hide(); // Oculta el mensaje de error
            });
            $('#curp_ok').on("input", function() {
                $('#div_curp').hide(); // Oculta el mensaje de error
            });


            $('#grado_estudios').on("change", function() {
                $('#div_grado_estudios').find('.text-danger').fadeOut("slow"); // Oculta el mensaje de error
            });

           

            $('#datepicker').on("change", function() {
                $('#fecha_reg').find('.text-danger').fadeOut("slow"); // Oculta el mensaje de error
                $('#fecha_reg').hide();
            });


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


           

        });

        function showhide(id)
        {   //
            
            //
        }

        //
        function curpValida(curp) 
        {
            var re = /^([A-Z][AEIOUX][A-Z]{2}\d{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[12]\d|3[01])[HM](?:AS|B[CS]|C[CLMSH]|D[FG]|G[TR]|HG|JC|M[CNS]|N[ETL]|OC|PL|Q[TR]|S[PLR]|T[CSL]|VZ|YN|ZS)[B-DF-HJ-NP-TV-Z]{3}[A-Z\d])(\d)$/,
                validado = curp.match(re);
            if (!validado)  //Coincide con el formato general?
                return false;
            
            //Validar que coincida el dígito verificador
            function digitoVerificador(curp17) {
                //Fuente https://consultas.curp.gob.mx/CurpSP/
                var diccionario  = "0123456789ABCDEFGHIJKLMNÑOPQRSTUVWXYZ",
                    lngSuma      = 0.0,
                    lngDigito    = 0.0;
                for(var i=0; i<17; i++)
                    lngSuma = lngSuma + diccionario.indexOf(curp17.charAt(i)) * (18 - i);
                lngDigito = 10 - lngSuma % 10;
                if (lngDigito == 10) return 0;
                return lngDigito;
            }
            if (validado[2] != digitoVerificador(validado[1]))
                return false;
            return true; //Validado
        }

        //Handler para el evento cuando cambia el input
        //Lleva  CURP a mayúsculas para validarlo
        function validarInput(input) 
        {
            var curp        = input.value.toUpperCase(),
                resultado   = document.getElementById("resultado"),
                valido      = "No válido",
                identificador = 'alu';
                
            if (curp.length <= 10)
            {   $('#rfc').val(curp);    }
            else 
            {   $('#rfc').val(curp.slice(0,10));    }
        
            if (curp.length >= 10)
                {   var fechaNacimiento = curp.slice(4, 10);
                    var dia = fechaNacimiento.slice(-2);
                    var mes = fechaNacimiento.slice(2, 4);
                    var ani = fechaNacimiento.slice(0,2);

                    // Convertir el año a un número
                    var anio = parseInt(ani, 10);

                    // Umbral dinámico: año actual en 2 dígitos + 5 (margen futuro)
                    // Ej: en 2026 → umbral = 31; en 2030 → umbral = 35
                    var umbral = new Date().getFullYear() % 100 + 5;
                    if (anio <= umbral) {
                    anio += 2000;
                    } else {
                    // De lo contrario, asumir que se refiere a un año en el rango 1900-1999
                    anio += 1900;
                    }

                    $('#fecNacimiento').html(dia+' / '+mes+' / '+anio);
                    $('#fecNac').val(anio+'-'+mes+'-'+dia);

                    //
                    var fechaNac = new Date(ani, mes - 1, dia);
                    var hoy = new Date();

                    var edad = hoy.getFullYear() - fechaNac.getFullYear();

                    // Verificar si todavía no ha cumplido años este año
                    var mesActual = hoy.getMonth();
                    var diaActual = hoy.getDate();

                    var mesNacimiento = fechaNac.getMonth();
                    var diaNacimiento = fechaNac.getDate();

                    if ( mesActual < mesNacimiento || (mesActual === mesNacimiento && diaActual < diaNacimiento) ) {
                        edad--;
                    }

                    //

                    // 240708 se pone  restricción de que si es menor no se puede registrar
                    if (edad < '15')
                    {
                        //
                        $('#confirmModal').text('NO ES POSIBLE REGISTRAR CAPACITANDOS MENORES DE 15 AÑOS.');
                        $('#confirmModal').prop('disabled', true);

                        $('#id_btnBorrador').text('NO ES POSIBLE REGISTRAR CAPACITANDOS MENORES DE 15 AÑOS.');
                        $('#id_btnBorrador').prop('disabled', true);

                        $('#id_btnGuardar').text('NO ES POSIBLE REGISTRAR CAPACITANDOS MENORES DE 15 AÑOS.');
                        $('#id_btnGuardar').prop('disabled', true);

                        edad = '<h3 style="color: #b40000;">NO ES POSIBLE REGISTRAR CAPACITANDOS MENORES DE 15 AÑOS</h3>';
                    }
                    else if (edad >= 15 && edad < 18)
                    {
                        console.log(edad);
                        var dataCustom  = $(this).find(':selected').data('id');
                        $('#selectData').show();
                        showhide(dataCustom);
                        $('#d1').show();

                        $('#confirmModal').html('<i class="  ri-save-line font-size-16 align-middle"></i>Guardar Borrador');
                        $('#confirmModal').prop('disabled', false);


                        $('#id_btnBorrador').html('<i class="  ri-save-line font-size-16 align-middle"></i>Guardar Borrador');
                        $('#id_btnBorrador').prop('disabled', false);

                        $('#menor').trigger("change")
                        $('#menor').val('SI').trigger("change");
                        var menor = $('#menor').val();
                        console.log('Menor de edad seleccionado: ' + menor);

                    }else if (edad >= 18) {
                        console.log(edad);
                        var dataCustom  = $(this).find(':selected').data('id');
                        $('#selectData').hide();
                        showhide(dataCustom);

                        $('#confirmModal').html('<i class="  ri-save-line font-size-16 align-middle"></i>Guardar Borrador');
                        $('#confirmModal').prop('disabled', false);

                        $('#d1').hide();
                        $("#identificacion option[value='INE TUTOR']").text("INE");
                        $("#identificacion option[value='INE TUTOR']").val("INE");
                        
                        $('#menor').val('NO').trigger("change");
                        var menor = $('#menor').val();
                        console.log('Valoer de Menor de edad: ' + menor);
                        
                    }

                    // Si edad es mayor o igual a 60, marcar como tercera edad
                    if (edad >= 60) {
                        $('#tercera').html('SI');
                        $('#tercer').val('TERCERA EDAD');
                    } else {
                        $('#tercera').html('NO');
                        $('#tercer').val('NO');
                    }

                    $('#edad').html(edad);
                    $('#eda').val(edad);

                }
            else if(curp.length < 10)
                {   $('#fecNacimiento').html(''); $('#edad').html(''); $('#fecNac').val(''); $('#eda').val(''); }

            if (curp.length >= 11) 
            {
                var sex = curp.slice(10, 11);
                if (sex == 'H')
                {   
                    $('#sexo').html('HOMBRE');
                    $('#sex').val('HOMBRE');
                }
                else if(sex == 'M')
                {
                    $('#sexo').html('MUJER');
                    $('#sex').val('MUJER');
                }
                
            }
            else if (curp.length < 11)
            {   $('#sexo').html(''); $('#sex').val(''); }

        
            ///////////////////////////////////////////////////////////////////////////////////////////////////////
            if (curp.length >= 13) 
            {
                var entidad_id = curp.slice(11, 13);
                console.log('Entidad Federativa: ' + entidad_id);
                $.ajax({
                    url: "{{ route('estadosMexico') }}", // Ruta para obtener los estados
                    method: 'POST',
                    data: {
                            entidad_id: entidad_id,
                            _token: '{{ csrf_token() }}' // Agregar el token CSRF para seguridad
                        },
                    dataType: 'html',
                    success: function(data) {
                        var entidad = JSON.parse(data);
                        if (entidad.data && entidad.data.length > 0) {
                            $('#entFedNac').html(entidad.data[0].nombre);
                        } else {
                            $('#entFedNac').html('Entidad no encontrada');
                        }  
                        $('#entFed').val(entidad.data[0].nombre);
                    }
                });
            }
            else
            {   $('#entFedNac').html(''); $('#entFed').val(''); }
            ///////////////////////////////////////////////////////////////////////////////////////////////////////

            // Validar que los primeros 4 caracteres del CURP coincidan con el nombre y apellidos
            if (curp.length === 4) {
                var apellido_paterno = $('#apellido_paterno').val().toUpperCase();
                var apellido_materno = $('#apellido_materno').val().toUpperCase();
                var nombre = $('#nombre').val().toUpperCase();

                if (apellido_paterno.length > 0 && apellido_materno.length > 0 && nombre.length > 0) {
                    var primerLetraApePat = apellido_paterno.charAt(0);
                    var siguienteVocalApePat = apellido_paterno.match(/[AEIOU]/i);
                    var primerLetraApeMat = apellido_materno.charAt(0);
                    var primerLetraNombre = nombre.charAt(0);

                    if (siguienteVocalApePat) {
                        siguienteVocalApePat = siguienteVocalApePat[0];
                        if (curp.charAt(0) === primerLetraApePat &&
                            curp.charAt(1) === siguienteVocalApePat &&
                            curp.charAt(2) === primerLetraApeMat &&
                            curp.charAt(3) === primerLetraNombre) {
                            
                        } else {
                            $('#div_curp').show().html('El CURP NO CORRESPONDE al nombre del capacitando.');
                        }
                    } else {
                        $('#div_curp').show().html('El CURP NO CORRESPONDE al nombre del capacitando.');
                    }
                } else {
                    $('#div_curp').show().html('El CURP NO CORRESPONDE al nombre del capacitando.');
                }
            }


            // if (curpValida(curp)) 
            // { //
            //     document.getElementById("curpMensaje").style.display = "block";
            //     $.ajax({
            //         url: "{{ route('validaCurp') }}", // Ruta para obtener los estados
            //         method: 'POST',
            //         data: {
            //             curp: curp,
            //             _token: '{{ csrf_token() }}' // Agregar el token CSRF para seguridad
            //         },
            //         dataType: 'html',
            //         success: function(data) {
            //             var checaCurp = JSON.parse(data);
            //             if (checaCurp === '1') {
            //                 $('#id_btnBorrador').text('El CURP ya está registrado, no es posible darlo de alta nuevamente.');
            //                 $('#id_btnBorrador').prop('disabled', true);

            //                 $('#id_btnGuardar').text('El CURP ya está registrado, no es posible darlo de alta nuevamente.');
            //                 $('#id_btnGuardar').prop('disabled', true);

            //                 document.getElementById("curpMensaje").style.display = "block";
            //                 document.getElementById("curpMensaje").innerHTML = "<strong>El CURP ya existe en el sistema.</strong>";

            //             } else {
            //                 $('#id_btnBorrador').text('Guardar Borrador');
            //                 $('#id_btnBorrador').prop('disabled', false);

            //                 $('#id_btnGuardar').text('Terminar Guardado');
            //                 $('#id_btnGuardar').prop('disabled', false);

            //                 document.getElementById("curpMensaje").style.display = "block";
            //                 document.getElementById("curpMensaje").innerHTML = "<strong>Formato: Válido</strong>";
            //             }  
            //             // $('#entFed').val(data);
            //         }
            //     });

            // } else 
            // {
            //     $('#curp_ok').val('0');
            //     $('#div_curp').hide();
            // }
        }

        $('#menor').change(function() {
            //
            var x =  $('#menor').val();
            console.log('Valor de X de Menor de edad: ' + x);
            if (x === "SI")
            {
                $('#identificacion').empty(); // Limpiar el select 
                $('#identificacion').append('<option value="INE TUTOR">INE TUTOR</option>');
                $('#identificacion').append('<option value="PASAPORTE">PASAPORTE</option>');
                $('#identificacion').append('<option value="OTRO">OTRO</option>');
                $('#identificacion').append('<option value="NO">NO</option>');
            }
            else 
            {
                $('#identificacion').empty(); // Limpiar el select 
                $('#identificacion').append('<option value="INE">INE</option>');
                $('#identificacion').append('<option value="PASAPORTE">PASAPORTE</option>');
                $('#identificacion').append('<option value="OTRO">OTRO</option>');
                $('#identificacion').append('<option value="NO">NO</option>');
            }
            $('#identificacion').selectpicker('refresh');
        });

        (function () {
            var isSubmitting = false;
            var form = document.getElementById('formAgregar');
            if (!form) {
                return;
            }

            form.querySelectorAll('button[type="submit"]').forEach(function (button) {
                button.addEventListener('click', function () {
                    form.dataset.submitName = this.name || '';
                    form.dataset.submitValue = this.value || '';
                    form._clickedButton = this;
                });
            });

            form.addEventListener('submit', function (event) {
                if (isSubmitting) {
                    event.preventDefault();
                    return;
                }

                var submitName = form.dataset.submitName;
                var submitValue = form.dataset.submitValue;

                if (submitName) {
                    var hiddenInput = form.querySelector('input[type="hidden"][data-submit-proxy="1"]');
                    if (!hiddenInput) {
                        hiddenInput = document.createElement('input');
                        hiddenInput.type = 'hidden';
                        hiddenInput.setAttribute('data-submit-proxy', '1');
                        form.appendChild(hiddenInput);
                    }
                    hiddenInput.name = submitName;
                    hiddenInput.value = submitValue;
                }

                isSubmitting = true;
                if (form._clickedButton) {
                    form._clickedButton.dataset.originalHtml = form._clickedButton.innerHTML;
                    form._clickedButton.innerHTML = 'Guardando...';
                }
                form.querySelectorAll('button[type="submit"]').forEach(function (button) {
                    button.disabled = true;
                });
            });
        })();


    </script>
@endpush

@push('plugin-scripts')
@endpush

@push('custom-scripts')
@endpush