
@{
    ViewBag.Title = "مشاهده تمام فروشگاه‌ها";
    Layout = "~/Views/Shared/_NonHeaderFooter.cshtml";
}
@using Utils;
@using GheyasPlusShop.Utils;
@model List<GheyasPlusShop.Models.Home.EShopModel>
@section styles{

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

            .form-card {
                box-shadow: 0 0 2px 0 rgba(0,0,0,.12), 0 1px 3px 0 rgba(0,0,0,.24) !important;
            }

            .menu-item {
                width: 70px;
                font-size: 14px;
                color: #fff;
                padding-bottom: 3px;
                margin: 0 52px;
                cursor: pointer;
                text-align: center;
            }

                .menu-item:hover {
                    border-bottom: 1px solid #fff;
                }

            .shop {
                padding: 8px;
                margin-top: 32px;
            }

            .shop-card {
                position: relative;
                height: 182px;
                padding: 30px 15px 15px;
            }

            .shop-img {
                position: absolute;
                top: -34px;
                left: 0;
                right: 0;
                margin: 0 auto;
                padding: 16px;
                width: 68px;
                height: 68px;
                background-color: #ECEFF1;
                border-radius: 50%;
            }

            .shop-spec {
                margin-top: 20px;
                padding-bottom: 5px;
            }

            .shop-name {
                font-weight: 700;
                margin: 4px 0;
                height: 20px;
            }

            .shop-type {
                height: 20px;
                margin-bottom: 8px;
            }

            .shop-status {
                width: 10px;
                height: 10px;
                margin-left: 4px;
                border-radius: 100%;
                display: inline-block;
            }

            .button-accept {
                width: 100px;
                margin-top: 12px !important;
            }
        </style>
    }
}


