midrandbooks/MidrandBookshop/Components/Pages/Cart.razor

@page "/cart"

<div class="container py-5" style="max-width: 900px;">
    <div class="d-flex align-items-center justify-content-between mb-5">
        <h2 class="fw-bold m-0">Your Cart</h2>
        <a href="/" class="text-dark text-decoration-none small fw-bold tracking-widest">CONTINUE SHOPPING</a>
    </div>

    @if (!CartItems.Any())
    {
        <div class="text-center py-5 border rounded-3 bg-white">
            <p class="text-muted mb-4">Your collection is currently empty.</p>
            <a href="/" class="btn btn-dark rounded-pill px-4">Browse Catalog</a>
        </div>
    }
    else
    {
        <div class="card border-0 shadow-sm p-4 mb-4">
            @foreach (var item in CartItems)
            {
                <div class="row align-items-center py-4 @(item != CartItems.Last() ? "border-bottom" : "")">
                    <!-- Item Detail -->
                    <div class="col-12 col-md-6 d-flex align-items-center gap-4">
                        <div class="bg-light d-flex align-items-center justify-content-center" style="width: 70px; height: 95px;">
                            <span class="text-muted" style="font-size: 0.5rem;">[COVER]</span>
                        </div>
                        <div>
                            <h5 class="fw-bold mb-1">@item.Title</h5>
                            <p class="text-muted small mb-0">by @item.Author</p>
                        </div>
                    </div>

                    <!-- Quantity -->
                    <div class="col-6 col-md-3 d-flex justify-content-center">
                        <div class="d-flex align-items-center border rounded-pill bg-light px-2">
                            <button class="btn btn-sm border-0 text-dark" @onclick="() => ChangeQuantity(item, -1)">-</button>
                            <span class="px-3 fw-bold">@item.Quantity</span>
                            <button class="btn btn-sm border-0 text-dark" @onclick="() => ChangeQuantity(item, 1)">+</button>
                        </div>
                    </div>

                    <!-- Price & Remove -->
                    <div class="col-6 col-md-3 text-end d-flex align-items-center justify-content-end gap-3">
                        <span class="fw-bold">R @(item.Price * item.Quantity)</span>
                        <button class="btn btn-sm p-1 text-muted" @onclick="() => RemoveFromCart(item)">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                        </button>
                    </div>
                </div>
            }
        </div>

        <!-- Cart Totals Section -->
        <div class="row justify-content-end">
            <div class="col-md-5">
                <div class="bg-white p-4 rounded-3 border">
                    <div class="d-flex justify-content-between mb-3">
                        <span class="text-muted">Subtotal</span>
                        <span class="fw-bold">R @Subtotal.ToString("F2")</span>
                    </div>
                    <div class="d-flex justify-content-between mb-4">
                        <span class="text-muted">VAT (15%)</span>
                        <span class="fw-bold">R @VatAmount.ToString("F2")</span>
                    </div>
                    <hr />
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <span class="fw-bold h5 mb-0">Total</span>
                        <span class="fw-bold h4 mb-0">R @Total.ToString("F2")</span>
                    </div>
                    <a href="/checkout" class="btn btn-dark w-100 rounded-pill py-3">Proceed to Checkout</a>
                </div>
            </div>
        </div>
    }
</div>

@code {
    public class CartItem
    {
        public int Id { get; set; }
        public string Title { get; set; } = string.Empty;
        public string Author { get; set; } = string.Empty;
        public int Price { get; set; }
        public int Quantity { get; set; }
    }

    private List<CartItem> CartItems = new()
    {
        new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
        new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 },
        new CartItem { Id = 3, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Quantity = 1 }
    };

    // Computed Properties for Calculations
    private decimal Subtotal => CartItems.Sum(i => (decimal)i.Price * i.Quantity);
    private decimal VatAmount => Subtotal * 0.15m;
    private decimal Total => Subtotal + VatAmount;

    private void ChangeQuantity(CartItem item, int delta)
    {
        item.Quantity += delta;
        if (item.Quantity <= 0) CartItems.Remove(item);
    }

    private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
}