<div class="flex-1 relative" x-data="{ showResults: @entangle('showResults') }">
    <flux:input 
        placeholder="Search customers, vehicles, job cards..." 
        icon="magnifying-glass" 
        class="w-full"
        wire:model.live.debounce.300ms="search"
        x-on:focus="$wire.showResults = true"
        x-on:click.away="$wire.showResults = false"
    />
    
    <!-- Search Results Dropdown -->
    <div x-show="showResults && $wire.search.length >= 2" 
         x-cloak 
         class="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg shadow-lg z-50 max-h-96 overflow-y-auto">
        
        @if(empty($results) && strlen($search) >= 2)
            <div class="p-4 text-sm text-zinc-500 dark:text-zinc-400">
                No results found for "{{ $search }}"
            </div>
        @elseif(!empty($results))
            <div class="py-2">
                @foreach($results as $result)
                    <a href="{{ $result['url'] }}" 
                       wire:navigate
                       class="flex items-center px-4 py-2 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors"
                       x-on:click="$wire.clearSearch()">
                        @if($result['icon'] === 'user')
                            <flux:icon.user class="w-4 h-4 text-zinc-400 mr-3" />
                        @elseif($result['icon'] === 'truck')
                            <flux:icon.truck class="w-4 h-4 text-zinc-400 mr-3" />
                        @elseif($result['icon'] === 'clipboard-document-list')
                            <flux:icon.clipboard-document-list class="w-4 h-4 text-zinc-400 mr-3" />
                        @elseif($result['icon'] === 'calendar')
                            <flux:icon.calendar class="w-4 h-4 text-zinc-400 mr-3" />
                        @else
                            <flux:icon.document class="w-4 h-4 text-zinc-400 mr-3" />
                        @endif
                        <div class="flex-1 min-w-0">
                            <div class="text-sm font-medium text-zinc-900 dark:text-white truncate">
                                {{ $result['title'] }}
                            </div>
                            <div class="text-xs text-zinc-500 dark:text-zinc-400 truncate">
                                {{ $result['subtitle'] }}
                            </div>
                        </div>
                        <span class="ml-2 text-xs text-zinc-400 capitalize">
                            {{ str_replace('_', ' ', $result['type']) }}
                        </span>
                    </a>
                @endforeach
            </div>
        @elseif(strlen($search) < 2)
            <div class="p-4 text-sm text-zinc-500 dark:text-zinc-400">
                Start typing to search...
            </div>
        @endif
    </div>
</div>
