<div
    x-data="{
        editingIndex: null,
        draggingType: null,
        dropPosition: null,

        fieldTypeLabels: @js([
            'text' => __('daylight::forms.field_types.text'),
            'textarea' => __('daylight::forms.field_types.textarea'),
            'email' => __('daylight::forms.field_types.email'),
            'phone' => __('daylight::forms.field_types.phone'),
            'number' => __('daylight::forms.field_types.number'),
            'date' => __('daylight::forms.field_types.date'),
            'select' => __('daylight::forms.field_types.select'),
            'checkbox' => __('daylight::forms.field_types.checkbox'),
            'file' => __('daylight::forms.field_types.file'),
            'heading' => __('daylight::forms.field_types.heading'),
        ]),

        handleSort(item, position) {
            if (document.activeElement && document.activeElement.blur) {
                document.activeElement.blur();
            }
            setTimeout(() => {
                const order = Array.from($refs.fieldsSortContainer.children).map(el => {
                    return el.getAttribute('data-field-id');
                }).filter(Boolean);
                $wire.reorderFields(order);
            }, 100);
        },

        onPaletteDragStart(e, type) {
            this.draggingType = type;
            e.dataTransfer.effectAllowed = 'copy';
            e.dataTransfer.setData('text/plain', type);
        },

        onPaletteDragEnd() {
            this.draggingType = null;
            this.dropPosition = null;
        },

        onFieldListDragOver(e) {
            if (!this.draggingType) return;
            e.preventDefault();
            e.dataTransfer.dropEffect = 'copy';

            const container = $refs.fieldsSortContainer;
            const children = Array.from(container.querySelectorAll('[data-field-id]'));
            const y = e.clientY;

            let position = children.length;
            for (let i = 0; i < children.length; i++) {
                const rect = children[i].getBoundingClientRect();
                if (y < rect.top + rect.height / 2) {
                    position = i;
                    break;
                }
            }
            this.dropPosition = position;
        },

        onFieldListDragLeave(e) {
            if (!e.currentTarget.contains(e.relatedTarget)) {
                this.dropPosition = null;
            }
        },

        onFieldListDrop(e) {
            if (!this.draggingType) return;
            e.preventDefault();
            const position = this.dropPosition !== null ? this.dropPosition : $wire.fields.length;
            $wire.addFieldAtPosition(this.draggingType, position);
            this.draggingType = null;
            this.dropPosition = null;
        },

        openSettings(index) {
            this.editingIndex = index;
        },

        closeSettings() {
            this.editingIndex = null;
        },

        get editingField() {
            if (this.editingIndex === null) return null;
            return $wire.fields[this.editingIndex] ?? null;
        }
    }"
    x-on:keydown.escape.window="closeSettings()"
