
@using GheyasPlusShop.Utils;
@using Utils;
@{
    ViewBag.Title = "ورود به حساب کاربری";
}

@section styles{
    @if (ViewBag.DesktopSection)
    {
        <style>
            a:hover, a:focus {
                text-decoration: none;
            }

            body {
                background-color: #fff;
            }

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

            .section-page {
                display: none;
            }

                .section-page a {
                    color: #00838f !important;
                    /*text-decoration: underline !important;*/
                    border-bottom: 1px solid #379da7;
                }

                    .section-page a:hover {
                        cursor: pointer;
                    }

                .section-page .section-title {
                    font-size: 14px;
                    font-weight: 700;
                    margin-bottom: 40px;
                }

                .section-page .section-error {
                    height: 38px;
                    color: red;
                    margin-bottom: 8px;
                    overflow: hidden;
                }

                .section-page .section-bottom {
                    border-top: 1px dotted #ccc;
                    padding-top: 30px !important;
                    margin-top: 30px;
                }

            .button-accept {
                width: 100%;
                height: 46px;
                background-color: #00838f;
                color: #fff !important;
            }

                .button-accept img {
                    margin-left: 10px;
                    height: 24px;
                }
        </style>
    }
    else
    {
        <style>

            .login-footer {
                text-align: center;
            }

            .login-wrapper {
                background-color: #fff;
                border-radius: 20px;
            }

            .title {
                font-size: 14px;
                font-weight: 700;
            }

            .validation {
                border-right: 1px solid #ccc !important;
            }

            a {
                color: #00838f !important;
                text-decoration: underline !important;
                text-underline-offset: 5px !important;
            }

            .forget-password {
                margin-top: -7px;
                margin-bottom: 10px;
            }

            .button-accept {
                max-height: 45px !important;
                min-height: 40px !important;
            }

            .error-box {
                color: red;
                margin-bottom: 17px;
                font-size: 11px;
            }

            header, footer {
                display: none;
            }
        </style>
    }
}

