<div>
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">سلة المشتريات</h1>
            <p class="text-sm text-gray-500 mt-1">{{ $summary->itemCount() }} عنصر · {{ $summary->totalQuantity() }} قطعة</p>
        </div>
        @if(!$summary->isEmpty())
            <button wire:click="clearCart" wire:confirm="هل أنت متأكد من تفريغ السلة؟"
                    class="text-sm text-red-500 hover:text-red-700 font-medium transition">
                تفريغ السلة
            </button>
        @endif
    </div>

    @if($summary->isEmpty())
        <div class="bg-white rounded-2xl border border-gray-200 p-12 text-center">
            <svg class="w-16 h-16 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>
            <p class="text-gray-500 mb-4">السلة فارغة</p>
            <a href="{{ route('merchant.products') }}" class="inline-block bg-emerald-600 hover:bg-emerald-700 text-white font-medium px-6 py-2.5 rounded-xl transition">
                تصفح المنتجات
            </a>
        </div>
    @else
        <div class="grid lg:grid-cols-3 gap-6">
            <div class="lg:col-span-2 space-y-3">
                @foreach($summary->groupedByProduct() as $group)
                    <div class="bg-white rounded-2xl border border-gray-200 overflow-hidden">
                        <div class="px-5 py-3 bg-gradient-to-l from-emerald-50 to-teal-50 border-b border-gray-100 flex items-center justify-between">
                            <div>
                                <h3 class="font-bold text-gray-800">{{ $group['product_name'] }}</h3>
                                <p class="text-xs text-gray-500">إجمالي الكمية: {{ $group['total_qty'] }} قطعة</p>
                            </div>
                            <div class="text-left">
                                <p class="text-sm font-bold text-emerald-600">{{ number_format($group['unit_price'], 2) }} ج.م / قطعة</p>
                                @if($group['tier'])
                                    <p class="text-xs text-gray-500">شريحة: {{ $group['tier']->min_qty }}-{{ $group['tier']->max_qty ?? '∞' }}</p>
                                @endif
                            </div>
                        </div>
                        <div class="divide-y divide-gray-50">
                            @foreach($group['items'] as $item)
                                <div class="px-5 py-3 flex items-center gap-4">
                                    <div class="shrink-0 w-14 h-14 rounded-xl overflow-hidden bg-gray-100">
                                        @if(!empty($item['image_path']))
                                            <img src="{{ asset('storage/' . $item['image_path']) }}" alt="{{ $item['pattern_name'] }}"
                                                 class="w-full h-full object-cover">
                                        @else
                                            <div class="w-full h-full flex items-center justify-center text-gray-300">
                                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z"/></svg>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <p class="text-sm font-medium text-gray-800">{{ $item['product_name'] }} — {{ $item['pattern_name'] }}</p>
                                        <p class="text-xs text-gray-500">{{ $item['color'] }} · {{ $item['sku'] }}</p>
                                    </div>
                                    <div class="flex items-center gap-4 shrink-0">
                                        <div class="flex items-center gap-1">
                                            <button wire:click="updateQuantity({{ $item['variant_id'] }}, {{ $item['quantity'] - 1 }})"
                                                    class="w-8 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-gray-600 transition">-</button>
                                            <span class="w-10 text-center text-sm font-medium">{{ $item['quantity'] }}</span>
                                            <button wire:click="updateQuantity({{ $item['variant_id'] }}, {{ $item['quantity'] + 1 }})"
                                                    class="w-8 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-gray-600 transition">+</button>
                                        </div>
                                        <p class="text-sm font-bold text-gray-800 w-24 text-left">{{ number_format($item['line_total'], 2) }} ج.م</p>
                                        <button wire:click="removeItem({{ $item['variant_id'] }})"
                                                class="text-red-400 hover:text-red-600 transition">
                                            <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 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                        </button>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>

            <div>
                <div class="bg-white rounded-2xl border border-gray-200 p-6 sticky top-24">
                    <h3 class="font-bold text-gray-800 mb-4">ملخص السلة</h3>
                    <div class="space-y-3 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-500">الإجمالي الفرعي</span>
                            <span class="font-semibold">{{ number_format($summary->subtotal, 2) }} ج.م</span>
                        </div>
                        <div class="flex justify-between text-emerald-600">
                            <span>النقاط المتوقعة</span>
                            <span class="font-semibold">+{{ $summary->pointsEarned }} نقطة</span>
                        </div>
                        <hr class="border-gray-100">
                        <div class="flex justify-between text-lg">
                            <span class="font-bold text-gray-800">الإجمالي</span>
                            <span class="font-bold text-emerald-600">{{ number_format($summary->total, 2) }} ج.م</span>
                        </div>
                    </div>
                    <a href="{{ route('merchant.checkout') }}"
                       class="mt-6 block w-full bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-3 text-center rounded-xl transition shadow-lg shadow-emerald-500/25">
                        متابعة الشراء
                    </a>
                    <a href="{{ route('merchant.products') }}"
                       class="mt-3 block w-full text-center text-sm text-gray-500 hover:text-gray-700 transition">
                        متابعة التسوق
                    </a>
                </div>
            </div>
        </div>
    @endif
</div>
