@using System.Globalization
@model ProductOverviewModel
@{
    //prepare "Add to cart" Axios link
    string addtocartlink = "";
    string addtowishlistlink = "";
    string quickviewurl = Url.RouteUrl("QuickView-Product", new { productId = Model.Id });

    var shoppingCartTypeId = (int)ShoppingCartType.ShoppingCart;
    var quantity = 1;
    if (!Model.ShowQty)
    {
        if (Model.ProductPrice.ForceRedirectionAfterAddingToCart)
        {
            addtocartlink = Url.RouteUrl("AddProductCatalog", new { productId = Model.Id, shoppingCartTypeId = shoppingCartTypeId, quantity = quantity, forceredirection = Model.ProductPrice.ForceRedirectionAfterAddingToCart });
        }
        else
        {
            addtocartlink = Url.RouteUrl("AddProductCatalog", new { productId = Model.Id, shoppingCartTypeId = shoppingCartTypeId, quantity = quantity });
        }
        addtowishlistlink = Url.RouteUrl("AddProductCatalog", new { productId = Model.Id, shoppingCartTypeId = (int)ShoppingCartType.Wishlist, quantity = quantity });
    }
    else
    {
        if (Model.ProductPrice.ForceRedirectionAfterAddingToCart)
        {
            addtocartlink = Url.RouteUrl("AddProductCatalog", new { productId = Model.Id, shoppingCartTypeId = shoppingCartTypeId, forceredirection = Model.ProductPrice.ForceRedirectionAfterAddingToCart });
        }
        else
        {
            addtocartlink = Url.RouteUrl("AddProductCatalog", new { productId = Model.Id, shoppingCartTypeId = shoppingCartTypeId });
        }
        addtowishlistlink = Url.RouteUrl("AddProductCatalog", new { productId = Model.Id, shoppingCartTypeId = (int)ShoppingCartType.Wishlist });
    }
    var addtocomparelink = Url.RouteUrl("AddProductToCompare", new { productId = Model.Id });
}

