@if ($this->shouldUsePostalLookup())
    <div
        x-data="{
            open: false,
            activeField: null,
            query: '',
            options: @js($this->postalOptions()),
            highlighted: -1,
            filtered() {
                const q = this.query.trim().toLowerCase();
                if (q === '') return this.options;
                return this.options.filter(o => o.postna_stevilka.toLowerCase().includes(q) || o.kraj.toLowerCase().includes(q));
            },
            openField(field) {
                this.activeField = field;
                this.open = true;
            },
            select(option) {
                $wire.set('current_data.postna_stevilka', option.postna_stevilka);
                $wire.set('current_data.kraj', option.kraj);
                this.query = '';
                this.open = false;
                this.activeField = null;
                this.highlighted = -1;
            },
            move(step) {
                const list = this.filtered();
                if (! list.length) return;
                this.highlighted = (this.highlighted + step + list.length) % list.length;
            },
            selectHighlighted(field) {
                if (! this.open || this.activeField !== field || this.highlighted < 0) return;
                const list = this.filtered();
                if (list[this.highlighted]) this.select(list[this.highlighted]);
            }
        }"
        @click.outside="open = false"
        class="contents"
    >
        <div class="form-group relative">
            <label for="field-postna_stevilka">
                Poštna številka
                @if (! $this->isOriginalValue('postna_stevilka'))
                    <span class="ml-1 text-xs font-normal text-amber-600">Spremenjeno</span>
                @endif
            </label>
            <input
                type="text"
                id="field-postna_stevilka"
                role="combobox"
                :aria-expanded="(open && activeField === 'postna_stevilka') ? 'true' : 'false'"
                aria-autocomplete="list"
                aria-controls="field-postna_stevilka-listbox"
                :aria-activedescendant="(activeField === 'postna_stevilka' && highlighted >= 0) ? 'field-postna_stevilka-listbox-option-' + highlighted : null"
                aria-invalid="{{ $errors->has('current_data.postna_stevilka') ? 'true' : 'false' }}"
                @if ($errors->has('current_data.postna_stevilka'))
                    aria-describedby="field-postna_stevilka-error"
                @endif
                autocomplete="off"
                wire:model.live.debounce.500ms="current_data.postna_stevilka"
                wire:focus="touch('postna_stevilka')"
                x-on:focus="openField('postna_stevilka')"
                x-on:input="query = $event.target.value; openField('postna_stevilka'); highlighted = -1"
                x-on:keydown.escape="open = false"
                x-on:keydown.down.prevent="openField('postna_stevilka'); move(1)"
                x-on:keydown.up.prevent="openField('postna_stevilka'); move(-1)"
                x-on:keydown.enter.prevent="selectHighlighted('postna_stevilka')"
                @class(['error' => $errors->has('current_data.postna_stevilka')])
            >
            <ul
                id="field-postna_stevilka-listbox"
                role="listbox"
                x-show="open && activeField === 'postna_stevilka' && 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.postna_stevilka">
                    <li
                        :id="'field-postna_stevilka-listbox-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"
                    >
                        <span x-text="option.postna_stevilka"></span> <span x-text="option.kraj"></span>
                    </li>
                </template>
            </ul>
            @error('current_data.postna_stevilka') <p id="field-postna_stevilka-error" class="field-errors text-sm text-red-600 mt-1">{{ $message }}</p> @enderror
        </div>

        <div class="form-group relative">
            <label for="field-kraj">
                Kraj
                @if (! $this->isOriginalValue('kraj'))
                    <span class="ml-1 text-xs font-normal text-amber-600">Spremenjeno</span>
                @endif
            </label>
            <input
                type="text"
                id="field-kraj"
                role="combobox"
                :aria-expanded="(open && activeField === 'kraj') ? 'true' : 'false'"
                aria-autocomplete="list"
                aria-controls="field-kraj-listbox"
                :aria-activedescendant="(activeField === 'kraj' && highlighted >= 0) ? 'field-kraj-listbox-option-' + highlighted : null"
                aria-invalid="{{ $errors->has('current_data.kraj') ? 'true' : 'false' }}"
                @if ($errors->has('current_data.kraj'))
                    aria-describedby="field-kraj-error"
                @endif
                autocomplete="off"
                wire:model.live.debounce.500ms="current_data.kraj"
                wire:focus="touch('kraj')"
                x-on:focus="openField('kraj')"
                x-on:input="query = $event.target.value; openField('kraj'); highlighted = -1"
                x-on:keydown.escape="open = false"
                x-on:keydown.down.prevent="openField('kraj'); move(1)"
                x-on:keydown.up.prevent="openField('kraj'); move(-1)"
                x-on:keydown.enter.prevent="selectHighlighted('kraj')"
                @class(['error' => $errors->has('current_data.kraj')])
            >
            <ul
                id="field-kraj-listbox"
                role="listbox"
                x-show="open && activeField === 'kraj' && 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.kraj + '-' + option.postna_stevilka">
                    <li
                        :id="'field-kraj-listbox-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"
                    >
                        <span x-text="option.kraj"></span> <span class="text-gray-400" x-text="'(' + option.postna_stevilka + ')'"></span>
                    </li>
                </template>
            </ul>
            @error('current_data.kraj') <p id="field-kraj-error" class="field-errors text-sm text-red-600 mt-1">{{ $message }}</p> @enderror
        </div>
    </div>
@else
    <x-text-field name="postna_stevilka" label="Poštna številka" />
    <x-text-field name="kraj" label="Kraj" />
@endif