@page "/checkout"
@inject NavigationManager Navigation
@rendermode InteractiveServer
@attribute [Authorize]

<div class="container py-5">
    <h2 class="fw-bold mb-4">Checkout</h2>
    <div class="row g-5">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm p-4 mb-4">
                <h5 class="fw-bold mb-3">Your Items</h5>
                @foreach (var item in ShoppingCart.Items)
                {
                    <div class="d-flex align-items-center justify-content-between pb-3 border-bottom mb-3">
                        <div><h6 class="mb-0">@item.Product!.Name</h6><small class="text-muted">@($"{item.Author!.Name} {item.Author.LastName}")</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>

            <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>

            <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>
            </div>
        </div>

        <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 @ShoppingCart.TotalAmount.ToString("F2")</span></div>
                <div class="d-flex justify-content-between mb-2"><span>VAT (15%)</span><span>R @ShoppingCart.TotalVat.ToString("F2")</span></div>
                <div class="d-flex justify-content-between mb-2"><span>Shipping</span><span>R @($"{ShippingCost: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 @($"{ShoppingCart.TotalAmount + ShoppingCart.TotalVat + ShippingCost:F2}")</h4>
                </div>
                <button class="btn btn-dark w-100 py-3 rounded-pill" @onclick="PayNow">Complete Purchase</button>
            </div>
        </div>

        @if (IsProcessing == true && CheckoutPayload?.Count > 0)
        {
            <form id="payfastForm" action="@PayfastOptions.Value.CheckoutUrl" method="POST">
                @foreach (var field in CheckoutPayload)
                {
                    <input type="hidden" name="@field.Key" value="@field.Value" />
                }
            </form>
        }
    </div>
</div>