@page "/Checkout"
@inherits CheckoutBase

<h3>Checkout</h3>


<div class="mb-5">
    <div class="row">
        <div class="col-md-6">
            <h4 class="mb-2">Payment Method</h4>
            <div id="smart-button-container">
                <input type="hidden" name="descriptionInput" id="description" @bind="PaymentDescription" />
                <input name="amountInput" type="hidden" id="amount" @bind="PaymentAmount" />
                <div style="text-align: center; margin-top: 0.625rem;" id="paypal-button-container"></div>
            </div>
        </div>
        @if (ShoppingCartItems == null)
        {
            <div class="row d-flex justify-content-center">
                <div class="col-md-1">
                    <DisplayCustomSpinner />
                </div>
            </div>
        }
        else
        {
            <div class="col-md-6">
                <h4 class="mb-2">Payment Summary</h4>
                @if (ShoppingCartItems.Count() > 0)
                {
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Price</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in ShoppingCartItems)
                            {
                                <tr>
                                    <td>@item.Quantity x @item.ProductName</td>
                                    <td>@item.TotalPrice.ToString("C")</td>
                                </tr>
                            }
                            <tr>
                                <td><b>Total</b></td>
                                <td><b>@PaymentAmount.ToString("C")</b></td>
                            </tr>
                        </tbody>
                    </table>
                }
                else
                {
                    <p class="text-warning">You currently have no items in your shopping cart.</p>
                }
            </div>
        }
    </div>
</div>