midrandbooks/MidrandBookshop/Components/Pages/Checkout.razor

@page "/checkout"

<div class="container py-5">
    <h2 class="fw-bold mb-4">Checkout</h2>
    <div class="row g-5">

        <!-- LEFT COLUMN: SHIPPING & CART -->
        <div class="col-lg-8">
            <!-- 1. Cart Items -->
            <div class="card border-0 shadow-sm p-4 mb-4">
                <h5 class="fw-bold mb-3">Your Items</h5>
                @foreach (var item in CartItems)
                {
                    <div class="d-flex align-items-center justify-content-between pb-3 border-bottom mb-3">
                        <div><h6 class="mb-0">@item.Title</h6><small class="text-muted">@item.Author</small></div>
                        <div class="d-flex align-items-center gap-3">
                            <div class="d-flex border rounded-pill">
                                <button class="btn btn-sm px-2" @onclick="() => ChangeQuantity(item, -1)">-</button>
                                <span class="px-2 pt-1">@item.Quantity</span>
                                <button class="btn btn-sm px-2" @onclick="() => ChangeQuantity(item, 1)">+</button>
                            </div>
                            <button class="btn btn-sm text-danger" @onclick="() => RemoveFromCart(item)">Remove</button>
                        </div>
                    </div>
                }
            </div>

            <!-- 2. Shipping Options -->
            <div class="card border-0 shadow-sm p-4 mb-4">
                <h5 class="fw-bold mb-3">Shipping Method</h5>
                <div class="form-check mb-2">
                    <input class="form-check-input" type="radio" name="shipping" id="pickup"
                           checked=@(ShippingCost == 0) @onclick="() => ShippingCost = 0">
                    <label class="form-check-label" for="pickup">Pickup from Bookshop (Free)</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="shipping" id="delivery"
                           checked=@(ShippingCost == 60) @onclick="() => ShippingCost = 60">
                    <label class="form-check-label" for="delivery">Home Delivery (R60.00)</label>
                </div>
            </div>

            <!-- 3. Address Fields -->
            <div class="card border-0 shadow-sm p-4">
                <h5 class="fw-bold mb-3">Shipping Address</h5>
                <div class="form-check mb-3">
                    <input class="form-check-input" type="checkbox" id="sameAsBilling" @bind="IsSameAddress">
                    <label class="form-check-label" for="sameAsBilling">Billing address same as shipping</label>
                </div>
                <!-- Add text inputs for address here, show/hide based on IsSameAddress -->
            </div>
        </div>

        <!-- RIGHT COLUMN: STICKY SUMMARY -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm p-4 sticky-top" style="top: 100px;">
                <h5 class="fw-bold mb-3">Order Summary</h5>
                <div class="d-flex justify-content-between mb-2"><span>Subtotal</span><span>R @Subtotal.ToString("F2")</span></div>
                <div class="d-flex justify-content-between mb-2"><span>VAT (15%)</span><span>R @VatAmount.ToString("F2")</span></div>
                <div class="d-flex justify-content-between mb-2"><span>Shipping</span><span>R @ShippingCost.ToString("F2")</span></div>
                <hr />
                <div class="d-flex justify-content-between mb-4">
                    <span class="fw-bold">Total Due</span>
                    <h4 class="fw-bold">R @((Subtotal + VatAmount + ShippingCost).ToString("F2"))</h4>
                </div>
                <button class="btn btn-dark w-100 py-3 rounded-pill">Complete Purchase</button>
            </div>
        </div>
    </div>
</div>

@code {
    private decimal ShippingCost = 0;
    private bool IsSameAddress = true;

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

    // Assuming your CartItems list is managed via a Service or cascading parameter
    // Here it is locally mocked for this example
    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 }
    };

    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);
    private int GetCartTotal() => CartItems.Sum(i => i.Price * i.Quantity);

    public class CartItem
    {
        public int Id { get; set; }
        public string Title { get; set; } = "";
        public string Author { get; set; } = "";
        public int Price { get; set; }
        public int Quantity { get; set; }
    }
}