
@{
    ViewBag.Title = "لیست محصولات";
}
@model GheyasPlusShop.Models.Home.ViewKalaListModel
@using GheyasPlusShop.Utils;
@section styles{
    <link href="~/App_Css/app/range-slider.css" rel="stylesheet" />
    @if (ViewBag.DesktopSection)
    {
        <style>
        body {
            background-color: #eceff1;
        }

        .nav-header {
            margin-bottom: 0;
        }

        .filter-box {
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 0 0 0 rgba(0,0,0,.12), 0 1px 2px 0 rgba(0,0,0,.24);
        }

        .filter-header {
            line-height: 34px;
            /*border-bottom: 1px solid #ccc;*/
            background-color: #eceff1;
            border-radius: 8px 8px 0 0;
            cursor: pointer;
        }

            .filter-header span {
                font-size: 14px;
                font-weight: 700;
                color: #888787;
            }

            .filter-header img, .filter-header svg {
                cursor: pointer
            }

        .filter-content {
            padding: 10px 10px 0;
            color: #616161;
        }

            .filter-content .filter-content-item {
                width: max-content;
                height: 30px;
                margin-left: 4px;
                margin-bottom: 4px;
                background-color: #dfdfdf;
                border-radius: 15px;
                display: inline-flex;
                padding: 3px 14px;
                align-items: center;
                justify-content: space-between;
            }

                .filter-content .filter-content-item img, .filter-content-item svg {
                    cursor: pointer;
                    margin-right: 10px;
                }


        input:checked + .switch::before {
            left: 14.5px;
            top: -4.5px;
            width: 20px;
            height: 20px;
            background: #037b90;
        }

        .switch:before {
            left: -10.5px;
            top: -4.5px;
            width: 20px;
            height: 20px;
        }

        .price-range {
            width: 24px;
            height: 24px;
            position: absolute;
            top: -12px;
            padding-top: 2px;
            border-radius: 100%;
            background: #fff;
            box-shadow: 0 0 2px 0 rgba(0,0,0,.12), 0 2px 2px 0 rgba(0,0,0,.24);
        }

        .filter-ordering {
            color: #616161;
            margin-left: 16px;
            cursor: pointer;
            font-size: 14px;
        }

        .filter-ordering-select {
            color: #26949e !important;
            border-bottom: 2px solid #26949e;
            padding-bottom: 11px;
        }

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

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

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

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

        .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;
            }

        .product-name {
            margin-bottom:16px;
            padding: 0 10px;
            height: 45px;
            white-space: break-spaces;
            overflow: hidden;
        }

        .product-discount {
            position: absolute;
            top: 0;
            left: 15px;
            width: 36px;
            height: 45px;
            padding-top: 14px;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            text-align: center;
            font-weight: 700;
        }

        .product-price-new {
            font-size: 14px;
            font-weight: 700;
            display: inline-block;
        }

        .product-price-old {
            font-size: 10px;
            display: inline-block;
            margin-right: 6px;
        }

            .product-price-old span {
                text-decoration: line-through;
            }

        .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;
        }

        #backToTop {
            position: fixed;
            bottom: 10px;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 52px;
            height: 52px;
            z-index: 99999999;
            text-align: center;
            padding-top: 6px;
            cursor: pointer;
            background-color: #fff;
            border-radius: 100%;
            box-shadow: 0 0 2px 0 rgba(0,0,0,.12), 0 2px 2px 0 rgba(0,0,0,.24);
        }

        .breadCrumbName:hover{
            text-decoration:unset;
        }

        </style>

    }
    else
    {
        <style>
            :root {
                --color1: @(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteColor);
            }
            .page-title h1 {
                font-size: 22px;
                font-weight: 700;
                color: #000000;
            }
            .product-breadcrumb {
                padding: 16px;
                padding-top: 0;
            }

                .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);
                        text-decoration: none;
                    }

            .product-list-item {
                padding: 15px;
                border-radius: 20px;
                background-color: #fff;
            }

                .product-list-item a {
                    text-decoration: none;
                }

                .product-list-item .item {
                    border: 1px solid #CDC4C8;
                    border-radius: 16px;
                    margin-bottom: 10px;
                    background-color: #fff;
                }

                    .product-list-item .item .item-title {
                        font-size: 14px;
                        font-weight: 700;
                        padding: 12px 16px;
                        height: 58px;
                        overflow: hidden;
                        line-height: 22px;
                        padding: 5px 15px;
                    }

                    .product-list-item .item .item-image {
                        height: 206px;
                        display: flex;
                    }

                        .product-list-item .item .item-image img {
                            border-radius: 15px 15px 0 0;
                            width: 100%;
                        }

                    .product-list-item .item .item-price-offer {
                        padding: 12px 16px;
                    }

                        .product-list-item .item .item-price-offer .price-offer .offer {
                            font-size: 12px;
                            color: #424242;
                            text-decoration: line-through;
                        }

                        .product-list-item .item .item-price-offer .price-offer .price {
                            font-size: 14px;
                            color: #201A1B;
                            font-weight: 700;
                        }

                            .product-list-item .item .item-price-offer .price-offer .price .currency {
                                font-size: 12px;
                                color: #655C5E
                            }

                        .product-list-item .item .item-price-offer .percent {
                            background-color: #A022A1;
                            color: #fff;
                            width: 40px;
                            height: 40px;
                            border-radius: 8px;
                            font-size: 14px;
                        }

