<div class="px-4 pt-3">

    {{-- Subtitle item count (judul sudah di header layout) --}}
    @if ($items->isNotEmpty())
        <p class="text-xs text-slate-400 mb-4">
            {{ $items->sum('quantity') }} Item • {{ $partnerCount }} Toko
        </p>
    @else
        <div class="mb-4"></div>
    @endif
    {{-- ══ KERANJANG KOSONG ════════════════════════════════════════════════ --}}
    @if ($items->isEmpty())
        <div class="py-16 flex flex-col items-center text-center">
            <div class="w-20 h-20 bg-orange-50 rounded-full flex items-center justify-center mb-4">
                <svg class="w-10 h-10 text-orange-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/>
                </svg>
            </div>
            <h2 class="font-bold text-slate-700 mb-1">Keranjang masih kosong</h2>
            <p class="text-sm text-slate-400 mb-6 max-w-xs">
                Tambahkan produk dari mitra kami ke keranjang kamu
            </p>
            <a href="{{ route('store.products') }}"
               class="h-12 px-8 inline-flex items-center justify-center bg-orange-500 hover:bg-orange-600
                      text-white text-sm font-semibold rounded-xl shadow-sm shadow-orange-200
                      active:scale-95 transition-all duration-150">
                Mulai Belanja
            </a>
        </div>

    @else

        {{-- ══ DAFTAR ITEM — dikelompokkan per mitra (tampilan saja) ══════════ --}}
        <div class="space-y-4 mb-4">
            @foreach ($groupedItems as $partnerId => $partnerItems)
                @php $partner = $partnerItems->first()->product->partner; @endphp

                <div class="bg-white rounded-xl border border-slate-100 shadow-sm overflow-hidden">

                    {{-- Header grup mitra --}}
                    <div class="flex items-center gap-2 px-3 py-2.5 border-b border-slate-100 bg-slate-50">
                        <svg class="w-3.5 h-3.5 text-orange-400 shrink-0" fill="none" stroke="currentColor"
                             viewBox="0 0 24 24" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  d="M13.5 21v-7.5a.75.75 0 01.75-.75h3a.75.75 0 01.75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349m-16.5 11.65V9.35m0 0a3.001 3.001 0 003.75-.615A2.993 2.993 0 009.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 002.25 1.016c.896 0 1.7-.393 2.25-1.016a3.001 3.001 0 003.75.614m-16.5 0a3.004 3.004 0 01-.621-4.72L4.318 3.44A1.5 1.5 0 015.378 3h13.243a1.5 1.5 0 011.06.44l1.19 1.189a3 3 0 01-.621 4.72m-13.5 8.65h3.75a.75.75 0 00.75-.75V13.5a.75.75 0 00-.75-.75H6.75a.75.75 0 00-.75.75v3.75c0 .415.336.75.75.75z"/>
                        </svg>
                        <span class="text-xs font-semibold text-slate-700">{{ $partner->name ?? 'Mitra' }}</span>
                    </div>

                    {{-- Item-item milik mitra ini --}}
                    <div class="divide-y divide-slate-50">
                        @foreach ($partnerItems as $item)
                            @php $product = $item->product; @endphp
                            <div wire:key="cart-item-{{ $item->id }}">

                                <div class="p-3 flex gap-3">
                                    {{-- Foto --}}
                                    <a href="{{ route('store.products.show', $product->slug) }}"
                                       class="shrink-0 w-16 h-16 rounded-xl overflow-hidden bg-slate-100">
                                        @if ($product->image)
                                            <img src="{{ Storage::url($product->image) }}" alt="{{ $product->name }}"
                                                 class="w-full h-full object-cover" loading="lazy" />
                                        @else
                                            <div class="w-full h-full flex items-center justify-center bg-orange-50">
                                                <svg class="w-6 h-6 text-orange-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                                          d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0H3"/>
                                                </svg>
                                            </div>
                                        @endif
                                    </a>

                                    {{-- Info --}}
                                    <div class="flex-1 min-w-0">
                                        <a href="{{ route('store.products.show', $product->slug) }}"
                                           class="text-sm font-semibold text-slate-800 leading-snug line-clamp-2 hover:text-orange-500">
                                            {{ $product->name }}
                                        </a>
                                        <p class="text-sm font-bold text-orange-500 mt-0.5">
                                            Rp {{ number_format($product->sell_price, 0, ',', '.') }}
                                            <span class="text-[10px] font-normal text-slate-400">/ {{ $product->unit }}</span>
                                        </p>
                                        <div class="flex items-center justify-between mt-2">
                                            <div class="flex items-center gap-2">
                                                <button type="button" wire:click="updateQty({{ $item->id }}, -1)"
                                                    wire:loading.attr="disabled" wire:target="updateQty({{ $item->id }}, -1)"
                                                    class="w-7 h-7 rounded-lg border border-slate-200 flex items-center justify-center
                                                           text-slate-600 hover:border-orange-400 hover:text-orange-500
                                                           active:scale-90 transition-all disabled:opacity-40"
                                                    {{ $item->quantity <= 1 ? 'disabled' : '' }}>
                                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/>
                                                    </svg>
                                                </button>
                                                <span class="w-7 text-center text-sm font-semibold text-slate-800">{{ $item->quantity }}</span>
                                                <button type="button" wire:click="updateQty({{ $item->id }}, 1)"
                                                    wire:loading.attr="disabled" wire:target="updateQty({{ $item->id }}, 1)"
                                                    class="w-7 h-7 rounded-lg border border-slate-200 flex items-center justify-center
                                                           text-slate-600 hover:border-orange-400 hover:text-orange-500
                                                           active:scale-90 transition-all
                                                           {{ $product->isStockManaged() && $item->quantity >= $product->stock ? 'opacity-40 cursor-not-allowed' : '' }}"
                                                    {{ $product->isStockManaged() && $item->quantity >= $product->stock ? 'disabled' : '' }}>
                                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
                                                    </svg>
                                                </button>
                                            </div>
                                            <span class="text-sm font-bold text-slate-700">
                                                Rp {{ number_format($item->subtotal, 0, ',', '.') }}
                                            </span>
                                        </div>
                                    </div>

                                    {{-- Hapus --}}
                                    <button type="button" wire:click="removeItem({{ $item->id }})"
                                            wire:confirm="Hapus produk ini dari keranjang?"
                                        class="shrink-0 w-7 h-7 flex items-center justify-center text-slate-300
                                               hover:text-red-400 active:scale-90 transition-all self-start">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                  d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
                                        </svg>
                                    </button>
                                </div>

                                {{-- Catatan --}}
                                <div class="px-3 pb-3">
                                    <textarea wire:model.defer="itemNotes.{{ $item->id }}"
                                              wire:blur="saveNote({{ $item->id }})"
                                              rows="1"
                                              placeholder="Catatan untuk item ini (opsional)..."
                                              class="w-full px-3 py-2 bg-slate-50 border border-slate-100 rounded-lg text-xs
                                                     text-slate-600 placeholder:text-slate-300 resize-none
                                                     focus:outline-none focus:ring-1 focus:ring-orange-400 focus:border-orange-300
                                                     transition-all"></textarea>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Tombol kosongkan --}}
        <div class="flex justify-end mb-5">
            <button type="button" wire:click="clearCart" wire:confirm="Kosongkan semua keranjang?"
                class="text-xs text-slate-400 hover:text-red-400 underline transition-colors">
                Kosongkan keranjang
            </button>
        </div>

        {{-- ══ RINGKASAN HARGA ═════════════════════════════════════════════ --}}
        <div class="bg-white rounded-xl border border-slate-100 shadow-sm p-4 mb-4">
            <h3 class="text-sm font-bold text-slate-800 mb-3">Ringkasan Belanja</h3>

            <div class="space-y-2.5">
                <div class="flex justify-between items-center">
                    <span class="text-sm text-slate-600">
                        Subtotal ({{ $items->sum('quantity') }} item)
                    </span>
                    <span class="text-sm font-semibold text-slate-800">
                        Rp {{ number_format($subtotal, 0, ',', '.') }}
                    </span>
                </div>

                <div class="flex justify-between items-center">
                    <span class="text-sm text-slate-600 flex items-center gap-1">
                        Ongkos Kirim
                        <span class="text-[10px] text-slate-400 bg-slate-100 px-1.5 py-0.5 rounded-full">
                            dipilih saat checkout
                        </span>
                    </span>
                    <span class="text-sm text-slate-400">—</span>
                </div>
            </div>

            <div class="border-t border-slate-100 mt-3 pt-3 flex justify-between items-center">
                <span class="text-sm font-bold text-slate-800">Total Belanja</span>
                <span class="text-base font-black text-orange-500">
                    Rp {{ number_format($subtotal, 0, ',', '.') }}
                </span>
            </div>

            <p class="text-[10px] text-slate-400 mt-2 text-right">
                * Ongkos kirim belum termasuk, dipilih saat checkout
            </p>
        </div>

        {{-- ══ TOMBOL CHECKOUT ══════════════════════════════════════════════ --}}
        <div class="pb-2">
            <a href="{{ route('store.checkout') }}"
               class="w-full h-12 flex items-center justify-center gap-2 bg-orange-500 hover:bg-orange-600
                      text-white font-semibold text-sm rounded-xl shadow-sm shadow-orange-200
                      active:scale-[0.98] transition-all">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round"
                          d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/>
                </svg>
                Lanjut ke Checkout
            </a>
        </div>

    @endif

    {{-- Toast notifikasi --}}
    <div x-data="{ show: false, msg: '', type: 'success' }"
         @cart-success.window="msg = $event.detail.message; type = 'success'; show = true; setTimeout(() => show = false, 2500)"
         @cart-error.window="msg = $event.detail.message; type = 'error'; show = true; setTimeout(() => show = false, 3000)"
         x-show="show"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 translate-y-2"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed bottom-24 inset-x-4 z-50 max-w-sm mx-auto"
         style="display:none">
        <div :class="type === 'success'
                ? 'bg-green-600 text-white'
                : 'bg-red-600 text-white'"
             class="rounded-xl px-4 py-3 text-sm font-medium shadow-lg flex items-center gap-2">
            <svg x-show="type === 'success'" class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
            </svg>
            <svg x-show="type === 'error'" class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/>
            </svg>
            <span x-text="msg"></span>
        </div>
    </div>

</div>
