{{--
    Campos fijos CONFIGURABLES del formulario de registro.
    Los campos bloqueados (nombre, email, etc.) ya están hardcodeados en registro.blade.php.
    Este partial renderiza solo los configurables activados, en el orden definido en admin.
    Se incluye DESPUÉS de los campos bloqueados en registro.blade.php.
--}}

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

    // Traemos TODOS los campos en su orden, para respetar la posición relativa
    // entre los bloqueados y los configurables según lo definió el admin.
    // Los bloqueados ya se renderizan en el padre — aquí solo pintamos los visibles no-bloqueados.
    $cfgTodos = collect(CamposFijosController::getConfigEstatica($congreso))
                    ->where('bloqueado', false)
                    ->where('visible', true)
                    ->sortBy('orden')
                    ->values();
@endphp

@foreach($cfgTodos as $cf)
    @php $req = $cf['requerido'] ?? false; @endphp

    {{-- ── SEGUNDO APELLIDO ──────────────────────────────────────────────── --}}
    @if($cf['clave'] === 'segundo_apellido')
    <div>
        <x-input-label for="segundo_apellido" :value="$cf['etiqueta']" class="font-bold" />
        <x-text-input id="segundo_apellido" name="segundo_apellido" type="text"
            :value="old('segundo_apellido')" class="w-full"
            :required="$req" />
        @if(!$req)<p class="text-xs text-gray-400 mt-1">Opcional</p>@endif
        <x-input-error :messages="$errors->get('segundo_apellido')" class="mt-2" />
    </div>

    {{-- ── CURP ───────────────────────────────────────────────────────────── --}}
    @elseif($cf['clave'] === 'curp')
    <div>
        <x-input-label for="curp" :value="$cf['etiqueta']" class="font-bold" />
        <x-text-input id="curp" name="curp" type="text"
            :value="old('curp')" class="w-full uppercase"
            maxlength="18" placeholder="18 caracteres"
            :required="$req" />
        @if(!$req)<p class="text-xs text-gray-400 mt-1">Opcional</p>@endif
        <x-input-error :messages="$errors->get('curp')" class="mt-2" />
    </div>

    {{-- ── FECHA DE NACIMIENTO ─────────────────────────────────────────────── --}}
    @elseif($cf['clave'] === 'fecha_nacimiento')
    <div>
        <x-input-label for="fecha_nacimiento" :value="$cf['etiqueta']" class="font-bold" />
        <x-text-input id="fecha_nacimiento" name="fecha_nacimiento" type="date"
            :value="old('fecha_nacimiento')" class="w-full"
            :required="$req" />
        @if(!$req)<p class="text-xs text-gray-400 mt-1">Opcional</p>@endif
        <x-input-error :messages="$errors->get('fecha_nacimiento')" class="mt-2" />
    </div>

    {{-- ── GÉNERO ──────────────────────────────────────────────────────────── --}}
    @elseif($cf['clave'] === 'genero')
    <div>
        <x-input-label for="genero" :value="$cf['etiqueta']" class="font-bold" />
        <select id="genero" name="genero"
            {{ $req ? 'required' : '' }}
            class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm w-full">
            <option value="">Seleccione...</option>
            <option value="M" @selected(old('genero') === 'M')>Masculino</option>
            <option value="F" @selected(old('genero') === 'F')>Femenino</option>
            <option value="O" @selected(old('genero') === 'O')>Prefiero no decir</option>
        </select>
        @if(!$req)<p class="text-xs text-gray-400 mt-1">Opcional</p>@endif
        <x-input-error :messages="$errors->get('genero')" class="mt-2" />
    </div>

    {{-- ── CARGO ───────────────────────────────────────────────────────────── --}}
    @elseif($cf['clave'] === 'cargo')
    <div>
        <x-input-label for="cargo" :value="$cf['etiqueta']" class="font-bold" />
        <x-text-input id="cargo" name="cargo" type="text"
            :value="old('cargo')" class="w-full"
            placeholder="Tu cargo o puesto"
            :required="$req" />
        @if(!$req)<p class="text-xs text-gray-400 mt-1">Opcional</p>@endif
        <x-input-error :messages="$errors->get('cargo')" class="mt-2" />
    </div>

    {{-- ── RANGO DE EDAD ───────────────────────────────────────────────────── --}}
    @elseif($cf['clave'] === 'rango_edad')
    <div>
        <x-input-label for="rango_edad" :value="$cf['etiqueta']" class="font-bold" />
        <select id="rango_edad" name="rango_edad"
            {{ $req ? 'required' : '' }}
            class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm w-full">
            <option value="">Seleccione...</option>
            @foreach($rangos_edad as $rango)
                <option value="{{ $rango }}" @selected(old('rango_edad') == $rango)>{{ $rango }}</option>
            @endforeach
        </select>
        @if(!$req)<p class="text-xs text-gray-400 mt-1">Opcional</p>@endif
        <x-input-error :messages="$errors->get('rango_edad')" class="mt-2" />
    </div>

    {{-- ── SECTOR + DEPENDENCIAS ───────────────────────────────────────────── --}}
    @elseif($cf['clave'] === 'sector_id')
    <div>
        <x-input-label for="sector_id" :value="$cf['etiqueta']" class="font-bold" />
        <select id="sector_id" name="sector_id"
            {{ $req ? 'required' : '' }}
            x-model="sectorSeleccionado"
            @change="actualizarLogicaSector()"
            class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm w-full">
            <option value="">Seleccione su sector...</option>
            @foreach($sectores as $sector)
                <option value="{{ $sector->id }}" @selected(old('sector_id') == $sector->id)>
                    {{ $sector->nombre }}
                </option>
            @endforeach
        </select>
        @if(!$req)<p class="text-xs text-gray-400 mt-1">Opcional</p>@endif
        <x-input-error :messages="$errors->get('sector_id')" class="mt-2" />
    </div>

    {{-- Sub-bloques de dependencia según tipo de sector --}}
    @if($dependencias_municipales->count() > 0 || $dependencias_estatales->count() > 0)
    <div x-show="sectorTipoLogica === 'oic'" x-transition
         class="p-4 bg-gray-50 rounded-xl border border-gray-200 space-y-4">
        <x-input-label value="Tipo de Órgano de Control" class="font-bold" />
        <div class="flex gap-6">
            @if($dependencias_municipales->count() > 0)
            <label class="flex items-center gap-2 cursor-pointer">
                <input type="radio" name="tipo_oic" value="municipal" x-model="tipoOIC"
                    class="border-gray-300 text-indigo-600 focus:ring-indigo-500">
                <span class="text-sm">Municipal</span>
            </label>
            @endif
            @if($dependencias_estatales->count() > 0)
            <label class="flex items-center gap-2 cursor-pointer">
                <input type="radio" name="tipo_oic" value="estatal" x-model="tipoOIC"
                    class="border-gray-300 text-indigo-600 focus:ring-indigo-500">
                <span class="text-sm">Estatal</span>
            </label>
            @endif
        </div>
        @if($dependencias_municipales->count() > 0)
        <div x-show="tipoOIC === 'municipal'">
            <x-input-label value="Municipio (OIC)" class="font-bold" />
            <select name="detalle_procedencia_oic_mun"
                class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm w-full mt-1">
                <option value="">Seleccione...</option>
                @foreach($dependencias_municipales as $dep)
                    <option value="{{ $dep->nombre }}" @selected(old('detalle_procedencia_oic_mun') == $dep->nombre)>
                        {{ $dep->nombre }}
                    </option>
                @endforeach
            </select>
        </div>
        @endif
        @if($dependencias_estatales->count() > 0)
        <div x-show="tipoOIC === 'estatal'">
            <x-input-label value="Dependencia (OIC)" class="font-bold" />
            <select name="detalle_procedencia_oic_est"
                class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm w-full mt-1">
                <option value="">Seleccione...</option>
                @foreach($dependencias_estatales as $dep)
                    <option value="{{ $dep->nombre }}" @selected(old('detalle_procedencia_oic_est') == $dep->nombre)>
                        {{ $dep->nombre }}
                    </option>
                @endforeach
            </select>
        </div>
        @endif
    </div>
    @endif

    @if($dependencias_estatales->count() > 0)
    <div x-show="sectorTipoLogica === 'servidor_publico'" x-transition
         class="p-4 bg-gray-50 rounded-xl border border-gray-200">
        <x-input-label value="Dependencia" class="font-bold" />
        <select name="detalle_procedencia_servidor"
            class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm w-full mt-1">
            <option value="">Seleccione...</option>
            @foreach($dependencias_estatales as $dep)
                <option value="{{ $dep->nombre }}" @selected(old('detalle_procedencia_servidor') == $dep->nombre)>
                    {{ $dep->nombre }}
                </option>
            @endforeach
        </select>
    </div>
    @endif

    @if($dependencias_educativas->count() > 0)
    <div x-show="sectorTipoLogica === 'educativo'" x-transition
         class="p-4 bg-gray-50 rounded-xl border border-gray-200">
        <x-input-label value="Institución educativa" class="font-bold" />
        <select name="detalle_procedencia_educativo"
            class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm w-full mt-1">
            <option value="">Seleccione...</option>
            @foreach($dependencias_educativas as $dep)
                <option value="{{ $dep->nombre }}" @selected(old('detalle_procedencia_educativo') == $dep->nombre)>
                    {{ $dep->nombre }}
                </option>
            @endforeach
        </select>
    </div>
    @endif

    @if($dependencias_autonomas->count() > 0)
    <div x-show="sectorTipoLogica === 'autonomo'" x-transition
         class="p-4 bg-gray-50 rounded-xl border border-gray-200">
        <x-input-label value="Organismo autónomo" class="font-bold" />
        <select name="detalle_procedencia_autonomo"
            class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm w-full mt-1">
            <option value="">Seleccione...</option>
            @foreach($dependencias_autonomas as $dep)
                <option value="{{ $dep->nombre }}" @selected(old('detalle_procedencia_autonomo') == $dep->nombre)>
                    {{ $dep->nombre }}
                </option>
            @endforeach
        </select>
    </div>
    @endif

    <div x-show="sectorTipoLogica === 'ninguno'" x-transition
         class="p-4 bg-gray-50 rounded-xl border border-gray-200">
        <x-input-label value="Institución u organización" class="font-bold" />
        <x-text-input id="detalle_procedencia_texto" name="detalle_procedencia_texto" type="text"
            :value="old('detalle_procedencia_texto')" class="w-full mt-1" />
    </div>

    @endif

@endforeach