.search {
    margin: 0 20px;
}
            .search-slider-wrapper {
                background-color: #FFF7F9;
            }

            .search img {
                position: absolute;
                left: 13px;
                top: calc(50% - 10px);
                z-index: 3;
            }

            .search input {
                border: 1px solid #4b4548;
                background-color: #FFF7F9 !important;
                position: relative;
                z-index: 3;
            }

                .search input::placeholder {
                    font-size: 16px;
                    font-weight: 500;
                    color: #000;
                }
            #divSearch {
                position: absolute;
                top: 50px;
                box-sizing: content-box;
                right: 2px;
                width: calc(100% - 29px);
                max-height: 380px;
                min-height: 96px;
                overflow: auto;
                border: 1px solid rgb(204, 204, 204);
                background-color: rgb(255, 255, 255);
                z-index: 2;
                padding: 16px 12px;
                box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 0px 0px, rgba(0, 0, 0, 0.24) 0px 2px 2px 0px;
                display: none;
            }

            .pagination {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
            }
                .pagination .item {
                    width: 30px;
                    height: 30px;
                    border: 1px solid #00838F;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 5px;
                    color: #00838F;
                    font-size: 16px;
                    font-weight: 700;
                }
                    .pagination .item.selected {
                        background-color: #00838F;
                        color: #fff;
                    }
            .paging-container {
                display: flex;
                gap: 8px;
            }

            .filter-page {
                position: fixed;
                top: 0;
                right: -100%;
                width: 100%;
                height: 100vh;
                z-index: 101;
                background-color: #fff;
                transition: all 0.3s ease-in-out;
            }
            .filter-page a {
                text-decoration: none;
            }
            .filter-page .filter-box {
                border-bottom: 1px solid #CCCCCC;
                padding: 15px 0;
            }
                    .filter-page .filter-box .switch:before {
                        width: 20px !important;
                        height: 20px !important;
                    }
                    .filter-page .filter-box input:checked + .switch::before {
                        left: 10px !important;
                    }
                    .filter-page .filter-box .title {
                        font-size: 15px;
                        font-weight: 400;
                    }
                    .filter-page .filter-box .filter-content {
                        position: fixed;
                        top: 0;
                        right: -100%;
                        width: 100%;
                        height: 100%;
                        background-color: #fff;
                        z-index: 3;
                        transition: all 0.3s ease-in-out;
                    }
                        .filter-page .filter-box .filter-content .title-filter-content {
                            padding: 20px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                        }
                            .filter-page .filter-box .filter-content .title-filter-content .del-all {
                                font-size: 14px;
                                font-weight: 400;
                                color: #00838F;
                            }

                        .filter-page .filter-box .filter-content .title-filter-content a span {
                            font-size: 16px;
                            font-weight: 700;
                        }
            .filter-content-item {
                border-bottom: 1px solid #CCCCCC;
                padding: 15px 20px;
                font-size: 16px;
            }

                .filter-content-item .checkbox-control:checked:after {
                    top: -25px !important;
                }

            .filter-content-item input {
                margin-left: 5px;
            }

            .irs-max, .irs-min {
                display: none !important;
            }
            .irs {
                height: 46px !important;
            }
            #div-page {
                padding: 10px;
                background-color: #fff;
                padding-bottom: 40px;
            }
        </style>
    }
}

