
@using GheyasPlusShop.Utils
@using Utils

@{
    ViewBag.Title = "تماس با ما";
}

@section styles{
    <style>
        body {
            background-color: #fff;
            font-size: 14px;
        }

        .header-top, .nav-header {
            display: none !important;
        }

        .button-accept {
            width: 100%;
            height: 42px;
        }

        .social-link {
            width: 34px;
            margin: 0 12px;
            cursor: pointer;
            filter: grayscale(100) invert(1) brightness(1000);
        }

        .section-error {
            height: 20px;
            color: red;
            margin-bottom: 15px;
            overflow: hidden;
            font-size: 12px;
        }
    </style>
}

<div class="col-12 no-padding">
    <div class="row">
        <div class="col-6 center-vertical" style="padding:0 50px;height:100vh;">
            <div>
                <div class="col-12 no-padding text-center">
                    <img src="@(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteLogo.ToBase64File())" style="height: 48px;max-width: 128px;"/>
                </div>
                <div class="col-12 no-padding text-center" style="font-size:16px;font-weight:700;margin-top:18px;">تماس با ما</div>
                <div class="col-12 no-padding" style="font-weight:700;color:#a2a2a2;margin:20px 0 25px;">ارسال پیام</div>
                <div class="col-12 no-padding-right has-float-label">
                    <input type="text" class="text-control" data-required="true" id="name" />
                    <span>نام و نام خانوادگی</span>
                </div>
                <div class="col-12 no-padding" style="margin:22px 0 12px;">
                    <div class="row">
                        <div class="col-6 has-float-label">
                            <input type="text" class="text-control" data-required="true" id="tell" />
                            <span>تلفن تماس</span>
                        </div>
                        <div class="col-6 has-float-label">
                            <input type="text" class="text-control" id="email" />
                            <span>ایمیل</span>
                        </div>
                    </div>
                </div>
                <div class="col-12 no-padding-right has-float-label">
                    <input type="text" class="text-control" id="subject" />
                    <span>عنوان</span>
                </div>
                <div class="col-12 no-padding-right has-float-label" style="margin:22px 0 10px;">
                    <textarea class="text-control" style="height:60px;" data-required="true" id="description"></textarea>
                    <span>متن پیام</span>
                </div>
                <div class="col-12 no-padding section-error">
                    <span id="spContactError"></span>
                </div>
                <div class="col-12 no-padding">
                    <div class="row">
                        <div class="col-3 no-padding-right">
                            <button class="button-accept" style="width: 88%;background-color: #fff;color:#838383;border:1px solid #00838f;" onclick="cancel()">انصراف</button>
                        </div>
                        <div class="col-9 no-padding-right">
                            <button class="button-accept" style="background-color: #00838f;" onclick="SaveContactUs()">
                                <img src="~/App_Images/index/sendIcon.svg" style="margin-left: 10px;height: 24px;" />ارسال پیام
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 center-vertical" style="color:#fff;padding:0 80px;height: 100vh;background-repeat: no-repeat;background-image:url('../../App_Images/index/ContactUsBackground.png');background-size:100% 100%;">
            <div class="row">
                <div class="col-2 no-padding">
                    <div>شماره تماس: </div>
                    <div style="margin:15px 0;">ایمیل: </div>
                    <div>آدرس: </div>
                </div>
                <div class="col-10 no-padding">
                    <div>@StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteTel</div>
                    <div style="margin:15px 0;">@StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteEmail</div>
                    <div style="line-height: 26px;">@StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteAddress</div>
                </div>
            </div>
            <div class="row">
                <div class="col-8 offset-2 no-padding">
                    <div style="margin-top:40px; text-align: center; border-top: 1px dotted #fff; padding-top: 20px;">

                        @if (StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteInstagram.IsNotEmpty())
                        {
                            <a href="@StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteInstagram">
                                <img src="~/App_Images/index/insta.svg" class="social-link" title="اینستاگرام" />
                            </a>
                        }
                        @if (StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteWhatsApp.IsNotEmpty())
                        {
                            <a href="@StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteWhatsApp">
                                <img src="~/App_Images/index/whatsapp.svg" class="social-link" title="واتساپ" />
                            </a>
                        }
                        @if (StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteTelegram.IsNotEmpty())
                        {
                            <a href="@StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteTelegram">
                                <img src="~/App_Images/index/telegram.svg" class="social-link" title="تلگرام" />
                            </a>
                        }
                        @if (StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteTwitter.IsNotEmpty())
                        {
                            <a href="@StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteTwitter">
                                <img src="~/App_Images/index/tiwtter.svg" class="social-link no-margin" title="توئیتر" />
                            </a>
                        }

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@section scripts{
    <script>
        function SaveContactUs() {

            var error = checkValidation();
            if (error)
                return;

            ajax({
                loading: true,
                url: "Home/SaveContactUs",
                data: JSON.stringify({ name: $("#name").val(), tell: $("#tell").val(), email: $("#email").val(), subject: $("#subject").val(), description: $("#description").val() }),
                success: function (result) {
                    window.location.href = baseUrl;
                },
                error: function (err) {
                    var errorMsg;
                    if (err.responseJSON)
                        errorMsg = err.responseJSON.Message;
                    else
                        errorMsg = err.responseText;

                    $('#spContactError').text(errorMsg);
                }
            });
        }

        function cancel() {
            $("input").val("");
            $("textarea").val("");
        }
    </script>
}