<div class="relative">
    <select wire:model.live="activeBranchId"
            class="appearance-none bg-gray-50 border border-gray-200 rounded-lg px-3 py-1.5 pe-8 text-sm font-medium text-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 cursor-pointer">
        <option value="all">{{ __('كل الفروع') }}</option>
        @foreach($branches as $branch)
            <option value="{{ $branch->id }}">{{ $branch->name_ar }}</option>
        @endforeach
    </select>
    <div class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-2.5">
        <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
    </div>
</div>