@if (ViewBag.DesktopSection)
{

    @*فیلترها و لیست کالاها*@

    <div class="row">
        <div class="col-3">
            <div class="p-3" style="background-color:#fff;">
                <div class="">
                    @*باکس فیلترهای اعمال شده*@
                    <div class="filter-box" style="display:none;">
                        <div class="d-flex align-items-center justify-content-between px-4 filter-header">
                            <span>فیلترهای اعمال شده</span>
                            <img src="~/App_Images/Product/deletAllFilter.svg" style="width: 32px;margin:0;" title="حذف تمام فیلترها" />
                        </div>
                        <div class="filter-content">
                            <div class="filter-content-item">
                                <span>کالا</span>
                                <img src="~/App_Images/Product/cancelFilter.svg" />
                            </div>
                        </div>
                    </div>

                    @*باکس دسته بندی نتایج*@
                    <div class="filter-box" style="display:none;">
                        <div class="d-flex align-items-center justify-content-between px-4 filter-header">
                            <span>دسته‌بندی نتایج</span>
                            <img src="~/App_Images/Product/flashArrow.svg" />
                        </div>
                        <div class="filter-content">
                            <div style="margin-bottom: 12px;">
                                <div>
                                    <img src="~/App_Images/Product/flashArrow.svg" style="transform:rotate(-90deg);cursor:pointer;" />
                                    <span>لباس</span>
                                </div>
                                <div style="margin-top: 12px;">
                                    <img src="~/App_Images/Product/flashArrow.svg" style="transform:rotate(180deg);cursor:pointer;" />
                                    <span>کلاه</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    @*باکس برند*@
                    <div class="filter-box" style="display:none;">
                        <div class="d-flex align-items-center justify-content-between px-4 filter-header">
                            <span>برند</span>
                            <img src="~/App_Images/Product/flashArrow.svg" />
                        </div>
                        <div class="filter-content">
                            <div>
                                <input type="text" class="text-control" style="margin-bottom:10px;padding-right: 26px!important;" placeholder="جستجو نام برند" />
                                <img src="~/App_Images/index/searchIcon.svg" style="position:absolute;right: 5px;top: 8px;width:16px;" />
                            </div>
                            <div style="margin-bottom: 12px;">
                                <input type="checkbox" class="checkbox-control" />
                                <span>شانل</span>
                                <span style="float:left;">Chanel</span>
                            </div>
                        </div>
                    </div>

                    @*باکس نمایش کالاهای موجود*@
                    <div class="filter-box">
                        <div class="d-flex align-items-center justify-content-between px-4 filter-header" style="border-radius:8px;border:unset;">
                            <span>فقط نمایش کالاهای موجود</span>
                            <div>
                                <input type="checkbox" id="chkShowAllProduct" hidden="hidden" style="margin-right: 22px;" onchange="loadData(1)">
                                <label class="switch" style="width: 25px;height: 12px;" for="chkShowAllProduct"></label>
                            </div>
                        </div>
                    </div>

                    @*باکس مشخصات*@
                    @foreach (var item in Model.PropertyType)
                    {
                        <div class="filter-box filter-checkbox">
                            <div class="filter-header d-flex justify-content-between align-items-center px-4">
                                <span>@item.PropertyName</span>
                                <img src="~/App_Images/Product/flashArrow.svg" />
                            </div>
                            <div class="filter-content">
                                @foreach (var value in item.PropertyValues)
                                {
                                    <div class="col-12 no-padding" style="margin-bottom: 12px;">
                                        <input type="checkbox" class="checkbox-control" onchange="loadData(1)" data-id="@value.PropertyNumber" data-name="@item.PropertyName" data-value="@value.PropertyValue" />
                                        <span>@value.PropertyValue</span>
                                    </div>
                                }
                            </div>
                        </div>
                    }



                    @*باکس محدوده قیمت موردنظر*@
                    <div class="filter-box">
                        <div class="filter-header d-flex justify-content-between align-items-center px-4">
                            <span>محدوده قیمت موردنظر</span>
                            <img src="~/App_Images/Product/flashArrow.svg" />
                        </div>
                        <div class="filter-content">
                            <div class="row">
                                <div class="range-slider">
                                    <input type="text" class="js-range-slider" />
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="js-input-to">20,000,000</span>
                                    <span class="js-input-from">0</span>
                                </div>
                                @*<div class="col-12 no-padding" style="margin-top:20px;">
                                        <div class="row">
                                            <div class="col-10 offset-1" style="border-bottom:1px solid #ccc;">
                                                <div class="price-range text-center" style="right:-22px;">
                                                    <img src="~/App_Images/Product/flashArrow.svg" style="transform:rotate(90deg)" />
                                                </div>
                                                <div class="price-range text-center" style="left:-22px;">
                                                    <img src="~/App_Images/Product/flashArrow.svg" style="transform:rotate(-90deg)" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 no-padding" style="margin:20px 0;">
                                        <div class="row">
                                            <div class="col-6 no-padding-right border-left text-center">
                                                <span>از</span>
                                                <input type="text" class="text-control" />
                                            </div>
                                            <div class="col-6 no-padding-left text-center">
                                                <span>تا</span>
                                                <input type="text" class="text-control" />
                                            </div>
                                        </div>
                                    </div>*@
                                <div class="px-2">
                                    <button type="button" class="button-accept" style="width:100%;height: 46px;background-color: #00838f;margin-bottom:10px;">
                                        <img src="~/App_Images/Product/filterIcon.svg" style="margin-left: 10px;height: 24px;" />اعمال محدوده قیمت
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-9 p-3">
            <div style="font-weight:700;">
                <a href="@Html.GetHref("")"><img src="~/App_Images/index/home.svg" style="width: 22px;margin-top: -12px;margin-right: 6px;cursor: pointer;" title="Home" /></a>
                @for (var i = Model.BreadCrumb.Count - 1; i >= 0; i--)
                {
                    <span style="margin:0 6px;">/</span>
                    <a href="@Html.GetHref("Home/ProductList?id=" + Model.BreadCrumb[i].Code)" class="breadCrumbName" style="cursor:pointer">@Model.BreadCrumb[i].Name</a>
                }
            </div>
            <div style="border-bottom: 2px solid #ccc;padding-bottom: 7px !important;margin:15px 0;display:none;">
                <img src="~/App_Images/index/sortingIcon.svg" style="margin-right: 6px;" />
                <span style="color:#616161;margin-left:16px;">مرتب سازی براساس:</span>
                <span class="filter-ordering filter-ordering-select">پرفروش‌ترین</span>
                <span class="filter-ordering">پر بازدیدترین</span>
                <span class="filter-ordering">جدیدترین</span>
                <span class="filter-ordering">ارزان‌ترین</span>
                <span class="filter-ordering">گران‌ترین</span>
            </div>
            <div id="ProductList" style="max-height:1725px;overflow:hidden;margin-top:15px;">
                <div class="row items">
                    @*اضافه شدن کالاها*@
                </div>
            </div>
            @*paging*@
            <div class="col-12" id="div-page" style="display:none;">
                <div class="col-12 no-padding text-center" style="border-top:1px solid #ccc;padding-top:15px!important;line-height: 34px;">
                    <img src="~/App_Images/Product/flashRight.svg" style="cursor:pointer;display:none;" id="imgFlashRight" />
                    <div style="display:inline-block;" class="paging-container">
                        @*اضافه شدن دکمه های paging*@
                    </div>
                    <img src="~/App_Images/Product/flashLeft.svg" style="cursor:pointer;display:none;" id="imgFlashLeft" />
                </div>
            </div>

        </div>
    </div>


    @*محصولات مرتبط*@
    <div class="col-12" style="display:none;">
        <div class="col-12 no-padding" style="font-weight:700;">محصولات مرتبط</div>
        <div class="col-12 form-card">
            <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 class="star">
                        <img src="~/App_Images/index/star.svg" class="svg" style="fill:#ccc;" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="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 class="star">
                        <img src="~/App_Images/index/star.svg" class="svg" style="fill:#ccc;" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="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 class="star">
                        <img src="~/App_Images/index/star.svg" class="svg" style="fill:#ccc;" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="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 class="star">
                        <img src="~/App_Images/index/star.svg" class="svg" style="fill:#ccc;" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="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>


    @*backToTop*@
    @*<div id="backToTop">
              <img src="~/App_Images/Product/flashLeft.svg" style="transform:rotate(90deg)" />
        </div>*@


}
else
{
    <div class="search position-relative">
        <input type="text" id="txtSearch" class="w-100 my-3 p-3 rounded-2" placeholder="جستجو" autocomplete="off" />
        <img id="btnSearch" src="~/App_Images/index/search.svg" alt="search" />
        <div id="divSearch" style="display: none;">
            <img id="imgLoad" src="~/App_Images/loading.gif" style="position: absolute;top: 44%;left: 48%;" />
        </div>
    </div>
    <div class="d-flex align-items-center justify-content-between p-3">
        <div class="page-title">
            <h1>محصولات</h1>
        </div>
        <div class="filter-button">
            <a><img src="~/App_Images/index/filter_alt.svg" /></a>
        </div>
    </div>
    <div class="product-breadcrumb">
        <ul>
            <li><a href="/"><img src="~/App_Images/index/other_houses.svg" alt="home" /></a></li>
            @for (var i = Model.BreadCrumb.Count - 1; i >= 0; i--)
            {
                <li><a href="@Html.GetHref("Home/ProductList?id=" + Model.BreadCrumb[i].Code)">@Model.BreadCrumb[i].Name</a></li>
            }
        </ul>
    </div>


    <div class="filter-page">
        <div class="d-flex align-items-center justify-content-start p-4 mb-3">
            <div class="close-filter me-3"><img src="~/App_Images/index/tims.svg" alt="close" /></div>
            <div class="category-header">فیلتر</div>
        </div>

        <div class="filter-box">
            <div class="d-flex align-items-center justify-content-between px-4 filter-header" style="border-radius:8px;border:unset;">
                <span class="title">فقط نمایش کالاهای موجود</span>
                <div>
                    <input type="checkbox" id="chkShowAllProduct" hidden="hidden" style="margin-right: 22px;" onchange="loadData(1)">
                    <label class="switch" style="width: 25px;height: 12px;" for="chkShowAllProduct"></label>
                </div>
            </div>
        </div>

        @*باکس مشخصات*@
        @foreach (var item in Model.PropertyType)
        {
            <div class="filter-box filter-checkbox">
                <div class="filter-header d-flex justify-content-between align-items-center px-4">
                    <span class="title">@item.PropertyName</span>
                    <img src="/App_Images/index/arrow.svg" alt="gotosubfilter">
                </div>
                <div class="filter-content">
                    <div class="title-filter-content">
                        <a class="back-level w-50">
                            <img style="margin-left: 15px;" src="/App_Images/index/arrow2.svg">
                            <span>انتخاب <span class="add-title"></span></span>
                        </a>
                        <a class="del-all w-50 text-end d-none">حذف همه</a>
                    </div>
                    @foreach (var value in item.PropertyValues)
                    {

                        <div class="filter-content-item">
                            <input type="checkbox" class="checkbox-control" onchange="loadData(1)" data-id="@value.PropertyNumber" data-name="@item.PropertyName" data-value="@value.PropertyValue" />
                            <span>@value.PropertyValue</span>
                        </div>
                    }
                </div>
            </div>
        }
       
        @*باکس محدوده قیمت موردنظر*@
        <div class="filter-box" style="padding: 20px 20px">
                <span style=" font-size: 14px; font-weight: 700; color: #666666;">محدوده قیمت </span>
                <div>

                    <div class="d-flex justify-content-between align-items-center" style=" margin-top: 16px; margin-bottom: -25px; ">
                        <span class="js-input-to">20,000,000</span>
                        <span class="js-input-from">0</span>
                    </div>
                    <div class="range-slider">
                        <input type="text" class="js-range-slider" />
                    </div>
                </div>
        </div>

    </div>
    <div class="">
        <div class="col-3 d-none">
            <div class="p-3" style="background-color:#fff;">
                <div class="d-none">
                    @*باکس فیلترهای اعمال شده*@
                    <div class="filter-box" style="display:none;">
                        <div class="d-flex align-items-center justify-content-between px-4 filter-header">
                            <span>فیلترهای اعمال شده</span>
                            <img src="~/App_Images/Product/deletAllFilter.svg" style="width: 32px;margin:0;" title="حذف تمام فیلترها" />
                        </div>
                        <div class="filter-content">
                            <div class="filter-content-item">
                                <span>کالا</span>
                                <img src="~/App_Images/Product/cancelFilter.svg" />
                            </div>
                        </div>
                    </div>

                    @*باکس دسته بندی نتایج*@
                    <div class="filter-box" style="display:none;">
                        <div class="d-flex align-items-center justify-content-between px-4 filter-header">
                            <span>دسته‌بندی نتایج</span>
                            <img src="~/App_Images/Product/flashArrow.svg" />
                        </div>
                        <div class="filter-content">
                            <div style="margin-bottom: 12px;">
                                <div>
                                    <img src="~/App_Images/Product/flashArrow.svg" style="transform:rotate(-90deg);cursor:pointer;" />
                                    <span>لباس</span>
                                </div>
                                <div style="margin-top: 12px;">
                                    <img src="~/App_Images/Product/flashArrow.svg" style="transform:rotate(180deg);cursor:pointer;" />
                                    <span>کلاه</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    @*باکس برند*@
                    <div class="filter-box" style="display:none;">
                        <div class="d-flex align-items-center justify-content-between px-4 filter-header">
                            <span>برند</span>
                            <img src="~/App_Images/Product/flashArrow.svg" />
                        </div>
                        <div class="filter-content">
                            <div>
                                <input type="text" class="text-control" style="margin-bottom:10px;padding-right: 26px!important;" placeholder="جستجو نام برند" />
                                <img src="~/App_Images/index/searchIcon.svg" style="position:absolute;right: 5px;top: 8px;width:16px;" />
                            </div>
                            <div style="margin-bottom: 12px;">
                                <input type="checkbox" class="checkbox-control" />
                                <span>شانل</span>
                                <span style="float:left;">Chanel</span>
                            </div>
                        </div>
                    </div>

                    @*باکس نمایش کالاهای موجود*@
                    <div class="filter-box">
                        <div class="d-flex align-items-center justify-content-between px-4 filter-header" style="border-radius:8px;border:unset;">
                            <span>فقط نمایش کالاهای موجود</span>
                            <div>
                                <input type="checkbox" id="chkShowAllProduct" hidden="hidden" style="margin-right: 22px;" onchange="loadData(1)">
                                <label class="switch" style="width: 25px;height: 12px;" for="chkShowAllProduct"></label>
                            </div>
                        </div>
                    </div>

                    @*باکس مشخصات*@
                    @foreach (var item in Model.PropertyType)
                    {
                        <div class="filter-box filter-checkbox">
                            <div class="filter-header d-flex justify-content-between align-items-center px-4">
                                <span>@item.PropertyName</span>
                                <img src="~/App_Images/Product/flashArrow.svg" />
                            </div>
                            <div class="filter-content">
                                @foreach (var value in item.PropertyValues)
                                {
                                    <div class="col-12 no-padding" style="margin-bottom: 12px;">
                                        <input type="checkbox" class="checkbox-control" onchange="loadData(1)" data-id="@value.PropertyNumber" data-name="@item.PropertyName" data-value="@value.PropertyValue" />
                                        <span>@value.PropertyValue</span>
                                    </div>
                                }
                            </div>
                        </div>
                    }



                    @*باکس محدوده قیمت موردنظر*@
                    <div class="filter-box">
                        <div class="filter-header d-flex justify-content-between align-items-center px-4">
                            <span>محدوده قیمت موردنظر</span>
                            <img src="~/App_Images/Product/flashArrow.svg" />
                        </div>
                        <div class="filter-content">
                            <div class="row">
                                <div class="range-slider">
                                    <input type="text" class="js-range-slider" />
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="js-input-to">20,000,000</span>
                                    <span class="js-input-from">0</span>
                                </div>
                                @*<div class="col-12 no-padding" style="margin-top:20px;">
                                        <div class="row">
                                            <div class="col-10 offset-1" style="border-bottom:1px solid #ccc;">
                                                <div class="price-range text-center" style="right:-22px;">
                                                    <img src="~/App_Images/Product/flashArrow.svg" style="transform:rotate(90deg)" />
                                                </div>
                                                <div class="price-range text-center" style="left:-22px;">
                                                    <img src="~/App_Images/Product/flashArrow.svg" style="transform:rotate(-90deg)" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 no-padding" style="margin:20px 0;">
                                        <div class="row">
                                            <div class="col-6 no-padding-right border-left text-center">
                                                <span>از</span>
                                                <input type="text" class="text-control" />
                                            </div>
                                            <div class="col-6 no-padding-left text-center">
                                                <span>تا</span>
                                                <input type="text" class="text-control" />
                                            </div>
                                        </div>
                                    </div>*@
                                <div class="px-2">
                                    <button type="button" class="button-accept" style="width:100%;height: 46px;background-color: #00838f;margin-bottom:10px;">
                                        <img src="~/App_Images/Product/filterIcon.svg" style="margin-left: 10px;height: 24px;" />اعمال محدوده قیمت
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 pt-3">

            <div class="d-none" style="border-bottom: 2px solid #ccc;padding-bottom: 7px !important;margin:15px 0;display:none;">
                <img src="~/App_Images/index/sortingIcon.svg" style="margin-right: 6px;" />
                <span style="color:#616161;margin-left:16px;">مرتب سازی براساس:</span>
                <span class="filter-ordering filter-ordering-select">پرفروش‌ترین</span>
                <span class="filter-ordering">پر بازدیدترین</span>
                <span class="filter-ordering">جدیدترین</span>
                <span class="filter-ordering">ارزان‌ترین</span>
                <span class="filter-ordering">گران‌ترین</span>
            </div>
            <div id="ProductList">
                <div class="items product-list-item p-4">
                    @*اضافه شدن کالاها*@




                </div>
                @*paging*@
                <div id="div-page">
                    <div class="pagination">
                        <div class="item"><img src="~/App_Images/Product/flashRight.svg" id="imgFlashRight" /></div>
                        <div class="paging-container">
                            @*اضافه شدن دکمه های paging*@
                        </div>
                        <div class="item"><img src="~/App_Images/Product/flashLeft.svg" id="imgFlashLeft" /></div>
                    </div>
                </div>
            </div>
           

            <!--<div class="col-12" id="div-page" style="display:none;">
                <div class="col-12 no-padding text-center" style="border-top:1px solid #ccc;padding-top:15px!important;line-height: 34px;">
                    <img src="~/App_Images/Product/flashRight.svg" style="cursor:pointer;display:none;" id="imgFlashRight" />
                    <div style="display:inline-block;" class="paging-container">-->
            @*اضافه شدن دکمه های paging*@
            <!--</div>
                    <img src="~/App_Images/Product/flashLeft.svg" style="cursor:pointer;display:none;" id="imgFlashLeft" />
                </div>
            </div>-->

        </div>
    </div>



    @*محصولات مرتبط*@
    <div class="col-12" style="display:none;">
        <div class="col-12 no-padding" style="font-weight:700;">محصولات مرتبط</div>
        <div class="col-12 form-card">
            <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 class="star">
                        <img src="~/App_Images/index/star.svg" class="svg" style="fill:#ccc;" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="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 class="star">
                        <img src="~/App_Images/index/star.svg" class="svg" style="fill:#ccc;" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="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 class="star">
                        <img src="~/App_Images/index/star.svg" class="svg" style="fill:#ccc;" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="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 class="star">
                        <img src="~/App_Images/index/star.svg" class="svg" style="fill:#ccc;" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="svg" />
                        <img src="~/App_Images/index/star.svg" class="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>
}

