@extends('layouts.app')
@section('title', 'Shopping Cart - AutoPart')

@section('content')
<div class="bg-gray-50 min-h-screen pb-16">
    <div class="bg-brand-dark text-white py-12 mb-8">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl font-extrabold uppercase tracking-widest mb-4">Shopping Cart</h1>
            <div class="flex items-center justify-center space-x-2 text-sm text-gray-400">
                <a href="{{ url('/') }}" class="hover:text-brand-red transition-colors">Home</a>
                <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
                <span class="text-white">Cart</span>
            </div>
        </div>
    </div>

    <div class="container mx-auto px-4" id="cart-container"></div>
</div>

@push('scripts')
<script>
function renderCart() {
    const container = document.getElementById('cart-container');
    const items = CartManager.getItems();

    if (items.length === 0) {
        container.innerHTML = `
            <div class="text-center bg-white p-12 rounded-lg shadow-sm border border-gray-100">
                <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6"><span class="text-4xl">🛒</span></div>
                <h2 class="text-2xl font-bold text-gray-800 mb-4">Your cart is currently empty.</h2>
                <p class="text-gray-500 mb-8 max-w-md mx-auto">Before proceed to checkout you must add some products to your shopping cart.</p>
                <a href="/shop" class="inline-flex items-center space-x-2 bg-brand-red text-white px-8 py-3 rounded font-bold uppercase tracking-wider hover:bg-red-700 transition-colors">
                    <i data-lucide="arrow-left" class="w-5 h-5"></i><span>Return to Shop</span>
                </a>
            </div>`;
        lucide.createIcons();
        return;
    }

    const subtotal = CartManager.getTotal();
    const shipping = 15.00;
    const tax = subtotal * 0.08;
    const total = subtotal + shipping + tax;

    let itemsHtml = items.map(item => `
        <div class="p-4 sm:p-6 flex flex-col sm:grid sm:grid-cols-12 gap-4 items-center border-b border-gray-100">
            <div class="col-span-6 flex items-center space-x-4 w-full">
                <button onclick="CartManager.removeItem(${item.id}); renderCart()" class="text-gray-400 hover:text-brand-red transition-colors shrink-0"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
                <div class="w-20 h-20 bg-gray-50 rounded border border-gray-100 flex items-center justify-center shrink-0">
                    <img src="${item.image}" alt="${item.name}" class="w-16 h-16 object-contain mix-blend-multiply">
                </div>
                <div>
                    <a href="/product/${item.id}" class="font-bold text-gray-800 hover:text-brand-red transition-colors line-clamp-2 text-sm">${item.name}</a>
                    <p class="text-brand-red text-xs font-semibold mt-1">${item.brand}</p>
                </div>
            </div>
            <div class="col-span-2 text-center"><span class="font-bold text-gray-800">$${item.price.toFixed(2)}</span></div>
            <div class="col-span-2 text-center">
                <div class="inline-flex border border-gray-200 rounded">
                    <button onclick="CartManager.updateQuantity(${item.id}, ${item.quantity - 1}); renderCart()" class="w-8 h-8 flex items-center justify-center hover:bg-gray-100 transition-colors text-gray-600 font-bold">-</button>
                    <input type="number" value="${item.quantity}" readonly class="w-10 h-8 text-center font-bold text-sm text-gray-800 border-x border-gray-200 outline-none m-0 p-0">
                    <button onclick="CartManager.updateQuantity(${item.id}, ${item.quantity + 1}); renderCart()" class="w-8 h-8 flex items-center justify-center hover:bg-gray-100 transition-colors text-gray-600 font-bold">+</button>
                </div>
            </div>
            <div class="col-span-2 text-right"><span class="font-extrabold text-brand-dark">$${(item.price * item.quantity).toFixed(2)}</span></div>
        </div>
    `).join('');

    container.innerHTML = `
        <div class="flex flex-col lg:flex-row gap-8">
            <div class="lg:w-2/3">
                <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                    <div class="hidden sm:grid grid-cols-12 gap-4 p-4 bg-gray-50 border-b border-gray-100 text-sm font-bold text-gray-700 uppercase tracking-wide">
                        <div class="col-span-6">Product Details</div>
                        <div class="col-span-2 text-center">Price</div>
                        <div class="col-span-2 text-center">Quantity</div>
                        <div class="col-span-2 text-right">Total</div>
                    </div>
                    ${itemsHtml}
                </div>
            </div>
            <div class="lg:w-1/3">
                <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-6 sticky top-24">
                    <h3 class="text-xl font-bold uppercase border-b border-gray-100 pb-4 mb-6">Cart Totals</h3>
                    <div class="space-y-4 mb-6 text-sm">
                        <div class="flex justify-between text-gray-600"><span>Subtotal</span><span class="font-bold text-gray-800">$${subtotal.toFixed(2)}</span></div>
                        <div class="flex justify-between text-gray-600"><span>Shipping</span><span class="font-bold text-gray-800">$${shipping.toFixed(2)}</span></div>
                        <div class="flex justify-between text-gray-600"><span>Estimated Tax</span><span class="font-bold text-gray-800">$${tax.toFixed(2)}</span></div>
                        <div class="border-t border-gray-100 pt-4 mt-4 flex justify-between">
                            <span class="text-lg font-bold text-gray-800">Total</span>
                            <span class="text-2xl font-extrabold text-brand-red">$${total.toFixed(2)}</span>
                        </div>
                    </div>
                    <a href="/checkout" class="block w-full bg-brand-red text-white py-3 rounded font-bold uppercase tracking-wider text-center hover:bg-red-700 transition-colors mb-4">Proceed to Checkout</a>
                    <a href="/shop" class="block w-full border border-gray-200 text-gray-600 py-3 rounded font-bold uppercase tracking-wider text-center hover:bg-gray-50 hover:text-gray-800 transition-colors">Continue Shopping</a>
                </div>
            </div>
        </div>`;
    lucide.createIcons();
}
document.addEventListener('DOMContentLoaded', renderCart);
</script>
@endpush
@endsection