
@{
    ViewBag.Title = "QuickReview";
    Layout = "~/Views/Shared/_NonHeaderFooter.cshtml";
}
@model GheyasPlusShop.Models.Home.ViewKalaModel
@using Utils;
@using GheyasPlusShop.Utils;

@section styles{
    <style>
        body {
            direction: rtl;
            font-family: seyagh;
            font-size: 12px;
            font-weight: 400;
            line-height: 1.42857143;
            color: #292b2c;
            background-color: #fff;
        }

        input {
            font-family: seyagh;
        }

        .quickReview-pic {
            height: 80px;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
        }

        .quickReview-pic-select {
            border: 2px solid #c42060 !important;
        }

        .quickReview-pic img {
            width: 100%;
            height: 100%;
        }

        .quickReview-pic-more label {
            width: 8px;
            height: 8px;
            margin: 0;
            background-color: #fff;
            border-radius: 100%;
        }

        .quickReview-color {
            margin-left: 24px;
            margin-top: 10px;
            padding: 3px;
            border-radius: 4px;
            border: 1px solid #fff;
        }

        .quickReview-color-select {
            border: 1px solid #c42060 !important;
        }

        .quickReview-color .color {
            width: 18px;
            height: 18px;
            border-radius: 4px;
            border: 1px solid #e4e4e4;
            cursor: pointer;
        }

        .quickReview-count button {
            height: 38px;
            width: 38px;
            background-color: #fff;
            border: 1px solid #ccc;
            cursor: pointer;
        }

        a:hover, a:focus {
            text-decoration: unset;
        }
    </style>
}

