<div class="relative" x-data="{ open: @entangle('showResults') }" @click.outside="open = false">
    <div class="relative">
        <input type="text"
               wire:model.live.debounce.300ms="query"
               @focus="if($wire.query.length >= 2) open = true"
               placeholder="{{ __('بحث عام...') }}"
               class="w-full sm:w-64 px-4 py-2 ps-10 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50">
        <svg class="absolute start-3 top-2.5 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
        </svg>
    </div>

    <div x-show="open" x-transition
         class="absolute top-full mt-2 w-full sm:w-96 bg-white rounded-xl shadow-xl border border-gray-200 z-50 max-h-96 overflow-y-auto">
        {{-- Close button for touch --}}
        <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100 sticky top-0 bg-white z-10">
            <span class="text-xs font-medium text-gray-500">{{ __('نتائج البحث') }}</span>
            <button @click="open = false; $wire.set('query', '')" class="flex items-center justify-center w-7 h-7 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="{{ __('إغلاق') }}">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        @if(empty($results))
            <div class="p-4 text-center text-gray-400 text-sm">{{ __('لا توجد نتائج') }}</div>
        @else
            @foreach($results as $result)
            <button wire:click="selectResult('{{ $result['url'] }}')"
                    class="w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-50 active:bg-blue-50 transition-colors text-start border-b border-gray-100 last:border-0">
                <div class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold
                    {{ $result['type'] === 'participant' ? 'bg-blue-100 text-blue-600' :
                       ($result['type'] === 'invoice' ? 'bg-green-100 text-green-600' : 'bg-purple-100 text-purple-600') }}">
                    {{ $result['type'] === 'participant' ? 'م' : ($result['type'] === 'invoice' ? 'ف' : 'مج') }}
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-gray-800 truncate">{{ $result['label'] }}</p>
                    <p class="text-xs text-gray-500 truncate">{{ $result['subtitle'] }}</p>
                </div>
            </button>
            @endforeach
        @endif
    </div>
</div>
