@php
    use App\Http\Controllers\Admin\CamposFijosController;

    // ── Campos bloqueados (siempre visibles) ─────────────────────────────────
    // Estos siempre se muestran, sin importar la config.
    // Sus etiquetas vienen del código (podrías personalizar aquí si quieres).

    // ── Campos configurables visibles ────────────────────────────────────────
    $cfConfig = CamposFijosController::getConfigEstatica($congreso);
    $cfVisibles = collect($cfConfig)->where('visible', true)->sortBy('orden');

    $inp = "border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 block w-full text-sm mt-1";
@endphp

{{-- ════ CAMPOS BLOQUEADOS (siempre aparecen) ════════════════════════════════ --}}

<div>
    <label class="block text-sm font-medium text-gray-700">Nombre(s) <span class="text-red-500">*</span></label>
    <input type="text" name="nombres" value="{{ old('nombres') }}"
           class="{{ $inp }}" required placeholder="Nombre(s)">
    <x-input-error class="mt-1" :messages="$errors->get('nombres')" />
</div>

<div>
    <label class="block text-sm font-medium text-gray-700">Primer Apellido <span class="text-red-500">*</span></label>
    <input type="text" name="primer_apellido" value="{{ old('primer_apellido') }}"
           class="{{ $inp }}" required>
    <x-input-error class="mt-1" :messages="$errors->get('primer_apellido')" />
</div>

{{-- Segundo apellido: aparece aquí si está activo en config --}}
@foreach($cfVisibles as $cf)
    @if($cf['clave'] === 'segundo_apellido')
    <div>
        <label class="block text-sm font-medium text-gray-700">
            {{ $cf['etiqueta'] }}@if($cf['requerido']) <span class="text-red-500">*</span>@endif
        </label>
        <input type="text" name="segundo_apellido" value="{{ old('segundo_apellido') }}"
               class="{{ $inp }}" {{ $cf['requerido'] ? 'required' : '' }}>
        <x-input-error class="mt-1" :messages="$errors->get('segundo_apellido')" />
    </div>
    @endif
@endforeach

<div>
    <label class="block text-sm font-medium text-gray-700">Correo Electrónico <span class="text-red-500">*</span></label>
    <input type="email" name="email" value="{{ old('email') }}"
           class="{{ $inp }}" required placeholder="tu@correo.com">
    <x-input-error class="mt-1" :messages="$errors->get('email')" />
</div>

<div>
    <label class="block text-sm font-medium text-gray-700">Teléfono <span class="text-red-500">*</span></label>
    <input type="tel" name="telefono" value="{{ old('telefono') }}"
           class="{{ $inp }}" required placeholder="10 dígitos">
    <x-input-error class="mt-1" :messages="$errors->get('telefono')" />
</div>

{{-- ════ CAMPOS CONFIGURABLES VISIBLES (en su orden) ═══════════════════════════ --}}

