59 lines
2.9 KiB
PHP
59 lines
2.9 KiB
PHP
<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>
|