<div>
    <div wire:sortable="updateOrder">
        @foreach($fields as $index => $field)
            <div class="row mb-3" wire:sortable.item="{{ $field['id'] }}" wire:key="item-{{ $field['id'] }}">
                <div class="col" style="display: flex; justify-content: center; align-items: center; text-align: center; gap: 5px;">
                    <span class="cil-hamburger-menu" wire:sortable.handle style="cursor:move;"></span>

                    <input type="text" class="form-control" placeholder="Alan Adı" wire:model.live="fields.{{ $index }}.name">
                    @error('fields.' . $index . '.name') <span class="text-danger">{{ $message }}</span> @enderror
                </div>

                <div class="col">
                    <input type="text" class="form-control" placeholder="Alan Başlığı" wire:model.live="fields.{{ $index }}.title">
                    @error('fields.' . $index . '.title') <span class="text-danger">{{ $message }}</span> @enderror
                </div>

                <div class="col">
                    <select class="form-select" wire:model.live="fields.{{ $index }}.type">
                        <option value="">Alan Tipi Seçiniz</option>
                        @foreach($this->fieldTypes as $ft)
                            <option value="{{ $ft->id }}">{{ $ft->name }}</option>
                        @endforeach
                    </select>
                    @error('fields.' . $index . '.type') <span class="text-danger">{{ $message }}</span> @enderror
                </div>

                <div class="col">
                    <input type="text" class="form-control" placeholder="Placeholder" wire:model.live="fields.{{ $index }}.placeholder">
                </div>

                <div class="col">
                    <select class="form-select" wire:model.live="fields.{{ $index }}.required">
                        <option value="">Zorunlu mu?</option>
                        <option value="1">Evet</option>
                        <option value="0">Hayır</option>
                    </select>
                    @error('fields.' . $index . '.required') <span class="text-danger">{{ $message }}</span> @enderror
                </div>

                <div class="col-auto">
                    <button class="btn btn-danger text-white" wire:click.prevent="removeField({{ $index }})">
                        <span class="cil-trash"></span>
                    </button>
                </div>
            </div>
        @endforeach
    </div>

    <div class="row mb-3">
        <div class="col-auto">
            <button class="btn btn-secondary text-white" wire:click.prevent="addField">
                <span class="cil-plus"></span>
                Yeni Alan Ekle
            </button>
        </div>

        @if(count($fields) > 0)
            <div class="col-auto">
            <button class="btn btn-primary" wire:click.prevent="save">Kaydet</button>
            </div>
        @endif
    </div>
</div>
