@php
    $campo    = $campo ?? null;
    $editing  = !is_null($campo);
    $tiposArr = $tipos ?? \App\Models\FormCampo::tiposDisponibles();
    $tiposCon = \App\Models\FormCampo::TIPOS_CON_OPCIONES;
@endphp

<div class="grid grid-cols-1 lg:grid-cols-5 gap-6">

    {{-- Columna principal (3/5) --}}
    <div class="lg:col-span-3 space-y-4">

        {{-- Etiqueta --}}
        <div>
            <x-input-label value="Etiqueta *" />
            <x-text-input name="etiqueta" type="text" class="mt-1 block w-full"
                value="{{ old('etiqueta', $campo->etiqueta ?? '') }}"
                placeholder="Ej: ¿Tiene acompañantes?" required />
            <p class="mt-1 text-xs text-gray-500">Texto visible al usuario en el formulario.</p>
            <x-input-error class="mt-1" :messages="$errors->get('etiqueta')" />
        </div>

        {{-- Tipo --}}
        <div>
            <x-input-label value="Tipo de campo *" />
            <select name="tipo" id="tipo-select"
                class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500" required>
                @foreach($tiposArr as $val => $label)
                    <option value="{{ $val }}" {{ old('tipo', $campo->tipo ?? '') == $val ? 'selected' : '' }}>{{ $label }}</option>
                @endforeach
            </select>
            <x-input-error class="mt-1" :messages="$errors->get('tipo')" />
        </div>

        {{-- Placeholder --}}
        <div id="placeholder-row">
            <x-input-label value="Placeholder" />
            <x-text-input name="placeholder" type="text" class="mt-1 block w-full"
                value="{{ old('placeholder', $campo->placeholder ?? '') }}"
                placeholder="Texto de ejemplo dentro del campo" />
        </div>

        {{-- Ayuda --}}
        <div id="ayuda-row">
            <x-input-label value="Texto de ayuda" />
            <x-text-input name="ayuda" type="text" class="mt-1 block w-full"
                value="{{ old('ayuda', $campo->ayuda ?? '') }}"
                placeholder="Se muestra debajo del campo" />
        </div>

        {{-- Opciones (select / radio / checkbox) --}}
        <div id="opciones-section" class="space-y-3" style="display:none">
            <x-input-label value="Opciones" />
            <div id="opciones-lista" class="space-y-2">
                @if($editing && $campo->tieneOpciones())
                    @foreach($campo->opciones as $i => $op)
                    <div class="flex gap-2 items-center opcion-row">
                        <input type="hidden" name="opciones[{{ $i }}][id]" value="{{ $op->id }}">
                        <x-text-input name="opciones[{{ $i }}][valor]" type="text" class="w-full"
                            placeholder="Valor (interno)" value="{{ $op->valor }}" required />
                        <x-text-input name="opciones[{{ $i }}][etiqueta]" type="text" class="w-full"
                            placeholder="Etiqueta (visible)" value="{{ $op->etiqueta }}" required />
                        <button type="button" class="btn-eliminar-opcion flex-shrink-0 text-red-400 hover:text-red-600 font-bold text-lg">✕</button>
                    </div>
                    @endforeach
                @endif
            </div>
            <button type="button" id="btn-add-opcion"
                class="inline-flex items-center px-3 py-1.5 border border-gray-300 rounded-lg text-xs font-bold text-gray-600 hover:bg-gray-50 transition">
                + Agregar opción
            </button>
        </div>

    </div>

    {{-- Columna lateral (2/5) --}}
    <div class="lg:col-span-2 space-y-4">

        <div class="bg-gray-50 rounded-2xl border border-gray-200 p-4 space-y-4">

            {{-- Categoría --}}
            @if(isset($categorias) && $categorias->count())
            <div>
                <x-input-label value="Categoría" />
                <select name="categoria_id"
                    class="mt-1 block w-full border-gray-300 rounded-md shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="">Sin categoría</option>
                    @foreach($categorias as $cat)
                        <option value="{{ $cat->id }}" {{ old('categoria_id', $campo->categoria_id ?? '') == $cat->id ? 'selected' : '' }}>
                            {{ $cat->nombre }}
                        </option>
                    @endforeach
                </select>
            </div>
            @endif

            {{-- Orden --}}
            <div>
                <x-input-label value="Orden" />
                <x-text-input name="orden" type="number" class="mt-1 block w-full"
                    value="{{ old('orden', $campo->orden ?? 0) }}" min="0" />
            </div>

            {{-- Switches --}}
            <div id="requerido-row" class="space-y-2 pt-2 border-t border-gray-200">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="hidden" name="requerido" value="0">
                    <input type="checkbox" name="requerido" value="1" id="chk-requerido"
                        class="rounded border-gray-300 text-indigo-600 shadow-sm"
                        {{ old('requerido', $campo->requerido ?? false) ? 'checked' : '' }}>
                    <span class="text-sm text-gray-700 font-medium">Campo requerido</span>
                </label>
                @if($editing)
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="hidden" name="activo" value="0">
                    <input type="checkbox" name="activo" value="1" id="chk-activo"
                        class="rounded border-gray-300 text-indigo-600 shadow-sm"
                        {{ old('activo', $campo->activo ?? true) ? 'checked' : '' }}>
                    <span class="text-sm text-gray-700 font-medium">Activo</span>
                </label>
                @endif
            </div>

            <div class="pt-2 border-t border-gray-200 space-y-3">
                <p class="text-xs font-bold text-gray-500 uppercase tracking-wider">Campo condicional</p>
                <p class="text-xs text-gray-400">Solo aparece si otro campo tiene cierto valor.</p>

                <div>
                    <x-input-label value="Depende de" />
                    <select name="campo_condicional_id" id="campo-padre-select"
                        class="mt-1 block w-full border-gray-300 rounded-md shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">Siempre visible</option>
                        @foreach($camposExistentes as $ce)
                            <option value="{{ $ce->id }}"
                                    data-tipo="{{ $ce->tipo }}"
                                    data-opciones="{{ $ce->opciones->pluck('valor','etiqueta')->toJson() }}"
                                {{ old('campo_condicional_id', $campo->campo_condicional_id ?? '') == $ce->id ? 'selected' : '' }}>
                                {{ $ce->etiqueta }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div id="valor-condicional-row" style="{{ old('campo_condicional_id', $campo->campo_condicional_id ?? '') ? '' : 'display:none' }}">
                    <x-input-label value="Cuando el valor sea" />
                    <select name="valor_condicional" id="valor-condicional-select"
                        class="mt-1 block w-full border-gray-300 rounded-md shadow-sm text-sm">
                        <option value="">-- Selecciona --</option>
                    </select>
                    <x-text-input name="valor_condicional_texto" id="valor-condicional-texto" type="text"
                        class="mt-1 block w-full" placeholder="Escribe el valor"
                        value="{{ old('valor_condicional', $campo->valor_condicional ?? '') }}"
                        style="display:none" />
                </div>
            </div>

            <div id="grupo-repetible-row" class="pt-2 border-t border-gray-200 space-y-2">
                    <input type="checkbox" name="es_grupo_repetible" value="1" id="chk-repetible"
                        class="mt-0.5 rounded border-gray-300 text-indigo-600 shadow-sm"
                        {{ old('es_grupo_repetible', $campo->es_grupo_repetible ?? false) ? 'checked' : '' }}>
                    <span>
                        <span class="text-sm text-gray-700 font-medium">Grupo repetible</span>
                        <span class="block text-xs text-gray-400">Ej: nombre y teléfono de acompañantes</span>
                    </span>
                </label>
                <div id="max-rep-row" style="{{ old('es_grupo_repetible', $campo->es_grupo_repetible ?? false) ? '' : 'display:none' }}">
                    <x-input-label value="Máx. repeticiones" />
                    <x-text-input name="max_repeticiones" type="number" class="mt-1 block w-full"
                        value="{{ old('max_repeticiones', $campo->max_repeticiones ?? '') }}"
                        min="1" placeholder="Sin límite" />
                </div>
            </div>

        </div>
    </div>
</div>

{{-- Template para nuevas opciones --}}
<template id="opcion-template">
    <div class="flex gap-2 items-center opcion-row">
        <input type="text" name="opciones[__INDEX__][valor]"
            class="w-full border-gray-300 rounded-md shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500"
            placeholder="Valor (interno)" required>
        <input type="text" name="opciones[__INDEX__][etiqueta]"
            class="w-full border-gray-300 rounded-md shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500"
            placeholder="Etiqueta (visible)" required>
        <button type="button" class="btn-eliminar-opcion flex-shrink-0 text-red-400 hover:text-red-600 font-bold text-lg">✕</button>
    </div>
</template>