@await Component.InvokeAsync("Widget", new { widgetZone = "productbox_before_content", additionalData = Model })
<article v-bind:class="{ mobile: isMobile()}" class="card product-box mb-2">
    <div class="picture-container">
        <a class="img-container" href="@Url.RouteUrl("Product", new { SeName = Model.SeName })" title="@Model.DefaultPictureModel.Title">
            <b-card-img-lazy alt="@Model.DefaultPictureModel.AlternateText" class="main-product-img" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title"></b-card-img-lazy>
            @if (!string.IsNullOrEmpty(Model.SecondPictureModel.ImageUrl))
            {
                <b-card-img-lazy class="hover-img" alt="@Model.SecondPictureModel.AlternateText" src="@Model.SecondPictureModel.ImageUrl"></b-card-img-lazy>
            }
        </a>
        <a title="@Loc["Products.QuickView"]" class="btn btn-secondary quick-view-button" data-target="ModalQuickView" onclick="AxiosCart.quickview_product('@quickviewurl');return false;">
            <b-icon icon="search"></b-icon>
            <span>@Loc["Products.QuickView"]</span>
        </a>
        @if (!string.IsNullOrEmpty(Model.Flag))
        {
            <div class="product-label">
                <div class="badge badge-info">@Model.Flag</div>
            </div>
        }
    </div>
    <div class="card-body">
        <h3 class="card-title mb-0">
            <a href="@Url.RouteUrl("Product", new { SeName = Model.SeName })">
                @Model.Name
            </a>
        </h3>
        @if (Model.ShowSku && !string.IsNullOrEmpty(Model.Sku))
        {
            <span class="sku">@Model.Sku</span>
        }
        <div class="prices-rating">
            @if (Model.ReviewOverviewModel.AllowCustomerReviews)
            {
                double ratingValue = 0;
                if (Model.ReviewOverviewModel.TotalReviews != 0)
                {
                    ratingValue = Convert.ToDouble(((Model.ReviewOverviewModel.RatingSum * (double)100) / Model.ReviewOverviewModel.TotalReviews) / (double)100);
                }
                <template>
                    <div class="rating">
                        <b-form-rating id="rating-inline-grid-@Model.Id" aria-label="Rating" class="p-0" variant="warning" no-border size="sm" show-value aria-valuenow="@(ratingValue.ToString("0.00", CultureInfo.InvariantCulture))" precision="2" readonly inline value="@(ratingValue.ToString("0.00", CultureInfo.InvariantCulture))"></b-form-rating>
                        <b-link href="@Url.RouteUrl("Product", new { SeName = Model.SeName })">@Model.ReviewOverviewModel.TotalReviews @Loc["Reviews.Overview.Reviews"]</b-link>
                    </div>
                </template>
            }
            @if (Model.ProductType == ProductType.Auction)
            {

                @if (Model.EndTime.HasValue)
                {
                    <div class="countdown-box alert alert-info w-100 mb-1">
                        @if (Model.EndTime > DateTime.UtcNow)
                        {
                            <countdown :end-time="@Model.EndTime.Value.Subtract(new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc)).TotalMilliseconds">
                                <template v-slot:process="{ timeObj }">
                                    <span class="col-form-label">@Loc["AddToCart.Timeleft"]</span>
                                    <span>{{ `${timeObj.d}` }}</span>
                                    <span>{{ `${timeObj.h}` }}</span>
                                    <span>{{ `${timeObj.m}` }}</span>
                                    <span>{{ `${timeObj.s}` }}</span>
                                </template>
                                <template v-slot:finish>
                                    <span>@Loc["ShoppingCart.Auctionends"]</span>
                                </template>
                            </countdown>
                        }
                        else
                        {
                            <div class="d-inline-flex flex-wrap justify-content-center">
                                <label class="ended-label">@Loc["ShoppingCart.Auctionends"]:</label>
                                <div class="count-date">@Model.EndTimeLocalTime.Value.ToString()</div>
                            </div>
                        }
                    </div>
                }
            }
            <div class="prices @if (Model.ProductType == ProductType.Reservation) { <text>reservation-price</text> } ">
                @if (Model.ProductType != ProductType.Auction)
                {
                    <div class="actual-price price">
                        @Model.ProductPrice.Price
                    </div>
                }
                else
                {
                    <div class="actual-price price">
                        @(Model.ProductPrice.HighestBidValue > 0 ? Model.ProductPrice.HighestBid : Model.ProductPrice.StartPrice)
                    </div>
                }
                @if (!String.IsNullOrEmpty(Model.ProductPrice.OldPrice))
                {
                    <div class="old-price price">
                        @Model.ProductPrice.OldPrice
                    </div>
                }
            </div>
        </div>
    </div>
    <div class="card-footer">
        @if (Model.SpecificationAttributeModels.Any())
        {
            <div class="spec-container">
                @{
                    var group = Model.SpecificationAttributeModels.GroupBy(x => x.SpecificationAttributeName);
                }
                <table>
                    <tbody>
                        @foreach (var item in group)
                        {
                            <tr class="attr">
                                <td>
                                    <div class="spec-name">
                                        @{
                                            var groupList = item.ToList();
                                        }
                                        @groupList[0].SpecificationAttributeName:
                                    </div>
                                </td>
                                <td>
                                    @{
                                        var groupList2 = item.ToList();
                                    }
                                    <div class="spec-value">
                                        @foreach (var spec in groupList)
                                        {
                                            <span>
                                                @Html.Raw(spec.ValueRaw)
                                            </span>
                                        }
                                    </div>
                                </td>

                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        }
        @if (Model.ProductAttributeModels.Any())
        {
            <div class="attr-container">
                <table>
                    <tbody>
                        @foreach (var item in Model.ProductAttributeModels)
                        {
                            <tr class="attr">
                                <td>
                                    <div class="attr-name">
                                        @item.Name
                                    </div>
                                </td>
                                <td>
                                    <div class="attr-value">
                                        @foreach (var spec in item.Values)
                                        {
                                            switch (item.AttributeControlType)
                                            {
                                                case AttributeControlType.DropdownList:
                                                case AttributeControlType.RadioList:
                                                case AttributeControlType.Checkboxes:
                                                case AttributeControlType.ReadonlyCheckboxes:
                                                    <a class="btn btn-sm btn-light name" href="@Url.RouteUrl("Product", new { SeName = Model.SeName })?@item.Name=@Html.Raw(spec.Name)">
                                                        @Html.Raw(spec.Name)
                                                    </a>
                                                    break;
                                                case AttributeControlType.ColorSquares:
                                                    if ((spec.PictureModel.FullSizeImageUrl) != null)
                                                    {
                                                        <a class="btn btn-sm btn-light name color-container" title="@spec.Name" @@click="productImage($event)" data-href="@spec.PictureModel.FullSizeImageUrl">
                                                            <span class="color" style="background-color:@spec.ColorSquaresRgb;">&nbsp;</span>
                                                        </a>
                                                    }
                                                    else
                                                    {
                                                        <a class="btn btn-sm btn-light name color-container" title="@spec.Name" href="@Url.RouteUrl("Product", new { SeName = Model.SeName })?@item.Name=@Html.Raw(spec.Name)">
                                                            <span class="color" style="background-color:@spec.ColorSquaresRgb;">&nbsp;</span>
                                                        </a>
                                                    }
                                                    break;
                                                case AttributeControlType.ImageSquares:
                                                    if ((spec.PictureModel.FullSizeImageUrl) != null)
                                                    {
                                                        <a class="btn btn-sm btn-light p-1 name image-container" v-on:click='productImage' data-href="@spec.PictureModel.FullSizeImageUrl">
                                                            <img src="@spec.ImageSquaresPictureModel?.ImageUrl" alt="@spec.Name" />
                                                        </a>
                                                    }
                                                    else
                                                    {
                                                        <a class="btn btn-sm btn-light p-1 name image-container" href="@Url.RouteUrl("Product", new { SeName = Model.SeName })?@item.Name=@Html.Raw(spec.Name)">
                                                            <img src="@spec.ImageSquaresPictureModel?.ImageUrl" alt="@spec.Name" />
                                                        </a>
                                                    }
                                                    break;
                                                default:
                                                    break;
                                            }
                                        }
                                    </div>
                                </td>

                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        }
        <div class="desc">
            @Html.Raw(Model.ShortDescription)
        </div>
        @if (Model.ShowQty)
        {
            var qtyId = "addtocart_" + @Model.Id + "_EnteredQuantity";
            <input class="form-control input-group-addon catalog-quantity" type="number" min="1" id="@qtyId" name="@qtyId" value="1">
        }
        <div class="btn-group">
            @if (!Model.ProductPrice.DisableWishlistButton && Model.ProductType == ProductType.SimpleProduct)
            {
                <button v-b-tooltip.hover.bottom title="@Loc["ShoppingCart.AddToWishlist"]" class="btn btn-secondary" onclick="AxiosCart.addproducttocart_catalog('@addtowishlistlink', '@Model.ShowQty', '@Model.Id');return false;">
                    <b-icon icon="heart"></b-icon>
                    <span class="sr-only">AddToWishlist</span>
                </button>
            }
            @if (!Model.ProductPrice.DisableBuyButton)
            {
                var addToCartText = Loc["ShoppingCart.AddToCart"];
                if (Model.ProductType == ProductType.Reservation)
                {
                    addToCartText = Loc["ShoppingCart.Reservation"];
                }
                if (Model.ProductPrice.AvailableForPreOrder)
                {
                    addToCartText = Loc["ShoppingCart.PreOrder"];
                }
                <button class="btn btn-info justify-content-center w-100" onclick="AxiosCart.addproducttocart_catalog('@addtocartlink', '@Model.ShowQty', '@Model.Id');return false;">
                    <b-icon icon="cart2" class="mx-auto d-sm-none d-block"></b-icon>
                    <span class="add-cart-text d-sm-block d-none">@(addToCartText)</span>
                    <span class="sr-only">AddToCart</span>
                </button>
            }
            else
            {
                if (Model.ProductType == ProductType.Auction)
                {

                    var addToCartText = Loc["ShoppingCart.Bids"];
                    <button class="btn btn-info justify-content-center w-100" onclick="AxiosCart.addproducttocart_catalog('@addtocartlink', 'false', '@Model.Id');return false;">
                        <b-icon icon="hammer" class="mx-auto d-sm-none d-block"></b-icon>
                        <span class="add-cart-text d-sm-block d-none">@(addToCartText)</span>
                        <span class="sr-only">AddToCart</span>
                    </button>
                }
            }
            @if (!Model.ProductPrice.DisableAddToCompareListButton && Model.ProductType == ProductType.SimpleProduct)
            {
                <button v-b-tooltip.hover.bottom title="@Loc["ShoppingCart.AddToCompareList"]" class="btn btn-secondary" onclick="AxiosCart.addproducttocomparelist('@Model.Id', '@Loc["Products.ProductHasBeenAddedToCompareList.Link"]', '@Url.RouteUrl("CompareProducts")')">
                    <span class="sr-only">AddToCompareList</span>
                    <b-icon icon="shuffle"></b-icon>
                </button>
            }
        </div>
    </div>
</article> 