
@{
    ViewBag.Title = "دیدن جزئیات محصول";
}
@model GheyasPlusShop.Models.Home.ViewKalaModel
@using Utils;
@using GheyasPlusShop.Utils;

@section styles{
    @if (ViewBag.DesktopSection)
    {
        <style>
        body {
            background-color: #eceff1;
        }

        .quickReview-pic {
            height: 90px;
            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;
        }

        .form-card {
            border-radius: 6px;
            margin: 8px 0 20px !important;
            padding: 36px !important;
        }

        .menu-item {
            width: 150px;
            height: 100%;
            margin-left: 12px;
            padding: 5px 10px 0 0;
            border-radius: 6px 6px 0 0;
            background-color: #752f4b;
            color: #fff;
            cursor: pointer;
        }

        .menu-item-select {
            background-color: #fff !important;
            color: @(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteColor) !important;
        }

        .menu-item > div {
            border-right: 2px solid #752f4b;
        }

        .menu-item svg {
            width: 20px;
            fill: #fff;
        }

        .button-new {
            height: 46px;
            width: 220px;
            background-color: #00838f;
        }

            .button-new img, .button-new svg {
                margin-left: 10px;
                height: 24px;
            }

        .filter-comment, .filter-faq {
            color: #9f9f9f;
            margin-left: 20px;
            cursor: pointer;
        }

        .filter-comment-select, .filter-faq-select {
            color: #00838f !important;
            border-bottom: 2px solid #00838f;
            padding-bottom: 11px;
        }

        .flash-faq:after {
            content: "";
            border-left: 10px solid #ccc;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            position: absolute;
            right: 41px;
            top: 12px;
            z-index: 5000;
        }

        .answer-line:after {
            content: "";
            height: 196px;
            width: 1px;
            float: right;
            position: absolute;
            right: 18px;
            top: 38px;
            border-left: 1px solid #ccc;
        }

        .go-right-left {
            position: absolute;
            cursor: pointer;
            top: 140px;
        }

        .suggested .suggested-img {
            width: 100%;
            height: 200px;
        }

        .suggested .star {
            width: unset;
            height: unset;
            margin-top: 5px;
        }

        .suggested label {
            margin: 12px 0 5px;
            font-weight: 700;
        }

        .suggested > div {
            color: @(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteColor);
        }

            .suggested > div > span {
                margin-left: 6px;
                font-size: 14px;
                font-weight: 700;
            }

        .content {
            display: flex;
        }

            .content img, .content svg {
                height: 58px;
                margin-left: 12px;
            }

            .content .content-title {
                font-size: 16px;
                font-weight: 700;
                margin: 4px 0 6px;
            }

            .content .content-name {
                font-weight: 700;
                color: #989898;
            }

        .content-text {
            text-align: justify;
            line-height: 22px;
            font-size: 14px;
        }

        .section-header {
            border-bottom: 2px solid #ccc;
            padding-bottom: 7px !important;
        }

            .section-header > span {
                font-size: 16px;
                font-weight: 700;
                border-bottom: 3px solid @(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteColor);
                padding-bottom: 6px;
                padding-left: 15px;
            }

        .spec {
            line-height: 30px;
            margin-top: 6px;
            font-size: 14px;
        }

            .spec .spec-name {
                color: #989898;
            }

        .score {
            height: 26px;
            border-bottom: 4px solid #ccc;
            margin-bottom: 24px;
        }

        .buyer-comment {
            font-size: 14px;
            font-weight: 700;
            margin-top: 30px;
        }

        .buyer-name {
            color: #989898;
            font-weight: 700;
            margin: 8px 0 30px;
        }

        .buyer-opinion {
            height: 40px;
            padding: 9px;
            background-color: #c0e9fc;
            border: 1px solid #3b88b5;
            border-radius: 8px;
        }

        .buyer-item {
            display: flex;
            margin-bottom: 20px;
        }

            .buyer-item span:first-child {
                margin-left: 18px;
            }

        .box-like {
            border-bottom: 1px solid #ccc;
            padding-bottom: 25px;
            display: flex;
            line-height: 22px;
        }

            .box-like .like {
                width: 70px;
                height: 26px;
                text-align: center;
                border: 1px solid #bbb;
                border-radius: 2px;
                cursor: pointer;
            }

                .box-like .like img, .box-like .like svg {
                    width: 22px;
                    margin-left: 8px;
                }

        .evaluation > div {
            font-weight: 700;
        }

        .evaluation ul {
            padding-right: 5px;
        }

            .evaluation ul li {
                margin-top: 10px;
            }

                .evaluation ul li label {
                    width: 8px;
                    height: 8px;
                    margin-left: 4px;
                    margin-bottom: 0;
                    border-radius: 100%;
                }

        .faq-icon {
            width: 50px;
        }

            .faq-icon img, .faq-icon svg {
                height: 38px;
                margin-left: 12px;
            }

        .faq-content {
            width: calc(100% - 50px);
        }

            .faq-content .date {
                color: #989898;
                margin: 6px 0 10px;
            }

        .paging {
            width: 35px;
            height: 35px;
            background-color: #fff;
            border-radius: 8px;
            font-size: 14px;
            display: inline-block;
            cursor: pointer;
            margin: 0 6px;
        }

        .paging-select {
            background-color: #00838f !important;
            color: #fff;
        }
        </style>
    }
    else
    {
        <style>

            :root {
                --color1: @(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteColor);
            }
            a {
                text-decoration: none !important;
            }
            .product-breadcrumb {
                Padding: 16px;
            }
            .product-breadcrumb ul {
                display: flex;
                list-style: none;
                gap: 5px;
                padding: 0;
                margin: 0;
            }
                .product-breadcrumb ul li:after {
                    content: "/";
                    padding-right: 5px;
                    color: var(--color1);
                }
                .product-breadcrumb ul li:last-child::after {
                    display: none;
                }
                .product-breadcrumb ul li a {
                    font-size: 12px;
                    color: var(--color1);
                }

            .product-image {
                background-color: #fff;
            }
            .product-image img {
                width: 100%;
            }
            .product-details {
                background-color: #fff;
                padding: 20px;
            }

            .group-brand .brand,
            .group-brand .group{
                display: inline-block;
                margin-right: 5px;
                color: var(--color1);
            }

            .product-title h1{
                font-size: 16px;
                font-weight: 700;
                line-height: 32px;
            }

            .product-option, .product-feature {
                padding-top: 16px;
            }
                .product-option .title, .product-feature .title {
                    font-size: 14px;
                    font-weight: 700;
                }

            #listFeture {
                height: 71px;
                overflow: hidden;
            }
            #seeMore, #seeLess {
                font-size: 12px;
                border-bottom: 1px solid var(--color1);
                color: var(--color1);
            }
            #seeLess {
                display: none;
            }

            .button-accept, .button-default, .button-disabled {
                height: unset;
            }
            .cart-pric {
                background-color: #fff;
                position: relative;
            }
            .price-offer {
                display: flex;
                justify-content: end;
                padding: 15px 0 0 18px;
            }

            .price {
                font-size: 14px;
                font-weight: 700;
                color: #201A1B;
                position: relative;
                display: flex;
                gap: 7px;
                width: max-content;
                padding: 0px 2px;
            }
                .price .currency {
                    color: #655C5E;
                    font-size: 12px;
                    font-weight: 400;
                }
            .offer {
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: absolute;
                top: -17px;
                width: 100%;
            }
                .offer .offer-item {
                    font-size: 12px;
                    font-weight: 500;
                    color: #424242;
                    text-decoration: line-through;
                }

                .offer .percent {
                    border-radius: 50px;
                    background-color: #A022A1;
                    color: #fff;
                    width: 31px;
                    text-align: center;
                    padding: 0px 6px;
                    font-size: 12px;
                    font-weight: 500;
                }
            .divider {
                height: 10px;
                background-color: #ECEFF1;
            }

            .sticky-addtocart {
                position: sticky;
                top: calc(100dvh - 89px);
            }

            .addToBasket2 {
                border: 1px solid #7F747C;
                border-radius: 4px !important;
                align-items: center;
                max-height: 41px;
                padding: 5px 8px;
            }

            #incCountM, .decCountM {
                font-size: 20px;
                padding: 0px 10px;
            }
            #countProduct {
                border: none;
                box-shadow: unset;
                font-size: 16px;
            }

            footer {
                margin-top: -90px;
                padding-bottom: 90px !important;
            }
            .option-form-label {
                position: relative;
            }
                .option-form-label label {
                    position: absolute;
                    z-index: 1;
                    top: -9px;
                    right: 6px;
                    background-color: #fff;
                    padding: 0 5px;
                    color: #494949;
                    font-size: 11px;
                    font-weight: 400;
                }
        </style>
    }
}

