@model ProductReviewsModel

@inject Nop.Services.Html.IHtmlFormatter htmlFormatter

<div class="page product-reviews">
    @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductReviewsPageTop, additionalData = Model })
    @if (Model.Items.Count > 0)
    {
        <div class="product-review-list">
            <a name="productreviews"></a>
            <div class="title">
                <strong>@T("Reviews.ExistingReviews")</strong>
            </div>
            @foreach (var review in Model.Items)
            {
                var ratingPercent = review.Rating * 20;
                <div class="product-review-item">
                    <div class="review-item-head">
                        <div class="review-title">
                            <strong>@review.Title</strong>
                        </div>
                        <div class="product-review-box">
                            <div class="rating">
                                <div style="width: @(ratingPercent)%">
                                    @review.Rating
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="review-content">
                        <div class="review-text">
                            @if (!string.IsNullOrEmpty(review.CustomerAvatarUrl))
                            {
                                <div class="avatar">
                                    @if (review.AllowViewingProfiles)
                                    {
                                        <a href="@Url.RouteUrl("CustomerProfile", new { id = review.CustomerId })" class="avatar-img-link">
                                            <img src="@(review.CustomerAvatarUrl)" class="avatar-img" alt="Avatar" />
                                        </a>
                                    }
                                    else
                                    {
                                        <img src="@(review.CustomerAvatarUrl)" class="avatar-img" alt="Avatar" />
                                    }
                                </div>
                            }
                            <div class="text-body">
                                @Html.Raw(htmlFormatter.FormatText(review.ReviewText, false, true, false, false, false, false))
                            </div>
                        </div>
                        @foreach (var reviewType in review.AdditionalProductReviewList.Where(x => x.Rating > 0 && x.VisibleToAllCustomers))
                        {
                            var ratingExtPercent = reviewType.Rating * 20;
                            <div class="review-type-rating-ext">
                                <div class="review-title">
                                    <i>@reviewType.Name</i>
                                </div>
                                <div class="product-review-box">
                                    <div class="rating">
                                        <div style="width: @(ratingExtPercent)%">
                                            @reviewType.Rating
                                        </div>
                                    </div>
                                </div>
                            </div>
                        }
                        <div class="review-info">
                            <span class="user">
                                <label>@T("Reviews.From"):</label>
                                @if (review.AllowViewingProfiles)
                                {
                                    <a href="@Url.RouteUrl("CustomerProfile", new { id = review.CustomerId })">@(review.CustomerName)</a>
                                }
                                else
                                {
                                    <span>@review.CustomerName</span>
                                }
                            </span>
                            <span class="separator">|</span>
                            <span class="date">
                                <label>@T("Reviews.Date"):</label>
                                <span>@review.WrittenOnStr</span>
                            </span>
                        </div>
                        @await Html.PartialAsync("_ProductReviewHelpfulness", review.Helpfulness)
                        @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductReviewsPageInsideReview, additionalData = review })
                        @if (!string.IsNullOrEmpty(review.ReplyText))
                        {
                            <div class="reply">
                                <div class="reply-header">
                                    @T("Reviews.Reply")
                                </div>
                                <div class="reply-text">
                                    @Html.Raw(htmlFormatter.FormatText(review.ReplyText, false, true, false, false, false, false))
                                </div>
                            </div>
                        }
                    </div>
                </div>
            }
        </div>
    }

    @if (!Model.AddProductReview.CanCurrentCustomerLeaveReview)
    {
        <div class="result review-already-added alert alert-success">
            @T("Reviews.OnlyRegisteredUsersCanWriteReviews")
        </div>
    }
    else if (!Model.AddProductReview.CanAddNewReview)
    {
        <div class="result review-already-added">
            @T("Reviews.AlreadyAddedProductReviews")
        </div>
    }
    else
    {
        <div class="write-review" id="review-form">
            <a name="addreview"></a>
            <div class="title">
                <strong>@T("Reviews.Write")</strong>
            </div>
            <form asp-action="ProductReviews" asp-fragment="addreview" method="post">
                <input type="hidden" asp-for="ProductId" />
                <div asp-validation-summary="ModelOnly" class="message-error"></div>
                <div class="fieldset">
                    <div class="form-fields">
                        <div class="row mb-3">
                            <label asp-for="AddProductReview.Title" asp-postfix=":" class="offset-md-1 offset-lg-2 offset-xl-3 col-sm-12 col-md-2 col-lg-2 col-xl-1 col-form-label pl-0 pr-0"></label>
                            <div class="col-sm-12 col-md-5 col-lg-5 col-xl-4">
                                <input asp-for="AddProductReview.Title" class="review-title form-control" asp-disabled="@(!Model.AddProductReview.CanCurrentCustomerLeaveReview)" />
                            </div>
                            <div class="col-sm-12 col-md-4 col-lg-3 col-xl-3">
                                <span asp-validation-for="AddProductReview.Title"></span>
                                <nop-required />
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label asp-for="AddProductReview.ReviewText" asp-postfix=":" class="offset-md-1 offset-lg-2 offset-xl-3 col-sm-12 col-md-2 col-lg-2 col-xl-1 col-form-label pl-0 pr-0"></label>
                            <div class="col-sm-12 col-md-5 col-lg-5 col-xl-4">
                                <textarea asp-for="AddProductReview.ReviewText" class="review-text form-control" asp-disabled="@(!Model.AddProductReview.CanCurrentCustomerLeaveReview)"></textarea>
                            </div>
                            <div class="col-sm-12 col-md-4 col-lg-3 col-xl-3">
                                <span asp-validation-for="AddProductReview.ReviewText"></span>
                                <nop-required />
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="name-description offset-md-1 offset-lg-2 offset-xl-3 col-sm-12 col-md-2 col-lg-2 col-xl-1 pl-0 pr-0 pt-0">
                                <label asp-for="AddProductReview.Rating" asp-postfix=":" class=" col-form-label "></label>
                            </div>
                            <div class="col-sm-12 col-md-5 col-lg-5 col-xl-4">
                                <div class="review-rating">
                                    <ul class="review-main">
                                        <li class="label first">@T("Reviews.Fields.Rating.Bad")</li>
                                        <li class="rating-options">
                                            <div class="form-check custom-radio">
                                                <input asp-for="AddProductReview.Rating" value="0" type="radio" id="addproductrating_0" style="display: none;" />
                                                <label class="form-check-label" for="addproductrating_0"></label>
                                            </div>
                                            <div class="form-check custom-radio">
                                                <input asp-for="AddProductReview.Rating" value="1" type="radio" id="addproductrating_1" class="form-check-input" />
                                                <label class="form-check-label" for="addproductrating_1"></label>
                                            </div>
                                            <div class="form-check custom-radio">
                                                <input asp-for="AddProductReview.Rating" value="2" type="radio" id="addproductrating_2" class="form-check-input" />
                                                <label class="form-check-label" for="addproductrating_2"></label>
                                            </div>
                                            <div class="form-check custom-radio">
                                                <input asp-for="AddProductReview.Rating" value="3" type="radio" id="addproductrating_3" class="form-check-input" />
                                                <label class="form-check-label" for="addproductrating_3"></label>
                                            </div>
                                            <div class="form-check custom-radio">
                                                <input asp-for="AddProductReview.Rating" value="4" type="radio" id="addproductrating_4" class="form-check-input" />
                                                <label class="form-check-label" for="addproductrating_4"></label>
                                            </div>
                                            <div class="form-check custom-radio">
                                                <input asp-for="AddProductReview.Rating" value="5" type="radio" id="addproductrating_5" class="form-check-input" />
                                                <label class="form-check-label" for="addproductrating_5"></label>
                                            </div>
                                        </li>
                                        <li class="label last">@T("Reviews.Fields.Rating.Excellent")</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        @if (Model.ReviewTypeList.Count > 0)
                        {
                            foreach (var additionalReview in Model.AddAdditionalProductReviewList.OrderBy(ob => ob.DisplayOrder).ToList())
                            {
                                var curAdditionalReview = Model.AddAdditionalProductReviewList.IndexOf(additionalReview);
                                <div class="review-rating">
                                    <div class="name-description">
                                        <div class="tooltip">
                                            <label>@Html.Raw(additionalReview.Name):</label>
                                            <span class="tooltiptext">@Html.Raw(additionalReview.Description)</span>
                                        </div>
                                    </div>
                                    <div class="rating-wrapper">
                                        <div class="label first">@T("Reviews.Fields.Rating.Bad")</div>
                                        <div class="rating-options">
                                            <input asp-for="@Model.AddAdditionalProductReviewList[curAdditionalReview].ReviewTypeId" value="@(additionalReview.ReviewTypeId)" type="hidden" />
                                            <input asp-for="@Model.AddAdditionalProductReviewList[curAdditionalReview].Name" value="@(additionalReview.Name)" type="hidden" />
                                            <input asp-for="@Model.AddAdditionalProductReviewList[curAdditionalReview].Description" value="@(additionalReview.Description)" type="hidden" />
                                            <input asp-for="@Model.AddAdditionalProductReviewList[curAdditionalReview].DisplayOrder" value="@(additionalReview.DisplayOrder)" type="hidden" />
                                            <input asp-for="@Model.AddAdditionalProductReviewList[curAdditionalReview].IsRequired" value="@(additionalReview.IsRequired)" type="hidden" />

                                            <input asp-for="@Model.AddAdditionalProductReviewList[curAdditionalReview].Rating" value="0" type="radio" id="addproductratingext_0_@(additionalReview.ReviewTypeId)" style="display: none;" />
                                            <input asp-for="@Model.AddAdditionalProductReviewList[curAdditionalReview].Rating" value="1" type="radio" id="addproductratingext_1_@(additionalReview.ReviewTypeId)" />
                                            <input asp-for="@Model.AddAdditionalProductReviewList[curAdditionalReview].Rating" value="2" type="radio" id="addproductratingext_2_@(additionalReview.ReviewTypeId)" />
                                            <input asp-for="@Model.AddAdditionalProductReviewList[curAdditionalReview].Rating" value="3" type="radio" id="addproductratingext_3_@(additionalReview.ReviewTypeId)" />
                                            <input asp-for="@Model.AddAdditionalProductReviewList[curAdditionalReview].Rating" value="4" type="radio" id="addproductratingext_4_@(additionalReview.ReviewTypeId)" />
                                            <input asp-for="@Model.AddAdditionalProductReviewList[curAdditionalReview].Rating" value="5" type="radio" id="addproductratingext_5_@(additionalReview.ReviewTypeId)" />
                                        </div>
                                        <div class="label last">@T("Reviews.Fields.Rating.Excellent")</div>
                                    </div>
                                </div>
                            }
                        }

                        @if (Model.AddProductReview.DisplayCaptcha)
                        {
                            <div class="row mb-3">
                                <div class="offset-md-3 offset-lg-4 offset-xl-4 col-md-5 col-lg-5 col-xl-4">
                                    <div class="captcha-box">
                                        <nop-captcha />
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="offset-md-3 offset-lg-4 offset-xl-4 col-md-5 col-lg-5 col-xl-4">
                        <div class="buttons">
                            <button type="submit" name="add-review" class="btn btn-primary button-1 write-product-review-button">@T("Reviews.SubmitButton")</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    }
    @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductReviewsPageBottom, additionalData = Model })
</div>
