@model GheyasPlusShop.Models.Admin.SettingModel
@using Utils
@section styles
{
    <style>

        body {
            background-color: #f6f6f6;
        }

        #logoMax, #logoMin {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .deleteLogo {
            display: none;
            margin-top: 5px !important;
            width: 58px;
            font-size: 11px;
        }

        #picWebsite {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        #deletePicWebsite, #getPicWebsite {
            width: 70px;
            height: 22px;
            font-size: 11px;
        }
    </style>
    @if (Model.IsActiveWebsite)
    {
        <style>
            .switch::before {
                left: 19.9px;
                top: -5.5px;
                width: 20px;
                height: 20px;
                background: #037b90;
            }
        </style>
    }
    else
    {
        <style>
            .switch:before {
                left: -0.9px;
                top: -5.5px;
                width: 20px;
                height: 20px;
            }
        </style>
    }
}


<div class="w-100 d-flex align-items-center justify-content-between position-fixed" style="top: 0;background-color: #eceff1;height: 60px;padding: 0 34px;z-index:666;box-shadow: 0 0 16px #51515154;">
    <span style="font-weight:700;margin-top: 4px;">چیدمان صفحه اول</span>
    <div>
        <button type="button" class="button-accept" onclick="save();">تایید و ذخیره</button>
        <button type="button" class="button-default" onclick="reload();">انصراف</button>
    </div>
</div>

