@props([
    'name' => 'client_id',
    'clients',
    'value' => null,
    'inputId' => 'client_id',
    'required' => true,
    'label' => 'Client',
    'placeholder' => 'Selectionner un client',
    'searchPlaceholder' => 'Rechercher par nom ou societe…',
])

@php
    $selected = old($name, $value);
    $selectedStr = ($selected !== null && $selected !== '') ? (string) $selected : '';
    $options = $clients->map(function ($c) {
        $company = $c->company_name ?? '';

        return [
            'id' => (string) $c->id,
            'label' => $c->name.' - '.$company,
            'haystack' => mb_strtolower($c->name.' '.$company),
        ];
    })->values()->all();
@endphp

<div>
    <label for="{{ $inputId }}-trigger" class="mb-1 block text-sm font-semibold text-slate-700">{{ $label }}</label>
    <div
        class="relative"
        x-data="{
            open: false,
            q: '',
            placeholder: @js($placeholder),
            options: @js($options),
            selectedId: @js($selectedStr),
            get filtered() {
                const t = this.q.trim().toLowerCase();
                if (!t) {
                    return this.options;
                }
                return this.options.filter((o) => o.haystack.includes(t));
            },
            get selectedLabel() {
                const o = this.options.find((x) => x.id === this.selectedId);
                return o ? o.label : '';
            },
            selectOption(o) {
                this.selectedId = o.id;
                this.q = '';
                this.open = false;
            },
            toggleOpen() {
                this.open = !this.open;
                if (this.open) {
                    this.q = '';
                    this.$nextTick(() => this.$refs.search?.focus());
                }
            },
        }"
        @click.outside="open = false"
    >
        <select
            name="{{ $name }}"
            x-model="selectedId"
            class="sr-only"
            tabindex="-1"
            aria-hidden="true"
            @if ($required) required @endif
        >
            <option value="">{{ $placeholder }}</option>
            @foreach ($clients as $client)
                <option value="{{ $client->id }}">{{ $client->name }} - {{ $client->company_name }}</option>
            @endforeach
        </select>

        <button
            type="button"
            id="{{ $inputId }}-trigger"
            @click="toggleOpen()"
            class="flex w-full items-center justify-between gap-2 rounded-lg border border-rose-100 bg-white px-3 py-2.5 text-left text-sm focus:border-[#E83646] focus:outline-none focus:ring-1 focus:ring-[#E83646]"
            :aria-expanded="open"
            aria-haspopup="listbox"
        >
            <span class="min-w-0 flex-1 truncate" :class="selectedLabel ? 'text-slate-900' : 'text-slate-400'" x-text="selectedLabel || placeholder"></span>
            <svg class="h-4 w-4 shrink-0 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
        </button>

        <div
            x-show="open"
            x-cloak
            x-transition
            class="absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-slate-200 bg-white shadow-lg"
            role="listbox"
        >
            <input
                type="search"
                x-ref="search"
                x-model="q"
                autocomplete="off"
                placeholder="{{ $searchPlaceholder }}"
                class="w-full border-b border-slate-100 px-3 py-2 text-sm focus:border-[#E83646] focus:outline-none focus:ring-0"
                @keydown.escape.prevent.stop="open = false"
                @click.stop
            />
            <ul class="max-h-56 overflow-y-auto py-1">
                <template x-for="o in filtered" :key="o.id">
                    <li>
                        <button
                            type="button"
                            class="w-full px-3 py-2 text-left text-sm text-slate-800 hover:bg-rose-50"
                            :class="{ 'bg-rose-50/90 font-medium text-[#E83646]': o.id === selectedId }"
                            role="option"
                            :aria-selected="o.id === selectedId"
                            @click="selectOption(o)"
                            x-text="o.label"
                        ></button>
                    </li>
                </template>
            </ul>
            <p x-show="filtered.length === 0" class="px-3 py-2 text-sm text-slate-500">Aucun client ne correspond.</p>
        </div>
    </div>
</div>