<div class="container-fluid" dir="rtl">
    <input type="hidden" value="@(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteColor)" id="colorSite" />
    <div class="row">
        <div class="col-5">
            <div>
                <img src="@Model.KalaPart.PicThumb.ToBase64File()" id="PicThumb" data-id="@Model.KalaPart.Code" style="height:330px;width:100%;margin-bottom:20px;" />
            </div>
            <div class="row" style="flex-direction: row-reverse;">
                @for (var i = 0; i < Model.KalaPicture.Count; i++)
                {
                    <div class="col-4">
                        @if (i < 2 || Model.KalaPicture.Count < 4)
                        {
                            <div class="quickReview-pic @(i==0?"quickReview-pic-select" :"")">
                                <img src="@Model.KalaPicture[i].Picture.ToBase64File()" />
                            </div>
                        }
                        else if (i == 2)
                        {

                            <div class="quickReview-pic">
                                <img src="@Model.KalaPicture[2].Picture.ToBase64File()" />
                                @*درصورتی که تعداد عکسها بیشتر از 3 تا باشد*@
                                <div class="quickReview-pic-more" style="width:100%;height:100%;position:absolute;top:0;text-align:center;padding:34px 0;background-color:rgba(92,92,92,0.81);">
                                    <label></label><label style="margin: 0 3px;"></label><label></label>
                                </div>
                            </div>
                        }
                    </div>
                }
            </div>
        </div>
        <div class="col-7">
            <div style="font-size:16px;font-weight:700;"><span id="product">@Model.KalaPart.Name</span><span style="margin-right:5px;">@Model.KalaPart.Model</span></div>
            <div style="font-size:16px;color:@StaticManager.WebsiteSetting[ConfigManager.NickName].WebsitePriceColor;margin:10px 0 20px;">
                <span style="font-weight:700;margin-left:6px;@(Model.KalaPart.Mojodi > 0 && Model.KalaPart.KalaPrice > 0?"":"display:none;")" id="price">@((Model.KalaPart.DisplayKalaNewPrice(Model.Avarez, Model.Maliyat) > 0 ? Model.KalaPart.DisplayKalaNewPrice(Model.Avarez, Model.Maliyat) : Model.KalaPart.DisplayKalaPrice(Model.Avarez, Model.Maliyat)).ToNumber())<span style="margin-right: 6px;">ریال</span></span>
                <span style="font-weight:700;color:#546E7A!important;@(Model.KalaPart.Mojodi > 0 && Model.KalaPart.KalaPrice > 0?"display:none;":"")" id="no-price">@(Model.KalaPart.Mojodi <= 0 ? "ناموجود" : "تماس بگیرید")</span>
            </div>
            <div class="text-ellipsis">@Model.KalaPart.Tozihat</div>
            <div style="font-size: 14px;display:none;"><span>شناسه کالا</span><span id="shenaseh">@Model.KalaPart.Shenaseh</span></div>
            <div style="font-size: 14px;display:none;"><span>کد پارت کالا</span><span id="codePartProperty">@Model.KalaPart.CodePartProperty</span></div>
            <div style="font-size:14px;font-weight:700;color:#69b5bc;margin-top:10px;">
                <a id="showDetails" href="" target="_blank" style="border-bottom:1px solid #69b5bc;cursor:pointer;color:#69b5bc;">مشاهده جزئیات محصول</a>
            </div>
            <div style="height:calc(100vh - 236px);overflow:auto;margin-bottom:20px;">
                @for (var i = 0; i < Model.Property.Count; i++)
                {
                    <div class="col-12 no-padding section-property" style="margin-top:20px;" data-id="@Model.KalaPart.Property[i].PropertyNumber">
                        <div class="col-12 no-padding">
                            <span>@(Model.Property[i][0].PropertyName)  </span>
                            @if (Model.Property[i][0].PropertyColor.IsNotEmpty())
                            {
                                <span data-id="spColorName" style="margin-right:6px;">@(Model.KalaPart.Property[i].PropertyValue)</span>
                            }
                        </div>
                        @if (Model.Property[i][0].PropertyColor.IsNotEmpty())
                        {
                            <div class="col-12 no-padding" style="display: inline-block;">
                                @for (var j = 0; j < Model.Property[i].Count; j++)
                                {
                                    <div class="float-right quickReview-color @(Model.Property[i][j].PropertyValue == Model.KalaPart.Property[i].PropertyValue ? "quickReview-color-select" : "")" data-id="@Model.Property[i][j].PropertyValue">
                                        <div class="color" style="background-color:@(Model.Property[i][j].PropertyColor);"></div>
                                    </div>
                                }
                            </div>
                        }
                        else
                        {
                            <div class="col-12 no-padding">
                                <select class="combo-control" style="width: 170px;height: 38px;margin-top:2px;border-radius: 4px;">
                                    @for (var j = 0; j < Model.Property[i].Count; j++)
                                    {
                                        <option @(Model.Property[i][j].PropertyValue == Model.KalaPart.Property[i].PropertyValue ? "selected=selected" : "")>@Model.Property[i][j].PropertyValue</option>
                                    }
                                </select>
                            </div>
                        }
                    </div>
                }
            </div>
            <div style="border-top: 1px solid #ccc;padding-top:20px !important;">
                <div class="row">
                    <div class="col-6 d-flex align-items-center justify-content-center quickReview-count">
                        <div class="d-flex">
                            <span style="font-size:14px;margin-top:10px;margin-left: 8px;">تعداد</span>
                            <button type="button" id="incCount" style="font-size: 16px;border-radius: 0 4px 4px 0;">+</button>
                            <input type="text" class="text-control text-center" id="countProduct" style="font-size: 14px;height: 38px;width:38px;border-radius:0;border-right:unset;border-left:unset;" value="1" />
                        <button type="button"  id="decCount" style="font-size: 22px;border-radius: 4px 0 0 4px;">-</button>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="row">
                            <div class="col-9">
                                <button type="button" class="button-accept button-basket" style="height:38px;width:100%;background-color:#00838f;" @(Model.KalaPart.Mojodi > 0 && Model.KalaPart.KalaPrice > 0 ? "onclick=addToBasket()" : "") @(Model.KalaPart.Mojodi > 0 && Model.KalaPart.KalaPrice > 0 ? "" : "disabled=disabled")>
                                    <img src="~/App_Images/index/newBuy.svg" style="margin-left: 10px;height: 24px;" />افزودن به سبد خرید
                                </button>
                            </div>
                            <div class="col-3" style="padding-top:8px!important;display:flex;">
                                @if (SessionManager.LoginInfo != null)
                                {
                                    <div id="like" style="cursor:pointer;margin-left:15px;" title="like" data-like="@(Model.IsLike?"1":"0")">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill:@(Model.IsLike?(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteColor):"#ccc")">
                                            <path d="M0,24V0H24V24Z" fill="none" />
                                            <g transform="translate(0 2)">
                                                <path d="M35.962,40.716a6.361,6.361,0,0,1,4.8,2.18,6.392,6.392,0,0,1,11.2,4.223,6.463,6.463,0,0,1-2.373,4.986h0l-8.827,6.975L32.1,52.214h0a6.4,6.4,0,0,1,3.867-11.5Z" transform="translate(-28.762 -39.898)" />
                                                <path d="M37.531,56.685a.788.788,0,0,1-.48-.163l-8.693-6.866c-.027-.027-.053-.055-.08-.055a7.239,7.239,0,0,1,4.453-12.916,7.076,7.076,0,0,1,4.8,1.853,7.214,7.214,0,1,1,9.387,10.954l-.053.054-8.853,7a.982.982,0,0,1-.48.136Zm-8.107-8.256,8.107,6.431,8.32-6.594.027-.027a5.59,5.59,0,0,0-3.547-9.918,5.68,5.68,0,0,0-4.213,1.907.81.81,0,0,1-1.2,0,5.591,5.591,0,1,0-7.6,8.12.369.369,0,0,1,.107.082Z" transform="translate(-25.531 -36.685)" fill="#454b54" />
                                                <g transform="translate(1.84 1.853)">
                                                    <path id="Path_2805" data-name="Path 2805" d="M35.6,52.007a.794.794,0,0,1-.8-.817,5.361,5.361,0,0,1,5.36-5.368.818.818,0,0,1,0,1.635A3.739,3.739,0,0,0,36.4,51.19.794.794,0,0,1,35.6,52.007Z" transform="translate(-34.803 -45.822)" fill="#fff" />
                                                </g>
                                            </g>
                                        </svg>
                                    </div>

                                }
                                <div class="dropdown" style="cursor:pointer;display:none;" title="Share">
                                    <img src="~/App_Images/index/Share.svg" class="dropdown-toggle" />
                                    <div class="dropdown-menu" style="left:0;right:unset;top: unset;bottom: 36px;min-width:unset;width:80px;font-size:12px;padding:15px;height: 130px;">
                                        @*اینجا موارد مربوط به share باشد*@
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@section scripts{
    <script>
        $('.quickReview-pic').on("click", function () {
            $('.quickReview-pic').removeClass("quickReview-pic-select");
            $(this).addClass("quickReview-pic-select");
            $('#PicThumb').attr('src', $(this).find('img').attr('src'));
        });

        $(".quickReview-pic-more").on("click", function () {
            window.top.$('#showAllPicture iframe').attr("src", window.top.baseUrl + "Home/ShowAllPicture?id=" + $('#PicThumb').attr('data-id'));
            window.top.$('#showAllPicture').modal("show");
            window.top.$('#showAllPicture .modal-title').text(" تصاویر " + $('#product').text());
        });

        $('#showDetails').on("click", function () {
            var codeKala = getQuery("id");
            $(this).attr("href", window.top.baseUrl + "Home/ShowDetails?id=" + codeKala + "&part=" + $("#codePartProperty").text());
        });

        $('.quickReview-color').on("click", function () {
            $('.quickReview-color').removeClass("quickReview-color-select");
            $(this).addClass("quickReview-color-select");
            $(this).closest(".section-property").find("[data-id='spColorName']").text($(this).attr("data-id"));
            changeKala();
        });

        $(".section-property .combo-control").on("change", function () {
            changeKala();
        });

        $('#incCount').on("click", function () {
            const value = Number($('#countProduct').val());
            $('#countProduct').val(value + 1);
        });

        $('#decCount').on("click", function () {
            var value = Number($('#countProduct').val());
            if (value > 1)
                $('#countProduct').val(value - 1);
        });

        $('#like').on("click", function () {
            var codeKala = getQuery("id");
            var codePart = $("#codePartProperty").text();
            var isLike = false;

            if ($("#like").attr("data-like") == "1") {
                $("#like").attr("data-like", "0");
                $("#like svg").css('fill', '#ccc');
                isLike = false;
            }
            else {
                $("#like").attr("data-like", "1");
                $('#like svg').css('fill', $("#colorSite").val());
                isLike = true;
            }
            window.top.likeProduct(isLike, codeKala, codePart);

        });

        function addToBasket() {
            var id = getQuery("id");
            var name = $("#product").text();
            var picture = $("#PicThumb").attr("src");
            var count = $("#countProduct").val();
            var codePartProperty = $("#codePartProperty").text();
            window.top.addShopingCart(id, name, picture, count, codePartProperty);
            window.top.$('#quickReview').modal('hide');
            window.top.$('html,body').scrollTop(0);
        }

        function changeKala() {
            var result = "";
            $(".section-property").each(function (index, item) {
                if ($(item).find("[data-id='spColorName']").length === 1)
                    result += (result.length > 0 ? "|" : "") + $(item).attr("data-id") + ":" + $(item).find("[data-id='spColorName']").text();
                else
                    result += (result.length > 0 ? "|" : "") + $(item).attr("data-id") + ":" + $(item).find(".combo-control").val();
            })

            var codeKala = getQuery("id");
            ajax({
                loading: true,
                url: "Home/SetPriceProduct",
                data: JSON.stringify({ propertyKala: result, codeKala }),
                success: function (result) {
                    var shenaseh = result.split('|')[0];
                    var price = result.split('|')[1];
                    var codePartProperty = result.split('|')[2];
                    var mojodi = Number(result.split('|')[3]);

                    $("#shenaseh").text(shenaseh);
                    $("#price").text(price + " ریال ");
                    $("#codePartProperty").text(codePartProperty);
                    if (mojodi <= 0 || price === "0") {
                        $(".button-basket").attr("disabled", true);
                        if (mojodi <= 0)
                            $("#no-price").text("ناموجود");
                        else
                            $("#no-price").text("تماس بگیرید");

                        $("#no-price").show();
                        $("#price").hide();
                    }
                    else {
                        $(".button-basket").attr("disabled", false);
                        $("#no-price").hide();
                        $("#price").show();
                    }

                },
                error: function (err) {
                }
            });
        }
    </script>
}