<div>

    <!-- Cart Items List -->
    <div class="flex-1 overflow-y-auto space-y-3 custom-scrollbar" style="max-height: 500px; min-height: 300px;">
        @forelse ($cartItems as $cartItem)
            <div
                class="group relative flex flex-col gap-3 p-4 bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700 shadow-sm hover:shadow-md hover:border-primary-100 dark:hover:border-primary-900/50 transition-all duration-300">

                <div class="flex justify-between items-start gap-4">
                    <div class="flex items-start gap-3">
                        <!-- Icon/Image Placeholder -->
                        <div
                            class="flex-shrink-0 w-10 h-10 flex items-center justify-center bg-gray-50 dark:bg-gray-700 text-gray-400 dark:text-gray-500 rounded-lg group-hover:bg-primary-50 group-hover:text-primary-500 dark:group-hover:bg-primary-900/20 transition-colors">
                            <img src="{{ $cartItem->feedImage }}" alt="{{ $cartItem->feed?->name }}"
                                class="w-full h-full object-cover rounded-lg">
                        </div>

                        <div>
                            <h3
                                class="font-bold text-gray-900 dark:text-white text-sm leading-tight group-hover:text-primary-600 transition-colors">
                                {{ $cartItem->feed?->name }}
                            </h3>
                            <div class="flex items-center gap-2 mt-1">
                                <span
                                    class="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded">
                                    Rp {{ $cartItem->formatted_unit_price }}
                                </span>
                            </div>
                        </div>
                    </div>

                    <button wire:click="removeCartItem({{ $cartItem['id'] }})" type="button"
                        class="text-gray-400 hover:text-red-500 bg-transparent hover:bg-red-50 dark:hover:bg-red-900/20 p-2 rounded-lg transition-all duration-200"
                        title="Hapus Item">
                        <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>

                <!-- Footer: Calculation & Subtotal -->
                <div
                    class="flex items-center justify-between pt-3 border-t border-dashed border-gray-100 dark:border-gray-700 mt-1">
                    <div class="text-xs font-medium text-gray-500 dark:text-gray-400">
                        <span class="text-gray-800 dark:text-gray-200 font-bold">{{ $cartItem->quantity }}</span>
                        {{ $cartItem->feed?->unit?->alias ?? 'Unit' }}
                    </div>

                    <div class="text-primary-600 dark:text-primary-400 font-bold text-sm">
                        Rp {{ $cartItem->formatted_subtotal }}
                    </div>
                </div>
            </div>
        @empty
            <div class="flex flex-col items-center justify-center h-full py-12 text-center opacity-60">
                <div class="w-20 h-20 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-4">
                    <svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            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 11-4 0 2 2 0 014 0z" />
                    </svg>
                </div>
                <h3 class="text-gray-900 dark:text-white font-semibold text-base">Keranjang Kosong</h3>
                <p class="text-gray-500 dark:text-gray-400 text-sm mt-1 px-8">Pilih pakan di sebelah kiri untuk
                    menambahkan ke keranjang.</p>
            </div>
        @endforelse
    </div>
</div>