@section scripts{


    @if (ViewBag.DesktopSection)
    {
        <script src="~/App_Scripts/app/range-slider.js"></script>
        <script>

            $(".filter-header").click(function () {
                if ($(this).next().is(":hidden")) {
                    $(this).next().show();
                    $(this).css("border-radius", "8px 8px 0 0");
                    $(this).find('img').css("transform", "rotate(0deg)");
                }
                else {
                    $(this).next().hide();
                    $(this).css("border-radius", "8px");
                    $(this).find('img').css("transform", "rotate(180deg)");
                };

            });

            $(function () {
                var $range = $(".js-range-slider");
                var $spanFrom = $(".js-input-from");
                var $spanTo = $(".js-input-to");
                $range.ionRangeSlider({
                    type: "double",
                    min: 0,
                    max: 900000000,
                    from: 0,
                    to: 900000000,
                    prefix: 'ریال ',
                    onStart: updateInputs,
                    onChange: updateInputs,
                    onFinish: onUpdatePrice,
                    step: 10000,
                    prettify_enabled: true,
                    prettify_separator: ",",
                    values_separator: " - ",
                    force_edges: true,
                    hide_from_to: true

                });
                function updateInputs(data) {
                    from = numberWithCommas(data.from);
                    to = numberWithCommas(data.to);

                    $spanFrom.text(from);
                    $spanTo.text(to);
                }
                function onUpdatePrice() {
                    loadData(1);
                }
            });

            $('.filter-ordering').on("click", function () {
                $('.filter-ordering').removeClass("filter-ordering-select")
                $(this).addClass("filter-ordering-select");
            });

            $(document).ready(function () {
                loadData(1);
            });

            $('.paging-container').on("click", ".paging", function () {
                var pageNo = $(this).text();
                loadData(pageNo);
            });



            function loadData(pageNo) {
                var codeGroup = getQuery("id");
                var filter = "";
                var minPrice = numberNonCommas($(".js-input-from").text());
                var maxPrice = numberNonCommas($(".js-input-to").text());

                $(".filter-checkbox").each(function (index, box) {
                    var criteria = "";
                    $(box).find(".checkbox-control:checked").each(function (index, item) {
                        criteria += (criteria ? "|" : "") + $(item).attr("data-id") + ":" + $(item).attr("data-name") + ":" + $(item).attr("data-value");
                    });
                    if (criteria)
                        filter += (filter ? "^" : "") + criteria;
                });
                ajax({
                    loading: true,
                    url: "Home/PagingProductList",
                    data: JSON.stringify({ codeGroup: codeGroup, pageNo: pageNo, filter: filter, minPrice: minPrice, maxPrice: maxPrice, isExist: $("#chkShowAllProduct").prop("checked") }),
                    success: function (result) {
                        $("#ProductList .items").empty();
                        for (var i = 0; i < result.length; i++) {

                            var htmlProperty = "";
                            if (result[i].Property != null) {
                                for (var j = 0; j < result[i].Property.length; j++) {
                                    htmlProperty += " / " + result[i].Property[j].PropertyValue;
                                }
                            }

                            var htmllState = "";
                            if (result[i].Mojodi <= 0 || result[i].KalaPrice <= 0) {
                                if (result[i].Mojodi <= 0)
                                    htmllState += "<span style ='color:#546E7A!important;'> ناموجود</span> ";
                                else
                                    htmllState += "<span style ='color:#546E7A!important;'> تماس بگیرید</span> ";
                            }
                            else {
                                if (result[i].KalaTakhfifPersent > 0)
                                    htmllState += "<span>" + numberWithCommas(result[i].KalaNewPrice) + "</span> <span style ='margin-right:3px;font-weight:normal;'> ریال</span>"
                                else
                                    htmllState += "<span>" + numberWithCommas(result[i].KalaPrice) + "</span> <span style ='margin-right:3px;font-weight:normal;'> ریال</span>"
                            }

                            $("#ProductList .items").append(
                                "<div class='col-3'>" +
                                "<a style='color:unset;' href='" + baseUrl + "Home/ShowDetails?id=" + result[i].Code + "&part=" + result[i].CodePartProperty + "' >" +
                                "<div class='position-relative text-center' style='margin-bottom:15px;background-color:#fff;height:310px;'>" +
                                "<div class='center-vertical' style='height:196px;padding:8px;overflow:hidden;'><img src=" + result[i].PicThumbString + " style='width: 100%;' /></div>" +
                                (result[i].KalaTakhfifPersent > 0 && result[i].Mojodi > 0 && result[i].KalaPrice > 0 ? "<div class='product-discount'>" + result[i].KalaTakhfifPersent + "%</div>" : "") +
                                "<div style='position:absolute;bottom:20px;left:0;right:0;margin:0 auto;'>" +
                                "<div class='product-name'>" +
                                "<div style='font-weight: 700;display: inline;'>" + result[i].Name + "</div><div style='display: inline-block;'>" + htmlProperty + "</div></div>" +
                                "<div style='margin-bottom:5px;display:none;'>" + result[i].Shenaseh + "</div>" +
                                "<div class='product-price-new'>" + htmllState + "</div>" +
                                (result[i].KalaTakhfifPersent > 0 && result[i].Mojodi > 0 && result[i].KalaPrice > 0 ? "<div class='product-price-old'> <span>" + numberWithCommas(result[i].KalaPrice) + "</span> </div>" : "") +
                                "<div class='star' style='display:none;'>" +
                                "<img src='/App_Images/index/star.svg' class='svg' style='fill:#ccc;' />" +
                                "<img src='/App_Images/index/star.svg' class='svg' />" +
                                "<img src='/App_Images/index/star.svg' class='svg' />" +
                                "<img src='/App_Images/index/star.svg' class='svg' />" +
                                "<img src='/App_Images/index/star.svg' class='svg' />" +
                                "</div> </div> </div> </a> </div> ");
                        }

                        $(".paging-container").empty();
                        if (result.length > 0 && result[0].__Rc > result[0].PageRecordCount) {
                            var numberPage = Math.ceil(result[0].__Rc / result[0].PageRecordCount);
                            if (numberPage > 6) {
                                numberPage = 6;
                                $("#imgFlashRight").show();
                                $("#imgFlashLeft").show();
                            }
                            else {
                                $("#imgFlashRight").hide();
                                $("#imgFlashLeft").hide();
                            }
                            for (var i = 0; i < numberPage; i++) {
                                $(".paging-container").append(
                                    "<div class='paging" + (pageNo == (i + 1) ? " paging-select" : "") + "'>" + (i + 1) + "</div>"
                                );
                            }

                            $("#div-page").show();
                        }
                        else {
                            $("#div-page").hide();
                        }
                        closeLoading();
                    },
                    complete: function () { }
                });
            }
        </script>
    }
    else
    {

        <script src="~/App_Scripts/app/range-slider.js"></script>
        <script>
            $(".filter-button").click(function () {
                $(".filter-page").css("right", "0");
            })
            $(".close-filter").click(function () {
                $(".filter-page").css("right", "-100%");
            })
            $(".filter-box").click(function (e) {

                $(this).find(".filter-content").css("right", "0");
            })
            $(".back-level").click(function (e) {
                e.stopPropagation()
                $(this).parents(".filter-content").css("right", "-100%");
            })

            $(function () {
                var $range = $(".js-range-slider");
                var $spanFrom = $(".js-input-from");
                var $spanTo = $(".js-input-to");
                $range.ionRangeSlider({
                    type: "double",
                    min: 0,
                    max: 900000000,
                    from: 0,
                    to: 900000000,
                    prefix: 'ریال ',
                    onStart: updateInputs,
                    onChange: updateInputs,
                    onFinish: onUpdatePrice,
                    step: 10000,
                    prettify_enabled: true,
                    prettify_separator: ",",
                    values_separator: " - ",
                    force_edges: true,
                    hide_from_to: true

                });
                function updateInputs(data) {
                    from = numberWithCommas(data.from);
                    to = numberWithCommas(data.to);

                    $spanFrom.text(from);
                    $spanTo.text(to);
                }
                function onUpdatePrice() {
                    loadData(1);
                }
            });

            $('.filter-ordering').on("click", function () {
                $('.filter-ordering').removeClass("filter-ordering-select")
                $(this).addClass("filter-ordering-select");
            });

            $(document).ready(function () {
                loadData(1);
            });

            $('.paging-container').on("click", ".paging", function () {
                var pageNo = $(this).text();
                loadData(pageNo);
            });

            var lastNumberPageDisplay;
            function loadData(pageNo) {
                var codeGroup = getQuery("id");
                var filter = "";
                var minPrice = numberNonCommas($(".js-input-from").text());
                var maxPrice = numberNonCommas($(".js-input-to").text());

                $(".filter-checkbox").each(function (index, box) {
                    var criteria = "";
                    $(box).find(".checkbox-control:checked").each(function (index, item) {
                        criteria += (criteria ? "|" : "") + $(item).attr("data-id") + ":" + $(item).attr("data-name") + ":" + $(item).attr("data-value");
                    });
                    if (criteria)
                        filter += (filter ? "^" : "") + criteria;
                });

                function generateNumberPage(countAllPage, lastNumberPageDisplay, countShowPage) {
                    $(".paging-container").empty();
                    lastNumberPageDisplay = (lastNumberPageDisplay > countAllPage) ? countAllPage : lastNumberPageDisplay;
                    var division = lastNumberPageDisplay % countShowPage;
                    if (division === 0) {
                        var first = lastNumberPageDisplay - countShowPage;
                        var last = lastNumberPageDisplay;
                        $("#imgFlashLeft").parent().show();
                    } else {
                        var first = lastNumberPageDisplay - division;
                        if (first + countShowPage >= countAllPage) {
                            var last = countAllPage;
                            $("#imgFlashLeft").parent().hide();
                        } else {
                            var last = first + countShowPage;
                        }

                    }

                    for (var i = first; i < last; i++) {

                        $(".paging-container").append(
                            `<div class="item paging${(pageNo == (i + 1) ? " selected" : "")}">${(i + 1)}</div>`
                        );
                    }
                    if (lastNumberPageDisplay <= countShowPage) {
                        $("#imgFlashRight").parent().hide();
                        $("#imgFlashLeft").parent().show();
                    } else {
                        $("#imgFlashRight").parent().show();
                    }
                }

                ajax({
                    loading: true,
                    url: "Home/PagingProductList",
                    data: JSON.stringify({ codeGroup: codeGroup, pageNo: pageNo, filter: filter, minPrice: minPrice, maxPrice: maxPrice, isExist: $("#chkShowAllProduct").prop("checked") }),
                    success: function (result) {
                        $("#ProductList .items").empty();
                        for (var i = 0; i < result.length; i++) {

                            var htmlProperty = "";
                            if (result[i].Property != null) {
                                for (var j = 0; j < result[i].Property.length; j++) {
                                    htmlProperty += " / " + result[i].Property[j].PropertyValue;
                                }
                            }

                            var htmllState = "";
                            if (result[i].Mojodi <= 0 || result[i].KalaPrice <= 0) {
                                if (result[i].Mojodi <= 0)
                                    htmllState += "<span style ='color:#546E7A!important;'> ناموجود</span> ";
                                else
                                    htmllState += "<span style ='color:#546E7A!important;'> تماس بگیرید</span> ";
                            }
                            else {
                                if (result[i].KalaTakhfifPersent > 0)
                                    htmllState += "<span>" + numberWithCommas(result[i].KalaNewPrice) + "</span> <span style ='margin-right:3px;font-weight:normal;'> ریال</span>"
                                else
                                    htmllState += "<span>" + numberWithCommas(result[i].KalaPrice) + "</span> <span style ='margin-right:3px;font-weight:normal;'> ریال</span>"
                            }

                            $("#ProductList .items").append(
                                `<div class="item">
                                                                                                                    <a href="${baseUrl}Home/ShowDetails?id=${result[i].Code}&part=${result[i].CodePartProperty}">
                                                                                                                        <div class="item-image">
                                                                                                                        <img src="${result[i].PicThumbString}" alt="image" />
                                                                                                                        </div>
                                                                                                                        <h2 class="item-title">${result[i].Name}</h2>
                                                                                                                        <div class="item-price-offer d-flex justify-content-between align-items-center">
                                                                                                                            <div class="price-offer">
                                                                                                                                ${result[i].KalaTakhfifPersent > 0 && result[i].Mojodi > 0 && result[i].KalaPrice > 0 ? `<div class="offer">${numberWithCommas(result[i].KalaPrice)}</div>` : ""}
                                                                                                                                <div class="price">${htmllState}</div>
                                                                                                                            </div>
                                                                                                                            ${result[i].KalaTakhfifPersent > 0 && result[i].Mojodi > 0 && result[i].KalaPrice > 0 ? `<div class="percent d-flex align-items-center justify-content-center">${result[i].KalaTakhfifPersent}%</div>` : ""}
                                                                                                                        </div>
                                                                                                                    </a>
                                                                                                                </div>`

                            );
                        }
                        $(".paging-container").empty();
                        if (result.length > 0 && result[0].__Rc > result[0].PageRecordCount) {

                            var countAllPage = Math.ceil(result[0].__Rc / result[0].PageRecordCount);
                            var countShowPage = 5;
                            if (countAllPage > countShowPage) {
                                $("#imgFlashRight").parent().hide();
                                $("#imgFlashLeft").parent().show();
                                if (!lastNumberPageDisplay || lastNumberPageDisplay <= countShowPage) {
                                    lastNumberPageDisplay = countShowPage;
                                    for (var i = 0; i < lastNumberPageDisplay; i++) {
                                        $(".paging-container").append(
                                            `<div class="item paging${(pageNo == (i + 1) ? " selected" : "")}">${(i + 1)}</div>`
                                        );
                                    }
                                } else {

                                    generateNumberPage(countAllPage, lastNumberPageDisplay, countShowPage)
                                }
                            }
                            else {
                                $("#imgFlashRight").parent().hide();
                                $("#imgFlashLeft").parent().hide();
                                lastNumberPageDisplay = countAllPage;
                                for (var i = 0; i < lastNumberPageDisplay; i++) {
                                    $(".paging-container").append(
                                        `<div class="item paging${(pageNo == (i + 1) ? " selected" : "")}">${(i + 1)}</div>`
                                    );
                                }
                            }
                            


                            nextPageNumberFunction = () => {
                                lastNumberPageDisplay += countShowPage;
                                generateNumberPage(countAllPage, lastNumberPageDisplay, countShowPage);
                            }

                            prevPageNumberFunction = () => {
                                if (lastNumberPageDisplay - countShowPage < 5) {
                                    lastNumberPageDisplay = 5;
                                    $("#imgFlashRight").parent().hide();
                                } else {
                                    lastNumberPageDisplay -= countShowPage;
                                }
                                generateNumberPage(countAllPage, lastNumberPageDisplay, countShowPage);
                            }



                            $("#div-page").show();
                        }
                        else {
                            $("#div-page").hide();
                        }
                        closeLoading();
                    },
                    complete: function () { }
                });
            }

            var nextPageNumberFunction;
            $("#imgFlashLeft").on("click", function () {
                nextPageNumberFunction();

            })
            var prevPageNumberFunction;
            $("#imgFlashRight").on("click", function () {
                prevPageNumberFunction();

            })




        </script>

    }

}