<div>
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">الفروع</h1>
        @can('branches.create')
        <a href="{{ route('branches.create') }}" wire:navigate
           class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium">
            <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="M12 4v16m8-8H4"/></svg>
            إضافة فرع
        </a>
        @endcan
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4">
        <div class="flex flex-col sm:flex-row gap-4">
            <div class="flex-1">
                <input type="text" wire:model.live.debounce.300ms="search"
                       placeholder="بحث بالاسم أو الكود..."
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            </div>
            <label class="flex items-center gap-2 cursor-pointer">
                <input type="checkbox" wire:model.live="showInactive" class="w-4 h-4 rounded border-gray-300 text-blue-600">
                <span class="text-sm text-gray-600">عرض غير النشطة</span>
            </label>
        </div>
    </div>

    <!-- Table -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <table class="w-full text-sm" wire:loading.class="opacity-50 pointer-events-none">
            <thead class="bg-gray-50 border-b border-gray-200">
                <tr>
                    <x-ui.sort-header column="name_ar" :sortBy="$sortBy" :sortDir="$sortDir">الفرع</x-ui.sort-header>
                    <th class="px-4 py-3 text-start font-medium text-gray-600">الكود</th>
                    <th class="px-4 py-3 text-start font-medium text-gray-600">المدينة</th>
                    <th class="px-4 py-3 text-start font-medium text-gray-600">الهاتف</th>
                    <x-ui.sort-header column="is_main" :sortBy="$sortBy" :sortDir="$sortDir" align="center">الحالة</x-ui.sort-header>
                    <th class="px-4 py-3 text-center font-medium text-gray-600">إجراءات</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($branches as $branch)
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3">
                        <div class="flex items-center gap-2">
                            <span class="font-medium text-gray-800">{{ $branch->name_ar }}</span>
                            @if($branch->is_main)
                                <span class="px-2 py-0.5 text-xs bg-amber-100 text-amber-700 rounded-full">رئيسي</span>
                            @endif
                        </div>
                        <p class="text-xs text-gray-500">{{ $branch->name }}</p>
                    </td>
                    <td class="px-4 py-3 text-gray-600 font-mono">{{ $branch->code }}</td>
                    <td class="px-4 py-3 text-gray-600">{{ $branch->city ?? '—' }}</td>
                    <td class="px-4 py-3 text-gray-600" dir="ltr">{{ $branch->phone ?? '—' }}</td>
                    <td class="px-4 py-3 text-center">
                        @if($branch->is_active)
                            <span class="px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded-full">نشط</span>
                        @else
                            <span class="px-2 py-0.5 text-xs bg-red-100 text-red-700 rounded-full">متوقف</span>
                        @endif
                    </td>
                    <td class="px-4 py-3 text-center">
                        @can('branches.update')
                        <a href="{{ route('branches.edit', $branch) }}" wire:navigate
                           class="text-blue-600 hover:text-blue-800 text-sm">تعديل</a>
                        @endcan
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-4 py-8 text-center text-gray-500">
                        لا توجد فروع مسجلة
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>

        @if($branches->hasPages())
        <div class="px-4 py-3 border-t border-gray-200">
            {{ $branches->links() }}
        </div>
        @endif
    </div>
</div>
