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

@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>Alta de Capacitando <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('capacitandos') }}" 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 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">
                                <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

                        <form id="formAgregar" action="{{ route('inserta_capacitando') }}" method="POST" >
                            @csrf 
                            @method('POST')
                            <fieldset>
                                <div class="alert alert-primary alert-dismissible fade show">
                                   <i class="fas fa-user-alt"></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="text" class="form-control" id="ape_pat" name="ape_pat" value="{{ old('ape_pat') }}" class='form-control'>
                                            @error('ape_pat')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </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="ape_mat" name="ape_mat"  value="{{ old('ape_mat') }}" class='form-control'>
                                            @error('ape_mat')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </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="{{ old('nombre') }}" class='form-control'>
                                            @error('nombre')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </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="{{ old('email') }}" class='form-control'>
                                            @error('email')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </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="edo_civ" >
                                                    <option value="SOLTERO(A)" {{ old('edo_civ', '') == 'SOLTERO(A)' ? 'selected' : '' }}>SOLTERO(A)</option>
                                                    <option value="CASADO(A)" {{ old('edo_civ', '') == 'CASADO(A)' ? 'selected' : '' }}>CASADO(A)</option>
                                                    <option value="VIUDO(A)" {{ old('edo_civ', '') == 'VIUDO(A)' ? 'selected' : '' }}>VIUDO(A)</option>
                                                    <option value="UNIÓN LIBRE" {{ old('edo_civ', '') == 'UNIÓN LIBRE' ? 'selected' : '' }}>UNIÓN LIBRE</option>
                                            </select>
                                            @error('edo_civ')
                                            <div class="text-danger">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="form-group">
                                            <label class="form-label">Población Vulnerable </label>
                                            <select class="form-control" name="pob_vul" >
                                                    <option value="NINGUNA" {{ old('pob_vul', '') == 'NINGUNA' ? 'selected' : '' }}>NINGUNA</option>
                                                    <option value="TERCERA EDAD" {{ old('pob_vul', '') == 'TERCERA EDAD' ? 'selected' : '' }}>TERCERA EDAD</option>
                                                    <option value="INTERNO(A) CERESO" {{ old('pob_vul', '') == 'INTERNO(A) CERESO' ? 'selected' : '' }}>INTERNO(A) CERESO</option>
                                                    <option value="MADRE TRABAJADORA" {{ old('pob_vul', '') == 'MADRE TRABAJADORA' ? 'selected' : '' }}>MADRE TRABAJADORA</option>
                                                    <option value="MADRE SOLTERA" {{ old('pob_vul', '') == 'MADRE SOLTERA' ? 'selected' : '' }}>MADRE SOLTERA</option>
                                                    <option value="PADRE SOLTERO" {{ old('pob_vul', '') == 'PADRE SOLTERO' ? 'selected' : '' }}>PADRE SOLTERO</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="form-group">
                                            <label class="form-label">Discapacidad</label>
                                            <select class="form-control" name="discapacidad" >
                                                    <option value="NINGUNA" {{ old('discapacidad', '') == 'NINGUNA' ? 'selected' : '' }}>NINGUNA</option>
                                                    <option value="VISUAL" {{ old('discapacidad', '') == 'VISUAL' ? 'selected' : '' }}>VISUAL</option>
                                                    <option value="AUDITIVA" {{ old('discapacidad', '') == 'AUDITIVA' ? 'selected' : '' }}>AUDITIVA</option>
                                                    <option value="LENGUAJE" {{ old('discapacidad', '') == 'LENGUAJE' ? 'selected' : '' }}>LENGUAJE</option>
                                                    <option value="MOTRIZ" {{ old('discapacidad', '') == 'MOTRIZ' ? 'selected' : '' }}>MOTRIZ</option>
                                                    <option value="COGNITIVA (MENTAL)" {{ old('discapacidad', '') == 'COGNITIVA (MENTAL)' ? 'selected' : '' }}>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 value="" {{ old('grado_estudios', '') == '' ? 'selected' : '' }}>Seleccione:</option>
                                                
                                                <option value="PRIMARIA TRUNCA" {{ old('grado_estudios', '') == 'PRIMARIA INCOMPLETA' ? 'selected' : '' }}>PRIMARIA INCOMPLETA</option>
                                                <option value="PRIMARIA" {{ old('grado_estudios', '') == 'PRIMARIA COMPLETA' ? 'selected' : '' }}>PRIMARIA COMPLETA</option>
                                                <option value="SECUNDARIA TRUNCA" {{ old('grado_estudios', '') == 'SECUNDARIA INCOMPLETA' ? 'selected' : '' }}>SECUNDARIA INCOMPLETA</option>
                                                <option value="SECUNDARIA" {{ old('grado_estudios', '') == 'SECUNDARIA COMPLETA' ? 'selected' : '' }}>SECUNDARIA COMPLETA</option>
                                                <option value="BACHILLERATO INCOMPLETO" {{ old('grado_estudios', '') == 'BACHILLERATO INCOMPLETO' ? 'selected' : '' }}>BACHILLERATO INCOMPLETO</option>
                                                <option value="BACHILLERATO COMPLETO" {{ old('grado_estudios', '') == 'BACHILLERATO COMPLETO' ? 'selected' : '' }}>BACHILLERATO COMPLETO</option>
                                                <option value="CARRERA TECNICA TRUNCA" {{ old('grado_estudios', '') == 'CARRERA TECNICA INCOMPLETA' ? 'selected' : '' }}>CARRERA TECNICA INCOMPLETA</option>
                                                <option value="CARRERA TECNICA" {{ old('grado_estudios', '') == 'CARRERA TECNICA COMPLETA' ? 'selected' : '' }}>CARRERA TECNICA COMPLETA</option>
                                                <option value="LICENCIATURA TRUNCA" {{ old('grado_estudios', '') == 'LICENCIATURA INCOMPLETA' ? 'selected' : '' }}>LICENCIATURA INCOMPLETA</option>
                                                <option value="LICENCIATURA" {{ old('grado_estudios', '') == 'LICENCIATURA COMPLETA' ? 'selected' : '' }}>LICENCIATURA COMPLETA</option>
                                                <option value="POSGRADO" {{ old('grado_estudios', '') == 'POSGRADO' ? 'selected' : '' }}>POSGRADO</option>
                                                <option value="NINGUNO" {{ old('grado_estudios', '') == 'NINGUNO' ? 'selected' : '' }}>NINGUNO</option>
                                            </select>
                                            @error('grado_estudios')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </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', '') == '' ? 'selected' : '' }}>Seleccione:</option>
                                                <option value="NO" {{ old('indigena', '') == 'NO' ? 'selected' : '' }}>NO</option>
                                                <option value="SI" {{ old('indigena', '') == 'SI' ? 'selected' : '' }}>SI</option>
                                            </select>
                                            @error('indigena')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </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="f22" name="f22" onchange="toggleExtranjeroOptions(this)">
                                                    <option selected value="NO" {{ old('f22', '') == 'NO' ? 'selected' : '' }}>NO</option>
                                                    <option value="SI" {{ old('f22', '') == 'SI' ? 'selected' : '' }}>SI</option>
                                                   
                                            </select>
                                            @error('f22')
                                            <div class="text-danger">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                        </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">
                                     
                                            </select>
                                            @error('extranjero')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <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="{{ old('curp_input') }}" maxlength="18">
                                        </div>
                                        <small id="curpMensaje" class="form-text text-secondary" style="display: none;">Formato: Válido</small>
                                        <div id="div_curp" class="text-danger" style="display: none;"></div>
                                        @error('curp_input')
                                            <script>
                                                // Mostrar error de validación del servidor
                                                document.addEventListener('DOMContentLoaded', function() {
                                                    $('#div_curp').show().html('{{ $message }}');
                                                });
                                            </script>
                                        @enderror
                                    </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" readonly>
                                        </div>
                                    </div>
                                    <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="{{ old('homoclave') }}" maxlength="3">
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="mb-3">
                                            <label class="form-label">Personal de ICATEP</label>
                                            <select class="form-control" name="personal_icatep" value="{{ old('personal_icatep') }}" class='form-control'>
                                                    <option selected value="{{ old('personal_icatep', 'NO') }}">NO</option>
                                                    <option value="{{ old('personal_icatep', '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="{{ 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>
                                    </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="{{ old('fecha_ingreso') }}" required>
                                                <div class="icon"><i class="far fa-calendar"></i></div>
                                            </div>
                                            @error('fecha_ingreso')
                                                <div id="fecha_reg" class="text-danger">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="alert alert-primary alert-dismissible fade show">
                                     <strong><i class="fas fa-pen-alt"></i> 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">
                                            <label class="form-label">Fecha de Nacimiento</label>
                                            <div id="fecNacimiento">//</div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-lg-3">
                                        <div class="mb-3">
                                            <input type="hidden" id="eda" name="eda">
                                            <label class="form-label">Edad</label>
                                            <div id="edad"></div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-lg-3">
                                        <div class="mb-3">
                                            <input type="hidden" id="sex" name="sex">
                                            <label class="form-label">Sexo</label>
                                            <div id="sexo"></div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-lg-3">
                                        <div class="mb-3">
                                            <input type="hidden" id="entFed" name="entFed">
                                            <label class="form-label">Entidad Federativa de Nacimiento</label>
                                            <div id="entFedNac"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="alert alert-primary alert-dismissible fade show">
                                    <i class="fa fa-home"></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="{{ old('calle') }}" class='form-control'>
                                            @error('calle')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </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="num_ext" name="num_ext" value="{{ old('num_ext') }}" class='form-control'>
                                            @error('num_ext')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-1">
                                        <div class="mb-3">
                                            <label class="form-label">No. Int.</label>
                                            <input type="text" class="form-control" id="num_int" name="num_int" value="{{ old('num_int') }}" 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="{{ old('colonia') }}" class='form-control'>
                                            @error('colonia')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </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="cp" name="cp" value="{{ old('cp') }}" oninput="restrictToNumbers(this);" maxlength="5" pattern="\d{1,5}" title="Introduce hasta 5 dígitos numéricos">
                                            @error('cp')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </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=''>Seleccione:</option>
                                                    @foreach ($estadosMexico as $estados)
                                                        <option value="{{ $estados->esmex_id }}">{{ $estados->esmex_nombre }}</option>
                                                    @endforeach
                                            </select>
                                            @error('estados')
                                                <div class="text-danger">
                                                    {{ $message }}
                                                </div>  
                                            @enderror
                                        </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="">Seleccione un Estado</option>
                                                </select>
                                            @error('lista_municipios')
                                                <div id="div_municipio" class="text-danger">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </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="{{ old('telefono') }}"
                                            placeholder="" 
                                            id="telefono" 
                                            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>
                                        @error('telefono')
                                            <div id="div_tel" class="text-danger">
                                                {{ $message }}
                                            </div>  
                                        @enderror
                                    </div>                            
                                </div>
                                <div class="alert alert-primary alert-dismissible fade show">
                                    <i class="fas fa-building"></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="{{ old('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="dir_emp" name="dir_emp" value="{{ old('dir_emp') }}" 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="{{ old('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="tel_emp" class="form-control" 
                                                value="{{ old('tel_emp') }}"
                                                placeholder="" 
                                                id="tel_emp" 
                                                maxlength="10" 
                                                pattern="[0-9]{10}" 
                                                inputmode="numeric">
                                        </div>
                                    </div>
                                </div>
                                <div class="alert alert-primary alert-dismissible fade show">
                                     <strong><i class="fa fa-file-text"></i> 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="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" >
                                                    
                                            </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="{{ 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_nac" >
                                                    <option selected value="{{ old('acta_nac', 'SI') }}">SI</option>
                                                    <option value="{{ old('acta_nac', '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="com_dom" >
                                                    <option selected value="{{ old('com_dom', 'SI') }}">SI</option>
                                                    <option value="{{ old('com_dom', '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="comp_est" >
                                                    <option selected value="{{ old('comp_est', 'SI') }}">SI</option>
                                                    <option value="{{ old('comp_est', 'NO') }}">NO</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                </div>
                                <hr><br>                  
                                <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 waves-effect waves-light"><i class=" bx bxs-eraser 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=" bx bx-save font-size-16 align-middle"></i>Terminar Guardado</button>
                                    </div>
                                </div>
                            <fieldset>
                        
                        </form>
                    </div>
                </div>
            </div>
        </div>
        
    </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('#ape_pat, #ape_mat, #nombre, #curp_input, #homoclave, #calle, #num_ext, #num_int, #colonia, #empresa, #dir_emp, #puesto');
        });

        $('#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="">Seleccione:</option>');
        $('#extranjero').append('<option selected value="NO">NO</option>');
        $('#extranjero').append('<option value="MIGRANTE">MIGRANTE</option>');
        $('#extranjero').append('<option value="REPATRIADO">REPATRIADO</option>');

        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="">Seleccione:</option>');
                    $('#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

            // Validar CURP automáticamente si tiene valor al cargar la página
            var curpInput = document.getElementById('curp_input');
            if (curpInput && curpInput.value.trim() !== '') {
                validarInput(curpInput);
            }

            $('#ape_pat,#ape_mat,#nombre,#email,#celular,#calle,#num_ext,#colonia,#cp').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.mu_id +'-'+ municipio.mu_nombre +'">' + municipio.mu_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 la CURP a mayúsculas para validarlo
        function validarInput(input) 
        {
            var curp        = input.value.toUpperCase(),
                resultado   = document.getElementById("resultado"),
                valido      = "No válido",
                identificador = 'alu',
                menorDeEdad = false; // bandera: true si edad < 15 (impide re-habilitar botones)
                
            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 fecA  = new Date(anio, mes, dia, 0, 0, 0, 0).getFullYear();
                    var hoyA  = new Date().getFullYear();
                    var fecM  = new Date(anio, mes, dia, 0, 0, 0, 0).getMonth();
                    var hoyM  = new Date().getMonth()+1;
                    var edad  = 0; 

                    // console.log('Dia, Mes, Año: '+dia+' '+mes+' '+anio);
                    // console.log('fecA, hoyA -> Año: '+fecA+' '+hoyA);
                    // console.log('fecM, hoyM -> Mes: '+fecM+' '+hoyM);

                    if(hoyM >= fecM)
                    {   edad = hoyA-fecA;   }
                    else
                    {   edad = (hoyA-fecA)-1;   }

                    //

                    // 240708 se pone la restricción de que si es menor no se puede registrar
                    if (edad < '15')
                    {
                        menorDeEdad = true;
                        //
                        $('#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=" bx bx-save font-size-16 align-middle"></i>Guardar Borrador');
                        $('#confirmModal').prop('disabled', false);


                        $('#id_btnBorrador').html('<i class=" bx bx-save 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=" bx bx-save 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('Valor de Menor de edad: ' + menor);
                        
                    }

                    $('#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].esmex_nombre);
                        } else {
                            $('#entFedNac').html('Entidad no encontrada');
                        }  
                        $('#entFed').val(entidad.data[0].esmex_nombre);
                    }
                });
            }
            else
            {   $('#entFedNac').html(''); $('#entFed').val(''); }
            ///////////////////////////////////////////////////////////////////////////////////////////////////////

            // Validar el formato del CURP en tiempo real
            if (curp.length > 0 && curp.length < 18) {
                // CURP incompleto
                $('#div_curp').show().html('El CURP debe tener 18 caracteres. Faltan ' + (18 - curp.length) + ' caracteres.');
                $('#curpMensaje').hide();
                if (!menorDeEdad) { $('#id_btnBorrador').prop('disabled', false); } // Permitir borrador solo si es mayor de 15
                $('#id_btnGuardar').text('Terminar Guardado');
                $('#id_btnGuardar').prop('disabled', true);
                $('#curp_ok').val('0');
            } else if (curp.length === 18) {
                // CURP completo, validar formato
                if (curpValida(curp)) {
                    // Formato válido, verificar si ya existe en el sistema
                    $('#div_curp').hide();
                    document.getElementById("curpMensaje").style.display = "block";
                    document.getElementById("curpMensaje").innerHTML = "<strong style='color: green;'>✓ Formato: Válido - Verificando...</strong>";
                    
                    $.ajax({
                        url: "{{ route('validaCurp') }}",
                        method: 'POST',
                        data: {
                            curp: curp,
                            _token: '{{ csrf_token() }}'
                        },
                        dataType: 'html',
                        success: function(data) {
                            var checaCurp = JSON.parse(data);
                            if (checaCurp === '1') {
                                // CURP ya existe
                                $('#div_curp').show().html('El CURP ya está registrado en el sistema.');
                                $('#curpMensaje').hide();
                                $('#id_btnBorrador').text('El CURP ya está registrado');
                                $('#id_btnBorrador').prop('disabled', true);
                                $('#id_btnGuardar').text('El CURP ya está registrado');
                                $('#id_btnGuardar').prop('disabled', true);
                                $('#curp_ok').val('0');
                            } else {
                                // CURP válido y disponible
                                $('#div_curp').hide();
                                $('#curpMensaje').show().html("<strong style='color: green;'>✓ CURP Válido</strong>");
                                if (!menorDeEdad) {
                                    $('#id_btnBorrador').text('Guardar Borrador');
                                    $('#id_btnBorrador').prop('disabled', false);
                                    $('#id_btnGuardar').text('Terminar Guardado');
                                    $('#id_btnGuardar').prop('disabled', false);
                                    $('#curp_ok').val('1');
                                }
                            }
                        },
                        error: function() {
                            $('#div_curp').show().html('Error al verificar el CURP. Intente de nuevo.');
                            $('#curpMensaje').hide();
                        }
                    });
                } else {
                    // Formato inválido
                    $('#div_curp').show().html('El formato del CURP es incorrecto. Verifique los datos.');
                    $('#curpMensaje').hide();
                    if (!menorDeEdad) { $('#id_btnBorrador').prop('disabled', false); } // Permitir borrador solo si es mayor de 15
                    $('#id_btnGuardar').text('Terminar Guardado');
                    $('#id_btnGuardar').prop('disabled', true);
                    $('#curp_ok').val('0');
                }
            } else if (curp.length === 0) {
                // Campo vacío
                $('#div_curp').hide();
                $('#curpMensaje').hide();
                $('#id_btnBorrador').text('Guardar Borrador');
                $('#id_btnBorrador').prop('disabled', false);
                $('#id_btnGuardar').text('Terminar Guardado');
                $('#id_btnGuardar').prop('disabled', true);
                $('#curp_ok').val('0');
            }
        }

        $('#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