<!-- Cart Sidebar -->
<div x-show="cartOpen" x-cloak class="fixed inset-0 z-50" x-transition:enter="transition ease-out duration-300" x-transition:leave="transition ease-in duration-200">
    <!-- Backdrop -->
    <div class="absolute inset-0 bg-black bg-opacity-50" @click="cartOpen = false"></div>
    
    <!-- Sidebar -->
    <div class="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-xl" 
         x-transition:enter="transform transition ease-out duration-300"
         x-transition:enter-start="translate-x-full"
         x-transition:enter-end="translate-x-0"
         x-transition:leave="transform transition ease-in duration-200"
         x-transition:leave-start="translate-x-0"
         x-transition:leave-end="translate-x-full">
        
        <div class="flex flex-col h-full">
            <!-- Header -->
            <div class="flex items-center justify-between p-4 border-b">
                <h2 class="text-lg font-semibold">Shopping Cart</h2>
                <button @click="cartOpen = false" class="p-2 text-gray-400 hover:text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            
            <!-- Cart Items -->
            <div class="flex-1 overflow-y-auto p-4">
                @php
                    $cartItems = \App\Models\CartItem::with('product.supplier')
                        ->where('user_id', auth()->id())
                        ->get();
                    $subtotal = $cartItems->sum(fn($item) => $item->quantity * $item->product->price);
                    $tax = $subtotal * 0.15;
                    $total = $subtotal + $tax;
                @endphp
                
                @if($cartItems->isEmpty())
                    <div class="text-center py-12">
                        <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="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
                        </svg>
                        <p class="text-gray-500">Your cart is empty</p>
                        <a href="{{ route('products.index') }}" class="inline-block mt-4 text-blue-600 hover:underline">Start Shopping</a>
                    </div>
                @else
                    <div class="space-y-4">
                        @foreach($cartItems as $item)
                            <div class="flex gap-4 p-3 bg-gray-50 rounded-lg">
                                <div class="w-16 h-16 bg-gray-200 rounded flex items-center justify-center shrink-0">
                                    @if($item->product->image_url)
                                        <img src="{{ $item->product->image_url }}" alt="{{ $item->product->name }}" class="w-full h-full object-cover rounded">
                                    @else
                                        <span class="text-2xl">📦</span>
                                    @endif
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="text-xs text-gray-500">{{ $item->product->supplier->company_name }}</p>
                                    <p class="font-medium text-sm truncate">{{ $item->product->name }}</p>
                                    <p class="text-blue-600 font-semibold">R {{ number_format($item->product->price, 2) }}</p>
                                    <div class="flex items-center gap-2 mt-2">
                                        <form action="{{ route('cart.update', $item->id) }}" method="POST" class="flex items-center">
                                            @csrf
                                            @method('PATCH')
                                            <button type="submit" name="action" value="decrease" class="w-6 h-6 bg-gray-200 rounded text-gray-600 hover:bg-gray-300">-</button>
                                            <span class="w-8 text-center text-sm">{{ $item->quantity }}</span>
                                            <button type="submit" name="action" value="increase" class="w-6 h-6 bg-gray-200 rounded text-gray-600 hover:bg-gray-300">+</button>
                                        </form>
                                        <form action="{{ route('cart.remove', $item->id) }}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="text-red-500 hover:text-red-700 text-sm">Remove</button>
                                        </form>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <p class="font-bold">R {{ number_format($item->quantity * $item->product->price, 2) }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
            
            <!-- Footer -->
            @if($cartItems->isNotEmpty())
                <div class="border-t p-4 space-y-4">
                    <div class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Subtotal</span>
                            <span>R {{ number_format($subtotal, 2) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">VAT (15%)</span>
                            <span>R {{ number_format($tax, 2) }}</span>
                        </div>
                        <div class="flex justify-between text-lg font-bold pt-2 border-t">
                            <span>Total</span>
                            <span class="text-blue-600">R {{ number_format($total, 2) }}</span>
                        </div>
                    </div>
                    <div class="space-y-2">
                        <a href="{{ route('cart.index') }}" class="block w-full py-2 text-center border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50">View Cart</a>
                        <a href="{{ route('checkout') }}" class="block w-full py-2 text-center bg-blue-600 text-white rounded-lg hover:bg-blue-700">Checkout</a>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
