@page "/ShoppingCart"
@inherits ShoppingCartBase

@if(ShoppingCartItems == null && ErrorMessage == null) {
    <div class="row d-flex justify-content-center">
        <div class="col-md-1">
            <DisplayCustomSpinner />
        </div>
    </div>
}
else if(ErrorMessage != null) {
    <DisplayError ErrorMessage="@ErrorMessage"></DisplayError>
}
else {
    <h3 class="mb-5">Shopping Cart</h3>
    <div class="row mb-5">
        <div class="col-md-9">
            @foreach(var item in ShoppingCartItems) {
                <div class="row mb-4">
                    <div class="col-md-4">
                        <img src="@item.ProductImageURL" width="300" class="img-thumbnail" >
                    </div>
                    <div class="col-md-8">
                        <h5>@item.ProductName</h5>
                        <div class="mb-4">@item.ProductDescription</div>
                        <span>Price: <b>@item.Price.ToString("C")</b>
                            <input @oninput = "() => UpdateQuantity_Input(item.Id)" 
                                type="number" @bind="@item.Quantity"/>
                            <button data-itemId="@item.Id" class="btn btn-info btn-sm update-qty"
                                @onclick="(()=> UpdateQuantityCartItem_Click(item.Id, item.Quantity))"
                            >Update Quantity</button>
                        </span>
                        <div>
                            <button @onclick = "(() => DeleteCartItem_Click(item.Id))"
                                class="btn btn-danger sm"><i class="fa fa-trash"></i></button>
                        </div>
                    </div>
                </div>
            }
        </div>
        <div class="col-md-3">
            <h5>Cart Summary</h5>
            <div class="mt-2">
                <div>Total - (@TotalQuantity items)&nbsp; <b>@TotalPrice</b></div>
                <a href="Checkout" class="btn btn-success">
                    <span class="oi oi-credit-card"></span>&nbsp; Proceed to Checkout
                </a>
            </div>
        </div>
    </div>

    
}