@props([
    'title' => '',
    'name' => $attributes->wire('model')->value() ?? '',
    'placeholder' => 'اختر من القائمة',
    'options' => [],
    'isrequired' => false,
    'value' => null,
    'hint' => '',
    'mb' => 'mb-3',
    'no_keys' => false,
    'searchable' => true,
    'searchPlaceholder' => 'بحث...',
])

@php
    $wireModel = null;
    $wireDirective = null;

    foreach ($attributes->getAttributes() as $attributeName => $attributeValue) {
        if (str_starts_with($attributeName, 'wire:model')) {
            $wireModel = $attributeValue;
            $wireDirective = $attributeName;
            break;
        }
    }

    $isLivewire = filled($wireModel);
    $isLive = $wireDirective && str_contains($wireDirective, '.live');

    if (! $isLivewire && blank($name)) {
        throw new InvalidArgumentException('يجب تمرير wire:model أو name إلى مكوّن select.');
    }

    $items = collect($options)
        ->map(function ($option, $optionValue) use ($no_keys): array {
            if (is_object($option)) {
                return [
                    'value' => $option->id,
                    'label' => (string) $option->name,
                ];
            }

            return [
                'value' => $no_keys ? $option : $optionValue,
                'label' => (string) __((string) $option),
            ];
        })
        ->values()
        ->all();

    $oldKey = $name
        ? preg_replace('/\[([^\]]+)\]/', '.$1', $name)
        : null;

    $initialValue = $isLivewire
        ? null
        : ($oldKey ? old($oldKey, $value) : $value);
@endphp

<div
    @if ($isLivewire)
        x-data="{
            open: false,
            search: '',
            value: $wire.entangle(@js($wireModel)) @if ($isLive).live @endif,
            items: @js($items),
            get selectedItem() {
                return this.items.find(item => String(item.value) === String(this.value));
            },
            get filteredItems() {
                const query = this.search.trim().toLocaleLowerCase();

                return query === ''
                    ? this.items
                    : this.items.filter(item => String(item.label).toLocaleLowerCase().includes(query));
            },
            selectItem(item) {
                this.value = item.value;
                this.open = false;
                this.search = '';
            }
        }"
    @else
        x-data="{
            open: false,
            search: '',
            value: @js($initialValue),
            items: @js($items),
            get selectedItem() {
                return this.items.find(item => String(item.value) === String(this.value));
            },
            get filteredItems() {
                const query = this.search.trim().toLocaleLowerCase();

                return query === ''
                    ? this.items
                    : this.items.filter(item => String(item.label).toLocaleLowerCase().includes(query));
            },
            selectItem(item) {
                this.value = item.value;
                this.open = false;
                this.search = '';
            }
        }"
    @endif
    x-on:click.outside="open = false"
    x-on:keydown.escape.window="open = false"
    class="relative w-full mb-3 {{ $attributes->get('class') }}"
>
    @unless ($isLivewire)
        <input type="hidden" name="{{ $name }}" x-bind:value="value ?? ''" @disabled($disabled ?? false)>
    @endunless

    @if ($title)
        <label class="kt-form-label mb-2 {{ $attributes->has('required') || $isrequired ? 'required' : '' }}">
            {{ __((string) $title) }}
        </label>
    @endif

    <button
        type="button"
        x-on:click="open = !open"
        @disabled($disabled ?? false)
        class="kt-select !bg-none flex h-9 w-full items-center justify-between rounded-xl border px-3 text-right text-sm transition focus:outline-none"
        @error($name) aria-invalid="true" @enderror
    >
        <span
            class="truncate"
            x-bind:class="selectedItem ? 'text-foreground' : 'text-muted-foreground'"
            x-text="selectedItem ? selectedItem.label : @js(__((string) $placeholder))"
        ></span>
        <svg class="h-4 w-4 shrink-0 text-muted-foreground transition-transform" x-bind:class="{ 'rotate-180': open }" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd" />
        </svg>
    </button>

    <div x-cloak x-show="open" x-transition.opacity.duration.150ms class="absolute z-50 mt-1 w-full rounded-xl border border-border bg-background p-1 text-foreground shadow-lg">
        <input
            x-show="{{ $searchable ? 'true' : 'false' }}"
            x-model="search"
            x-on:click.stop
            type="search"
            class="kt-input my-1 h-9 w-full"
            placeholder="{{ __((string) $searchPlaceholder) }}"
        >
        <div class="max-h-60 overflow-y-auto">
        <template x-for="item in filteredItems" x-bind:key="String(item.value)">
            <button
                type="button"
                x-on:click="selectItem(item)"
                class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-right text-sm transition"
                x-bind:class="String(item.value) === String(value)
                    ? 'bg-sky-600 text-white'
                    : 'text-slate-700 hover:bg-sky-100 hover:text-sky-900 dark:text-slate-200 dark:hover:bg-slate-700 dark:hover:text-white'"
            >
                <span x-text="item.label"></span>
                <svg x-show="String(item.value) === String(value)" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M16.704 5.292a1 1 0 0 1 .004 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 12.586l7.296-7.294a1 1 0 0 1 1.408 0Z" clip-rule="evenodd" />
                </svg>
            </button>
        </template>
        </div>
        <div x-show="filteredItems.length === 0" class="px-3 py-3 text-center text-sm text-muted-foreground">لا توجد خيارات</div>
    </div>

    @if ($hint)
        <div class="kt-form-description">{{ $hint }}</div>
    @endif
    @error($name)
        <div class="JS_error has-error">{{ $message }}</div>
    @enderror
</div>