@if (ViewBag.DesktopSection)
{
    <div id="DesktopSection">
        <div class="col-12 no-padding">
            <div class="row">
                <div class="col-4 center-vertical" style="padding:0 82px;height:100vh;">
                    <div>
                        <div style="text-align: center;margin-bottom: 12px;">
                            <img src="@(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteLogo.ToBase64File())" style="height: 48px;max-width: 128px;" />
                        </div>
                        @*ورود به حساب کاربری*@
                        <div class="col-12 no-padding section-page" id="div-login" style="display:block;">
                            <div class="col-12 no-padding text-center section-title">ورود به حساب کاربری</div>
                            <div class="col-12 no-padding has-float-label">
                                <input type="text" class="text-control" id="mobileLogin" data-required="true" data-mask="num" value="@CookieManager.User" />
                                <span>شماره تلفن همراه</span>
                            </div>
                            <div class="col-12 no-padding has-float-label" style="margin:30px 0 10px;">
                                <input type="password" class="text-control" id="passwordLogin" data-required="true" />
                                <span>کلمه عبور</span>
                            </div>
                            <div class="col-12 no-padding section-error">
                                <span id="spLoginrError"></span>
                            </div>
                            <div class="col-12 no-padding"><a onclick="showForgetPass()" style="font-size: 10px;">کلمه عبور خود را فراموش کرده‌ام</a></div>
                            <div class="col-12 no-padding" style="margin:20px 0 6px;">
                                <input type="checkbox" class="checkbox-control" id="rememberMe" checked />
                                <span>مرا بخاطر بسپار</span>
                            </div>
                            <div class="col-12 no-padding">
                                <button type="button" class="button-accept" onclick="Login()">
                                    <img src="~/App_Images/index/Login.svg" />ورود
                                </button>
                            </div>
                            <div class="col-12 no-padding text-center section-bottom">
                                <span>کاربر جدید هستید؟</span>
                                <a style="margin-right:6px;" onclick="showRegisterBox()">ثبت نام در سایت</a>
                            </div>
                        </div>

                        @*ثبت نام در سایت*@
                        <div class="col-12 no-padding section-page" id="div-register">
                            <div class="col-12 no-padding text-center section-title">ایجاد حساب کاربری</div>
                            <div class="col-12 no-padding has-float-label">
                                <input type="text" data-mask="num" class="text-control" id="mobileRegister" data-required="true" />
                                <span>شماره تلفن همراه</span>
                            </div>
                            <div class="col-12 no-padding has-float-label" style="margin:30px 0 10px;">
                                <input type="password" class="text-control" id="passwordRegister" data-required="true" />
                                <span>کلمه عبور</span>
                            </div>
                            <div class="col-12 no-padding section-error" style="height:54px;">
                                <span id="spRegisterError"></span>
                            </div>
                            <div class="col-12 no-padding" style="margin:38px 0 4px;">
                                <input type="checkbox" class="checkbox-control" id="chkIsAccept" onchange="acceptAgree()" />
                                <span style="line-height: 24px;"><a href="@Html.GetHref("Home/Privacy")" target="_blank">حریم خصوصی</a> و <a href="@Html.GetHref("Home/Terms")" target="_blank">شرایط و قوانین</a> استفاده از سایت را مطالعه و با کلیه موارد آن موافقم.</span>
                            </div>
                            <div class="col-12 no-padding">
                                <button type="button" class="button-disabled button-accept" disabled id="btn-register" onclick="$('#btnContinue').attr('data-target','create-user');register(true)">
                                    <img src="~/App_Images/index/Register.svg" />ثبت نام در سایت
                                </button>
                            </div>
                            <div class="col-12 no-padding text-center section-bottom">
                                <span>قبلا در سایت ثبت نام کرده‌اید؟</span>
                                <a style="margin-right:6px;" onclick="showLoginBox()">ورود به حساب کاربری</a>
                            </div>
                        </div>

                        @*فراموشی کلمه عبور*@
                        <div class="col-12 no-padding section-page" id="div-forgetPass">
                            <div class="col-12 no-padding text-center section-title">بازیابی کلمه عبور</div>
                            <div class="col-12 no-padding">جهت بازیابی کلمه عبور، شماره موبایل خود را وارد کنید.</div>
                            <div class="col-12 no-padding has-float-label" style="margin:30px 0 10px;">
                                <input type="text" class="text-control" id="mobileForget" data-required="true" />
                                <span>شماره همراه</span>
                            </div>
                            <div class="col-12 no-padding section-error">
                                <span id="spforgetPassError"></span>
                            </div>
                            <div class="col-12 no-padding">
                                <button type="button" class="button-accept" style="margin-top: 96px;" onclick="$('#btnContinue').attr('data-target', 'forget-pass');forgetPass(true)">ادامه</button>
                            </div>
                            <div class="col-12 no-padding text-center section-bottom">
                                <span>قبلا در سایت ثبت نام کرده‌اید؟</span>
                                <a style="margin-right:6px;" onclick="showLoginBox()">ورود به حساب کاربری</a>
                            </div>
                        </div>

                        @*بازنشانی کلمه عبور*@
                        <div class="col-12 no-padding section-page" id="div-resetPass">
                            <div class="col-12 no-padding text-center section-title">بازنشانی کلمه عبور</div>
                            <div class="col-12 no-padding">کلمه عبور جدید خود را وارد کنید.</div>
                            <div class="col-12 no-padding has-float-label" style="margin:30px 0 20px;">
                                <input type="password" class="text-control" id="passReset" data-required="true" />
                                <span>کلمه عبور جدید</span>
                            </div>
                            <div class="col-12 no-padding has-float-label" style="margin-bottom:10px;">
                                <input type="password" class="text-control" id="passResetRepeat" data-required="true" />
                                <span>تکرار کلمه عبور جدید</span>
                            </div>
                            <div class="col-12 no-padding section-error">
                                <span id="spResetPassError"></span>
                            </div>
                            <div class="col-12 no-padding">
                                <button type="button" class="button-accept" style="margin-top:28px;" onclick="changePass()">ورود</button>
                            </div>
                            <div class="col-12 no-padding text-center section-bottom">
                                <span>قبلا در سایت ثبت نام کرده‌اید؟</span>
                                <a style="margin-right:6px;" onclick="showLoginBox()">ورود به حساب کاربری</a>
                            </div>
                        </div>

                        @*اعتبارسنجی*@
                        <div class="col-12 no-padding section-page" id="div-validation">
                            <div class="col-12 no-padding text-center section-title">اعتبارسنجی</div>
                            <div class="col-12 no-padding" style="margin-bottom:20px;">برای شماره همراه وارد شده، کد تایید ارسال شد.</div>
                            <div class="col-12 no-padding has-float-label">
                                <span class="label-value-readonly" style="direction: ltr;display: inline-block;" id="spRegisterMobile"></span>
                                <span>شماره همراه</span><a>ویرایش</a>
                            </div>
                            <div class="col-12 no-padding has-float-label" style="margin:16px 0 10px;">
                                <input type="text" class="text-control" id="codeValidation" data-required="true" />
                                <span>کد ارسال شده</span>
                            </div>
                            <div class="col-12 no-padding section-error">
                                <span id="spvalidationError"></span>
                            </div>
                            <div class="col-12 no-padding text-center" style="margin:35px 0 10px;">
                                <div id="divTimer" style="display: block;"><span>ارسال مجدد کد تا</span><span style="margin:0 6px;font-size: 14px;font-weight: 700;" id="spTime">60</span><span>ثانیه دیگر</span></div>
                                <div id="divResendSms" style="display:none;" onclick="if ($('#btnContinue').attr('data-target') === 'create-user') register(false); else forgetPass(false);"><a style="font-size:14px;">ارسال مجدد کد</a></div>
                            </div>
                            <div class="col-12 no-padding">
                                <button id="btnContinue" type="button" class="button-accept" onclick="showRegisterSuccess()">ادامه</button>
                            </div>
                            <div class="col-12 no-padding text-center section-bottom">
                                <span>قبلا در سایت ثبت نام کرده‌اید؟</span>
                                <a style="margin-right:6px;" onclick="showLoginBox()">ورود به حساب کاربری</a>
                            </div>
                        </div>

                        @*اتمام ثبت نام*@
                        <div class="col-12 no-padding section-page" id="div-succsess">
                            <div class="col-12 no-padding text-center" style="margin-top:90px;margin-bottom:20px;">
                                <img src="~/App_Images/index/RegSuccessful.svg" />
                                <div class="col-12 no-padding section-title">حساب کاربری شما با موفقیت ثبت شد.</div>
                            </div>
                            @*<div class="col-12 no-padding">
                                    <a href="@Html.GetHref("Home/PersonalInfo")"><button type="button" class="button-accept" style="margin-bottom:20px;">تکمیل حساب کاربری</button></a>
                                </div>*@
                            <div class="col-12 no-padding text-center">
                                <a onclick="showLoginBox()">بازگشت به صفحه‌ای که در آن بودید</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-8 center-vertical" style="height:100vh;background-color:@(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteColor);background-image:url('../../App_Images/index/LoginBackground.svg');background-size: cover;background-repeat: no-repeat;">
                </div>
            </div>
        </div>
    </div>
}
else
{

    <div id="MobileSection" class="vh-100 d-flex align-items-center justify-content-center">
        <div class="container-fluid">

            @*ورود به حساب کاربری*@
            <div class="login-wrapper px-3 py-5" id="div-login" style="display:block;">
                <div class="logo d-flex justify-content-center mb-2">
                    <a href="@Html.GetHref("")"><img src="@(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteLogo.ToBase64File())" /></a>
                </div>
                <div class="title d-flex justify-content-center mb-5">ورود به حساب کاربری</div>
                <div class="has-float-label">
                    <input type="text" class="text-control" id="mobileLogin" data-required="true" data-mask="num" value="@CookieManager.User" />
                    <span>شماره تلفن همراه</span>
                </div>
                <div class="has-float-label">
                    <input type="password" class="text-control" id="passwordLogin" data-required="true" />
                    <span>کلمه عبور</span>
                </div>
                <div>
                    <div id="spLoginrError"></div>
                </div>
                <div class="forget-password mb-4">
                    <a onclick="showForgetPass()">کلمه عبور خود را فراموش کرده ام</a>
                </div>
                <div class="remember d-flex align-items-center">
                    <input class="me-2" type="checkbox" id="rememberMe" checked /> مرا بخاطر بسپار
                </div>
                <button class="w-100 button-accept rounded-pill my-4" onclick="Login()">ورود</button>
                <hr />
                <div class="login-footer">
                    قبلا در سایت ثبت نام کرده اید ؟<a onclick="showRegisterBox()" class="ms-3">ثبت نام</a>
                </div>
            </div>

            @*ثبت نام در سایت*@
            <div class="login-wrapper px-3 py-5" id="div-register" style="display:none;">
                <div class="logo d-flex justify-content-center mb-2">
                    <a href="@Html.GetHref("")"><img src="@(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteLogo.ToBase64File())" /></a>
                </div>
                <div class="title d-flex justify-content-center mb-5">ایجاد حساب کاربری</div>
                <div class="has-float-label">
                    <input type="text" data-mask="num" class="text-control" id="mobileRegister" data-required="true" />
                    <span>شماره تلفن همراه</span>
                </div>
                <div class="has-float-label">
                    <input type="password" class="text-control" id="passwordRegister" data-required="true" />
                    <span>کلمه عبور</span>
                </div>
                <div>
                    <div id="spRegisterError"></div>
                </div>
                <div class="remember my-4 px-4 text-center">
                    <input type="checkbox" checked class="checkbox-control" id="chkIsAccept" onchange="acceptAgree()" />
                    <a href="@Html.GetHref("Home/Privacy")" target="_blank">حریم خصوصی</a> و <a href="@Html.GetHref("Home/Terms")" target="_blank">شرایط و قوانین</a> استفاده از سایت را مطالعه و با کلیه موارد آن موافقم.
                </div>
                <button class="w-100 button-accept rounded-pill my-4" onclick="$('#btnContinue').attr('data-target','create-user');register(true)">ثبت نام در سایت</button>
                <hr />
                <div class="login-footer">
                    قبلا در سایت ثبت نام کرده اید ؟<a onclick="showLoginBox()" class="ms-3">ورود به حساب کاربری</a>
                </div>
            </div>

            @*فراموشی کلمه عبور*@
            <div class="login-wrapper px-3 py-5" id="div-forgetPass" style="display:none;">
                <div class="logo d-flex justify-content-center mb-2">
                    <a href="@Html.GetHref("")"><img src="@(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteLogo.ToBase64File())" /></a>
                </div>
                <div class="title d-flex justify-content-center mb-5">
                    بازیابی کلمه عبور
                </div>
                <p>
                    جهت بازیابی کلمه عبور، شماره موبایل خود را وارد کنید.
                </p>
                <div class="has-float-label">
                    <input type="text" class="text-control" id="mobileForget" data-required="true" />
                    <span>شماره تلفن همراه</span>
                </div>
                <div>
                    <span id="spforgetPassError"></span>
                </div>
                <button class="w-100 button-accept rounded-pill my-4" onclick="$('#btnContinue').attr('data-target', 'forget-pass');forgetPass(true)">ارسال</button>
                <div class="text-center"><a onclick="showLoginBox()">انصراف</a></div>

            </div>


            @*بازنشانی کلمه عبور*@
            <div class="login-wrapper px-3 py-5" id="div-resetPass" style="display:none;">
                <div class="logo d-flex justify-content-center mb-2">
                    <a href="@Html.GetHref("")"><img src="@(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteLogo.ToBase64File())" /></a>
                </div>
                <div class="title d-flex justify-content-center mb-5">
                    بازنشانی کلمه عبور
                </div>
                <p>
                    کلمه عبور جدید خود را وارد کنید.
                </p>
                <div class="has-float-label">
                    <input type="password" class="text-control" id="passReset" data-required="true" />
                    <span>کلمه عبور جدید</span>
                </div>
                <div class="has-float-label">
                    <input type="password" class="text-control" id="passResetRepeat" data-required="true" />
                    <span>تکرار کلمه عبور جدید</span>
                </div>
                <div>
                    <span id="spResetPassError"></span>
                </div>
                <button class="w-100 button-accept rounded-pill my-4" onclick="changePass()">تایید</button>
                <div class="text-center"><a onclick="showLoginBox()">انصراف</a></div>

            </div>


            @*اعتبارسنجی*@
            <div class="login-wrapper px-3 py-5" id="div-validation" style="display:none;">
                <div class="logo d-flex justify-content-center mb-2">
                    <a href="@Html.GetHref("")"><img src="@(StaticManager.WebsiteSetting[ConfigManager.NickName].WebsiteLogo.ToBase64File())" /></a>
                </div>
                <div class="title d-flex justify-content-center mb-5">
                    اعتبارسنجی
                </div>
                <p>
                    برای شماره تلفن همراه وارد شده، کد تایید ارسال شد.
                </p>
                <div class="px-2 py-3">
                    <span>شماره همراه: </span>
                    <span class="label-value-readonly" style="direction: ltr;display: inline-block;" id="spRegisterMobile"></span>
                </div>
                <div class="has-float-label">
                    <input type="text" class="text-control" id="codeValidation" data-required="true" />
                    <span>کد ارسال شده</span>
                </div>
                <div>
                    <div id="spvalidationError"></div>
                </div>
                <div class="forget-password mb-4 p-1">
                    <div id="divTimer" style="display: block;"><span style="margin:0 6px;font-size: 14px;font-weight: 700;" id="spTime">60</span><span>ثانیه مانده تا ارسال مجدد</span></div>
                    <a id="btnContinue" style="display:none;" onclick="if ($('#btnContinue').attr('data-target') === 'create-user') register(false); else forgetPass(false);">ارسال مجدد کد</a>
                </div>
                <button class="w-100 button-accept rounded-pill my-4" onclick="showRegisterSuccess()">تایید</button>
                <div class="text-center"><a onclick="showSignupBox()">ویرایش شماره تلفن همراه</a></div>
            </div>


            @*اتمام ثبت نام*@
            <div class="login-wrapper px-3 py-5" id="div-succsess" style="display:none;">
                <div class="logo d-flex justify-content-center mb-2">
                    <img src="~/App_Images/index/RegSuccessful.svg" />
                </div>
                <div class="title d-flex justify-content-center mb-5">حساب کاربری شما با موفقیت ثبت شد.</div>
                <div class="login-footer">
                    <a onclick="showLoginBox()">بازگشت به صفحه‌ای که در آن بودید</a>
                </div>
            </div>
        </div>
    </div>
}

