@php
    $dropdownFunction = 'dropdown_' . preg_replace('/[^a-zA-Z0-9_]/', '_', $inputName ?? $label);
@endphp

<div x-data="{{ $dropdownFunction }}(@js($defaultValue))" x-init="init()" class="{{ $selectAlpineClass }}">
    <label>{{ __('forms.alpine.'.$label) }}</label>

    <div class="select_wrapper relative">
        <button @click="toggleDropdown" type="button" class="w-full text-left">
            <span x-text="selected ? selected.label : '&nbsp;'"></span>
            <svg class="absolute right-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" 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>

        <ul x-show="open" @click.away="open = false" class="absolute z-50 w-full max-h-60 overflow-auto border bg-white mt-1 rounded shadow" style="list-style-type: none;">
            @if($searchInput=="true")
                <li style="list-style-type: none; padding-left: 15px; margin: 10px 10px 0 0;">
                    <input type="text"
                           x-model="search"
                           x-ref="searchInput"
                           placeholder="Szukaj..."
                           class="w-full border rounded p-2"
                           @mousedown.stop
                           @keydown.arrow-down.prevent="arrowDown"
                           @keydown.arrow-up.prevent="arrowUp"
                           @keydown.enter.prevent="enterSelect"
                    >
                </li>
                <template x-for="(option, index) in filteredOptions" :key="option.value">
                    @else
                        <template x-for="(option, index) in options" :key="option.value">
                            @endif
                            <li @click="select(option)"
                                x-ref="option{index}"
                                :data-index="index"
                                class="item_li"
                                :class="{
                        'bg-blue-500 text-white': activeIndex === index,
                        'font-bold': selected?.value === option.value
                    }"
                                x-text="option.label"
                                style="list-style-type: none; padding-left: 10px">
                            </li>
                        </template>
        </ul>
    </div>

    <input type="text" name="{{ $inputName }}" class="sr-only"
           x-bind:value="selected?.value || ''"
           x-ref="realInput"
           autocomplete="off" tabindex="-1" @focus.prevent
        {{ $attributes }}>
</div>

@push('custom-js')
    <script>
        @once($dropdownFunction)
        function {{ $dropdownFunction }}(defaultValue) {
            return {
                open: false,
                selected: null,
                defaultValue: String(defaultValue),
                search: '',
                activeIndex: -1,
                options: [
                        @foreach($selectData as $item)
                    { label: @js($item['name']), value: String(@js($item['value'])) },
                    @endforeach
                ],

                get filteredOptions() {
                    return this.options.filter(o =>
                        o.label.toLowerCase().includes(this.search.toLowerCase())
                    );
                },

                init() {
                    this.selected = this.options.find(opt => opt.value === this.defaultValue);
                },

                toggleDropdown() {
                    this.open = !this.open;
                    if (this.open) {
                        this.$nextTick(() => {
                            if (this.$refs.searchInput) {
                                this.$refs.searchInput.focus();
                            }
                        });
                    }
                },

                select(option) {
                    this.selected = option;
                    this.open = false;
                    this.search = '';
                    this.activeIndex = -1;
                },

                arrowDown() {
                    if (!this.open) {
                        this.open = true;
                        return;
                    }
                    const optionsList = this.search ? this.filteredOptions : this.options;
                    if (optionsList.length === 0) return;
                    this.activeIndex = (this.activeIndex + 1) % optionsList.length;
                    this.scrollToActive();
                },

                arrowUp() {
                    if (!this.open) {
                        this.open = true;
                        return;
                    }
                    const optionsList = this.search ? this.filteredOptions : this.options;
                    if (optionsList.length === 0) return;
                    this.activeIndex = (this.activeIndex - 1 + optionsList.length) % optionsList.length;
                    this.scrollToActive();
                },

                enterSelect() {
                    const optionsList = this.search ? this.filteredOptions : this.options;
                    if (this.activeIndex >= 0 && optionsList[this.activeIndex]) {
                        this.select(optionsList[this.activeIndex]);
                    }
                },

                scrollToActive() {
                    this.$nextTick(() => {
                        const options = this.$el.querySelectorAll('[x-ref="option{index}"]');
                        const el = Array.from(options).find(el => Number(el.dataset.index) === this.activeIndex);
                        if (el) {
                            el.scrollIntoView({ block: 'nearest' });
                        }
                    });
                }
            };
        }
        @endonce
    </script>
@endpush