@props(['options', 'name', 'id', 'value' => null, 'onchange' => null,'default' => 'Please Select'])
<div class="relative text-black"
    x-data="selectmenu({{ Illuminate\Support\Js::from($options) }}, '{{ $value }}', {{ $onchange ? 'true' : 'false' }})"
    @click.away="close()">

    <input type="text" x-model="selectedkey" name="{{ $name }}" id="{{ $id }}" class="hidden" {{ $attributes->has('required') ? 'required' : '' }}>

    <span class="inline-block w-full rounded-md shadow-sm"
        @click="if (!disabled) { toggle(); $nextTick(() => $refs.filterinput.focus()); }">

        <button type="button"
            class="relative z-0 w-full py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out bg-white border border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5"
            :class="{ 'opacity-50 cursor-not-allowed': disabled }">

            <span class="block truncate" x-text="selectedlabel ?? '{{ $default }}' "></span>

            <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
                <svg class="w-5 h-5 text-gray-400" viewBox="0 0 20 20" fill="none" stroke="currentColor">
                    <path d="M7 7l3-3 3 3m0 6l-3 3-3-3" stroke-width="1.5" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
            </span>
        </button>
    </span>

    <div x-show="state && !disabled" class="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg p-2 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600">
        <input type="text" class="w-full rounded-md py-1 px-2 mb-1 border border-gray-400 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600"
            x-model="filter" x-ref="filterinput">
        <ul class="py-1 overflow-auto text-base leading-6 rounded-md shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5">
            <template x-for="(value, key) in getlist()" :key="key">
                <li @click="if (!disabled) select(value, key)" :class="{'bg-gray-100 ': isselected(key)}"
                    class="relative py-1 pl-3 mb-1 text-gray-900 select-none pr-9 hover:bg-gray-100 dark:hover:bg-indigo-500 cursor-pointer rounded-md dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600">
                    <span x-text="value" class="block font-normal truncate"></span>

                    <span x-show="isselected(key)"
                        class="absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700">
                        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd"
                                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                clip-rule="evenodd" />
                        </svg>
                    </span>
                </li>
            </template>
        </ul>
    </div>
</div>

<script>
    function selectmenu(datalist, defaultSelected = null, hasOnchange = false, isDisabled = false) {
        return {
            state: false,
            filter: '',
            list: datalist,
            disabled: isDisabled, // Tambahkan properti disabled
            selectedkey: defaultSelected,
            selectedlabel: defaultSelected ? datalist[defaultSelected] : null,
            onchange: hasOnchange ? (selectedkey) => {
                console.log('onchange:', selectedkey);
                ChangeData(selectedkey);
            } : null,

            toggle() {
                if (!this.disabled) {
                    this.state = !this.state;
                    this.filter = '';
                }
            },
            close() {
                this.state = false;
            },
            select(value, key) {
                if (this.disabled) return;
                if (this.selectedkey === key) {
                    this.selectedlabel = null;
                    this.selectedkey = null;
                } else {
                    this.selectedlabel = value;
                    this.selectedkey = key;
                    this.state = false;
                    if (this.onchange) this.onchange(key);
                    this.$dispatch('select-changed', {
                        key: key,
                        value: value,
                        name: '{{ $name }}'
                    });
                }
            },
            isselected(key) {
                return this.selectedkey === key;
            },
            getlist() {
                if (this.filter === '') {
                    return this.list;
                }
                return Object.fromEntries(
                    Object.entries(this.list).filter(([key, value]) =>
                        value.toLowerCase().includes(this.filter.toLowerCase())
                    )
                );
            },
            init() {
                this.$watch('selectedkey', (newValue) => {
                    console.log('selectedkey berubah:', newValue);
                    if (newValue && this.list[newValue]) {
                        this.selectedlabel = this.list[newValue];
                    }
                });
            }
        };
    }
</script>