<div class="container-fluid" style="margin-top:56px;">
    <div class="row">
        <div class="col-6 offset-3">
            <div style="font-size: 14px; font-weight: 700; margin: 8px 0;">عمومی</div>
            <div class="form-card mb-5 p-5" style="margin-right: 0 !important; margin-left: 0 !important; ">
                <div class="d-flex align-text-center justify-content-between mb-2">
                    <span>فعال بودن سایت</span>
                    <div>
                        <label>@(Model.IsActiveWebsite ? "فعال" : "غیرفعال")</label>
                        <label class="switch" style="margin-top: 8px; width: 40px; height: 12px;"></label>
                    </div>
                </div>
                <div class="d-flex align-text-center justify-content-between mb-2">
                    <span>رنگ اصلی سایت</span>
                    <div>
                        <input id="txtColor" type="text" class="text-control" style="width: 80px; display: inline-block; background-color:@(Model.WebsiteColor);color:@(Model.WebsiteForColor);" readonly="readonly" value="رنگ متن">
                        <button id="btnAddColor" type="button" class="button-accept no-margin" style="width: 46px;">انتخاب</button>
                        <input type="color" style="display: none;" id="fuColor" value="@Model.WebsiteColor" />
                    </div>
                </div>
                <div class="d-flex align-text-center justify-content-between mb-2">
                    <span>رنگ متن</span>
                    <div>
                        <input id="txtForColor" type="text" class="text-control" style="width: 80px; display: inline-block; background-color:@(Model.WebsiteForColor);" readonly="readonly">
                        <button id="btnAddForColor" type="button" class="button-accept no-margin" style="width: 46px;">انتخاب</button>
                        <input type="color" style="display: none;" id="fuForColor" value="@Model.WebsiteForColor" />
                    </div>
                </div>
                <div class="d-flex align-text-center justify-content-between mb-2">
                    <span>رنگ نمایش قیمت‌ها</span>
                    <div>
                        <input id="txtPriceColor" type="text" class="text-control" style="width: 80px; display: inline-block; background-color:@(Model.WebsitePriceColor);" readonly="readonly">
                        <button id="btnAddPriceColor" type="button" class="button-accept no-margin" style="width: 46px;">انتخاب</button>
                        <input type="color" style="display: none;" id="fuPriceColor" value="@Model.WebsitePriceColor" />
                    </div>
                </div>
            </div>

            <div style="font-size: 14px; font-weight: 700; margin: 8px 0;">مشخصات فروشگاه</div>
            <div class="form-card mb-5 p-5" style="margin-right: 0 !important; margin-left: 0 !important; ">
                <div class="has-float-label">
                    <input type="text" class="text-control" id="webSiteName" value="@Model.WebsiteName" />
                    <span>نام فروشگاه</span>
                </div>
                <div class="has-float-label" style="margin:25px 0;">
                    <input type="text" class="text-control" id="webSiteTel" value="@Model.WebsiteTel" />
                    <span>شماره تماس فروشگاه</span>
                </div>
                <div class="has-float-label">
                    <input type="text" class="text-control" id="webSiteEmail" value="@Model.WebsiteEmail" />
                    <span>ایمیل فروشگاه</span>
                </div>
                <div class="has-float-label" style="margin:25px 0;">
                    <select class="text-control" id="webSiteShopType">
                        <option value="آرایشی و بهداشتی" @(Model.WebsiteShopType == "آرایشی و بهداشتی" ? "selected=selected" : "")>آرایشی و بهداشتی</option>
                        <option value="کتابفروشی" @(Model.WebsiteShopType == "کتابفروشی" ? "selected=selected" : "")>کتابفروشی</option>
                        <option value="رستوران و فست فود" @(Model.WebsiteShopType == "رستوران و فست فود" ? "selected=selected" : "")>رستوران و فست فود</option>
                        <option value="پوشاک" @(Model.WebsiteShopType == "پوشاک" ? "selected=selected" : "")>پوشاک</option>
                        <option value="لوازم خانگی" @(Model.WebsiteShopType == "لوازم خانگی" ? "selected=selected" : "")>لوازم خانگی</option>
                        <option value="نمایشگاه و فروشگاه خودرو" @(Model.WebsiteShopType == "نمایشگاه و فروشگاه خودرو" ? "selected=selected" : "")>نمایشگاه و فروشگاه خودرو</option>
                        <option value="سوپر مارکت" @(Model.WebsiteShopType == "سوپر مارکت" ? "selected=selected" : "")>سوپر مارکت</option>
                        <option value="سایر" @(Model.WebsiteShopType == "سایر" ? "selected=selected" : "")>سایر</option>
                    </select>
                    <span>کسب و کار فروشگاه</span>
                </div>
                <div class="has-float-label">
                    <textarea class="textarea-control" id="webSiteAddress" style="height:50px;">@Model.WebsiteAddress</textarea>
                    <span>آدرس فروشگاه</span>
                </div>
                <div class="has-float-label" style="margin:25px 0;">
                    <textarea class="textarea-control" id="WebsiteDescription" style="height:70px;">@Model.WebsiteDescription</textarea>
                    <span>توضیحات</span>
                </div>
                <div class="">
                    <div style="margin-bottom:6px;">لوگوی سایت</div>
                    <div class="d-flex align-items-center justify-content-evenly">
                        <div id="picWebsite" style="@(Model.WebsiteLogo!=null?"background-image:url("+Model.WebsiteLogo.ToBase64File()+")":"");width:128px;height:48px;">
                        </div>
                        <div>
                            <label class="label-cancel no-margin" id="getPicWebsite">دریافت تصویر</label>
                            <input type="file" style="display:none;" id="fuPicWebsite" accept=".png" />
                            <label class="label-cancel no-margin" id="deletePicWebsite" style="margin-right: 15px!important;">حذف تصویر</label>
                        </div>
                    </div>
                </div>
            </div>

            <div style="font-size: 14px; font-weight: 700; margin: 8px 0;">شبکه‌های اجتماعی</div>
            <div class="form-card mb-5 p-5" style="margin-left: 0 !important; margin-right:0 !important">
                <div class="has-float-label">
                    <input type="text" class="text-control" id="webSiteTelegram" value="@Model.WebsiteTelegram" />
                    <span>Telegram</span>
                </div>
                <div class="has-float-label" style="margin:25px 0;">
                    <input type="text" class="text-control" id="webSiteWhatsApp" value="@Model.WebsiteWhatsApp" />
                    <span>WhatsApp</span>
                </div>
                <div class="has-float-label">
                    <input type="text" class="text-control" id="webSiteInstagram" value="@Model.WebsiteInstagram" />
                    <span>Instagram</span>
                </div>
                <div class="has-float-label" style="margin-top:25px;">
                    <input type="text" class="text-control" id="webSiteTwitter" value="@Model.WebsiteTwitter" />
                    <span>Twitter</span>
                </div>
            </div>
        </div>
    </div>
</div>



