@extends('layouts.app')

@section('title', 'Shopping Cart')

@section('content')
<div class="bg-gray-50 min-h-screen py-8">
    <div class="container mx-auto px-4">
        <h1 class="text-3xl font-bold text-gray-900 mb-8">Shopping Cart</h1>

        @if($cartItems->count() > 0)
            <div class="grid lg:grid-cols-3 gap-8">
                <!-- Cart Items -->
                <div class="lg:col-span-2">
                    <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                        <div class="p-6 border-b">
                            <div class="flex justify-between items-center">
                                <h2 class="font-semibold text-lg">{{ $cartItems->count() }} Items</h2>
                                <form action="{{ route('cart.clear') }}" method="POST" onsubmit="return confirm('Clear all items from cart?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 hover:text-red-700 text-sm">Clear Cart</button>
                                </form>
                            </div>
                        </div>

                        <div class="divide-y">
                            @foreach($cartItems as $item)
                                <div class="p-6 flex gap-4">
                                    <!-- Product Image -->
                                    <div class="w-24 h-24 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
                                        @if($item->product->image_url)
                                            <img src="{{ $item->product->image_url }}" alt="{{ $item->product->name }}" class="w-full h-full object-cover">
                                        @else
                                            <div class="w-full h-full flex items-center justify-center text-3xl text-gray-300">📦</div>
                                        @endif
                                    </div>

                                    <!-- Product Details -->
                                    <div class="flex-1">
                                        <div class="flex justify-between">
                                            <div>
                                                <h3 class="font-semibold text-gray-900">
                                                    <a href="{{ route('products.show', $item->product->id) }}" class="hover:text-blue-600">
                                                        {{ $item->product->name }}
                                                    </a>
                                                </h3>
                                                <p class="text-sm text-gray-500">{{ $item->product->supplier?->company_name }}</p>
                                                <p class="text-sm text-gray-500">SKU: {{ $item->product->sku }}</p>
                                            </div>
                                            <form action="{{ route('cart.remove', $item->id) }}" method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="text-gray-400 hover:text-red-600">
                                                    <svg class="w-5 h-5" 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"></path>
                                                    </svg>
                                                </button>
                                            </form>
                                        </div>

                                        <div class="mt-4 flex items-center justify-between">
                                            <!-- Quantity Controls -->
                                            <div class="flex items-center border border-gray-300 rounded-lg">
                                                <form action="{{ route('cart.update', $item->id) }}" method="POST" class="inline">
                                                    @csrf
                                                    @method('PATCH')
                                                    <input type="hidden" name="action" value="decrease">
                                                    <button type="submit" class="px-3 py-1 text-gray-600 hover:bg-gray-100">-</button>
                                                </form>
                                                <span class="px-4 py-1 font-medium">{{ $item->quantity }}</span>
                                                <form action="{{ route('cart.update', $item->id) }}" method="POST" class="inline">
                                                    @csrf
                                                    @method('PATCH')
                                                    <input type="hidden" name="action" value="increase">
                                                    <button type="submit" class="px-3 py-1 text-gray-600 hover:bg-gray-100">+</button>
                                                </form>
                                            </div>

                                            <!-- Price -->
                                            <div class="text-right">
                                                <p class="text-sm text-gray-500">R {{ number_format($item->product->price, 2) }} each</p>
                                                <p class="font-bold text-lg text-blue-600">R {{ number_format($item->quantity * $item->product->price, 2) }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- Order Summary -->
                <div class="lg:col-span-1">
                    <div class="bg-white rounded-2xl shadow-sm p-6 sticky top-4">
                        <h2 class="font-semibold text-lg mb-6">Order Summary</h2>

                        <div class="space-y-4 mb-6">
                            <div class="flex justify-between">
                                <span class="text-gray-600">Subtotal</span>
                                <span class="font-medium">R {{ number_format($subtotal, 2) }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">VAT (15%)</span>
                                <span class="font-medium">R {{ number_format($tax, 2) }}</span>
                            </div>
                            <div class="flex justify-between text-sm text-gray-500">
                                <span>Delivery</span>
                                <span>Calculated at checkout</span>
                            </div>
                            <div class="border-t pt-4 flex justify-between">
                                <span class="font-bold text-lg">Total</span>
                                <span class="font-bold text-lg text-blue-600">R {{ number_format($total, 2) }}</span>
                            </div>
                        </div>

                        <a href="{{ route('checkout') }}" class="block w-full bg-blue-600 text-white text-center py-3 px-6 rounded-xl font-semibold hover:bg-blue-700 transition">
                            Proceed to Checkout
                        </a>

                        <a href="{{ route('products.index') }}" class="block text-center mt-4 text-blue-600 hover:underline">
                            Continue Shopping
                        </a>
                    </div>
                </div>
            </div>
        @else
            <div class="bg-white rounded-2xl shadow-sm p-12 text-center">
                <div class="text-6xl mb-4">🛒</div>
                <h2 class="text-2xl font-bold text-gray-900 mb-2">Your cart is empty</h2>
                <p class="text-gray-600 mb-6">Looks like you haven't added any products yet.</p>
                <a href="{{ route('products.index') }}" class="inline-block bg-blue-600 text-white px-8 py-3 rounded-xl font-semibold hover:bg-blue-700 transition">
                    Start Shopping
                </a>
            </div>
        @endif
    </div>
</div>
@endsection