@foreach($cfVisibles as $cf)
    @php $req = $cf['requerido']; $clave = $cf['clave']; @endphp

    @if($clave === 'segundo_apellido')
        {{-- ya se renderizó arriba junto al nombre --}}

    @elseif($clave === 'rango_edad')
    <div>
        <label class="block text-sm font-medium text-gray-700">
            {{ $cf['etiqueta'] }}@if($req) <span class="text-red-500">*</span>@endif
        </label>
        <select name="rango_edad" class="{{ $inp }}" {{ $req ? 'required' : '' }}>
            <option value="">Selecciona...</option>
            <option value="menos_18"  {{ old('rango_edad') === 'menos_18'  ? 'selected' : '' }}>Menos de 18</option>
            <option value="18_25"     {{ old('rango_edad') === '18_25'     ? 'selected' : '' }}>18 – 25 años</option>
            <option value="26_35"     {{ old('rango_edad') === '26_35'     ? 'selected' : '' }}>26 – 35 años</option>
            <option value="36_50"     {{ old('rango_edad') === '36_50'     ? 'selected' : '' }}>36 – 50 años</option>
            <option value="51_mas"    {{ old('rango_edad') === '51_mas'    ? 'selected' : '' }}>51 años o más</option>
        </select>
        <x-input-error class="mt-1" :messages="$errors->get('rango_edad')" />
    </div>

    @elseif($clave === 'genero')
    <div>
        <label class="block text-sm font-medium text-gray-700">
            {{ $cf['etiqueta'] }}@if($req) <span class="text-red-500">*</span>@endif
        </label>
        <select name="genero" class="{{ $inp }}" {{ $req ? 'required' : '' }}>
            <option value="">Selecciona...</option>
            <option value="M" {{ old('genero') === 'M' ? 'selected' : '' }}>Masculino</option>
            <option value="F" {{ old('genero') === 'F' ? 'selected' : '' }}>Femenino</option>
            <option value="O" {{ old('genero') === 'O' ? 'selected' : '' }}>Prefiero no decir</option>
        </select>
        <x-input-error class="mt-1" :messages="$errors->get('genero')" />
    </div>

    @elseif($clave === 'curp')
    <div>
        <label class="block text-sm font-medium text-gray-700">
            {{ $cf['etiqueta'] }}@if($req) <span class="text-red-500">*</span>@endif
        </label>
        <input type="text" name="curp" value="{{ old('curp') }}"
               class="{{ $inp }} uppercase" maxlength="18" placeholder="18 caracteres"
               {{ $req ? 'required' : '' }}>
        <x-input-error class="mt-1" :messages="$errors->get('curp')" />
    </div>

    @elseif($clave === 'fecha_nacimiento')
    <div>
        <label class="block text-sm font-medium text-gray-700">
            {{ $cf['etiqueta'] }}@if($req) <span class="text-red-500">*</span>@endif
        </label>
        <input type="date" name="fecha_nacimiento" value="{{ old('fecha_nacimiento') }}"
               class="{{ $inp }}" {{ $req ? 'required' : '' }}>
        <x-input-error class="mt-1" :messages="$errors->get('fecha_nacimiento')" />
    </div>

    @elseif($clave === 'cargo')
    <div>
        <label class="block text-sm font-medium text-gray-700">
            {{ $cf['etiqueta'] }}@if($req) <span class="text-red-500">*</span>@endif
        </label>
        <input type="text" name="cargo" value="{{ old('cargo') }}"
               class="{{ $inp }}" placeholder="Tu cargo o puesto"
               {{ $req ? 'required' : '' }}>
        <x-input-error class="mt-1" :messages="$errors->get('cargo')" />
    </div>

    @elseif($clave === 'sector_id')
    <div>
        <label class="block text-sm font-medium text-gray-700">
            {{ $cf['etiqueta'] }}@if($req) <span class="text-red-500">*</span>@endif
        </label>
        <select name="sector_id" class="{{ $inp }}" {{ $req ? 'required' : '' }}>
            <option value="">Selecciona tu sector...</option>
            @foreach(\App\Models\Sector::orderBy('nombre')->get() as $sec)
                <option value="{{ $sec->id }}" {{ old('sector_id') == $sec->id ? 'selected' : '' }}>
                    {{ $sec->nombre }}
                </option>
            @endforeach
        </select>
        <x-input-error class="mt-1" :messages="$errors->get('sector_id')" />
    </div>

    @endif
@endforeach

{{-- Estado y Municipio — siempre al final de los fijos --}}
<div>
    <label class="block text-sm font-medium text-gray-700">Estado <span class="text-red-500">*</span></label>
    <select name="estado_id" class="{{ $inp }}" id="select-estado" required>
        <option value="">Selecciona tu estado...</option>
        @foreach(\App\Models\Estado::orderBy('nombre')->get() as $est)
            <option value="{{ $est->id }}" {{ old('estado_id') == $est->id ? 'selected' : '' }}>
                {{ $est->nombre }}
            </option>
        @endforeach
    </select>
    <x-input-error class="mt-1" :messages="$errors->get('estado_id')" />
</div>

<div>
    <label class="block text-sm font-medium text-gray-700">Municipio <span class="text-red-500">*</span></label>
    <select name="municipio_id" class="{{ $inp }}" id="select-municipio" required>
        <option value="">Primero selecciona un estado...</option>
        @if(old('estado_id'))
            @foreach(\App\Models\Municipio::where('estado_id', old('estado_id'))->orderBy('nombre')->get() as $mun)
                <option value="{{ $mun->id }}" {{ old('municipio_id') == $mun->id ? 'selected' : '' }}>
                    {{ $mun->nombre }}
                </option>
            @endforeach
        @endif
    </select>
    <x-input-error class="mt-1" :messages="$errors->get('municipio_id')" />
</div>

@once
<script>
(function(){
    const selEstado = document.getElementById('select-estado');
    const selMunicipio = document.getElementById('select-municipio');
    if (!selEstado || !selMunicipio) return;

    selEstado.addEventListener('change', function() {
        const id = this.value;
        selMunicipio.innerHTML = '<option value="">Cargando...</option>';
        if (!id) { selMunicipio.innerHTML = '<option value="">Primero selecciona un estado...</option>'; return; }
        fetch(`/api/municipios/${id}`)
            .then(r => r.json())
            .then(data => {
                selMunicipio.innerHTML = '<option value="">Selecciona tu municipio...</option>';
                data.forEach(m => {
                    const o = document.createElement('option');
                    o.value = m.id; o.textContent = m.nombre;
                    selMunicipio.appendChild(o);
                });
            });
    });
})();
</script>
@endonce