@php
    $ind           = isset($indice) ? "[$indice]" : '';
    $nombre        = "campos[{$campo->id}]{$ind}";
    $oldRaw        = old("campos.{$campo->id}" . (isset($indice) ? ".{$indice}" : ''));
    $oldVal        = is_array($oldRaw) ? null : $oldRaw;   // checkbox arrays no se pasan como :value
    $oldArr        = is_array($oldRaw) ? $oldRaw : [];     // solo para checkboxes múltiples
    $esCondicional = !is_null($campo->campo_condicional_id);
    $cls = "border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm w-full";
@endphp

<div class="campo-field {{ $esCondicional ? 'campo-condicional' : '' }}"
     id="campo-wrapper-{{ $campo->id }}{{ isset($indice) ? '-'.$indice : '' }}"
     style="{{ $esCondicional ? 'display:none' : '' }}"
     @if($esCondicional)
         data-padre="{{ $campo->campo_condicional_id }}"
         data-valor="{{ $campo->valor_condicional }}"
     @endif>

    @php $tipo = $campo->tipo; @endphp

    {{-- ════════════ CONTENIDO DEL CAMPO (input, label, etc.) ════════════════ --}}

    @if($tipo === 'heading')
        {{-- Encabezado / separador visual — no genera input --}}
        <div class="pt-1 pb-0">
            <h3 class="text-base font-bold text-gray-700 border-b border-gray-200 pb-2">
                {{ $campo->etiqueta }}
            </h3>
            @if($campo->ayuda)
                <p class="text-xs text-gray-400 mt-1">{{ $campo->ayuda }}</p>
            @endif
        </div>

    @elseif($tipo === 'checkbox' && !$campo->tieneOpciones())
        <label class="flex items-center gap-3 cursor-pointer">
            <input type="checkbox" name="{{ $nombre }}" value="1"
                   id="campo-{{ $campo->id }}{{ $ind }}"
                   data-campo-id="{{ $campo->id }}"
                   class="rounded border-gray-300 text-indigo-600 shadow-sm campo-trigger"
                   {{ $oldVal ? 'checked' : '' }}
                   {{ $campo->requerido ? 'required' : '' }}>
            <span class="text-sm font-bold text-gray-700">
                {{ $campo->etiqueta }}
                @if($campo->requerido)<span class="text-red-500 ml-0.5">*</span>@endif
            </span>
        </label>

    @elseif($tipo === 'checkbox' && $campo->tieneOpciones())
        <x-input-label :value="$campo->etiqueta . ($campo->requerido ? ' *' : '')" class="font-bold mb-2" />
        <div class="space-y-2">
            @foreach($campo->opciones as $op)
                <label class="flex items-center gap-3 cursor-pointer">
                    <input type="checkbox" name="{{ $nombre }}[]" value="{{ $op->valor }}"
                           id="campo-{{ $campo->id }}-{{ $loop->index }}{{ $ind }}"
                           class="rounded border-gray-300 text-indigo-600 shadow-sm"
                           {{ in_array($op->valor, $oldArr) ? 'checked' : '' }}>
                    <span class="text-sm text-gray-700">{{ $op->etiqueta }}</span>
                </label>
            @endforeach
        </div>

    @elseif($tipo === 'radio')
        <x-input-label :value="$campo->etiqueta . ($campo->requerido ? ' *' : '')" class="font-bold mb-2" />
        <div class="space-y-2">
            @foreach($campo->opciones as $op)
                <label class="flex items-center gap-3 cursor-pointer">
                    <input type="radio" name="{{ $nombre }}" value="{{ $op->valor }}"
                           id="campo-{{ $campo->id }}-{{ $loop->index }}{{ $ind }}"
                           data-campo-id="{{ $campo->id }}"
                           class="border-gray-300 text-indigo-600 shadow-sm campo-trigger"
                           {{ $oldVal == $op->valor ? 'checked' : '' }}
                           {{ $campo->requerido ? 'required' : '' }}>
                    <span class="text-sm text-gray-700">{{ $op->etiqueta }}</span>
                </label>
            @endforeach
        </div>

    @elseif($tipo === 'select')
        <x-input-label for="campo-{{ $campo->id }}{{ $ind }}"
            :value="$campo->etiqueta . ($campo->requerido ? ' *' : '')" class="font-bold" />
        <select name="{{ $nombre }}" id="campo-{{ $campo->id }}{{ $ind }}"
                data-campo-id="{{ $campo->id }}"
                class="{{ $cls }} campo-trigger mt-1"
                {{ $campo->requerido ? 'required' : '' }}>
            <option value="">{{ $campo->placeholder ?: 'Seleccione...' }}</option>
            @foreach($campo->opciones as $op)
                <option value="{{ $op->valor }}" {{ $oldVal == $op->valor ? 'selected' : '' }}>
                    {{ $op->etiqueta }}
                </option>
            @endforeach
        </select>

    @elseif($tipo === 'textarea')
        <x-input-label for="campo-{{ $campo->id }}{{ $ind }}"
            :value="$campo->etiqueta . ($campo->requerido ? ' *' : '')" class="font-bold" />
        <textarea name="{{ $nombre }}" id="campo-{{ $campo->id }}{{ $ind }}"
                  rows="3" placeholder="{{ $campo->placeholder }}"
                  data-campo-id="{{ $campo->id }}"
                  class="{{ $cls }} campo-trigger mt-1"
                  {{ $campo->requerido ? 'required' : '' }}>{{ $oldVal }}</textarea>

    @else
        {{-- text, number, date, email, phone --}}
        <x-input-label for="campo-{{ $campo->id }}{{ $ind }}"
            :value="$campo->etiqueta . ($campo->requerido ? ' *' : '')" class="font-bold" />
        <x-text-input type="{{ $tipo === 'phone' ? 'tel' : ($tipo === 'datetime' ? 'datetime-local' : $tipo) }}"
               name="{{ $nombre }}" id="campo-{{ $campo->id }}{{ $ind }}"
               :value="$oldVal ?? ''"
               :placeholder="$campo->placeholder ?? ''"
               data-campo-id="{{ $campo->id }}"
               class="w-full campo-trigger mt-1"
               :required="$campo->requerido" />
    @endif

    @if($tipo !== 'heading' && $campo->ayuda)
        <p class="mt-1 text-xs text-gray-400">{{ $campo->ayuda }}</p>
    @endif

    {{-- ════════════ GRUPO REPETIBLE ══════════════════════════════════════════
         Un campo puede ser condicional Y repetible al mismo tiempo.
         Sus subcampos son hijos via campo_condicional_id (misma FK).
         Aquí los renderizamos dentro del contenedor sortable.
    ═══════════════════════════════════════════════════════════════════════ --}}
    @if($campo->es_grupo_repetible)
        @php $subs = $campo->subcampos; @endphp

        @if($subs && $subs->isNotEmpty())
            <div class="grupo-repetible-container mt-3 border border-gray-200 rounded-xl p-4 bg-gray-50"
                 data-campo-id="{{ $campo->id }}"
                 data-max="{{ $campo->max_repeticiones ?: 99 }}">

                <div class="grupo-repetible-items space-y-3">
                    <div class="repeticion-item border border-gray-200 bg-white rounded-xl p-4 space-y-4 relative">
                        @foreach($subs as $sub)
                            @php $subNombre = "campos[{$campo->id}][0][{$sub->id}]"; @endphp
                            <div>
                                <x-input-label :value="$sub->etiqueta . ($sub->requerido ? ' *' : '')" class="font-bold" />
                                @if($sub->tipo === 'textarea')
                                    <textarea name="{{ $subNombre }}" rows="2"
                                        placeholder="{{ $sub->placeholder }}"
                                        class="{{ $cls }} mt-1"
                                        {{ $sub->requerido ? 'required' : '' }}></textarea>
                                @elseif($sub->tipo === 'select')
                                    <select name="{{ $subNombre }}" class="{{ $cls }} mt-1"
                                        {{ $sub->requerido ? 'required' : '' }}>
                                        <option value="">{{ $sub->placeholder ?: 'Seleccione...' }}</option>
                                        @foreach($sub->opciones as $op)
                                            <option value="{{ $op->valor }}">{{ $op->etiqueta }}</option>
                                        @endforeach
                                    </select>
                                @else
                                    <x-text-input
                                        type="{{ $sub->tipo === 'phone' ? 'tel' : ($sub->tipo === 'datetime' ? 'datetime-local' : $sub->tipo) }}"
                                        name="{{ $subNombre }}"
                                        :placeholder="$sub->placeholder ?? ''"
                                        class="w-full mt-1"
                                        :required="$sub->requerido" />
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>

                <button type="button"
                        class="mt-3 inline-flex items-center gap-1.5 px-4 py-2 border border-indigo-300 rounded-lg
                               text-sm font-bold text-indigo-600 bg-white hover:bg-indigo-50 transition btn-add-repeticion"
                        data-campo-id="{{ $campo->id }}">
                    <span class="text-lg leading-none">+</span> Agregar otro
                </button>
            </div>
        @else
            <p class="mt-2 text-xs text-amber-600 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
                Este campo repetible aún no tiene sub-campos configurados.
            </p>
        @endif

    @else
        {{-- ════════ CAMPOS CONDICIONALES hijos (solo si NO es grupo repetible) ════
             Los hijos de un repetible ya se renderizaron arriba como subcampos.
        ═══════════════════════════════════════════════════════════════════════ --}}
        @foreach($campo->camposCondicionales as $hijo)
            @include('publico._campo_item', ['campo' => $hijo, 'nivel' => $nivel + 1])
        @endforeach
    @endif

</div>