@php
    $depth = $depth ?? 0;
    $maxDepth = $maxDepth ?? 4;
    $iterableExpr = $iterableExpr ?? 'fields';
    $fieldVar = 'field' . $depth;
    $indexVar = 'index' . $depth;
    $nameBaseExpr = $nameBaseExpr ?? "'fields[' + {$indexVar} + ']'";
    $tableColumnTypes = $tableColumnTypes ?? \App\Models\FormField::TABLE_COLUMN_TYPES;
@endphp

<template x-for="({{ $fieldVar }}, {{ $indexVar }}) in {{ $iterableExpr }}" :key="{{ $fieldVar }}._uid">
    <div
        :class="{{ $fieldVar }}.type === 'group'
            ? 'border border-indigo-200 bg-indigo-50/40 rounded-xl {{ $depth === 0 ? 'p-5' : 'p-4' }} relative'
            : 'border border-slate-200 {{ $depth === 0 ? 'rounded-xl bg-slate-50/50 p-5' : 'rounded-lg bg-white p-4' }} relative {{ $depth === 0 ? 'hover:border-transtev-200 transition' : '' }}'">

        {{-- Toolbar haut-droite --}}
        <div class="absolute top-3 right-3 flex items-center gap-1 z-10">
            <button type="button" @click="moveUp({{ $iterableExpr }}, {{ $indexVar }})" x-show="{{ $indexVar }} > 0" class="text-slate-400 hover:text-slate-700 text-xs px-1.5" title="Monter">&#9650;</button>
            <button type="button" @click="moveDown({{ $iterableExpr }}, {{ $indexVar }})" x-show="{{ $indexVar }} < {{ $iterableExpr }}.length - 1" class="text-slate-400 hover:text-slate-700 text-xs px-1.5" title="Descendre">&#9660;</button>
            <button type="button" @click="removeField({{ $iterableExpr }}, {{ $indexVar }})" class="text-red-500 hover:text-red-700 text-xs font-medium ml-1">Suppr.</button>
        </div>

        {{-- Badge groupe --}}
        <template x-if="{{ $fieldVar }}.type === 'group'">
            <span class="inline-flex items-center gap-1 text-xs font-semibold text-indigo-700 bg-indigo-100 px-2 py-1 rounded-md mb-3">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14-7H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2z"/></svg>
                Groupe
            </span>
        </template>

        <template x-if="{{ $fieldVar }}.id">
            <input type="hidden" :name="{{ $nameBaseExpr }} + '[id]'" :value="{{ $fieldVar }}.id">
        </template>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 pr-24">
            <div :class="{{ $fieldVar }}.type === 'group' ? 'md:col-span-2' : ''">
                <label class="block text-sm font-medium text-slate-700 mb-1">
                    <span x-text="{{ $fieldVar }}.type === 'group' ? 'Titre du groupe' : 'Libelle du champ'"></span>
                </label>
                <input type="text" :name="{{ $nameBaseExpr }} + '[label]'" x-model="{{ $fieldVar }}.label" class="input-modern" required>
            </div>
            <div x-show="{{ $fieldVar }}.type !== 'group'">
                <label class="block text-sm font-medium text-slate-700 mb-1">Type</label>
                <select :name="{{ $nameBaseExpr }} + '[type]'" x-model="{{ $fieldVar }}.type" @change="onTypeChange({{ $fieldVar }})" class="input-modern">
                    @foreach($fieldTypes as $type)
                        <option value="{{ $type }}">{{ ucfirst(str_replace('_', ' ', $type)) }}</option>
                    @endforeach
                </select>
            </div>
            <template x-if="{{ $fieldVar }}.type === 'group'">
                <input type="hidden" :name="{{ $nameBaseExpr }} + '[type]'" value="group">
            </template>

            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-slate-700 mb-1">
                    Texte explicatif <span class="text-slate-400 font-normal">(optionnel)</span>
                </label>
                <textarea :name="{{ $nameBaseExpr }} + '[description]'" x-model="{{ $fieldVar }}.description" rows="2"
                          class="input-modern resize-y"
                          placeholder="Ex : Indiquez la date au format JJ/MM/AAAA, joignez un PDF de moins de 5 Mo..."></textarea>
            </div>

            <div x-show="['select','radio','checkbox_group'].includes({{ $fieldVar }}.type)" class="md:col-span-2">
                <label class="block text-sm font-medium text-slate-700 mb-1">Options (separees par virgule)</label>
                <input type="text" :name="{{ $nameBaseExpr }} + '[options]'" x-model="{{ $fieldVar }}.options" class="input-modern" placeholder="Option 1, Option 2, Option 3">
            </div>

            <div class="flex items-end" x-show="{{ $fieldVar }}.type !== 'group'">
                <label class="inline-flex items-center gap-2">
                    <input type="hidden" :name="{{ $nameBaseExpr }} + '[required]'" value="0">
                    <input type="checkbox" :name="{{ $nameBaseExpr }} + '[required]'" value="1" x-model="{{ $fieldVar }}.required" class="rounded border-slate-300 text-transtev-600">
                    <span class="text-sm text-slate-600">Obligatoire</span>
                </label>
            </div>
        </div>

        {{-- Sous-builder colonnes pour type table --}}
        <div x-show="{{ $fieldVar }}.type === 'table'" class="mt-5 pt-5 border-t border-slate-200 pr-24">
            <h4 class="text-sm font-semibold text-slate-800 mb-3">Colonnes du tableau</h4>
            <template x-for="(col, colIndex) in {{ $fieldVar }}.columns" :key="colIndex">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-3 p-3 bg-white rounded-lg border border-slate-100">
                    <div>
                        <label class="block text-xs font-medium text-slate-600 mb-1">Libelle colonne</label>
                        <input type="text" :name="{{ $nameBaseExpr }} + '[columns][' + colIndex + '][label]'" x-model="col.label" class="input-modern text-sm" required>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-600 mb-1">Type</label>
                        <select :name="{{ $nameBaseExpr }} + '[columns][' + colIndex + '][type]'" x-model="col.type" class="input-modern text-sm">
                            @foreach($tableColumnTypes as $colType)
                                <option value="{{ $colType }}">{{ ucfirst($colType) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex items-end gap-2">
                        <div class="flex-1" x-show="col.type === 'select'">
                            <label class="block text-xs font-medium text-slate-600 mb-1">Options (virgule)</label>
                            <input type="text" :name="{{ $nameBaseExpr }} + '[columns][' + colIndex + '][options]'" x-model="col.options" class="input-modern text-sm" placeholder="A, B, C">
                        </div>
                        <button type="button" @click="removeColumn({{ $fieldVar }}, colIndex)" class="text-red-500 text-xs hover:underline shrink-0 pb-2" x-show="{{ $fieldVar }}.columns.length > 1">Suppr.</button>
                    </div>
                </div>
            </template>
            <button type="button" @click="addColumn({{ $fieldVar }})" class="text-sm text-transtev-600 font-medium hover:underline">+ Ajouter une colonne</button>
        </div>

        {{-- Sous-champs pour groupes --}}
        <template x-if="{{ $fieldVar }}.type === 'group'">
            <div class="mt-4 space-y-3">
                <div class="space-y-3 pl-4 border-l-2 border-indigo-200">
                    @if($depth < $maxDepth)
                        @include('partials.form-builder-row', [
                            'iterableExpr' => $fieldVar . '.children',
                            'depth' => $depth + 1,
                            'maxDepth' => $maxDepth,
                            'nameBaseExpr' => $nameBaseExpr . " + '[children][' + index" . ($depth + 1) . " + ']'",
                            'fieldTypes' => $fieldTypes,
                            'tableColumnTypes' => $tableColumnTypes,
                        ])
                    @else
                        <p class="text-xs text-amber-700 bg-amber-50 border border-amber-100 rounded-lg px-3 py-2">
                            Profondeur maximale atteinte ({{ $maxDepth }} niveaux). Plus de sous-groupes ici.
                        </p>
                    @endif
                </div>
                <div class="flex flex-wrap gap-3 pl-4">
                    <button type="button" @click="addField({{ $fieldVar }}.children)" class="inline-flex items-center gap-1 text-transtev-600 text-xs font-semibold hover:text-transtev-700">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                        Ajouter un champ
                    </button>
                    @if($depth < $maxDepth)
                        <button type="button" @click="addGroup({{ $fieldVar }}.children)" class="inline-flex items-center gap-1 text-indigo-600 text-xs font-semibold hover:text-indigo-700">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14-7H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2z"/></svg>
                            Ajouter un sous-groupe
                        </button>
                    @endif
                </div>
            </div>
        </template>
    </div>
</template>