<input type="hidden" value="@(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteColor)" id="colorSite" />

@if (ViewBag.DesktopSection)
{
    <div class="body-content">
        @*مشخصات کالا*@
        @*<div class="col-12 no-padding" style="font-weight:700;">
                <a href="@Html.GetHref("")"><img src="~/App_Images/index/home.svg" style="width: 22px;margin-top: -12px;cursor: pointer;" title="Home" /></a>
                <span style="margin:0 6px;">/</span>
                <span>@Model.KalaPart.NameGroup</span>
                <span style="margin:0 6px;">/</span>
                <span>@Model.KalaPart.Name</span>
            </div>*@
        <div class="form-card">
            <div class="row">
                <div class="col-4">
                    <div class="">
                        <img src="@Model.KalaPart.PicThumb.ToBase64File()" id="PicThumb" data-id="@Model.KalaPart.Code" style="height:300px;width:100%;margin-bottom:20px;" />
                    </div>
                    <div class="">
                        <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>
                <div class="col-4">
                    <div style="font-size:16px;font-weight:700;margin-bottom:20px;" id="product">@Model.KalaPart.Name</div>
                    @if (Model.KalaPart.Tozihat.IsNotEmpty())
                    {
                        <div style="font-size: 14px;font-weight:700;margin-bottom:6px;">ویژگی ها</div>
                        <ul id="listFeture" style="list-style: disc;padding-right: 16px;line-height: 24px;height:98px;overflow: hidden;">
                            @foreach (var item in Model.KalaPart.Tozihat.Split('\n'))
                            {
                                <li>@item</li>
                            }
                        </ul>
                        if (Model.KalaPart.Tozihat.Split('\n').Length > 3)
                        {
                            <a id="seeMore" style="color:@(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteColor);cursor:pointer;font-size:11px;border-bottom:1px solid @(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteColor)">مشاهده بیشتر</a>
                            <a id="seeLess" style="color:@(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteColor);cursor:pointer;font-size:11px;border-bottom:1px solid @(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteColor);display:none;">مشاهده کمتر</a>
                        }
                    }
                    @for (var i = 0; i < Model.Property.Count; i++)
                    {
                        <div class="section-property" style="margin-top:20px;" data-id="@Model.KalaPart.Property[i].PropertyNumber">
                            <div style="font-size: 14px;font-weight:700;">
                                <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 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>
                                    <select class="combo-control" style="width: 170px;height: 38px;margin-top:6px;">
                                        @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 class="col-4">
                    <div style="direction: ltr;display:flex;">
                        <div class="dropdown" style="cursor:pointer;margin-right:20px;display:none;" title="Share">
                            <img src="~/App_Images/index/Share.svg" class="dropdown-toggle" />
                            <div class="dropdown-menu" style="left:0;right:unset;min-width:unset;width:80px;font-size:12px;padding:15px;height: 130px;">
                                @*اینجا موارد مربوط به share باشد*@
                            </div>
                        </div>
                        @if (SessionManager.LoginInfo != null)
                        {
                            <div id="like" style="cursor:pointer;margin-right:20px;" 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 style="display:none;">
                            <img src="~/App_Images/index/comapre.svg" />
                        </div>
                    </div>
                    <div style="position:relative; height:370px;background-color:#eceff1;padding:20px 25px;margin-top:10px;">
                        <div style="position: absolute; background-color: @(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteColor); padding: 10px; border-radius: 0 0 10px 10px; left: 12px; top: 0; @(Model.KalaPart.KalaTakhfifPersent > 0 ? "" : "display:none;")">
                            <span style="font-size: 14px;margin-top: 9px;">%@Model.KalaPart.KalaTakhfifPersent تخفیف</span>
                        </div>
                        <div style="font-size: 14px;"><span>برند</span><span style="color:@(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteColor);margin-right:12px;">@Model.KalaPart.Model</span></div>
                        <div style="font-size: 14px;margin:15px 0;"><span>گروه </span><span style="color:@(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteColor);margin-right:12px;">@Model.KalaPart.NameGroup</span></div>
                        <div style="font-size: 14px;"><span>شناسه کالا</span><span style="margin-right:12px;" id="shenaseh">@Model.KalaPart.Shenaseh</span></div>
                        <div style="font-size: 14px;display:none;"><span>کد پارت کالا</span><span style="margin-right:12px;" id="codePartProperty">@Model.KalaPart.CodePartProperty</span></div>
                        <div class="d-flex justify-content-between" style="margin:20px 0;border-bottom:1px solid #ccc;border-top:1px solid #ccc;padding:15px 0;height: 70px;">
                            <div style="font-size: 14px;margin-top: 9px;">تعداد</div>
                            <div class="quickReview-count d-flex">
                                <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="text-center" style="font-size:18px;font-weight:700;color:@(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsitePriceColor);">
                            <div style="@(Model.KalaPart.KalaTakhfifPersent > 0 ? "" : "display:none;")">
                                <span style="text-decoration: line-through; font-size: 14px;margin-top: 9px;">@(Model.KalaPart.DisplayKalaPrice(Model.Avarez, Model.Maliyat))</span>
                            </div>
                            <span style="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="color:#546E7A!important;@(Model.KalaPart.Mojodi > 0 && Model.KalaPart.KalaPrice > 0?"display:none;":"")" id="no-price">@(Model.KalaPart.Mojodi <= 0 ? "ناموجود" : "تماس بگیرید")</span>
                            
                        </div>
                        <div>
                            <button type="button" class="button-accept button-new button-basket" style="width:100%;margin:20px 0 10px;" @(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" />افزودن به سبد خرید
                            </button>
                        </div>
                        <div class="text-center" style="font-size:11px;display:none;">
                            اگر قیمت مناسب تری سراغ دارید
                            <a style="color:@(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteColor);border-bottom:1px solid @(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteColor);cursor:pointer;">اینجا</a>
                            کلیک کنید
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                @*<div class="col-12" style="border-top:1px dashed #ccc;margin-top:26px;padding:18px 15px;display: flex;">
                        <img src="~/App_Images/index/infoIcon.svg" style="" />
                        <span style="width:calc(100% - 30px);margin:3px 6px 0;font-size: 14px;" class="text-ellipsis">@Model.KalaPart.Tozihat</span>
                    </div>*@
                <!--
                    <div class="col-6 offset-3" style="display: none;">
                        <div class="row">
                            <div class="col-3 text-center no-padding">
                                <img src="~/App_Images/index/expGray.svg" />
                                <div class="footer-feature-item">ارسال سریع</div>
                            </div>
                            <div class="col-3 text-center no-padding">
                                <img src="~/App_Images/index/localGray.svg" />
                                <div class="footer-feature-item">ارسال به تمام نقاط ایران</div>
                            </div>
                            <div class="col-3 text-center no-padding">
                                <img src="~/App_Images/index/payGray.svg" />
                                <div class="footer-feature-item">پرداخت در محل</div>
                            </div>
                            <div class="col-3 text-center no-padding">
                                <img src="~/App_Images/index/orginalGray.svg" />
                                <div class="footer-feature-item">ضمانت اصل بودن محصول</div>
                            </div>
                        </div>
                    </div>
                -->
            </div>
        </div>

        <!--
        @*محصولات مرتبط*@
        <div class="col-12 no-padding" style="font-weight: 700;display: none;">محصولات مرتبط</div>
        <div class="col-12 form-card" style="padding:36px 90px!important;margin-bottom: 80px!important;display:none;">
            <div class="row">
                <div class="col-3 text-center suggested">
                    <img src="~/App_Images/index/watch-2.png" class="suggested-img" />
                    <label>نام کالای خیلی قشنگ</label>
                    <div><span>20,000,000</span>ریال</div>
                    <div>
                        <img src="~/App_Images/index/star.svg" class="star svg" style="fill:#ccc;" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                    </div>
                </div>
                <div class="col-3 text-center suggested">
                    <img src="~/App_Images/index/watch-2.png" class="suggested-img" />
                    <label>نام کالای خیلی قشنگ</label>
                    <div><span>20,000,000</span>ریال</div>
                    <div>
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                    </div>
                </div>
                <div class="col-3 text-center suggested">
                    <img src="~/App_Images/index/watch-2.png" class="suggested-img" />
                    <label>نام کالای خیلی قشنگ</label>
                    <div><span>20,000,000</span>ریال</div>
                    <div>
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                    </div>
                </div>
                <div class="col-3 text-center suggested">
                    <img src="~/App_Images/index/watch-2.png" class="suggested-img" />
                    <label>نام کالای خیلی قشنگ</label>
                    <div><span>20,000,000</span>ریال</div>
                    <div>
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                    </div>
                </div>
            </div>
            <img src="~/App_Images/index/goright.svg" class="go-right-left" style="right:0;" />
            <img src="~/App_Images/index/goleft.svg" class="go-right-left" style="left:0;" />
        </div>


        @*نقد و بررسی / مشخصات / نظر کاربران / پرسش و پاسخ*@
        <div class="col-12 form-card" style="border-top-right-radius: unset;display:none;">
            @*منو*@
            <div style="height:52px;width:100%;position:absolute;top:-52px;left:0;">
                <div class="float-right menu-item menu-item-select" data-target="div-check">
                    <div class="col-12 no-padding-left" style="border-right: 2px solid @(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteColor);">
                        <img src="~/App_Images/index/checkIcon.svg" class="svg" />
                        <div>نقد و بررسی</div>
                    </div>
                </div>
                <div class="float-right menu-item" data-target="div-spec">
                    <div class="col-12 no-padding-left">
                        <img src="~/App_Images/index/specIcon.svg" class="svg" />
                        <div>مشخصات</div>
                    </div>
                </div>
                <div class="float-right menu-item" data-target="div-comment">
                    <div class="col-12 no-padding-left">
                        <img src="~/App_Images/index/commentIcon.svg" class="svg" />
                        <div>نظر کاربران</div>
                    </div>
                </div>
                <div class="float-right menu-item" data-target="div-faq">
                    <div class="col-12 no-padding-left">
                        <img src="~/App_Images/index/faqIcon.svg" class="svg" />
                        <div>پرسش و پاسخ</div>
                    </div>
                </div>
            </div>

            @*نقد و بررسی*@
            <div class="col-12 no-padding div-content" id="div-check">
                <div class="col-12 no-padding content">
                    <img src="~/App_Images/index/checkIconBig.svg" />
                    <div>
                        <div class="content-title">نقد و بررسی اجمالی</div>
                        <div class="content-name">نام کالای بسیار زیبا و قشنگ و ناز</div>
                    </div>
                </div>
                <div class="col-12 no-padding content-text" style="margin: 16px 0;">
                    باتشکر از انتخاب شما، بخشی از گوشی‌های موبایل سامسونگ که اخیرا واردکنندگان آن‌ها را از مبادی قانونی وارد کرده‌اند، با قیمت‌های مصوب از طریق دیجی‌کالا به فروش خواهند رسید. به منظور توزیع عادلانه‌ی این محصولات و برای جلوگیری از سواستفاده‌های احتمالی و رسیدن محصولات به دست مصرف‌کننده‌ی واقعی و نهایی این کالاها تحت ضوابط و شرایطی خاص به فروش می‌رسند. این گوشی‌های موبایل سامسونگ با گارانتی شرکت هماهنگ پردازش با قیمت‌های مصوب سازمان حمایت مصرف‌کنندگان و تولیدکنندگان در دیجی‌کالا عرضه می‌شوند. این قیمت‌ها روی محصولات درج شده است و در سامانه 124 نیز در دسترس است.
                </div>
                <div class="col-12 no-padding section-header">
                    <span>معرفی</span>
                </div>
                <div class="col-12 no-padding content-text" style="margin:10px 0 16px;">
                    سیستم‌عامل ایفای نقش می‌کند و با ارائه‌ی امکانات کامل اندروید مارشمالو به کاربران، تجربه‌ی کاربری بهتری را پیش روی آن‌ها قرار می‌دهد. زیر قاب پشتی Grand Prime Plus یک باتری لیتیوم‌یون با ظرفیت 2600 میلی‌آمپر بر ساعت قرار دارد که انرژی لازم را برای روشن‌نگه‌داشتن گوشی موبایل فراهم می‌کند. در پایان باید اشاره کنیم که یکی دیگر از ویژگی‌های این محصول پشتیبانی از شبکه‌ی 4G Cat4 است که با داشتن سرعت دانلودی معادل 150 مگابیت بر ثانیه در کنار صفحه‌نمایش بزرگ این گوشی موبایل می‌تواند برای وب‌گردی و سرزدن به شبکه‌های اجتماعی مفید باشد.
                </div>
                <div class="col-12 no-padding text-center">
                    <img src="~/App_Images/index/a20-1.svg" />
                </div>
                <div class="col-12 no-padding section-header">
                    <span>طراحی</span>
                </div>
                <div class="col-12 no-padding content-text" style="margin:10px 0 16px;">
                    سیستم‌عامل ایفای نقش می‌کند و با ارائه‌ی امکانات کامل اندروید مارشمالو به کاربران، تجربه‌ی کاربری بهتری را پیش روی آن‌ها قرار می‌دهد. زیر قاب پشتی Grand Prime Plus یک باتری لیتیوم‌یون با ظرفیت 2600 میلی‌آمپر بر ساعت قرار دارد که انرژی لازم را برای روشن‌نگه‌داشتن گوشی موبایل فراهم می‌کند. در پایان باید اشاره کنیم که یکی دیگر از ویژگی‌های این محصول پشتیبانی از شبکه‌ی 4G Cat4 است .
                </div>
                <div class="col-12 no-padding text-center">
                    <img src="~/App_Images/index/a20-2.svg" />
                </div>
                <div class="col-12 no-padding content-text" style="margin-top:20px;">
                    سیستم‌عامل ایفای نقش می‌کند و با ارائه‌ی امکانات کامل اندروید مارشمالو به کاربران، تجربه‌ی کاربری بهتری را پیش روی آن‌ها قرار می‌دهد. زیر قاب پشتی Grand Prime Plus یک باتری لیتیوم‌یون با ظرفیت 2600 میلی‌آمپر بر ساعت قرار دارد که انرژی لازم را برای روشن‌نگه‌داشتن گوشی موبایل فراهم می‌کند. در پایان باید اشاره کنیم که یکی دیگر از ویژگی‌های این محصول پشتیبانی از شبکه‌ی 4G Cat4 است که با داشتن سرعت دانلودی معادل 150 مگابیت بر ثانیه در کنار صفحه‌نمایش بزرگ این گوشی موبایل می‌تواند برای وب‌گردی و سرزدن به شبکه‌های اجتماعی مفید باشد.
                </div>
            </div>

            @*مشخصات*@
            <div class="col-12 no-padding div-content" id="div-spec" style="display:none">
                <div class="col-12 no-padding content">
                    <img src="~/App_Images/index/specIconBig.svg" />
                    <div>
                        <div class="content-title">مشخصات فنی</div>
                        <div class="content-name">نام کالای بسیار زیبا و قشنگ و ناز</div>
                    </div>
                </div>
                <div class="col-12 no-padding section-header" style="margin-top: 25px;">
                    <span>مشخصات کلی</span>
                </div>
                <div class="col-12 no-padding spec">
                    <div class="row">
                        <div class="col-3 no-padding-right spec-name">ویژگی خاص</div>
                        <div class="col-9 no-padding">پلاستیک و شیشه و ویژگیهای بهتر</div>
                    </div>
                </div>
            </div>

            @*نظر کاربران*@
            <div class="col-12 no-padding div-content" id="div-comment" style="display:none">
                <div class="col-12 no-padding content">
                    <img src="~/App_Images/index/commentIconBig.svg" />
                    <div>
                        <div class="content-title">نظر کاربران در مورد</div>
                        <div class="content-name">نام کالای بسیار زیبا و قشنگ و ناز</div>
                    </div>
                </div>
                <div class="col-12 no-padding section-header" style="margin: 25px 0;">
                    <span>امتیاز کاربران</span>
                </div>
                <div class="col-12 no-padding">
                    <div class="row">
                        <div class="col-6 no-padding-right" style="padding-left: 30px;border-left:1px dashed #ccc;">
                            <div class="col-12 no-padding score">
                                <span class="float-right">کیفیت ساخت</span>
                                <span class="float-left">خوب</span>
                            </div>
                            <div class="col-12 no-padding score">
                                <span class="float-right">کیفیت ساخت</span>
                                <span class="float-left">خوب</span>
                            </div>
                        </div>
                        <div class="col-6 no-padding-left" style="padding-right: 30px;">
                            <div style="font-size:14px;font-weight:700;">شما هم می‌توانید در مورد این کالا نظر بدهید</div>
                            <div class="content-text" style="margin:7px 0 10px;">برای ثبت نظر، لازم است ابتدا وارد حساب کاربری خود شوید. اگر این محصول را قبلا از دیجی‌کالا خریده باشید، نظر شما به عنوان مالک محصول ثبت خواهد شد.</div>
                            <button type="button" class="button-accept button-new">
                                <img src="~/App_Images/index/comment.svg" />ثبت نظر جدید
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-12 no-padding section-header" style="margin-top:40px;">
                    <span>نظرها</span>
                    <div class="float-left">
                        <img src="~/App_Images/index/sortingIcon.svg" />
                        <span style="color:#9f9f9f;margin-left:20px;">مرتب سازی براساس:</span>
                        <span class="filter-comment filter-comment-select">نظر خریداران</span>
                        <span class="filter-comment">مفیدترین نظرات</span>
                        <span class="filter-comment">جدیدترین نظرات</span>
                    </div>
                </div>
                <div class="col-12 no-padding">
                    <div class="buyer-comment">یه نظر خیلی قشنگ ثبت شده</div>
                    <div class="buyer-name">توسط <span style="margin-left:3px;"> نام و نام خانوادگی </span>در تاریخ<span style="margin-right:3px;">14 آذر 1398</span></div>
                </div>
                <div class="col-12 no-padding">
                    <div class="row">
                        <div class="col-3 no-padding-right" style="padding-left: 30px;">
                            <div class="col-12 no-padding buyer-item">
                                <span>رنگ خریداری شده</span>
                                <div style="width: 18px;height: 18px;background-color:#c19554;border-radius: 4px;"></div>
                            </div>
                            <div class="col-12 no-padding buyer-item">
                                <span>سایز خریداری شده</span>
                                <span>XXL</span>
                            </div>
                            <div class="col-12 no-padding buyer-item">
                                <span>قیمت خرید</span>
                                <span style="margin-left:6px;">458,000,000</span><span>ریال</span>
                            </div>
                            <div class="col-12 no-padding buyer-item">
                                <span>تاریخ خرید</span>
                                <span>حالا یه تاریخی</span>
                            </div>
                            <div class="col-12 text-center buyer-opinion">
                                خرید این محصول را توصیه نمیکنم
                            </div>
                        </div>
                        <div class="col-9 no-padding-left" style="border-right:1px solid #ccc;padding-right: 30px;">
                            <div class="col-12 no-padding">
                                <div class="row">
                                    <div class="col-6 no-padding-right evaluation">
                                        <div style="color:#01579b;">نقاط قوت</div>
                                        <ul>
                                            <li>
                                                <label style="background-color:#01579b;"></label>
                                                اولین نقطه قوت
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-6 no-padding-left evaluation">
                                        <div style="color:#b71c1c;">نقاط ضعف</div>
                                        <ul>
                                            <li>
                                                <label style="background-color:#b71c1c;"></label>
                                                اولین نقطه ضعف
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 no-padding content-text" style="margin:40px 0;">
                                با تشکر از شما و نوع بسته بندیش، محصول دستم رسید خیلی گوشیه با کیفیتیه نسبت به قیمتش همه نوع امکاناتی هم داره، تاچ و اثر انگشت دقیق کار میکنه، گوشی ساخت ویتنامه که بهترین نوعشه فقط زبان اولیه گوشی روسی هستش که از تو منو تنظیمات میشه فارسی و یا انگلیس کرد که تو سایت youtube تصویریش موجوده خلاصه بسیار از خریدم راضیم
                            </div>
                            <div class="col-12 no-padding-right-left box-like">
                                <span>آیا این نظر برایتان مفید بود؟</span>
                                <div class="like" style="margin:0 20px;">
                                    <img src="~/App_Images/index/like-1.svg" />548
                                </div>
                                <div class="like">
                                    <img src="~/App_Images/index/dislike.svg" />1020
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @*paging*@
                <div class="col-12 no-padding text-center" style="border-top:1px solid #ccc;padding-top:15px!important;margin-top:40px;line-height: 34px;">
                    <img src="~/App_Images/Product/flashRight.svg" style="cursor:pointer;" />
                    <div class="paging paging-select">1</div>
                    <div class="paging">2</div>
                    <div class="paging">3</div>
                    <div class="paging">4</div>
                    <div class="paging">5</div>
                    <div class="paging">6</div>
                    <img src="~/App_Images/Product/flashLeft.svg" style="cursor:pointer;" />
                </div>
            </div>

            @*پرسش و پاسخ*@
            <div class="col-12 no-padding div-content" id="div-faq" style="display:none">
                <div class="col-12 no-padding content">
                    <img src="~/App_Images/index/faqIconBig.svg" />
                    <div>
                        <div class="content-title">پرسش و پاسخ</div>
                        <div class="content-name">پرسش خود را در مورد محصول بیان کنید</div>
                    </div>
                </div>
                <div class="col-12 no-padding" style="margin:16px 0;">
                    <textarea class="textarea-control" style="height: 150px;"></textarea>
                </div>
                <div class="col-12 no-padding">
                    <div class="row">
                        <div class="col-9 no-padding" style="font-weight: 700;color: #989898;">
                            <div>
                                <input type="checkbox" class="checkbox-control" />
                                <label>اولین پاسخی که به پرسش من داده شد، از طریق ایمیل به من اطلاع دهید.</label>
                            </div>
                            <div>با انتخاب دکمه "ثبت پرسش"، موافقت خود را با  <a href="#" style="color: #00838f; border-bottom: 1px solid #00838f;">قوانین انتشار محتوا</a> اعلام میکنم.</div>
                        </div>
                        <div class="col-3 no-padding text-left">
                            <button type="button" class="button-accept button-new no-margin">
                                <img src="~/App_Images/index/newFaq.svg" />ثبت پرسش
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-12 no-padding section-header" style="margin-top:40px;">
                    <span>پرسش ها و پاسخ ها</span>
                    <div class="float-left">
                        <img src="~/App_Images/index/sortingIcon.svg" />
                        <span style="color: #9f9f9f;margin-left: 20px;">مرتب سازی براساس:</span>
                        <span class="filter-faq filter-faq-select">جدیدترین پرسش</span>
                        <span class="filter-faq">بیشترین پاسخ به پرسش</span>
                        <span class="filter-faq">پرسش های شما</span>
                    </div>
                </div>
                <div class="col-12 no-padding" style="margin-top:30px;display: flex;">
                    <div class="float-right faq-icon">
                        <img src="~/App_Images/index/question.svg" />
                    </div>
                    <div class="float-right faq-content">
                        <div>نام و نام خانوادگی</div>
                        <div class="date">98/05/05</div>
                        <div>یه عنوان کوچیک</div>
                        <div class="content-text" style="margin-top:6px;">با تشکر از شما و نوع بسته بندیش، محصول دستم رسید خیلی گوشیه با کیفیتیه نسبت به قیمتش همه نوع امکاناتی هم داره، تاچ و اثر انگشت دقیق کار میکنه، گوشی ساخت ویتنامه که بهترین نوعشه فقط زبان اولیه گوشی روسی هستش که از تو منو تنظیمات میشه فارسی و یا انگلیس کرد که تو سایت youtube تصویریش موجوده خلاصه بسیار از خریدم راضیم</div>
                        <div style="border-bottom:1px solid #ccc;padding-bottom:8px;margin:40px 0 12px;">
                            <span style="font-weight:700;"> پاسخ ها (<span>4</span>)</span>
                            <span class="float-left"><a href="#" style="color:#00838f;border-bottom: 1px solid #00838f;">به این پرسش پاسخ دهید</a></span>
                        </div>
                        <div class="col-12 no-padding" style="display: flex;margin-bottom: 12px;">
                            <div class="float-right answer-line faq-icon">
                                <img src="~/App_Images/index/ans.svg" />
                            </div>
                            <div class="float-right faq-content" style="border:1px solid #ccc;border-radius:4px;padding:15px;">
                                <div class="flash-faq"></div>
                                <div>نام و نام خانوادگی</div>
                                <div class="date">98/05/05</div>
                                <div>یه عنوان کوچیک</div>
                                <div class="content-text" style="margin-top:6px;">با تشکر از شما و نوع بسته بندیش، محصول دستم رسید خیلی گوشیه با کیفیتیه نسبت به قیمتش همه نوع امکاناتی هم داره، تاچ و اثر انگشت دقیق کار میکنه، گوشی ساخت ویتنامه که بهترین نوعشه فقط زبان اولیه گوشی روسی هستش که از تو منو تنظیمات میشه فارسی و یا انگلیس کرد که تو سایت youtube تصویریش موجوده خلاصه بسیار از خریدم راضیم</div>
                                <div class="col-12 no-padding box-like" style="margin-top:30px;border:unset;">
                                    <span>آیا این نظر برایتان مفید بود؟</span>
                                    <div class="like" style="margin:0 20px;">
                                        <img src="~/App_Images/index/like-1.svg" />548
                                    </div>
                                    <div class="like">
                                        <img src="~/App_Images/index/dislike.svg" />1020
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @*paging*@
                <div class="col-12 no-padding text-center" style="border-top:1px solid #ccc;padding-top:15px!important;margin-top:40px;line-height: 34px;">
                    <img src="~/App_Images/Product/flashRight.svg" style="cursor:pointer;" />
                    <div class="paging paging-select">1</div>
                    <div class="paging">2</div>
                    <div class="paging">3</div>
                    <div class="paging">4</div>
                    <div class="paging">5</div>
                    <div class="paging">6</div>
                    <img src="~/App_Images/Product/flashLeft.svg" style="cursor:pointer;" />
                </div>
            </div>

        </div>


        @*خریدهای بیشتر*@
        <div class="col-12 no-padding" style="font-weight:700;display:none;">خریداران این محصول، محصولات زیر را هم خریده‌اند.</div>
        <div class="col-12 form-card" style="padding: 36px 90px !important; display: none;">
            <div class="row">
                <div class="col-3 text-center suggested">
                    <img src="~/App_Images/index/watch-2.png" class="suggested-img" />
                    <label>نام کالای خیلی قشنگ</label>
                    <div><span>20,000,000</span>ریال</div>
                    <div>
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                    </div>
                </div>
                <div class="col-3 text-center suggested">
                    <img src="~/App_Images/index/watch-2.png" class="suggested-img" />
                    <label>نام کالای خیلی قشنگ</label>
                    <div><span>20,000,000</span>ریال</div>
                    <div>
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                    </div>
                </div>
                <div class="col-3 text-center suggested">
                    <img src="~/App_Images/index/watch-2.png" class="suggested-img" />
                    <label>نام کالای خیلی قشنگ</label>
                    <div><span>20,000,000</span>ریال</div>
                    <div>
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                    </div>
                </div>
                <div class="col-3 text-center suggested">
                    <img src="~/App_Images/index/watch-2.png" class="suggested-img" />
                    <label>نام کالای خیلی قشنگ</label>
                    <div><span>20,000,000</span>ریال</div>
                    <div>
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                        <img src="~/App_Images/index/star.svg" class="star svg" />
                    </div>
                </div>
            </div>
            <img src="~/App_Images/index/goright.svg" class="go-right-left" style="right:0;" />
            <img src="~/App_Images/index/goleft.svg" class="go-right-left" style="left:0;" />
        </div>

        -->

    </div>

    @*مشاهده تمام تصاویر*@
    <div class="modal fade" id="showAllPicture" role="dialog">
        <div class="modal-dialog" style="max-width:800px;">
            <div class="modal-content">
                <div class="modal-header">
                    <label class="modal-title" style="font-size: 14px; font-weight: bold;">تصاویر @Model.KalaPart.Name</label>
                    <button type="button" class="close" data-dismiss="modal">
                        <img src="~/App_Images/index/Close.svg" class="close-svg" />
                    </button>
                </div>
                <div class="modal-body" style="padding:25px 0;">
                    <iframe src="" style="border: 0;width: 100%;height: 400px;"></iframe>
                </div>
            </div>
        </div>
    </div>
}
else
{
    <div class="product-breadcrumb d-none">
        <ul>
            <li><a href="#">سطح یک</a></li>
            <li><a href="#">سطح دو</a></li>
            <li><a href="#">سطح سه</a></li>
        </ul>
    </div>
    <div class="product-image position-relative">
        <img src="@Model.KalaPart.PicThumb.ToBase64File()" id="PicThumb" data-id="@Model.KalaPart.Code" class="img-fluid" />
        @if (SessionManager.LoginInfo != null)
        {
            <div id="like" style="cursor:pointer;position: absolute;top: 19px;left: 20px;" 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>
    <div class="product-details">
        <div class="product-id">شناسه کالا  @Model.KalaPart.Shenaseh</div>
        <span id="codePartProperty" class="d-none">@Model.KalaPart.CodePartProperty</span>
        <div class="row group-brand">
            <div class="col-6 col-sm-6">
                برند
                <span class="brand">@Model.KalaPart.Model</span>
            </div>
            <div class="col-6 col-sm-6">
                گروه
                <span class="group">@Model.KalaPart.NameGroup</span>
            </div>
        </div>
        <div class="product-title">
            <h1 id="product">@Model.KalaPart.Name</h1>
        </div>
        <div class="product-option">
            @if (Model.KalaPart.Tozihat.IsNotEmpty())
            {
                <div class="title">ویژگی ها</div>
                <ul id="listFeture">
                    @foreach (var item in Model.KalaPart.Tozihat.Split('\n'))
                    {
                        <li>@item</li>
                    }
                </ul>
                if (Model.KalaPart.Tozihat.Split('\n').Length > 3)
                {
                    <a id="seeMore">مشاهده بیشتر</a>
                    <a id="seeLess">مشاهده کمتر</a>
                }
            }
        </div>
        <div class="product-feature mt-2">


            @for (var i = 0; i < Model.Property.Count; i++)
            {
                <div class="section-property" data-id="@Model.KalaPart.Property[i].PropertyNumber">

                    @if (Model.Property[i][0].PropertyColor.IsNotEmpty())
                    {
                        <div 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="option-form-label mb-3">
                            <label>@(Model.Property[i][0].PropertyName)</label>
                            <select class="combo-control has-float-label">
                                @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>
    <div class="divider"></div>
    <div class="container-fluid cart-pric">
        <div class="row  d-flex align-items-center">
            <div class="add-to-cart col-6">
                <button type="button" class="addToBasket1 w-100 button-accept rounded-pill my-4 py-2 button-new button-basket" @(Model.KalaPart.Mojodi > 0 && Model.KalaPart.KalaPrice > 0 ? "onclick=addToBasketMobile()" : "") @(Model.KalaPart.Mojodi > 0 && Model.KalaPart.KalaPrice > 0 ? "" : "disabled=disabled")>
                    افزودن به سبد خرید
                </button>

                <div class="addToBasket2 w-100 rounded-pill my-4 py-2" style="display: none">
                    <a id="incCountM" onclick="addToBasketMobile()">+</a>
                    <input type="text" class="text-control text-center" id="countProduct" value="0" />
                    <a class="decCountM first" onclick="removeFromBasketMobile()"><img src="~/App_Images/index/delete-m.svg" /></a>
                    <a class="decCountM last" style="display: none" onclick="removeFromBasketMobile()">-</a>
                </div>
            </div>
            <div class="price-offer col-6 text-end">

                <div class="price">
                    <span style="@(Model.KalaPart.Mojodi > 0 && Model.KalaPart.KalaPrice > 0 ? "" : "display:none;")">@((Model.KalaPart.DisplayKalaNewPrice(Model.Avarez, Model.Maliyat) > 0 ? Model.KalaPart.DisplayKalaNewPrice(Model.Avarez, Model.Maliyat) : Model.KalaPart.DisplayKalaPrice(Model.Avarez, Model.Maliyat)).ToNumber())</span> <span class="currency" style="@(Model.KalaPart.Mojodi > 0 && Model.KalaPart.KalaPrice > 0 ? "" : "display:none;")">ریال</span>
                    <span style="color:#546E7A!important;@(Model.KalaPart.Mojodi > 0 && Model.KalaPart.KalaPrice > 0 ? "display:none;" : "")" id="no-price">@(Model.KalaPart.Mojodi <= 0 ? "ناموجود" : "تماس بگیرید")</span>
                    <div class="offer" style="@(@Model.KalaPart.KalaTakhfifPersent > 0 ? "":"display:none;")">
                        <div class="percent">@Model.KalaPart.KalaTakhfifPersent%</div>
                        <div class="offer-item">@(Model.KalaPart.DisplayKalaPrice(Model.Avarez, Model.Maliyat))</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}
@section scripts{

    @if (ViewBag.DesktopSection)
    {
        <script>
            $('#seeLess').on("click", function () {
                $("#listFeture").css("height", "98px");
                $("#seeLess").hide();
                $("#seeMore").show();
            });
        </script>
    }
    else
    {
        <script>
            $('#seeLess').on("click", function () {
                $("#listFeture").css("height", "71px");
                $("#seeLess").hide();
                $("#seeMore").show();
            });

            $('#incCountM').on("click", function () {
                var value = Number($('#countProduct').val());
                value += 1;
                $('#countProduct').val(value);
                if (value > 1) {
                    $(".decCountM.first").css("display", "none");
                    $(".decCountM.last").css("display", "block");
                }
            });

            $('.decCountM.first').on("click", function () {
                $('#countProduct').val(0);
                $(".addToBasket1").css("display", "block");
                $(".addToBasket2").css("display", "none");
            });

            $('.addToBasket1').on("click", function () {
                $('#countProduct').val(1);
            });

            $('.decCountM.last').on("click", function () {
                var value = Number($('#countProduct').val());
                value -= 1;
                if (value >= 2)
                    $('#countProduct').val(value);
                else if (value < 2) {
                    $('#countProduct').val(1);
                    $(".decCountM.first").css("display", "block");
                    $(".decCountM.last").css("display", "none");
                }
            });

            function addToBasketMobile() {
                var count = Number($("#countProduct").val());
                if (count > 0) {
                    count = count + 1;
                } else {
                    count = 1;
                }
                $(".addToBasket1").css("display", "none");
                $(".addToBasket2").css("display", "flex");
                var id = getQuery("id");
                var name = $("#product").text();
                var picture = $("#PicThumb").attr("src");
                var codePartProperty = $("#codePartProperty").text();
                ajax({
                    url: "Home/DeleteShoppingCart",
                    data: JSON.stringify({ id: id, codePartProperty: codePartProperty }),
                    success: function () {
                        addShopingCart(id, name, picture, count, codePartProperty);
                    }
                });
            }

            async function checkSingleProductHasCountInBasket() {
                var result = await loadShoppingCart();
                if (result.length > 0) {
                    result.forEach((item) => {
                        if (item.Id == getQuery("id") && item.Count >= 1) {
                            var count = item.Count;
                            $('#countProduct').val(count);
                            $(".addToBasket1").css("display", "none");
                            $(".addToBasket2").css("display", "flex");
                            if (item.Count >= 2) {
                                $(".decCountM.first").css("display", "none");
                                $(".decCountM.last").css("display", "block");
                            }
                        }

                    })
                }
            }

            checkSingleProductHasCountInBasket()

            function removeFromBasketMobile() {
                $(".addToBasket1").css("display", "none");
                $(".addToBasket2").css("display", "flex");
                var count = Number($("#countProduct").val());
                var id = getQuery("id");
                var name = $("#product").text();
                var picture = $("#PicThumb").attr("src");
                var codePartProperty = $("#codePartProperty").text();

                if (count > 1) {
                    count = count - 1;
                } else {
                    ajax({
                        loading: true,
                        url: "Home/DeleteShoppingCart",
                        data: JSON.stringify({ id: id, codePartProperty: codePartProperty }),
                        success: function () {
                        }
                    });
                }
                ajax({
                    loading: true,
                    url: "Home/DeleteShoppingCart",
                    data: JSON.stringify({ id: id, codePartProperty: codePartProperty }),
                    success: function () {
                        addShopingCart(id, name, picture, count, codePartProperty);
                    }
                });

                //ajax({
                //    loading: false,
                //    url: "Home/GetShoppingCart",
                //    success: function (result) {
                //        var itemRow, count, id, codePartProperty, name, picture;

                //        if (result.length > 0) {
                //            result.forEach((item) => {
                //                if (item.Id == getQuery("id")) {
                //                    id = item.Id;
                //                    name = item.NameKala;
                //                    picture = item.PicThumb;
                //                    count = item.Count;
                //                    codePartProperty = item.CodePartProperty;
                //                }

                //            })


                //            ajax({
                //                url: "Home/DeleteShoppingCart",
                //                data: JSON.stringify({ id: id, codePartProperty: codePartProperty }),
                //                success: function () {
                //                    count = count - 1;
                //                    if (count > 0) {
                //                        addShopingCart(id, name, picture, count, codePartProperty);
                //                    }

                //                }
                //            });



                //        } else {

                //            var id = getQuery("id");
                //            var name = $("#product").text();
                //            var picture = $("#PicThumb").attr("src");
                //            var count = $("#countProduct").val();
                //            var codePartProperty = $("#codePartProperty").text();
                //            addShopingCart(id, name, picture, count, codePartProperty);

                //        }
                //    }
                //});
            }

            //sticky addToCart
            const element = document.querySelector('.cart-pric');

            function isElementInView() {
                const rect = element.getBoundingClientRect();
                const windowHeight = window.innerHeight;
                const scrollY = window.scrollY || window.pageYOffset;
                const elementBottom = rect.bottom + scrollY;

                return elementBottom <= (windowHeight + scrollY);
            }

            function addVisibleClass() {
                if (isElementInView()) {
                    element.classList.add('sticky-addtocart');
                } else {
                    element.classList.remove('sticky-addtocart');
                }
            }

            window.addEventListener('scroll', addVisibleClass);
        </script>
    }

    <script>
        $('#seeMore').on("click", function () {
            $("#listFeture").css("height", "unset");
            $("#seeMore").hide();
            $("#seeLess").show();
        });
        $('.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 () {
            $('#showAllPicture iframe').attr("src", baseUrl + "Home/ShowAllPicture?id=" + $('#PicThumb').attr('data-id'));
            $('#showAllPicture').modal("show");
        });
        $('.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();
        });
        $(".menu-item").on("click", function () {
            $('.menu-item').removeClass("menu-item-select");
            $('.menu-item').find('.col-12').css("border-right", "2px solid #752f4b");
            $('.menu-item').find('svg').css("fill", "#fff");
            $('.div-content').hide();
            $(this).addClass("menu-item-select");
            $(this).find('.col-12').css("border-right", "2px solid " + $("#colorSite").val());
            $(this).find('svg').css("fill", $("#colorSite").val());
            $('#' + $(this).attr('data-target')).show();
        });
        $('.filter-comment').on("click", function () {
            $('.filter-comment').removeClass("filter-comment-select");
            $(this).addClass("filter-comment-select");
        });
        $('.filter-faq').on("click", function () {
            $('.filter-faq').removeClass("filter-faq-select");
            $(this).addClass("filter-faq-select");
        });
        $('#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', "var(--color1)");
                isLike = true;
            }
            window.top.likeProduct(isLike, codeKala, codePart);
        });
        $('.paging').on("click", function () {
            $('.paging').removeClass('paging-select');
            $(this).addClass('paging-select');
        });

        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) {
                }
            });
        }
        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);
        }
    </script>
}