@props([
    'name',
    'label',
    'required' => false,
    'options' => [],
    'helpText' => null,
    'placeholder' => null,
])

@php
    $changed = ! $this->isOriginalValue($name);
    $existingValue = $this->customer->current_data[$name] ?? '';
    $hasError = $errors->has('current_data.' . $name);
    $fieldId = 'field-' . $name;
    $errorId = $fieldId . '-error';
    $listId = $fieldId . '-listbox';
@endphp

<div class="form-group">
    <label for="{{ $fieldId }}">
        {{ $label }}
        @if ($required)
            <span class="required">*</span>
        @endif
        @if ($changed)
            <span class="ml-1 text-xs font-normal text-amber-600">Spremenjeno</span>
        @endif
    </label>
    @if ($helpText)
        <p class="field-help-text text-xs text-gray-400 mb-1">{{ $helpText }}</p>
    @endif

    <div
        x-data="{
            open: false,
            query: '',
            options: @js($options),
            highlighted: -1,
            filtered() {
                const q = this.query.trim().toLowerCase();
                if (q === '') return this.options;
                return this.options.filter(o => o.toLowerCase().includes(q));
            },
            select(option) {
                this.query = option;
                $wire.set('current_data.{{ $name }}', option);
                this.open = false;
                this.highlighted = -1;
            },
            move(step) {
                const list = this.filtered();
                if (! list.length) return;
                this.highlighted = (this.highlighted + step + list.length) % list.length;
            }
        }"
        @click.outside="open = false"
        class="relative"
    >
        <input
            type="text"
            id="{{ $fieldId }}"
            role="combobox"
            :aria-expanded="open ? 'true' : 'false'"
            aria-autocomplete="list"
            aria-controls="{{ $listId }}"
            :aria-activedescendant="highlighted >= 0 ? '{{ $listId }}-option-' + highlighted : null"
            aria-invalid="{{ $hasError ? 'true' : 'false' }}"
            @if ($hasError)
                aria-describedby="{{ $errorId }}"
            @endif
            autocomplete="off"
            wire:model.live.debounce.500ms="current_data.{{ $name }}"
            wire:focus="touch('{{ $name }}')"
            placeholder="{{ $placeholder ?? $existingValue }}"
            x-on:focus="open = true"
            x-on:input="query = $event.target.value; open = true; highlighted = -1"
            x-on:keydown.escape="open = false"
            x-on:keydown.down.prevent="open = true; move(1)"
            x-on:keydown.up.prevent="open = true; move(-1)"
            x-on:keydown.enter.prevent="if (open && highlighted >= 0) { const list = filtered(); if (list[highlighted]) select(list[highlighted]); }"
            @class([
                'error' => $hasError,
                '' => $changed && ! $hasError,
            ])
        >

        <ul
            id="{{ $listId }}"
            role="listbox"
            x-show="open && filtered().length > 0"
            x-cloak
            class="absolute z-10 mt-1 max-h-56 w-full overflow-y-auto rounded-md border border-gray-200 bg-white py-1 shadow-lg"
        >
            <template x-for="(option, index) in filtered()" :key="option">
                <li
                    :id="'{{ $listId }}-option-' + index"
                    role="option"
                    :aria-selected="highlighted === index ? 'true' : 'false'"
                    @click="select(option)"
                    @mousedown.prevent
                    :class="{ 'bg-green-50 text-avrio-green': highlighted === index }"
                    class="cursor-pointer px-3 py-2 text-sm hover:bg-green-50"
                    x-text="option"
                ></li>
            </template>
        </ul>
    </div>

    @error('current_data.' . $name)
        <p id="{{ $errorId }}" class="field-errors text-sm text-red-600 mt-1">{{ $message }}</p>
    @enderror
</div>