@section scripts{
    <script>
        function showLoginBox() {
            //$('.section-page').hide();
            //$('#div-login').show();
            //window.location.reload();
            $("#div-register,#div-login,#div-forgetPass,#div-resetPass,#div-validation,#div-succsess").hide();
            $("#div-login").show();
        }
        function showSignupBox() {
            $("#div-register,#div-login,#div-forgetPass,#div-resetPass,#div-validation,div-succsess").hide();
            $("#div-register").show();
        }

        function Login() {
            var error = checkValidation("#div-login");
            if (error)
                return;
            ajax({
                url: "Home/LoginUser",
                data: JSON.stringify({ mobile: $("#mobileLogin").val(), password: $("#passwordLogin").val(), cookie: $("#rememberMe").prop("checked") }),
                success: function (result) {
                    window.location.href = baseUrl;
                },
                error: function (err) {
                    var errorMsg;
                    if (err.responseJSON)
                        errorMsg = err.responseJSON.Message;
                    else
                        errorMsg = err.responseText;

                    $('#spLoginrError').text(errorMsg).addClass("error-box");
                }
            });
        }

        $("#mobileLogin").on("keypress", function (event) {
            if (event.keyCode === 13)
                $("#passwordLogin").focus();
        });

        $("#passwordLogin").on("keypress", function (event) {
            if (event.keyCode === 13)
                Login();
        });

        function showForgetPass() {
            $('#div-login').hide();
            $('.section-page').hide();
            $('#div-forgetPass').show();
        }

        function showRegisterBox() {
            $('#div-login').hide();
            $('.section-page').hide();
            $('#div-register').show();
        }

        function forgetPass(checkValidate) {
            if (checkValidate) {
                var error = checkValidation("#div-forgetPass");
                if (error)
                    return;
            }
            ajax({
                url: "Home/ForgetPass",
                data: JSON.stringify({ mobile: $("#mobileForget").val() }),
                success: function (result) {
                    var strMobile = $("#mobileForget").val().substr(0, 4) + "***" + $("#mobileForget").val().substr($("#mobileForget").val().length - 4);
                    $('#div-forgetPass').hide();
                    $('.section-page').hide();
                    $('#div-validation').show();
                    $('#spRegisterMobile').text(strMobile);
                    setTimer();
                },
                error: function (err) {
                    var errorMsg;
                    if (err.responseJSON)
                        errorMsg = err.responseJSON.Message;
                    else
                        errorMsg = err.responseText;

                    $('#spforgetPassError').text(errorMsg).addClass("error-box");
                }
            });
        }

        function register(checkValidate) {
            if (checkValidate) {
                var error = checkValidation("#div-validation");
                if (error)
                    return;
            }
            ajax({
                url: "Home/CreateUser",
                data: JSON.stringify({ mobile: $("#mobileRegister").val(), password: $("#passwordRegister").val() }),
                success: function (result) {
                    $('.section-page').hide();
                    $('#div-register').hide();
                    var strMobile = $("#mobileRegister").val().substr(0, 4) + "***" + $("#mobileRegister").val().substr($("#mobileRegister").val().length - 4);
                    $('#div-validation').show();
                    $('#spRegisterMobile').text(strMobile);
                    setTimer();
                },
                error: function (err) {
                    var errorMsg;
                    if (err.responseJSON)
                        errorMsg = err.responseJSON.Message;
                    else
                        errorMsg = err.responseText;

                    $('#spRegisterError').text(errorMsg).addClass("error-box");
                }
            });
        }

        function changePass() {
            var error = checkValidation("#div-resetPass");
            if (error)
                return;
            if ($("#passReset").val() != $("#passResetRepeat").val()) {
                $('#spResetPassError').text("کلمه عبور جدید با تکرار آن یکسان نمیباشد").addClass("error-box");
                return;
            }
            ajax({
                url: "Home/ChangePassword",
                data: JSON.stringify({ password: $("#passReset").val() }),
                success: function (result) {
                    showLoginBox();
                },
                error: function (err) {
                    var errorMsg;
                    if (err.responseJSON)
                        errorMsg = err.responseJSON.Message;
                    else
                        errorMsg = err.responseText;

                    $('#spResetPassError').text(errorMsg).addClass("error-box");
                }
            });
        }

        function showRegisterSuccess() {
            var error = checkValidation("#div-succsess");
            if (error)
                return;
            ajax({
                url: $("#btnContinue").attr("data-target") == "create-user" ? "Home/ValidSms" : "Home/ValidSmsPassword",
                data: JSON.stringify({ code: $("#codeValidation").val() }),
                success: function (result) {
                    $('#div-validation').hide();
                    $('.section-page').hide();
                    if ($("#btnContinue").attr("data-target") == "create-user")
                        $('#div-succsess').show();
                    else
                        $('#div-resetPass').show();
                },
                error: function (err) {
                    var errorMsg;
                    if (err.responseJSON)
                        errorMsg = err.responseJSON.Message;
                    else
                        errorMsg = err.responseText;

                    $('#spvalidationError').text(errorMsg).addClass("error-box");
                }
            });
        }

        var timer;
        function setTimer() {
            $('#divResendSms').hide();
            $('#divTimer').show();
            $("#spTime").text("60");
            if (timer)
                clearInterval(timer);
            timer = setInterval(function () {
                var number = Number($("#spTime").text());
                if (number > 0) {
                    number--;
                    $("#spTime").text(number);
                    console.log($("#spTime").text());
                }
                else {
                    clearInterval(timer);
                    $('#divTimer').hide();
                    $('#divResendSms').show();
                }
            }, 1000);
        }

        $('#divResendSms').on("click", function () {
            $('#divResendSms').hide();
            $('#divTimer').show();

        });

        function acceptAgree() {
            if ($('#chkIsAccept').prop('checked')) {
                $('#btn-register').removeClass('button-disabled');
                $('#btn-register').prop('disabled', false);
            }
            else {
                $('#btn-register').addClass('button-disabled');
                $('#btn-register').prop('disabled', true);
            }
        }
    </script>
}
