<div class="bg-surface-2 rounded-2xl border border-border p-6">
    @if(session('success'))
        <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 3000)"
             class="mb-4 p-3 bg-success/10 border border-success/20 text-success rounded-xl text-sm">
            {{ session('success') }}
        </div>
    @endif

    <div class="flex items-start justify-between gap-4 mb-5">
        <div>
            <h2 class="text-lg font-semibold text-ink">{{ __('Custom Fields') }}</h2>
            <p class="text-sm text-muted mt-0.5">
                {{ __('Add fields to capture data specific to your business. They appear on every contact form and are available as merge variables in campaigns.') }}
            </p>
        </div>
    </div>

    {{-- ── ADD NEW FIELD ── --}}
    <div class="bg-surface rounded-xl border border-border p-4 mb-5">
        <p class="text-sm font-semibold text-ink mb-3">{{ __('Add a new field') }}</p>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
                <label class="block text-xs font-medium text-ink/80 mb-1">{{ __('Field name') }} <span class="text-danger">*</span></label>
                <input type="text" wire:model.live="name" maxlength="100"
                       placeholder="{{ __('Subscription tier') }}"
                       class="w-full px-3 py-2 text-sm bg-surface-2 border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500">
                @if($this->previewKey)
                    <p class="text-[11px] text-muted mt-1">
                        {{ __('Internal key (auto):') }} <code class="text-ink">{{ $this->previewKey }}</code>
                        — {{ __('use in templates as') }} <code class="text-ink">{{ '{custom.' . $this->previewKey . '}' }}</code>
                    </p>
                @endif
                @error('name') <p class="text-xs text-danger mt-1">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="block text-xs font-medium text-ink/80 mb-1">{{ __('Field type') }} <span class="text-danger">*</span></label>
                <select wire:model.live="type" class="w-full px-3 py-2 text-sm bg-surface-2 border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500">
                    @foreach($this->typeOptions as $value => $label)
                        <option value="{{ $value }}">{{ $label }}</option>
                    @endforeach
                </select>
                @error('type') <p class="text-xs text-danger mt-1">{{ $message }}</p> @enderror
            </div>
        </div>

        {{-- Options textarea only for dropdown / multi_select --}}
        @if(in_array($type, ['dropdown', 'multi_select']))
            <div class="mt-3">
                <label class="block text-xs font-medium text-ink/80 mb-1">{{ __('Options') }} <span class="text-danger">*</span></label>
                <textarea wire:model="optionsText" rows="3" maxlength="5000"
                          placeholder="{{ __('One option per line, or separated by commas') }}"
                          class="w-full px-3 py-2 text-sm bg-surface-2 border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none"></textarea>
                @error('optionsText') <p class="text-xs text-danger mt-1">{{ $message }}</p> @enderror
            </div>
        @endif

        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 mt-3">
            <div>
                <label class="block text-xs font-medium text-ink/80 mb-1">{{ __('Placeholder') }}</label>
                <input type="text" wire:model="placeholder" maxlength="255"
                       placeholder="{{ __('Hint shown in the empty input') }}"
                       class="w-full px-3 py-2 text-sm bg-surface-2 border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500">
            </div>
            <div>
                <label class="block text-xs font-medium text-ink/80 mb-1">{{ __('Default value') }}</label>
                <input type="text" wire:model="default_value" maxlength="1000"
                       placeholder="{{ __('Pre-filled on new contacts') }}"
                       class="w-full px-3 py-2 text-sm bg-surface-2 border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500">
            </div>
            <div>
                <label class="block text-xs font-medium text-ink/80 mb-1">{{ __('Group') }}</label>
                <input type="text" wire:model="group_name" maxlength="80"
                       placeholder="{{ __('e.g. Subscription Details') }}"
                       class="w-full px-3 py-2 text-sm bg-surface-2 border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500">
            </div>
        </div>

        <div class="flex items-center justify-between mt-4">
            <label class="inline-flex items-center gap-2 cursor-pointer">
                <input type="checkbox" wire:model="required" class="w-4 h-4 text-primary-600 border-border rounded focus:ring-primary-500">
                <span class="text-sm text-ink/80">{{ __('Required field') }}</span>
            </label>
            <button type="button" wire:click="add"
                    class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-xl bg-primary-600 text-white hover:bg-primary-700 transition">
                <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>
                {{ __('Add field') }}
            </button>
        </div>
    </div>

    {{-- ── LIST OF EXISTING FIELDS ── --}}
    @if($this->fields->isEmpty())
        <div class="text-center py-10 px-4 border-2 border-dashed border-border rounded-xl">
            <p class="text-sm text-muted">
                {{ __('No custom fields yet. Add your first one above — it will appear on every contact form right away.') }}
            </p>
        </div>
    @else
        <div class="space-y-2">
            @foreach($this->fields as $field)
                <div class="bg-surface rounded-xl border border-border p-4">

                    @if($editingId === $field->id)
                        {{-- ── INLINE EDIT FORM ── --}}
                        <div class="space-y-3">
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-xs font-medium text-ink/80 mb-1">{{ __('Field name') }}</label>
                                    <input type="text" wire:model="editName" maxlength="100"
                                           class="w-full px-3 py-2 text-sm bg-surface-2 border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500">
                                    @error('editName') <p class="text-xs text-danger mt-1">{{ $message }}</p> @enderror
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-ink/80 mb-1">{{ __('Type') }}</label>
                                    <select wire:model.live="editType" class="w-full px-3 py-2 text-sm bg-surface-2 border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500">
                                        @foreach($this->typeOptions as $value => $label)
                                            <option value="{{ $value }}">{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            @if(in_array($editType, ['dropdown', 'multi_select']))
                                <div>
                                    <label class="block text-xs font-medium text-ink/80 mb-1">{{ __('Options') }}</label>
                                    <textarea wire:model="editOptionsText" rows="3" maxlength="5000"
                                              class="w-full px-3 py-2 text-sm bg-surface-2 border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none"></textarea>
                                    @error('editOptionsText') <p class="text-xs text-danger mt-1">{{ $message }}</p> @enderror
                                </div>
                            @endif

                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                                <div>
                                    <label class="block text-xs font-medium text-ink/80 mb-1">{{ __('Placeholder') }}</label>
                                    <input type="text" wire:model="editPlaceholder" maxlength="255"
                                           class="w-full px-3 py-2 text-sm bg-surface-2 border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-ink/80 mb-1">{{ __('Default value') }}</label>
                                    <input type="text" wire:model="editDefaultValue" maxlength="1000"
                                           class="w-full px-3 py-2 text-sm bg-surface-2 border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-ink/80 mb-1">{{ __('Group') }}</label>
                                    <input type="text" wire:model="editGroupName" maxlength="80"
                                           class="w-full px-3 py-2 text-sm bg-surface-2 border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500">
                                </div>
                            </div>

                            <div class="flex items-center justify-between pt-1">
                                <label class="inline-flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" wire:model="editRequired" class="w-4 h-4 text-primary-600 border-border rounded focus:ring-primary-500">
                                    <span class="text-sm text-ink/80">{{ __('Required field') }}</span>
                                </label>
                                <div class="flex items-center gap-2">
                                    <button type="button" wire:click="cancelEdit" class="px-3 py-1.5 text-sm rounded-lg border border-border text-muted hover:text-ink">
                                        {{ __('Cancel') }}
                                    </button>
                                    <button type="button" wire:click="saveEdit" class="px-4 py-1.5 text-sm font-semibold rounded-lg bg-primary-600 text-white hover:bg-primary-700">
                                        {{ __('Save changes') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    @else
                        {{-- ── READ-ONLY ROW ── --}}
                        <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0 flex-1">
                                <div class="flex items-center gap-2 flex-wrap">
                                    <p class="text-sm font-semibold text-ink">{{ $field->name }}</p>
                                    @if($field->required)
                                        <span class="px-1.5 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-danger/10 text-danger">{{ __('Required') }}</span>
                                    @endif
                                    @if($field->group_name)
                                        <span class="px-1.5 py-0.5 rounded text-[10px] font-medium bg-surface-2 text-muted">{{ $field->group_name }}</span>
                                    @endif
                                </div>
                                <div class="flex flex-wrap items-center gap-3 mt-1 text-[11px] text-muted">
                                    <span><strong class="text-ink/80">{{ __('Type') }}:</strong> {{ $this->typeOptions[$field->type] ?? $field->type }}</span>
                                    <span><strong class="text-ink/80">{{ __('Key') }}:</strong> <code>{{ $field->key }}</code></span>
                                    @if($field->placeholder)
                                        <span><strong class="text-ink/80">{{ __('Placeholder') }}:</strong> "{{ $field->placeholder }}"</span>
                                    @endif
                                    @if(!is_null($field->default_value) && $field->default_value !== '')
                                        <span><strong class="text-ink/80">{{ __('Default') }}:</strong> {{ $field->default_value }}</span>
                                    @endif
                                </div>
                                @if($field->hasOptions() && !empty($field->options))
                                    <div class="mt-2 flex flex-wrap gap-1">
                                        @foreach($field->options as $opt)
                                            <span class="px-2 py-0.5 rounded-full text-[11px] bg-surface-2 text-ink/80">{{ $opt }}</span>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                            <div class="flex items-center gap-1 shrink-0">
                                <button type="button" wire:click="moveUp({{ $field->id }})"
                                        title="{{ __('Move up') }}"
                                        class="p-1.5 rounded-lg text-muted hover:text-ink hover:bg-surface-2">
                                    <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="M5 15l7-7 7 7"/></svg>
                                </button>
                                <button type="button" wire:click="moveDown({{ $field->id }})"
                                        title="{{ __('Move down') }}"
                                        class="p-1.5 rounded-lg text-muted hover:text-ink hover:bg-surface-2">
                                    <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 9l-7 7-7-7"/></svg>
                                </button>
                                <button type="button" wire:click="startEdit({{ $field->id }})"
                                        title="{{ __('Edit') }}"
                                        class="p-1.5 rounded-lg text-muted hover:text-primary-600 hover:bg-primary-600/10">
                                    <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                                </button>
                                <button type="button" wire:click="delete({{ $field->id }})"
                                        wire:confirm="{{ __('Delete this custom field? Existing values on contacts will be hidden but not erased.') }}"
                                        title="{{ __('Delete') }}"
                                        class="p-1.5 rounded-lg text-muted hover:text-danger hover:bg-danger/10">
                                    <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 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                </button>
                            </div>
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    @endif
</div>
