@model ProductDetailsModel
@inject SeoSettings seoSettings
@inject IPageHeadBuilder pagebuilder

@{
    Layout = "_SingleColumn";

    //title, meta
    pagebuilder.AddTitleParts(!String.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Name);
    pagebuilder.AddMetaDescriptionParts(Model.MetaDescription);
    pagebuilder.AddMetaKeywordParts(Model.MetaKeywords);

    //canonical URL
    if (seoSettings.CanonicalUrlsEnabled)
    {
        var productUrl = Url.RouteUrl("Product", new { SeName = Model.SeName }, this.Url.ActionContext.HttpContext.Request.Scheme);
        pagebuilder.AddCanonicalUrlParts(productUrl);
    }
}
@section meta{

    @if (seoSettings.OpenGraphMetaTags)
    {
        <meta property="og:type" content="product" />
        <meta property="og:title" content="@Html.Encode(Model.Name)" />
        <meta property="og:description" content="@Html.Encode(Model.MetaDescription)" />
        <meta property="og:image" content="@Model.DefaultPictureModel.ImageUrl" />
        <meta property="og:image:url" content="@Model.DefaultPictureModel.ImageUrl" />
        <meta property="og:url" content="@this.Url.ActionContext.HttpContext.Request.GetEncodedUrl()" />
        <meta property="og:site_name" content="@Html.Encode(Model.CurrentStoreName)" />
    }
    @if (seoSettings.TwitterMetaTags)
    {
        <meta property="twitter:card" content="summary" />
        <meta property="twitter:site" content="@Html.Encode(Model.CurrentStoreName)" />
        <meta property="twitter:title" content="@Html.Encode(Model.Name)" />
        <meta property="twitter:description" content="@Html.Encode(Model.MetaDescription)" />
        <meta property="twitter:image" content="@Model.DefaultPictureModel.ImageUrl" />
        <meta property="twitter:url" content="@this.Url.ActionContext.HttpContext.Request.GetEncodedUrl()" />
    }
}
<!--product breadcrumb-->
@section Breadcrumb
{
    <partial name="Partials/Breadcrumbs" model="Model.Breadcrumb" />
}
@await Component.InvokeAsync("Widget", new { widgetZone = "productdetails_after_breadcrumb", additionalData = Model.Id })
<div class="page product-details-page product-standard product-grouped">
    @await Component.InvokeAsync("Widget", new { widgetZone = "productdetails_top", additionalData = Model.Id })
    <validation-observer ref="ProductFormObserver">
        <form asp-route="Product" asp-route-sename="@Model.SeName" method="post" id="product-details-form" ref="form" v-on:submit.prevent="formSubmitParam($event, vm.$refs.ProductFormObserver)">
            <div itemscope itemtype="http://schema.org/Product" data-productid="@Model.Id">
                <div class="product-essential">
                    <div class="container">
                        <div class="row">
                            <vc:widget widget-zone="productdetails_before_pictures" additional-data="@Model.Id"></vc:widget>
                            <!--product pictures-->
                            <partial name="Partials/Pictures" model="Model" />
                            <vc:widget widget-zone="productdetails_after_pictures" additional-data="@Model.Id"></vc:widget>
                            <div class="col-xl-6 col-lg-6 col-md-7 col-12 overview pl-md-3 pl-0 pr-0">
                                @if (!string.IsNullOrEmpty(Model.Flag))
                                {
                                    <div class="product-label">
                                        <div class="badge badge-info">@Model.Flag</div>
                                    </div>
                                }
                                <partial name="Partials/Unavailable" model="Model" />
                                <div class="product-name">
                                    <h1 class="generalTitle mb-3" itemprop="name">
                                        @Model.Name
                                    </h1>
                                </div>
                                @if (!String.IsNullOrEmpty(Model.ShortDescription))
                                {
                                    <div class="short-description mb-3">
                                        @Html.Raw(Model.ShortDescription)
                                    </div>
                                }
                                @await Component.InvokeAsync("Widget", new { widgetZone = "productdetails_overview_top", additionalData = Model.Id })
                                <!--product reviews-->
                                @if (Model.ProductReviewOverview.AllowCustomerReviews)
                                {
                                    <partial name="Partials/ProductReviewOverview" model="Model.ProductReviewOverview" />
                                }
                                <!--product collections-->
                                @if (Model.ProductCollections.Any())
                                {
                                    <partial name="Partials/Collections" model="Model.ProductCollections" />
                                }
                                <!--warehouses-->
                                @if (Model.AllowToSelectWarehouse)
                                {
                                    <partial name="Partials/Warehouses" model="Model" />
                                }
                                <!--compare, email a friend-->
                                <b-btn-group class="mt-2 mb-3 w-100">
                                    @await Component.InvokeAsync("Widget", new { widgetZone = "productdetails_inside_overview_buttons_before", additionalData = Model.Id })
                                    <partial name="Partials/ProductsComparison" model="Model" />
                                    <partial name="Partials/SendFriend" model="Model" />
                                    @await Component.InvokeAsync("Widget", new { widgetZone = "productdetails_inside_overview_buttons_after", additionalData = Model.Id })
                                </b-btn-group>
                                <partial name="Partials/ShareButton" model="Model" />
                                @await Component.InvokeAsync("Widget", new { widgetZone = "productdetails_overview_bottom", additionalData = Model.Id })
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 px-0 my-3">
                    <div>
                        <b-tabs content-class="mt-3" align="center">
                            <b-tab title="@Loc["Products.Description"]" active>
                                @Html.Raw(Model.FullDescription)
                            </b-tab>
                            @if (Model.ProductTags.Any())
                            {
                                <b-tab title="@Loc["Products.Tags"]">
                                    <partial name="Partials/ProductTags" model="Model.ProductTags" />
                                </b-tab>
                            }
                            @if (Model.ProductSpecifications.Any())
                            {
                                <b-tab title="@Loc["Products.Specs"]">
                                    <partial name="Partials/ProductSpecifications" model="Model.ProductSpecifications" />
                                </b-tab>
                            }
                            @if (Model.ProductReviewOverview.AllowCustomerReviews)
                            {
                                <b-tab id="review-tab" title="@Loc["Products.Reviews"]" :active="active ? true : false">
                                    @await Component.InvokeAsync("ProductReviews", new { productId = Model.Id })
                                </b-tab>
                            }
                            @if (Model.AskQuestionOnProduct)
                            {
                                <b-tab title="@Loc["Products.ContactUs"]" @if (Model.ProductAskQuestion.DisplayCaptcha) { <text> @@click="askquestion.getCaptcha()" </text> }>
                                    <partial name="Partials/AskQuestionOnProduct" model="Model.ProductAskQuestion" />
                                </b-tab>
                            }
                        </b-tabs>
                    </div>
                </div>
                @await Component.InvokeAsync("Widget", new { widgetZone = "productdetails_before_collateral", additionalData = Model.Id })
                <div class="product-collateral">
                    <div>
                        <!--associated products-->
                        @foreach (var variant in Model.AssociatedProducts)
                        {
                            <di class="card overflow-hidden associatedItem mb-3">
                                <div class="row no-gutters">
                                    <div class="col-lg-3 col-md-4">
                                        <img class="img-fluid" id="main-product-img-@variant.Id" alt="@variant.DefaultPictureModel.AlternateText" src="@variant.DefaultPictureModel.ImageUrl" class="rounded-0" />
                                    </div>
                                    <div class="col-lg-9 col-md-8">
                                        <div class="card-body overview" title="@variant.Name">
                                            <div>
                                                @Html.Raw(variant.ShortDescription)
                                            </div>
                                            <!--availability-->
                                            <partial name="Partials/Availability" model="variant" />
                                            <!--Code products - SKU, MAN, GTIN, Vendor info -->
                                            <partial name="Partials/Codes" model="variant" />
                                            <!--delivery-->
                                            @if ((variant.FreeShippingNotificationEnabled && Model.IsFreeShipping) || !string.IsNullOrWhiteSpace(variant.DeliveryDate)
                                   || variant.NotReturnable || variant.AdditionalShippingCharge > 0)
                                            {
                                                <partial name="Partials/DeliveryInfo" model="variant" />
                                            }
                                            <!--sample download-->
                                            @if (variant.HasSampleDownload)
                                            {
                                                <partial name="Partials/DownloadSample" model="variant" />
                                            }
                                            <!--attributes-->
                                            @{
                                                if (variant.ProductAttributes.Any())
                                                {
                                                    var dataDictAttributes = new ViewDataDictionary(ViewData);
                                                    dataDictAttributes.TemplateInfo.HtmlFieldPrefix = string.Format("attributes_{0}", variant.Id);
                                                    <partial name="Partials/ProductAttributes" model="variant.ProductAttributes" view-data="dataDictAttributes" />
                                                }
                                            }
                                            <!--gift voucher-->
                                            @{
                                                if (variant.GiftVoucher.IsGiftVoucher)
                                                {
                                                    var dataDictGiftVoucher = new ViewDataDictionary(ViewData);
                                                    dataDictGiftVoucher.TemplateInfo.HtmlFieldPrefix = string.Format("giftvoucher_{0}", variant.Id);
                                                    <partial name="Partials/GiftVoucherInfo" model="variant.GiftVoucher" view-data="dataDictGiftVoucher" />
                                                }
                                            }
                                            <!--price breaks-->
                                            @if (variant.TierPrices.Any())
                                            {
                                                <partial name="Partials/TierPrices" model="variant.TierPrices" />
                                            }
                                            @{
                                                var dataDictAddToCart = new ViewDataDictionary(ViewData);
                                                dataDictAddToCart.TemplateInfo.HtmlFieldPrefix = string.Format("addtocart_{0}", variant.Id);
                                            }
                                            <!--price & add to cart-->
                                            @{
                                                var dataDictPrice = new ViewDataDictionary(ViewData);
                                                dataDictPrice.TemplateInfo.HtmlFieldPrefix = string.Format("price_{0}", variant.Id);
                                                <partial name="Partials/Prices" model="variant.ProductPrice" view-data="dataDictPrice" />
                                            }
                                            @{
                                                <partial name="Partials/AddToCart" model="variant.AddToCart" view-data="dataDictAddToCart" />
                                                var dataDictAddToWishlist = new ViewDataDictionary(ViewData);
                                                dataDictAddToWishlist.TemplateInfo.HtmlFieldPrefix = string.Format("addtocart_{0}", variant.Id);
                                                <div class="mt-2">
                                                    <partial name="Partials/AddToWishlist" model="variant.AddToCart" view-data="dataDictAddToWishlist" />
                                                </div>
                                            }
                                        </div>
                                    </div>
                                </div>
                            </di>
                        }

                        @if (Model.AssociatedProducts.Count == 0)
                        {
                            <div class="no-associated-products">
                                @Loc["Products.NoAssociatedProducts"]
                            </div>
                        }
                    </div>
                </div>
                @if (Model.RenderCaptcha)
                {
                    <partial name="Partials/Captcha" />
                }
            </div>
            @await Component.InvokeAsync("RelatedProducts", new { productId = Model.Id })
        </form>
    </validation-observer>
    @if (Model.EmailAFriendEnabled)
    {
        @await Component.InvokeAsync("ProductEmailAFriend", new { productId = Model.Id })
    }
    @await Component.InvokeAsync("Widget", new { widgetZone = "productdetails_bottom", additionalData = Model.Id })
</div>