@if (ViewBag.DesktopSection)
{
    <div class="container-fluid">
        <div class="row">
            <div class="col-12" style="position: absolute; top: 0; left: 0; padding: 8px 15px; background-color: #0495a5;z-index:11; ">
                <img src="~/App_Images/gheyasEShopLogo.svg" style="width: 72px;filter:grayscale(100) invert(1) brightness(1000);" />
                <div style="position:absolute;bottom:16px;right:0;left:0;height: 24px;text-align:center;">
                    <a href="https://www.gheyas.com"><label class="menu-item">سایت قیاس</label></a>
                    <a href="https://www.gheyas.com/AboutUs"><label class="menu-item">درباره ما</label></a>
                    <a href="https://www.gheyas.com/ContactUs"><label class="menu-item">تماس با ما</label></a>
                </div>
            </div>

            <div class="col-8 offset-2" style="padding:110px 0 20px;">
                <div class="form-card no-margin" style="padding:28px 15px!important;">
                    <div style="padding: 0 8px 14px;margin-bottom: 10px;border-bottom: 1px dashed #ccc;">
                        <div class="text-center">
                            <div style="font-weight:700;font-size:18px;margin: 3px 0 25px;">لیست فروشگاه‌های موجود</div>
                        </div>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-6 has-float-label">
                                    <select id="cboShopType" class="text-control">
                                        <option value="-1">همه</option>
                                        <option value="آرایشی و بهداشتی">آرایشی و بهداشتی</option>
                                        <option value="کتابفروشی">کتابفروشی</option>
                                        <option value="رستوران و فست فود">رستوران و فست فود</option>
                                        <option value="پوشاک">پوشاک</option>
                                        <option value="لوازم خانگی">لوازم خانگی</option>
                                        <option value="نمایشگاه و فروشگاه خودرو">نمایشگاه و فروشگاه خودرو</option>
                                        <option value="سوپر مارکت">سوپر مارکت</option>
                                        <option value="سایر">سایر</option>
                                    </select>
                                    <span>فیلتر کسب و کار</span>
                                </div>
                                <div class="col-6">
                                    <input id="txtSearch" type="text" class="text-control" placeholder="جستجو" />
                                    <div id="imgSearch" style="position: absolute;top: 4px;left:18px;cursor:pointer;">
                                        <img src="~/App_Images/index/searchIcon.svg" class="svg" style="fill:#666;" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="container-fluid">
                        <div class="row">
                            @foreach (var shop in Model)
                            {
                                <div class="col-3 shop">
                                    <div class="form-card no-margin shop-card">
                                        <img src="@(shop.LogoImage != null ? shop.LogoImage.ToBase64File() : Html.GetHref("App_Images/noLogoEshop.svg"))" class="shop-img">
                                        <div class="text-center text-ellipsis shop-spec">
                                            <div class="shop-name">@(shop.NickName.IsEmpty() ? shop.LockSerial : shop.NickName)</div>
                                            <div class="shop-type"><span>کسب و کار: </span><span class="shop-type-value">@(shop.ShopType.IsEmpty() ? "---" : shop.ShopType.ConvertArabicToPersian())</span></div>
                                            <div><div class="shop-status" style="@(shop.NickName.IsEmpty() ? " background-color: #e53935;" : " background-color: #43A047;")"></div><span>@(shop.NickName.IsEmpty() ? "غیرفعال" : "فعال")</span></div>
                                            <div class="text-center">
                                                <a href="~/@(shop.NickName)"><input type="button" class="button-accept no-margin" value="مشاهده" style="@(shop.NickName.IsEmpty() ? "" : "cursor:pointer;")" @(shop.NickName.IsEmpty() ? "disabled=disabled" : "")></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            }
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

}
else
{
    <style>
        h1 {
            font-weight: 700;
            font-size: 18px;
            text-align: center;
            margin-top: 24px;
            margin-bottom: 10px;
        }
        .menu-item {
            font-size: 14px;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        .shop {
            padding: 8px;
            margin-top: 32px;
        }

        .shop-card {
            position: relative;
            height: 182px;
            padding: 30px 15px 15px;
        }

        .shop-img {
            position: absolute;
            top: -34px;
            left: 0;
            right: 0;
            margin: 0 auto;
            padding: 16px;
            width: 68px;
            height: 68px;
            background-color: #ECEFF1;
            border-radius: 50%;
        }

        .shop-spec {
            margin-top: 20px;
            padding-bottom: 5px;
        }

        .shop-name {
            font-weight: 700;
            margin: 4px 0;
            height: 20px;
        }

        .shop-type {
            height: 20px;
            margin-bottom: 8px;
        }

        .shop-status {
            width: 10px;
            height: 10px;
            margin-left: 4px;
            border-radius: 100%;
            display: inline-block;
        }

        .button-accept {
            width: 100px;
            margin-top: 12px !important;
        }
        .form-card {
            box-shadow: 0 0 2px 0 rgba(0,0,0,.12), 0 1px 3px 0 rgba(0,0,0,.24) !important;
        }
    </style>
    <div class="d-flex align-items-center justify-content-center p-4" style="background-color: #0495a5;"><img src="~/App_Images/gheyasEShopLogo.svg" style="width: 72px;filter:grayscale(100) invert(1) brightness(1000);" /></div>
    <div class="d-flex align-items-center justify-content-around" style="background-color: #0495a5;">
        <a href="https://www.gheyas.com"><label class="menu-item">سایت قیاس</label></a>
        <a href="https://www.gheyas.com/AboutUs"><label class="menu-item">درباره ما</label></a>
        <a href="https://www.gheyas.com/ContactUs"><label class="menu-item">تماس با ما</label></a>
    </div>
    <div class="container-fluid">
        <h1>لیست فروشگاه‌های موجود</h1>
        <div class="has-float-label mt-5">
            <select id="cboShopType" class="text-control">
                <option value="-1">همه</option>
                <option value="آرایشی و بهداشتی">آرایشی و بهداشتی</option>
                <option value="کتابفروشی">کتابفروشی</option>
                <option value="رستوران و فست فود">رستوران و فست فود</option>
                <option value="پوشاک">پوشاک</option>
                <option value="لوازم خانگی">لوازم خانگی</option>
                <option value="نمایشگاه و فروشگاه خودرو">نمایشگاه و فروشگاه خودرو</option>
                <option value="سوپر مارکت">سوپر مارکت</option>
                <option value="سایر">سایر</option>
            </select>
            <span>فیلتر کسب و کار</span>
        </div>
        <div class="position-relative">
            <input id="txtSearch" type="text" class="text-control" placeholder="جستجو" />
            <div id="imgSearch" style="position: absolute;top: 4px;left:18px;cursor:pointer;">
                <img src="~/App_Images/index/searchIcon.svg" class="svg" style="fill:#666;" />
            </div>
        </div>


        <div class="row">
            @foreach (var shop in Model)
            {
                <div class="col-12 col-md-3 shop mb-4">
                    <div class="form-card no-margin shop-card">
                        <img src="@(shop.LogoImage != null ? shop.LogoImage.ToBase64File() : Html.GetHref("App_Images/noLogoEshop.svg"))" class="shop-img">
                        <div class="text-center text-ellipsis shop-spec">
                            <div class="shop-name">@(shop.NickName.IsEmpty() ? shop.LockSerial : shop.NickName)</div>
                            <div class="shop-type"><span>کسب و کار: </span><span class="shop-type-value">@(shop.ShopType.IsEmpty() ? "---" : shop.ShopType.ConvertArabicToPersian())</span></div>
                            <div><div class="shop-status" style="@(shop.NickName.IsEmpty() ? " background-color: #e53935;" : " background-color: #43A047;")"></div><span>@(shop.NickName.IsEmpty() ? "غیرفعال" : "فعال")</span></div>
                            <div class="text-center">
                                <a href="~/@(shop.NickName)"><input type="button" class="button-accept no-margin" value="مشاهده" style="@(shop.NickName.IsEmpty() ? "" : "cursor:pointer;")" @(shop.NickName.IsEmpty() ? "disabled=disabled" : "")></a>
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>

    </div>
}
@section scripts{
    <script>
        $("#txtSearch").on("keydown", function (event) {
            if (event.keyCode === 13) {
                search();
            }
        });
        $("#imgSearch").on("click", function () {
            search();
        });

        $("#cboShopType").on("change", function () {
            search();
        });

        function search() {
            var text = $("#txtSearch").val().trim();
            $(".shop").each(function () {
                if ((text === "" || $(this).find(".shop-name").text().includes(text)) && ($("#cboShopType").val() === "-1" || $(this).find(".shop-type-value").text().trim() === $("#cboShopType").val()))
                    $(this).closest(".shop").show();
                else
                    $(this).closest(".shop").hide();
            });

        }
    </script>
}