>
    <!-- Field Type Palette (draggable) -->
    <div class="mb-4 flex flex-wrap gap-2">
        @foreach(['text', 'textarea', 'email', 'phone', 'number', 'date', 'select', 'checkbox', 'file', 'heading'] as $type)
            <div
                draggable="true"
                x-on:click="$wire.addField('{{ $type }}')"
                x-on:dragstart="onPaletteDragStart($event, '{{ $type }}')"
                x-on:dragend="onPaletteDragEnd()"
                class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 cursor-grab active:cursor-grabbing select-none"
            >
                <svg class="w-4 h-4 mr-1.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                <span x-text="fieldTypeLabels['{{ $type }}']"></span>
            </div>
        @endforeach
    </div>

    <!-- Fields List -->
    <div
        x-ref="fieldsSortContainer"
        x-on:dragover="onFieldListDragOver($event)"
        x-on:dragleave="onFieldListDragLeave($event)"
        x-on:drop="onFieldListDrop($event)"
        class="space-y-2 min-h-[48px]"
        x-sort="handleSort"
    >
        @foreach($fields as $index => $field)
            {{-- Drop indicator before this item --}}
            <div
                x-show="draggingType && dropPosition === {{ $index }}"
                x-cloak
                class="h-1 bg-blue-400 rounded-full mx-2 transition-all"
            ></div>

            <div
                wire:key="field-{{ $field['id'] }}"
                data-field-id="{{ $field['id'] }}"
                x-sort:item="@js($field['id'])"
                class="flex items-center gap-3 p-3 border border-gray-200 rounded-lg bg-white hover:border-gray-300 transition group"
            >
                <!-- Drag Handle -->
                <span x-sort:handle class="cursor-move p-1 hover:bg-gray-200 rounded text-gray-400 hover:text-gray-600">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16"/>
                    </svg>
                </span>

                <!-- Number Badge with Type Popover -->
                <div class="relative group/badge">
                    <span class="inline-flex items-center rounded-md bg-gray-400/10 px-2 py-1 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-400/20 cursor-default">
                        {{ $index + 1 }}
                    </span>
                    <span class="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 inline-flex items-center rounded-md bg-gray-900 px-2 py-1 text-xs font-medium text-white whitespace-nowrap opacity-0 group-hover/badge:opacity-100 transition-opacity shadow-lg">
                        <span x-text="fieldTypeLabels[@js($field['type'])]"></span>
                    </span>
                </div>

                <!-- Label (inline editable) -->
                <div class="flex-1 min-w-0">
                    <x-daylight::input.text
                        wire:model.blur="fields.{{ $index }}.label"
                        placeholder="{{ __('daylight::forms.field_label') }}"
                        class="!py-1.5 !text-sm"
                    />
                </div>

                <!-- Required indicator -->
                @if($field['required'] ?? false)
                    <span class="text-red-500 text-xs font-bold">*</span>
                @endif

                <!-- Settings Button -->
                <button
                    type="button"
                    x-on:click="openSettings({{ $index }})"
                    class="p-1.5 hover:bg-gray-200 rounded-full transition text-gray-400 hover:text-gray-600"
                    title="{{ __('daylight::forms.settings') }}"
                >
                    <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                </button>

                <!-- Delete Button -->
                <button
                    type="button"
                    wire:click="removeField('{{ $field['id'] }}')"
                    wire:confirm="{{ __('daylight::forms.remove_field_confirm') }}"
                    class="p-1.5 hover:bg-red-100 rounded-full text-gray-400 hover:text-red-600 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="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
        @endforeach

        {{-- Drop indicator at end of list --}}
        <div
            x-show="draggingType && dropPosition === {{ count($fields) }}"
            x-cloak
            class="h-1 bg-blue-400 rounded-full mx-2 transition-all"
        ></div>
    </div>

    @if(empty($fields))
        <div
            x-on:dragover="onFieldListDragOver($event)"
            x-on:dragleave="onFieldListDragLeave($event)"
            x-on:drop="onFieldListDrop($event)"
            class="text-center py-8 text-gray-500 border-2 border-dashed rounded-lg transition-colors"
            x-bind:class="draggingType ? 'border-blue-400 bg-blue-50' : 'border-gray-300'"
        >
            {{ __('daylight::forms.no_fields_added') }}
        </div>
    @endif

    <!-- Slide-over Panel -->
    <template x-teleport="body">
        <div
            x-show="editingIndex !== null"
            class="relative z-30"
            style="display: none;"
        >
            <!-- Backdrop -->
            <div
                x-show="editingIndex !== null"
                x-transition:enter="transition-opacity ease-linear duration-300"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="transition-opacity ease-linear duration-300"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                x-on:click="closeSettings()"
                class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity z-40"
            ></div>

            <!-- Panel -->
            <div class="fixed inset-0 overflow-hidden z-50" x-on:click.self="closeSettings()">
                <div class="absolute inset-0 overflow-hidden" x-on:click.self="closeSettings()">
                    <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
                        <div
                            x-show="editingIndex !== null"
                            x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
                            x-transition:enter-start="translate-x-full"
                            x-transition:enter-end="translate-x-0"
                            x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
                            x-transition:leave-start="translate-x-0"
                            x-transition:leave-end="translate-x-full"
                            class="pointer-events-auto w-screen max-w-2xl"
                        >
                            <div class="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
                                <div class="flex-1">
                                    <!-- Header -->
                                    <div class="bg-sky-600 px-4 py-6 sm:px-6">
                                        <div class="flex items-start justify-between space-x-3">
                                            <div class="space-y-1">
                                                <h2 class="text-base font-semibold leading-6 text-white" x-text="editingField ? (fieldTypeLabels[editingField.type] || editingField.type) : ''"></h2>
                                            </div>
                                            <div class="flex h-7 items-center">
                                                <button x-on:click.prevent="closeSettings()" type="button" class="relative text-gray-400 hover:text-gray-500">
                                                    <span class="absolute -inset-2.5"></span>
                                                    <span class="sr-only">{{ __('daylight::general.close_panel') }}</span>
                                                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                                                    </svg>
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Content -->
                                    <div class="space-y-6 py-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 sm:py-0">
                                        <template x-if="editingIndex !== null && editingField">
                                            <div>
                                                <!-- Placeholder (not for checkbox/file/heading) -->
                                                <template x-if="editingField.type !== 'checkbox' && editingField.type !== 'file' && editingField.type !== 'heading'">
                                                    <div class="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
                                                        <label class="text-sm font-medium leading-6 text-gray-900 sm:mt-1.5">{{ __('daylight::forms.placeholder_optional') }}</label>
                                                        <div class="sm:col-span-2">
                                                            <input
                                                                type="text"
                                                                x-bind:value="$wire.fields[editingIndex]?.placeholder"
                                                                x-on:change="$wire.set('fields.' + editingIndex + '.placeholder', $event.target.value)"
                                                                placeholder="{{ __('daylight::forms.placeholder_optional') }}"
                                                                class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
                                                            >
                                                        </div>
                                                    </div>
                                                </template>

                                                <!-- Checkbox label (only for checkbox) -->
                                                <template x-if="editingField.type === 'checkbox'">
                                                    <div class="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
                                                        <label class="text-sm font-medium leading-6 text-gray-900 sm:mt-1.5">{{ __('daylight::forms.checkbox_label') }}</label>
                                                        <div class="sm:col-span-2">
                                                            <input
                                                                type="text"
                                                                x-bind:value="$wire.fields[editingIndex]?.checkbox_label"
                                                                x-on:change="$wire.set('fields.' + editingIndex + '.checkbox_label', $event.target.value)"
                                                                placeholder="{{ __('daylight::forms.checkbox_label') }}"
                                                                class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
                                                            >
                                                        </div>
                                                    </div>
                                                </template>

                                                <!-- Options (only for select) -->
                                                <template x-if="editingField.type === 'select'">
                                                    <div class="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
                                                        <label class="text-sm font-medium leading-6 text-gray-900 sm:mt-1.5">{{ __('daylight::forms.options_per_line') }}</label>
                                                        <div class="sm:col-span-2">
                                                            <textarea
                                                                x-bind:value="$wire.fields[editingIndex]?.options"
                                                                x-on:change="$wire.set('fields.' + editingIndex + '.options', $event.target.value)"
                                                                rows="5"
                                                                placeholder="{{ __("Option 1\nOption 2\nOption 3") }}"
                                                                class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
                                                            ></textarea>
                                                        </div>
                                                    </div>
                                                </template>

                                                <!-- Min/Max (only for number) -->
                                                <template x-if="editingField.type === 'number'">
                                                    <div>
                                                        <div class="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
                                                            <label class="text-sm font-medium leading-6 text-gray-900 sm:mt-1.5">{{ __('daylight::forms.min_value') }}</label>
                                                            <div class="sm:col-span-2">
                                                                <input
                                                                    type="number"
                                                                    x-bind:value="$wire.fields[editingIndex]?.min"
                                                                    x-on:change="$wire.set('fields.' + editingIndex + '.min', $event.target.value || null)"
                                                                    class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
                                                                >
                                                            </div>
                                                        </div>
                                                        <div class="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
                                                            <label class="text-sm font-medium leading-6 text-gray-900 sm:mt-1.5">{{ __('daylight::forms.max_value') }}</label>
                                                            <div class="sm:col-span-2">
                                                                <input
                                                                    type="number"
                                                                    x-bind:value="$wire.fields[editingIndex]?.max"
                                                                    x-on:change="$wire.set('fields.' + editingIndex + '.max', $event.target.value || null)"
                                                                    class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
                                                                >
                                                            </div>
                                                        </div>
                                                    </div>
                                                </template>

                                                <!-- Required (not for heading) -->
                                                <template x-if="editingField.type !== 'heading'">
                                                    <div class="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
                                                        <label class="text-sm font-medium leading-6 text-gray-900 sm:mt-1.5">{{ __('daylight::forms.required') }}</label>
                                                        <div class="sm:col-span-2 sm:mt-1.5">
                                                            <input
                                                                type="checkbox"
                                                                x-bind:checked="$wire.fields[editingIndex]?.required"
                                                                x-on:change="$wire.set('fields.' + editingIndex + '.required', $event.target.checked)"
                                                                class="rounded border-gray-300 text-sky-600 focus:ring-sky-600"
                                                            >
                                                        </div>
                                                    </div>
                                                </template>

                                                <!-- Hide label (not for heading) -->
                                                <template x-if="editingField.type !== 'heading'">
                                                    <div class="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
                                                        <label class="text-sm font-medium leading-6 text-gray-900 sm:mt-1.5">{{ __('daylight::forms.hide_label') }}</label>
                                                        <div class="sm:col-span-2 sm:mt-1.5">
                                                            <input
                                                                type="checkbox"
                                                                x-bind:checked="$wire.fields[editingIndex]?.hide_label"
                                                                x-on:change="$wire.set('fields.' + editingIndex + '.hide_label', $event.target.checked)"
                                                                class="rounded border-gray-300 text-sky-600 focus:ring-sky-600"
                                                            >
                                                        </div>
                                                    </div>
                                                </template>

                                                <!-- Width (not for heading) -->
                                                <template x-if="editingField.type !== 'heading'">
                                                    <div class="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
                                                        <label class="text-sm font-medium leading-6 text-gray-900 sm:mt-1.5">{{ __('daylight::forms.field_width') }}</label>
                                                        <div class="sm:col-span-2">
                                                            <select
                                                                x-bind:value="$wire.fields[editingIndex]?.width || 'full'"
                                                                x-on:change="$wire.set('fields.' + editingIndex + '.width', $event.target.value)"
                                                                class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
                                                            >
                                                                <option value="full">{{ __('daylight::forms.width_full') }}</option>
                                                                <option value="half">{{ __('daylight::forms.width_half') }}</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </template>

                                                <!-- Conditional visibility (not for heading) -->
                                                <template x-if="editingField.type !== 'heading'">
                                                    <div class="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
                                                        <label class="text-sm font-medium leading-6 text-gray-900 sm:mt-1.5">{{ __('daylight::forms.condition') }}</label>
                                                        <div class="sm:col-span-2 space-y-3"
                                                             x-data="{
                                                                 get condition() {
                                                                     return $wire.fields[editingIndex]?.condition || null;
                                                                 },
                                                                 get hasCondition() {
                                                                     return this.condition !== null && this.condition?.field_id;
                                                                 },
                                                                 get otherFields() {
                                                                     return $wire.fields.filter((f, i) => i !== editingIndex && f.type !== 'heading');
                                                                 },
                                                                 get sourceField() {
                                                                     if (!this.condition?.field_id) return null;
                                                                     return $wire.fields.find(f => f.id === this.condition.field_id) || null;
                                                                 },
                                                                 get sourceFieldType() {
                                                                     return this.sourceField?.type || 'text';
                                                                 },
                                                                 get sourceFieldOptions() {
                                                                     if (!this.sourceField?.options) return [];
                                                                     return this.sourceField.options.split('\n').map(o => o.trim()).filter(Boolean);
                                                                 },
                                                                 get needsValueInput() {
                                                                     const op = this.condition?.operator;
                                                                     if (op !== 'equals' && op !== 'not_equals') return false;
                                                                     return this.sourceFieldType !== 'checkbox';
                                                                 },
                                                                 defaultOperatorForType(type) {
                                                                     return type === 'checkbox' ? 'is_not_empty' : 'equals';
                                                                 },
                                                                 enableCondition() {
                                                                     const others = this.otherFields;
                                                                     if (others.length === 0) return;
                                                                     $wire.set('fields.' + editingIndex + '.condition', {
                                                                         field_id: others[0].id,
                                                                         operator: this.defaultOperatorForType(others[0].type),
                                                                         value: ''
                                                                     });
                                                                 },
                                                                 disableCondition() {
                                                                     $wire.set('fields.' + editingIndex + '.condition', null);
                                                                 },
                                                                 updateConditionProp(prop, value) {
                                                                     $wire.set('fields.' + editingIndex + '.condition.' + prop, value);
                                                                 },
                                                                 onSourceFieldChange(fieldId) {
                                                                     const field = $wire.fields.find(f => f.id === fieldId);
                                                                     const newType = field?.type || 'text';
                                                                     const currentOp = this.condition?.operator;
                                                                     const validOps = this.getOperatorsForType(newType).map(o => o.value);
                                                                     const newOp = validOps.includes(currentOp) ? currentOp : this.defaultOperatorForType(newType);
                                                                     $wire.set('fields.' + editingIndex + '.condition', {
                                                                         field_id: fieldId,
                                                                         operator: newOp,
                                                                         value: ''
                                                                     });
                                                                 },
                                                                 getOperatorsForType(type) {
                                                                     if (type === 'checkbox') {
                                                                         return [
                                                                             { value: 'is_not_empty', label: '{{ __('daylight::forms.condition_is_checked') }}' },
                                                                             { value: 'is_empty', label: '{{ __('daylight::forms.condition_is_not_checked') }}' },
                                                                         ];
                                                                     }
                                                                     return [
                                                                         { value: 'equals', label: '{{ __('daylight::forms.condition_equals') }}' },
                                                                         { value: 'not_equals', label: '{{ __('daylight::forms.condition_not_equals') }}' },
                                                                         { value: 'is_empty', label: '{{ __('daylight::forms.condition_is_empty') }}' },
                                                                         { value: 'is_not_empty', label: '{{ __('daylight::forms.condition_is_not_empty') }}' },
                                                                     ];
                                                                 },
                                                                 get operators() {
                                                                     return this.getOperatorsForType(this.sourceFieldType);
                                                                 }
                                                             }"
                                                        >
                                                            <template x-if="!hasCondition">
                                                                <button
                                                                    type="button"
                                                                    x-on:click="enableCondition()"
                                                                    x-bind:disabled="otherFields.length === 0"
                                                                    class="text-sm text-sky-600 hover:text-sky-800 disabled:text-gray-400 disabled:cursor-not-allowed"
                                                                >
                                                                    + {{ __('daylight::forms.add_condition') }}
                                                                </button>
                                                            </template>

                                                            <template x-if="hasCondition">
                                                                <div class="space-y-2">
                                                                    {{-- Source field selector --}}
                                                                    <select
                                                                        x-bind:value="condition?.field_id"
                                                                        x-on:change="onSourceFieldChange($event.target.value)"
                                                                        class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
                                                                    >
                                                                        <template x-for="f in otherFields" :key="f.id">
                                                                            <option x-bind:value="f.id" x-text="f.label || '{{ __('daylight::forms.unnamed_field') }}'" x-bind:selected="condition?.field_id === f.id"></option>
                                                                        </template>
                                                                    </select>

                                                                    {{-- Operator selector (adapts to source field type) --}}
                                                                    <select
                                                                        x-bind:value="condition?.operator"
                                                                        x-on:change="updateConditionProp('operator', $event.target.value)"
                                                                        class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
                                                                    >
                                                                        <template x-for="op in operators" :key="op.value">
                                                                            <option x-bind:value="op.value" x-text="op.label" x-bind:selected="condition?.operator === op.value"></option>
                                                                        </template>
                                                                    </select>

                                                                    {{-- Value input: dropdown for select fields --}}
                                                                    <template x-if="needsValueInput && sourceFieldType === 'select' && sourceFieldOptions.length > 0">
                                                                        <select
                                                                            x-bind:value="condition?.value"
                                                                            x-on:change="updateConditionProp('value', $event.target.value)"
                                                                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
                                                                        >
                                                                            <option value="">{{ __('daylight::forms.condition_select_value') }}</option>
                                                                            <template x-for="opt in sourceFieldOptions" :key="opt">
                                                                                <option x-bind:value="opt" x-text="opt" x-bind:selected="condition?.value === opt"></option>
                                                                            </template>
                                                                        </select>
                                                                    </template>

                                                                    {{-- Value input: text for other fields --}}
                                                                    <template x-if="needsValueInput && (sourceFieldType !== 'select' || sourceFieldOptions.length === 0)">
                                                                        <input
                                                                            type="text"
                                                                            x-bind:value="condition?.value"
                                                                            x-on:change="updateConditionProp('value', $event.target.value)"
                                                                            placeholder="{{ __('daylight::forms.condition_value') }}"
                                                                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
                                                                        >
                                                                    </template>

                                                                    <button
                                                                        type="button"
                                                                        x-on:click="disableCondition()"
                                                                        class="text-sm text-red-600 hover:text-red-800"
                                                                    >
                                                                        {{ __('daylight::forms.remove_condition') }}
                                                                    </button>
                                                                </div>
                                                            </template>
                                                        </div>
                                                    </div>
                                                </template>
                                            </div>
                                        </template>
                                    </div>
                                </div>

                                <!-- Footer -->
                                <div class="flex-shrink-0 border-t border-gray-200 px-4 py-5 sm:px-6">
                                    <div class="flex justify-end space-x-3">
                                        <button type="button" x-on:click="closeSettings()"
                                            class="bg-white text-sky-600 hover:opacity-75 border-sky-600 py-2.5 px-4 border rounded-md text-sm leading-5 font-medium focus:outline-none transition duration-150 ease-in-out">
                                            {{ __('daylight::general.cancel') }}
                                        </button>
                                        <button type="button" x-on:click="closeSettings()"
                                            class="bg-sky-600 text-white hover:bg-sky-700 border-sky-600 text-sm py-2.5 px-4 border rounded-md leading-5 font-medium focus:outline-none transition duration-150 ease-in-out">
                                            {{ __('daylight::forms.done') }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    {{-- Hidden input to pass fields data to the parent form on submit --}}
    <textarea
        name="fields_json"
        class="hidden"
        x-effect="$el.value = JSON.stringify($wire.fields)"
    ></textarea>
</div>
