<div class="relative" x-data="{ open: false }" @click.away="open = false">
    {{-- Trigger Button --}}
    <button @click="open = !open" type="button"
            class="inline-flex items-center gap-2 px-3 py-2 rounded-lg border-2 transition-all text-sm font-bold
                {{ $isPinned
                    ? 'bg-emerald-50 border-emerald-400 text-emerald-800 shadow-sm shadow-emerald-100'
                    : 'bg-amber-50 border-amber-400 text-amber-800 shadow-sm shadow-amber-100 animate-pulse hover:animate-none' }}">
        {{-- Branch icon --}}
        <svg class="w-4 h-4 shrink-0" 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>

        {{-- Branch name --}}
        <span class="max-w-[120px] truncate">
            @if($selectedBranch === 'all')
                {{ __('كل الفروع') }}
            @else
                {{ $branches->firstWhere('id', (int) $selectedBranch)?->name_ar ?? __('كل الفروع') }}
            @endif
        </span>

        {{-- Pin indicator --}}
        @if($isPinned)
        <svg class="w-3.5 h-3.5 text-emerald-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 3.636a1 1 0 011.414 0l.354.353 4.95-2.474a1 1 0 011.11.208l2.829 2.828a1 1 0 01.207 1.111l-2.474 4.95.354.353a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L8.636 11.464l-4.243 4.243a1 1 0 01-1.414-1.414l4.243-4.243-2.828-2.829a1 1 0 010-1.414L5.808 4.393a1 1 0 01-.758-.757z" clip-rule="evenodd"/></svg>
        @endif

        {{-- Dropdown arrow --}}
        <svg class="w-3 h-3 opacity-60 transition-transform" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/></svg>
    </button>

    {{-- Dropdown --}}
    <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 -translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-1"
         class="absolute top-full mt-2 end-0 w-64 bg-white rounded-xl shadow-xl border border-gray-200 z-50 overflow-hidden" x-cloak>

        {{-- Header --}}
        <div class="px-4 py-3 bg-gray-50 border-b border-gray-200">
            <p class="text-xs font-bold text-gray-500 uppercase tracking-wider">{{ __('اختر الفرع') }}</p>
            @if($isPinned)
            <p class="text-[11px] text-emerald-600 mt-0.5 flex items-center gap-1">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                {{ __('مثبّت — يبقى حتى بعد تسجيل الخروج') }}
            </p>
            @else
            <p class="text-[11px] text-amber-600 mt-0.5">{{ __('اختر فرع وسيتم تثبيته تلقائياً') }}</p>
            @endif
        </div>

        {{-- Branch list --}}
        <div class="py-1">
            {{-- All branches option --}}
            <button wire:click="$set('selectedBranch', 'all')" @click="open = false"
                    class="w-full flex items-center gap-3 px-4 py-2.5 text-start text-sm hover:bg-gray-50 transition
                        {{ $selectedBranch === 'all' ? 'bg-blue-50 text-blue-700 font-bold' : 'text-gray-700' }}">
                <span class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0
                    {{ $selectedBranch === 'all' ? 'bg-blue-100' : 'bg-gray-100' }}">
                    <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="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
                </span>
                <span>{{ __('كل الفروع') }}</span>
                @if($selectedBranch === 'all')
                <svg class="w-4 h-4 ms-auto text-blue-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                @endif
            </button>

            <div class="border-t border-gray-100 my-1"></div>

            {{-- Individual branches --}}
            @foreach($branches as $branch)
            <button wire:click="$set('selectedBranch', '{{ $branch->id }}')" @click="open = false"
                    class="w-full flex items-center gap-3 px-4 py-2.5 text-start text-sm hover:bg-gray-50 transition
                        {{ $selectedBranch == $branch->id ? 'bg-emerald-50 text-emerald-700 font-bold' : 'text-gray-700' }}">
                <span class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0
                    {{ $selectedBranch == $branch->id ? 'bg-emerald-100' : 'bg-gray-100' }}">
                    <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="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>
                </span>
                <span>{{ $branch->name_ar }}</span>
                @if($selectedBranch == $branch->id)
                <svg class="w-4 h-4 ms-auto text-emerald-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                @endif
            </button>
            @endforeach
        </div>

        {{-- Pin/Unpin action --}}
        @if($selectedBranch !== 'all')
        <div class="px-3 py-2.5 border-t border-gray-200 bg-gray-50">
            @if($isPinned)
            <button wire:click="unpin" @click="open = false"
                    class="w-full flex items-center justify-center gap-2 px-3 py-2 text-xs font-medium text-gray-600 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 transition">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"/></svg>
                {{ __('إلغاء التثبيت') }}
            </button>
            @else
            <button wire:click="pin" @click="open = false"
                    class="w-full flex items-center justify-center gap-2 px-3 py-2 text-xs font-medium text-white bg-emerald-600 rounded-lg hover:bg-emerald-700 transition">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                {{ __('تثبيت هذا الفرع') }}
            </button>
            @endif
        </div>
        @endif
    </div>
</div>
