@model ShoppingCartModel

<div class="order-summary-content mt-3" id="ordersummarypagecart" v-if="vmorder.cart">
    @await Component.InvokeAsync("Widget", new { widgetZone = "order_summary_content_before" })
    <div v-if="typeof vmorder.cart.Items !== 'undefined' && vmorder.cart.Items.length > 0">
        <ul v-if="typeof vmorder.cart.Warnings !== 'undefined' && vmorder.cart.Warnings.length > 0" class="px-0 mb-3">
            <li v-for="item in vmorder.cart.Warnings">
                <div class="alert alert-danger mb-1">{{item}}</div>
            </li>
        </ul>
        <form asp-route="ShoppingCart" method="post" enctype="multipart/form-data" id="shopping-cart-form">
            <div class="col-12">
                <div class="form-row">
                    <div class="col-lg-8 col-12 cart-out-container">
                        <div class="shopping-cart-container">
                            <div class="shopping-cart-container">
                                <table class="shopping-cart table">
                                    <colgroup>
                                        <col span="1">
                                        <col span="1">
                                        <col span="1">
                                        <col>
                                        <col span="1">
                                        <col span="1">
                                        <col span="1">
                                    </colgroup>
                                    <thead>
                                        <tr>
                                            <th v-if="vmorder.cart.IsAllowOnHold && vmorder.cart.IsEditable" class="cart text-center"></th>
                                            <th v-if="vmorder.cart.ShowProductImages" class="product-picture text-center">
                                                @Loc["ShoppingCart.Image"]
                                            </th>
                                            <th class="product text-center">
                                                @Loc["ShoppingCart.Product(s)"]
                                            </th>
                                            <th class="unit-price text-center">
                                                @Loc["ShoppingCart.UnitPrice"]
                                            </th>
                                            <th class="quantity text-center">
                                                @Loc["ShoppingCart.Quantity"]
                                            </th>
                                            <th class="subtotal text-center">
                                                @Loc["ShoppingCart.ItemTotal"]
                                            </th>
                                            <th v-if="vmorder.cart.IsEditable" class="remove-from-cart text-center">
                                                @Loc["Remove"]
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="item in vmorder.cart.Items">
                                            <td v-if="vmorder.cart.IsAllowOnHold && vmorder.cart.IsEditable" class="onhold-cart">
                                                <label class="custom-control custom-switch mb-0 pl-0">
                                                    <input :id="'checkbox_' + item.Id" type="checkbox" :checked="item.IsCart" class="custom-control-input changeshoppingcartitem" v-on:change="vmorder.updateCartType(item.Id, !item.IsCart)" />
                                                    <span class="custom-control-label ml-5"></span>
                                                </label>
                                            </td>
                                            <td v-if="vmorder.cart.ShowProductImages" class="product-picture text-center">
                                                <a :href="'/' + item.ProductSeName">
                                                    <img alt="item.Picture.AlternateText" :src="item.Picture.ImageUrl" title="item.Picture.Title" />
                                                </a>
                                            </td>
                                            <td class="product">
                                                <div class="d-inline-flex align-items-center">
                                                    <a :href="item.ProductUrl" class="product-name">
                                                        {{item.ProductName}}
                                                    </a>
                                                    <div v-if="vmorder.cart.IsEditable && item.AllowItemEditing" class="edit-item">
                                                        <a class="btn btn-link" @@click="vmorder.updateOnCart(item.Id)"><b-icon icon="pencil"></b-icon></a>
                                                    </div>
                                                </div>
                                                <span v-if="vmorder.cart.ShowSku" class="sku-number">
                                                    {{item.Sku}}
                                                </span>
                                                <div v-if="item.AttributeInfo !== ''" v-html="item.AttributeInfo" class="attributes small"></div>
                                                <div v-if="item.WarehouseName !== null" v-html="item.WarehouseName" class="attributes small"></div>
                                                <div v-if="item.VendorName !== null" v-html="item.VendorName" class="attributes small"></div>
                                                <div v-if="item.AuctionInfo !== null" v-html="item.AuctionInfo" class="attributes small"></div>
                                                <div v-if="item.RecurringInfo !== null" v-html="item.RecurringInfo" class="recurring-info"></div>
                                                <div v-if="item.ReservationInfo !== null" v-html="item.ReservationInfo" class="rental-info attributes small"></div>
                                                <div v-if="typeof item.Warnings !== 'undefined' && item.Warnings.length > 0" class="message-error small alert alert-danger mt-2 mb-0">
                                                    <ul v-for="warning in item.Warnings" class="mb-0 p-0">
                                                        <li>{{warning}}</li>
                                                    </ul>
                                                </div>
                                            </td>
                                            <td class="unit-price">
                                                <span class="product-unit-price price">{{item.UnitPrice}}</span>
                                                <div v-if="item.UnitPriceWithoutDiscountValue != item.UnitPriceValue && item.UnitPriceWithoutDiscountValue > 0" class="text-center">
                                                    <del class="small text-danger">{{item.UnitPriceWithoutDiscount}}</del>
                                                </div>
                                            </td>
                                            <td class="quantity">
                                                <div v-if="vmorder.cart.IsEditable">
                                                    <div v-if="item.AllowedQuantities[0]">
                                                        <select :id="'itemquantity' + item.Id" :name="'itemquantity' + item.Id" class="custom-select form-control qty-dropdown" v-on:change="vmorder.updateQuantity('itemquantity', item.Id)">
                                                            <option v-for="qty in item.AllowedQuantities" :selected="qty.Selected" :value="qty.Value">{{qty.Value}}</option>
                                                        </select>
                                                    </div>
                                                    <div v-else>
                                                        <input :id="'itemquantity' + item.Id" :name="'itemquantity' + item.Id" type="number" v-model="item.Quantity" min="1" v-on:change="vmorder.updateQuantity('itemquantity', item.Id)" class="qty-input form-control text-center" />
                                                    </div>
                                                </div>
                                                <div v-else>
                                                    <input :id="'itemquantity' + item.Id" :name="'itemquantity' + item.Id" type="number" :value="item.Quantity" class="qty-input form-control text-center" readonly />
                                                </div>
                                            </td>
                                            <td class="subtotal">
                                                <div v-if="item.Discount" class="d-flex flex-column">
                                                    <p class="mb-0 prod-total">{{item.SubTotal}}</p>
                                                    <div class="discount text-success text-center">
                                                        <span>@Loc["ShoppingCart.ItemYouSave"]: </span>
                                                        <span>{{item.Discount}}</span>
                                                        <span v-if="item.DiscountedQty > 0" class="font-weight-light font-italic">@Loc["ShoppingCart.DiscountedQty"]: </span>
                                                        <span v-if="item.DiscountedQty > 0" class="font-weight-light font-italic">{{item.DiscountedQty}}</span>
                                                    </div>
                                                </div>
                                                <div v-else>
                                                    <p class="mb-0 prod-total">{{item.SubTotal}}</p>
                                                </div>
                                            </td>
                                            <td v-if="vmorder.cart.IsEditable" class="remove-from-cart text-center">
                                                <b-button variant="link" class="deleteshoppingcartitem" @@click="vmorder.deleteitem('@Url.RouteUrl("DeleteCartItem")/'+ item.Id +'?shoppingcartpage=True')">
                                                    <b-icon icon="trash" variant="danger"></b-icon>
                                                </b-button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        @await Component.InvokeAsync("Widget", new { widgetZone = "order_summary_cart_footer" })

                        <div class="common-buttons btn-group btn-group-sm mb-3">
                            <a onclick="location.href='@(Url.RouteUrl("ClearCart"))'" class="btn btn-danger removeAll-cart-button"><span>@Loc["shoppingcart.clearcart"]</span></a>
                            <a onclick="location.href=('@(Url.RouteUrl("ContinueShopping"))')" class="btn btn-outline-secondary continue-shopping-button">@Loc["shoppingcart.continueshopping"]</a>
                        </div>

                        <div class="cart-options">
                            <div class="row">
                                <div v-if="vmorder.cart.IsEditable" class="col-12 col-md-6 checkoutAttributes">
                                    <partial name="Partials/CheckoutAttributes" />
                                </div>
                                <div class="selected-checkout-attributes col-sm-3 col-md-6 col-12 ml-auto justify-content-end text-right mt-3">
                                    <div v-html="vmorder.cart.CheckoutAttributeInfo"></div>
                                </div>
                            </div>
                            @await Component.InvokeAsync("EstimateShipping")
                        </div>
                        <div>
                            @await Component.InvokeAsync("CrossSellProducts")
                        </div>
                    </div>
                    <div class="col-lg-4 col-12 totals">
                        <div class="totals-inner">
                            <partial name="Partials/OrderTotals" />
                            <div class="cart-collaterals">
                                <div class="deals">
                                    @if (Model.GiftVoucherBox.Display)
                                    {
                                        <partial name="Partials/GiftVoucherBox" />
                                    }
                                    @if (Model.DiscountBox.Display)
                                    {
                                        <partial name="Partials/DiscountBox" />
                                    }
                                    @await Component.InvokeAsync("Widget", new { widgetZone = "order_summary_content_deals" })
                                </div>
                            </div>
                            <div v-if="vmorder.cart.IsEditable && vmorder.cart.MinOrderSubtotalWarning != null" class="alert alert-danger">
                                {{vmorder.cart.MinOrderSubtotalWarning}}
                            </div>
                            <template v-if="vmorder.cart.IsEditable && vmorder.cart.MinOrderSubtotalWarning == null">
                                <template v-if-else="vmorder.cart.MinOrderSubtotalWarning !== null">
                                    <template v-if="vmorder.cart.TermsOfServiceOnShoppingCartPage">
                                        <div class="w-100">
                                            <b-form-checkbox id="TermsOfService"
                                                             v-model="vmorder.terms"
                                                             name="TermsOfService">
                                                @Loc["Checkout.TermsOfService.IAccept"]
                                                @if (!Model.TermsOfServicePopup)
                                                {
                                                    <a href="@Url.RouteUrl("Page", new { SeName = PageSeNameConstants.Conditionsofuse })" target="_blank">
                                                        @Loc["Checkout.TermsOfService.Read"]
                                                    </a>
                                                }
                                                else
                                                {
                                                    <span class="read"
                                                          onclick="window.open('@Url.RouteUrl("PagePopup", new { SystemName = PageSeNameConstants.Conditionsofuse })', 450, 500, true)">
                                                        @Loc["Checkout.TermsOfService.Read"]
                                                    </span>
                                                }
                                            </b-form-checkbox>
                                            <div class="alert alert-info my-2" v-show="vmorder.acceptTerms">@Loc["Checkout.TermsOfService.PleaseAccept"]</div>
                                        </div>
                                        <div class="checkout-buttons flex-sm-nowrap flex-wrap text-center mt-3">
                                            <b-button type="button" id="checkoutasguest" v-if="vmorder.cart.ShowCheckoutAsGuestButton" @@click="vmorder.termsCheck(true)" variant="secondary" class="checkout-as-guest-button mx-sm-1 mx-0">
                                                @Loc["Account.Login.CheckoutAsGuest"]
                                            </b-button>
                                            <b-button id="checkout" name="checkout" @@click="vmorder.termsCheck(false)" variant="info" class="checkout-button mt-sm-0 mt-1">
                                                <span v-if="vmorder.cart.IsGuest">
                                                    @Loc["Checkout.Button.Login"]
                                                </span>
                                                <span v-else>
                                                    @Loc["Checkout.Button"]
                                                </span>
                                            </b-button>
                                        </div>
                                    </template>
                                    <template v-else>
                                        <div class="checkout-buttons flex-sm-nowrap flex-wrap text-center mt-3">
                                            <b-button type="button" id="checkoutasguest" v-if="vmorder.cart.ShowCheckoutAsGuestButton" @@click="location.href='@Url.RouteUrl("Checkout")'" variant="secondary" class="checkout-as-guest-button mx-sm-1 mx-0">
                                                @Loc["Account.Login.CheckoutAsGuest"]
                                            </b-button>
                                            <b-button id="checkout" name="checkout" @@click="document.querySelector('#shopping-cart-form').setAttribute('action', '@Url.RouteUrl("StartCheckout")');document.querySelector('#shopping-cart-form').submit();" variant="info" class="checkout-button mt-sm-0 mt-1">
                                                <span v-if="vmorder.cart.IsGuest">
                                                    @Loc["Checkout.Button.Login"]
                                                </span>
                                                <span v-else>
                                                    @Loc["Checkout.Button"]
                                                </span>
                                            </b-button>
                                        </div>
                                    </template>
                                </template>
                            </template>
                            <div class="addon-buttons">
                                <div v-for="pm in vmorder.cart.ButtonPaymentMethodViewComponentNames">
                                    <div v-html="pm"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div v-else class="no-data alert alert-info text-center">
        @Loc["ShoppingCart.CartIsEmpty"]
    </div>
    @await Component.InvokeAsync("Widget", new { widgetZone = "order_summary_content_after" })
</div>

<partial name="Partials/ModelScript" model="Model" />