@section scripts{
    <script>
        closeLoading();
        const isActive = `@(Model.IsActiveWebsite)`;
        $("#getPicWebsite").on("click", function () {
            $("#fuPicWebsite").click();
        });

        $("#fuPicWebsite").on("change", function () {
            if (this.files.length > 0) {
                var file = event.target.files[0];
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function () {
                    var base64 = reader.result;
                    var description = "سایز مناسب برای تصویر این لوگو، ارتفاع 48px و حداکثر عرض 128px  میباشد.";
                    savePicture($("#picWebsite"), base64, description, 8 / 3);
                };
            }
        });

        $("#deletePicWebsite").on("click", function () {
            $("#picWebsite").css('background-image', 'unset');
        });

        $("#btnAddColor").on("click", function () {
            $("#fuColor").click();
        });

        $("#fuColor").on("change", function () {
            $("#txtColor").css("background-color", $("#fuColor").val());
        });

        $("#btnAddForColor").on("click", function () {
            $("#fuForColor").click();
        });

        $("#fuForColor").on("change", function () {
            $("#txtForColor").css("background-color", $("#fuForColor").val());
            $("#txtColor").css("color", $("#fuForColor").val());
        });

        $("#btnAddPriceColor").on("click", function () {
            $("#fuPriceColor").click();
        });

        $("#fuPriceColor").on("change", function () {
            $("#txtPriceColor").css("background-color", $("#fuPriceColor").val());
        });

        $("#btnLogoMin").on("click", function () {
            $("#fuLogoMin").click();
        });

        $("#fuLogoMin").on("change", function () {
            $("#txtLogoMin").val($("#fuLogoMin").val());
            if (this.files.length > 0) {
                var file = event.target.files[0];
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function () {
                    var base64 = reader.result;
                    $("#logoMin").css('background-image', 'url(' + base64 + ')');
                    $("#Min").show();
                };
            }
        });

        $("#btnLogoMax").on("click", function () {
            $("#fuLogoMax").click();
        });

        $("#fuLogoMax").on("change", function () {
            $("#txtLogoMax").val($("#fuLogoMax").val());
            if (this.files.length > 0) {
                var file = event.target.files[0];
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function () {
                    var base64 = reader.result;
                    $("#logoMax").css('background-image', 'url(' + base64 + ')');
                    $("#Max").show();
                };
            }
        });

        $(".label-cancel.deleteLogo").on("click", function () {
            if (!confirm("آیا شما از حذف این لوگو مطمئن هستید؟"))
                return;

            $("#logo" + $(this).attr("id")).css('background-image', 'unset');
            $("#txtLogo" + $(this).attr("id")).val("");
            $(this).hide();
        });

        function save() {
            var logo = $("#picWebsite").css("background-image").replace("url(\"", "").replace("\")", "");
            ajax({
                loading: true,
                url: "Admin/SaveSetting",
                data: JSON.stringify({
                    active: isActive.toLowerCase(),
                    color: $("#fuColor").val(),
                    forcolor: $("#fuForColor").val(),
                    pricecolor: $("#fuPriceColor").val(),
                    logo: logo,
                    name: $("#webSiteName").val(),
                    shopType: $("#webSiteShopType").val(),
                    tel: $("#webSiteTel").val(),
                    description: $("#WebsiteDescription").val(),
                    email: $("#webSiteEmail").val(),
                    address: $("#webSiteAddress").val(),
                    telegram: $("#webSiteTelegram").val(),
                    whatsapp: $("#webSiteWhatsApp").val(),
                    instagram: $("#webSiteInstagram").val(),
                    twitter: $("#webSiteTwitter").val()
                }),
                success: function () {
                    window.location.reload = window.location.reload;
                },
                error: function (err) {
                    var errorMsg;
                    if (err.responseJSON)
                        errorMsg = err.responseJSON.Message;
                    else
                        errorMsg = err.responseText;
                    alert(errorMsg);
                }
            });
        }

        function reload() {
            window.top.$(".menu-item").removeClass("menu-item-select");
            window.top.$(".menu-item[data-target='']").addClass("menu-item-select");
            window.top.$("#iframeAdmin").attr("src", "");
        }

    </script>
}
