@page
@model ServiceHost.Pages.login.IndexModel

@Html.AntiForgeryToken() 
@{
    ViewData["Title"] = "ورود";
}
@section head
{
    @* <link rel="manifest" href="/manifest.webmanifest" /> *@
    <meta name="theme-color" content="#ffffff" />

    <meta name="description" content="گزارشگیر - خوش آمدید به دنیای پرانرژی سامانه هوشمند مدیریت منابع انسانی. ما خوشحالیم که شما را در اینجا می‌بینیم." />
    <meta name="keywords" content="گزارشگیر, گزارش گیر, گزارش" />
    <meta property="og:title" content="گزارشگیر" />
    <meta property="og:site_name" content="گزارشگیر">
    <meta property="og:type" content="website">
    <meta property="og:description" content="گزارشگیر - خوش آمدید به دنیای پرانرژی سامانه هوشمند مدیریت منابع انسانی. ما خوشحالیم که شما را در اینجا می‌بینیم." />
    <meta property="og:image" content="">
    <meta property="og:url" content="https://gozareshgir.ir" />
    <script type="application/ld+json">
        {
          "@@context": "https://schema.org",
          "@@type": "Organization",
          "name": "گزارشگیر",
          "url": "https://gozareshgir.ir",
          "logo": "https://gozareshgir.ir"
        }
    </script>
}

<div class="container-fluid">
    <div class="row position-relative">
		
        <div class="col-xl-3 col-lg-5 login order-2 order-lg-1 d-lg-flex" style="display: none">
            <div class="custom-login mx-2">
                <div class="text-center mb-5">
                    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 621.6 721.91" style="width:150px;">
                        <defs>
                            <style>
                              .cls-1 {
                                fill: url(#linear-gradient-2);
                              }

                              .cls-2 {
                                fill: url(#linear-gradient-3);
                              }

                              .cls-3 {
                                fill: url(#linear-gradient);
                              }
                            </style>
                            <linearGradient id="linear-gradient" x1="0" y1="481.82" x2="621.6" y2="481.82" gradientUnits="userSpaceOnUse">
                                <stop offset="0" stop-color="#30c1c1"/>
                                <stop offset="1" stop-color="#087474"/>
                            </linearGradient>
                            <linearGradient id="linear-gradient-2" x1="217.07" y1="187.47" x2="523.83" y2="187.47" xlink:href="#linear-gradient"/>
                            <linearGradient id="linear-gradient-3" x1="1.3" y1="146.6" x2="395.56" y2="146.6" xlink:href="#linear-gradient"/>
                        </defs>
                        <polygon class="cls-3" points="0 328.82 129.91 244.95 129.91 453.87 310.8 562.4 488.4 453.87 488.4 355.2 310.8 355.2 488.4 241.73 621.6 241.73 621.6 541.02 310.8 721.91 0 541.02 0 328.82"/>
                        <polygon class="cls-1" points="217.07 309.16 217.07 192.4 426.8 65.78 523.83 123.33 217.07 309.16"/>
                        <polyline class="cls-2" points="308.61 0 395.56 47.69 1.3 293.19 1.3 184.66 308.61 0"/>
                    </svg>
                    @* <img src="~/AssetsClient/images/" alt="LOGO" class="img-fluid"> *@
                </div>

                <div class="w-100" id="loginWithUser">
                    <form autocomplete="off" metod="post" asp-page="./Index" asp-page-handler="Enter">

                        <div class="login-user-pass">
                            <div class="form-group">
                                <input type="text" class="form-control" id="username" asp-for="Username" placeholder="نام کاربری">
                            </div>
                            <div class="form-group">
                                <div class="position-relative">
                                    <input type="password" class="form-control" asp-for="Password" id="password" placeholder="گذرواژه">
                                    <button type="button" class="position-absolute end-0 bg-transparent" onclick="passFunction()" style="top:3px;">
                                        <svg class="eyeShow" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M15.58 11.9999C15.58 13.9799 13.98 15.5799 12 15.5799C10.02 15.5799 8.42004 13.9799 8.42004 11.9999C8.42004 10.0199 10.02 8.41992 12 8.41992C13.98 8.41992 15.58 10.0199 15.58 11.9999Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M12 20.27C15.53 20.27 18.82 18.19 21.11 14.59C22.01 13.18 22.01 10.81 21.11 9.39997C18.82 5.79997 15.53 3.71997 12 3.71997C8.46997 3.71997 5.17997 5.79997 2.88997 9.39997C1.98997 10.81 1.98997 13.18 2.88997 14.59C5.17997 18.19 8.46997 20.27 12 20.27Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                        <svg class="eyeClose" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:none;">
                                            <path d="M14.53 9.46992L9.47004 14.5299C8.82004 13.8799 8.42004 12.9899 8.42004 11.9999C8.42004 10.0199 10.02 8.41992 12 8.41992C12.99 8.41992 13.88 8.81992 14.53 9.46992Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M17.82 5.76998C16.07 4.44998 14.07 3.72998 12 3.72998C8.46997 3.72998 5.17997 5.80998 2.88997 9.40998C1.98997 10.82 1.98997 13.19 2.88997 14.6C3.67997 15.84 4.59997 16.91 5.59997 17.77" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M8.42004 19.5299C9.56004 20.0099 10.77 20.2699 12 20.2699C15.53 20.2699 18.82 18.1899 21.11 14.5899C22.01 13.1799 22.01 10.8099 21.11 9.39993C20.78 8.87993 20.42 8.38993 20.05 7.92993" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M15.5099 12.7C15.2499 14.11 14.0999 15.26 12.6899 15.52" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M9.47 14.53L2 22" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M22 2L14.53 9.47" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                    </button>
                                </div>

                            </div>
                        </div>

                        @*<div class="recover-pass">
                            <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
                                <g clip-path="url(#clip0_222_1674)">
                                    <path d="M13.4582 7.12484V3.95817C13.4582 3.54232 13.3558 3.13053 13.1569 2.74633C12.9579 2.36214 12.6664 2.01305 12.2988 1.719C11.9312 1.42495 11.4949 1.19169 11.0146 1.03255C10.5344 0.873413 10.0196 0.791504 9.49984 0.791504C8.98003 0.791504 8.4653 0.873413 7.98505 1.03255C7.50481 1.19169 7.06844 1.42495 6.70087 1.719C6.33331 2.01305 6.04174 2.36214 5.84281 2.74633C5.64388 3.13053 5.5415 3.54232 5.5415 3.95817V7.12484M13.4582 7.12484H16.6248C17.4993 7.12484 18.2082 7.83373 18.2082 8.70817V16.6248C18.2082 17.4993 17.4993 18.2082 16.6248 18.2082H2.37484C1.50039 18.2082 0.791504 17.4993 0.791504 16.6248V8.70817C0.791504 7.83373 1.50039 7.12484 2.37484 7.12484H5.5415M13.4582 7.12484H5.5415M9.49984 13.4582C9.93706 13.4582 10.2915 13.1037 10.2915 12.6665C10.2915 12.2293 9.93706 11.8748 9.49984 11.8748C9.06262 11.8748 8.70817 12.2293 8.70817 12.6665C8.70817 13.1037 9.06262 13.4582 9.49984 13.4582ZM9.49984 13.4582V15.0415" stroke="#018E8E" stroke-width="1.5" stroke-linecap="round" />
                                </g>
                                <defs>
                                    <clipPath id="clip0_222_1674">
                                        <rect width="19" height="19" fill="white" />
                                    </clipPath>
                                </defs>
                            </svg>
                             <a href="">فراموشی کلمه عبور</a> 
                        </div>*@

                        <div class="text-center mx-auto px-4 mt-4">
                            <button type="submit" class="btn-login d-block mx-auto w-100" id="btn-login">
                                <div class="d-flex justify-content-center align-items-center">
                                    <span class="py-1">ورود</span>
                                    <div class="text-center loading ms-2" style="display: none;">
                                        <div class="spinner-border" role="status" style="width: 18px;height: 18px;padding: 0;margin: 4px 0 0 0;">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </div>
                                </div>
                            </button>

                            <p>
                                <a href="#" class="bg-transparent" id="loginWithMobileClick">ورود با شماره موبایل</a>
                            </p>

                        </div>
                        @* <input type="hidden" asp-for="CaptchaResponse" id="captchaRes" value="" /> *@
                    </form>
                </div>

                <div class="w-100 d-none" id="loginWithMobile">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="شماره موبایل" id="phoneNumber">
                        <div class="form-group " id="appendCodeInput"></div>
                    </div>
                    <div id="codeDiv" style="display: none">
                        <div class="otp">
                            <input type="text" id="n0" class="form-control codeInput" placeholder="-" maxlength="1" autocomplete="off" autofocus data-next="1">
                            <input type="text" id="n1" class="form-control codeInput" placeholder="-" maxlength="1" autocomplete="off" data-next="2">
                            <input type="text" id="n2" class="form-control codeInput" placeholder="-" maxlength="1" autocomplete="off" data-next="3">
                            <input type="text" id="n3" class="form-control codeInput" placeholder="-" maxlength="1" autocomplete="off" data-next="4">
                            <input type="text" id="n4" class="form-control codeInput" placeholder="-" maxlength="1" autocomplete="off" data-next="5">
                            <input type="text" id="n5" class="form-control codeInput" placeholder="-" maxlength="1" autocomplete="off" data-next="end">
                        </div>
                        <div class="text-center mt-3">
                            <div><p class="m-0">کد دریافتی را وارد کنید</p></div>
                            <div class="d-flex align-items-center justify-content-center">
                                <p class="mx-1">زمان باقی مانده تا انقضاء کد دریافتی</p>
                            </div>
                            <p class="countdown" id="timer"></p>
                        </div>
                    </div>
                    @* <div class="text-center loading" style="display:none">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div> *@
                    <div class="w-100"></div>
                    <div class="text-center mx-auto px-4 mt-4">
                        <button class="btn-login w-100" id="btnSmsReciver">
                            <div class="d-flex justify-content-center align-items-center">
                                <span class="py-1">دریافت کد</span>
                                <div class="text-center loading ms-2" style="display: none;">
                                    <div class="spinner-border" role="status" style="width: 18px;height: 18px;padding: 0;margin: 4px 0 0 0;">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                </div>
                            </div>
                        </button>

                        <button class="btn-login w-100" style="display: none" onclick="confirmCodeToLogin()" id="btn-login-code">
                            <div class="d-flex justify-content-center align-items-center">
                                <span class="py-1">ورود</span>
                                <div class="text-center loading ms-2" style="display: none;">
                                    <div class="spinner-border" role="status" style="width: 18px;height: 18px;padding: 0;margin: 4px 0 0 0;">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                </div>
                            </div>
                        </button>

                        <p>
                            <button class="bg-transparent" id="loginWithUserClick">ورود با نام کاربری و رمز عبور</button>
                        </p>
                    </div>
                </div>

                @if (Model.HasApkToDownload)
                {
                    <div class="position-fixed d-md-none d-block" style="bottom:18px;" id="downloadAppLogin">
                        <a href="/apk/android"  type="button" class="btn-login d-block mx-auto w-100 text-white px-3 py-2 d-flex align-items-center">
                            <svg width="18" height="18" fill="#ffffff" viewBox="-1 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                <g id="SVGRepo_iconCarrier">
                                    <path d="m3.751.61 13.124 7.546-2.813 2.813zm-2.719-.61 12.047 12-12.046 12c-.613-.271-1.033-.874-1.033-1.575 0-.023 0-.046.001-.068v.003-20.719c-.001-.019-.001-.042-.001-.065 0-.701.42-1.304 1.022-1.571l.011-.004zm19.922 10.594c.414.307.679.795.679 1.344 0 .022 0 .043-.001.065v-.003c.004.043.007.094.007.145 0 .516-.25.974-.636 1.258l-.004.003-2.813 1.593-3.046-2.999 3.047-3.047zm-17.203 12.796 10.312-10.359 2.813 2.813z"></path>
                                </g>
                            </svg>
							<span class="mx-1">دانلود نرم افزار مخصوص موبایل</span>
                        </a>
                    </div>
                }
            </div>
        </div>

        <div class="col-xl-9 col-lg-7 bg-login order-1 order-lg-2" style="display: none">
			
	        <a href="/" class="back-btn position-absolute d-flex align-items-center gap-1 py-1 px-3 rounded-pill" type="button" style="top: 16px; left: 16px;">
		        <svg width="24" height="24" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
			        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.83509 9.28281C4.5835 9.82982 4.5835 10.4521 4.5835 11.6967V15.5838C4.5835 17.3122 4.5835 18.1765 5.12047 18.7135C5.59815 19.1911 6.33482 19.2439 7.7085 19.2497V14.6672C7.7085 13.6086 8.56662 12.7505 9.62516 12.7505H12.3752C13.4337 12.7505 14.2918 13.6086 14.2918 14.6672V19.2497C15.6655 19.2439 16.4022 19.1911 16.8799 18.7135C17.4168 18.1765 17.4168 17.3122 17.4168 15.5838V11.6967C17.4168 10.4521 17.4168 9.82982 17.1652 9.28281C16.9136 8.7358 16.4412 8.33081 15.4962 7.52083L14.5795 6.73511C12.8715 5.27108 12.0175 4.53906 11.0002 4.53906C9.98287 4.53906 9.12885 5.27108 7.42081 6.73512L6.50414 7.52083C5.55916 8.33081 5.08668 8.7358 4.83509 9.28281ZM12.2918 19.2504V14.7505H9.7085V19.2504H12.2918Z" fill="white"/>
		        </svg>
		        <span>بازگشت به خانه</span>
	        </a>

	        <div>
		        <h4>سلام کاربر گرامی</h4>
		        <p>
			        خوش آمدید به دنیای پرانرژی سامانه هوشمند مدیریت منابع انسانی.
			        ما خوشحالیم که شما را در اینجا می‌بینیم.
		        </p>
		        <button class="bg-transparent d-block d-lg-none" id="show_login">
			        <div class="next ">
				        <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
					        <path d="M14.25 9.5L23.75 19L14.25 28.5" stroke="white" stroke-width="2"/>
				        </svg>
			        </div>
		        </button>
	        </div>
        </div>
        @if (@Model.Mess == null)
        {
            <script>
	        var hasWelcomeLoginPage = localStorage.getItem('hasWelcomeLoginPage');
	        if ($(window).width() < 991) {
		        if (!hasWelcomeLoginPage) {
			        $('.bg-login').show();
		        } else {
			        $('.login').show("slide", { direction: "right" }, 500);
		        }
	        } else {
		        $('.bg-login').show();
	        }
        </script>
        }
        else
        {
	        <script>
	        var hasWelcomeLoginPage = localStorage.getItem('hasWelcomeLoginPage');
	        if ($(window).width() > 991) {
		        $('.bg-login').show();
	        } else {
		        if (!hasWelcomeLoginPage) {
			        $('.bg-login').show();
		        } else {
			        $('.login').show("slide", { direction: "right" }, 500);
		        }
	        }
        </script>
        }
    </div>
</div>


<!-- پیغام خطا -->
@if (@Model.Mess != null)
{
    <div class="alert-msg">
        <div class="d-flex align-items-center justify-content-between">
            <div class="px-1">
                <h4 class="alert-msg-heading">خطا</h4>
                <p class="m-0">@Model.Mess</p>
            </div>
            <button class="bg-transparent btn-alert-danger" id="closeAlert">
                <svg width="40" height="40" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="32" height="32" rx="16" fill="#D3D3D3" />
                    <mask id="mask0_1503_13337" maskUnits="userSpaceOnUse" x="4" y="4" width="24" height="24">
                        <rect x="4" y="4" width="24" height="24" fill="#D9D9D9" />
                    </mask>
                    <g mask="url(#mask0_1503_13337)">
                        <path d="M12.4 21L16 17.4L19.6 21L21 19.6L17.4 16L21 12.4L19.6 11L16 14.6L12.4 11L11 12.4L14.6 16L11 19.6L12.4 21ZM16 26C14.6167 26 13.3167 25.7373 12.1 25.212C10.8833 24.6873 9.825 23.975 8.925 23.075C8.025 22.175 7.31267 21.1167 6.788 19.9C6.26267 18.6833 6 17.3833 6 16C6 14.6167 6.26267 13.3167 6.788 12.1C7.31267 10.8833 8.025 9.825 8.925 8.925C9.825 8.025 10.8833 7.31233 12.1 6.787C13.3167 6.26233 14.6167 6 16 6C17.3833 6 18.6833 6.26233 19.9 6.787C21.1167 7.31233 22.175 8.025 23.075 8.925C23.975 9.825 24.6873 10.8833 25.212 12.1C25.7373 13.3167 26 14.6167 26 16C26 17.3833 25.7373 18.6833 25.212 19.9C24.6873 21.1167 23.975 22.175 23.075 23.075C22.175 23.975 21.1167 24.6873 19.9 25.212C18.6833 25.7373 17.3833 26 16 26Z" fill="#F04248" />
                    </g>
                </svg>
            </button>
        </div>
        <div class="border-msg position-absolute"></div>
    </div>
}

<div class="alert-msg d-none">
    <div class="d-flex align-items-center justify-content-between">
        <div class="px-1">
            <h4 class="alert-msg-heading">خطا</h4>
            <p class="m-0"></p>
        </div>
        <button class="bg-transparent btn-alert-danger" id="closeAlert">
            <svg width="40" height="40" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="32" height="32" rx="16" fill="#D3D3D3" />
                <mask id="mask0_1503_13337" maskUnits="userSpaceOnUse" x="4" y="4" width="24" height="24">
                    <rect x="4" y="4" width="24" height="24" fill="#D9D9D9" />
                </mask>
                <g mask="url(#mask0_1503_13337)">
                    <path d="M12.4 21L16 17.4L19.6 21L21 19.6L17.4 16L21 12.4L19.6 11L16 14.6L12.4 11L11 12.4L14.6 16L11 19.6L12.4 21ZM16 26C14.6167 26 13.3167 25.7373 12.1 25.212C10.8833 24.6873 9.825 23.975 8.925 23.075C8.025 22.175 7.31267 21.1167 6.788 19.9C6.26267 18.6833 6 17.3833 6 16C6 14.6167 6.26267 13.3167 6.788 12.1C7.31267 10.8833 8.025 9.825 8.925 8.925C9.825 8.025 10.8833 7.31233 12.1 6.787C13.3167 6.26233 14.6167 6 16 6C17.3833 6 18.6833 6.26233 19.9 6.787C21.1167 7.31233 22.175 8.025 23.075 8.925C23.975 9.825 24.6873 10.8833 25.212 12.1C25.7373 13.3167 26 14.6167 26 16C26 17.3833 25.7373 18.6833 25.212 19.9C24.6873 21.1167 23.975 22.175 23.075 23.075C22.175 23.975 21.1167 24.6873 19.9 25.212C18.6833 25.7373 17.3833 26 16 26Z" fill="#F04248" />
                </g>
            </svg>
        </button>
    </div>
    <div class="border-msg position-absolute"></div>
</div>
<!-- پیغام خطا -->





<input type="hidden" id="Verfyusername"/>
<input type="hidden" id="VerfyId"/>



@section Script{
    @* <script src="https://www.google.com/recaptcha/api.js?hl=fa&render=6Lfhp_AnAAAAAB79WkrMoHd1k8ir4m8VvfjE7FTH"></script> *@
    @* <script>'serviceWorker' in navigator && navigator.serviceWorker.register('/service-worker.js')</script> *@
	<script>
		// if ('serviceWorker' in navigator) {
		// 	navigator.serviceWorker.register('/service-worker.js')
		// 		.then(function (registration) {
		// 			console.log('Service Worker registered with scope:', registration.scope);
		// 			alert('Service Worker registered with scope:' + registration.scope);
		// 		}).catch(function (error) {
		// 			console.log('Service Worker registration failed:', error);
		// 			alert('Service Worker registration failed:' + error);
		// 		});
		// }

		// if ('serviceWorker' in navigator && 'PushManager' in window) {
		// 	window.addEventListener('beforeinstallprompt', (e) => {
		// 		if (localStorage.getItem('pwaPromptDismissed') === 'true') {
		// 			return;
		// 		}

		// 		e.preventDefault();

		// 		const deferredPrompt = e;

		// 		const containerDiv = document.createElement('div');
		// 		containerDiv.className = 'prompt-container';

		// 		const promptText = document.createElement('p');
		// 		promptText.textContent = 'آیا می خواهید برنامه را نصب کنید؟';
		// 		containerDiv.appendChild(promptText);

		// 		const yesButton = document.createElement('button');
		// 		yesButton.textContent = 'بله';
		// 		yesButton.classList.add('btn-grad');
		// 		yesButton.style.background = '#84cc16';

		// 		const noButton = document.createElement('button');
		// 		noButton.textContent = 'خیر';
		// 		noButton.classList.add('btn-grad');
		// 		noButton.style.background = '#ef4444';

		// 		yesButton.addEventListener('click', () => {
		// 			deferredPrompt.prompt();

		// 			deferredPrompt.userChoice.then(choiceResult => {
		// 				if (choiceResult.outcome === 'accepted') {
		// 					console.log('App installed');
		// 				} else {
		// 					console.log('App installation declined');
		// 				}

		// 				containerDiv.style.display = 'none';
		// 			});
		// 		});

		// 		noButton.addEventListener('click', () => {
		// 			console.log('App installation declined');
		// 			containerDiv.style.display = 'none';
		// 			localStorage.setItem('pwaPromptDismissed', 'true');
		// 		});

		// 		containerDiv.appendChild(yesButton);
		// 		containerDiv.appendChild(noButton);

		// 		document.body.appendChild(containerDiv);
		// 	});
		// }
	</script>
    <script>
		// window.grecaptcha.ready(function () {
		//     window.grecaptcha.execute('6Lfhp_AnAAAAAB79WkrMoHd1k8ir4m8VvfjE7FTH', { action: 'submit' }).then(function (response) {
		//         $('#captchaRes').val(response);
		//     });
		// });
  
             

                
		//******************** رسپانسیو هنگام موبایل ********************
		$('#show_login').click(function () {
			$(".bg-login").hide("slide", { direction: "left" }, 500);
			$('.login').hide();
			// $('.login').addClass('d-flex');
			$('.login').show("slide", { direction: "right" }, 500);
			localStorage.setItem('hasWelcomeLoginPage', true);
		});
		//******************** رسپانسیو هنگام موبایل ********************

		//******************** ورود با موبایل یا یوزر ********************
		$('#loginWithMobileClick').click(function () {
			$("#loginWithUser").addClass('d-none');
			$("#loginWithMobile").removeClass('d-none');
			$("#loginWithMobile").addClass('d-block');
		});

		$('#loginWithUserClick').click(function () {
			$("#loginWithUser").removeClass('d-none');
			$("#loginWithUser").addClass('d-block');
			$("#loginWithMobile").removeClass('d-block');
			$("#loginWithMobile").addClass('d-none');
		});
		//******************** ورود با موبایل یا یوزر ********************


		//******************** بستن مودال خطا ********************
		$(document).on('click', '#closeAlert', function () {
			$('.alert-msg').removeClass('d-flex');
			$('.alert-msg').addClass('d-none');
			$('.alert-msg p').text('');
		});

		$(document).on('click', '#closeAlert1', function () {
			$('.alert-msg').removeClass('d-flex');
			$('.alert-msg').addClass('d-none');
			$('.alert-msg p').text('');
		});
		//******************** بستن مودال خطا ********************


		//******************** لودینگ صفحه هنگام ورود با یوزر و رمز عبور ********************
		$(document).on('click', '#btn-login', function () {
			$('.loading').show();
		});
		//******************** لودینگ صفحه هنگام ورود با یوزر و رمز عبور ********************


		//******************** عملیات ورود با موبایل و دریافت کد ********************
		//فقط عدد وارد کنه
		$('#code').on('keyup',
			function () {
				this.value = this.value.replace(/[^\d]/, '');
			});
		$('#phoneNumber').on('keyup keypress',
			function (e) {
				//فقط عدد
				this.value = this.value.replace(/[^\d]/, '');
				if (this.value.length == 11) {
					//کلید دمکه اینتر 13
					var keyCode = e.keyCode || e.which;
					if (keyCode === 13) {
						$('#btnSmsReciver').click();
					}
                 
					$('#phoneNumber').removeClass("invalidPass");
				}
			});

    
		$('#btnSmsReciver').on('click',
			function () {
				var phoneInput = $('#phoneNumber').val();
				if (phoneInput.length == 0) {
					$('.alert-msg').removeClass('d-none');
					$('.alert-msg p').text('لطفا شماره موبایل را وارد نمائید');
				}
                
				if (phoneInput.length < 11) {
             
					$('.alert-msg').removeClass('d-none');
					$('.alert-msg').addClass('d-block');
					$('.alert-msg p').text('شماره موبایل معتبر وارد کنید');

					$('#phoneNumber').addClass("invalidPass");
				} else {
                   
					$('#phoneNumber').removeClass("invalidPass");
					$('.loading').show();
					loginWithCode(phoneInput);                  
				}
			});
		function loginWithCode(phoneInput) {
			$.ajax({
				async: false,
				dataType: 'json',
				type: 'POST',
				url: '@Url.Page("./Index", "CheckPhoneValid")',
				headers: { "RequestVerificationToken": $('@Html.AntiForgeryToken()').val() },
				data: {
					'phone': phoneInput
				},
				success: function (response) {
					if (response.exist === false) {
						$(".phoneAlarm").remove();
						// $(".error-box-recover").append('<p class="phoneAlarm" style="padding: 10px 7px 0px;"> هیچ کاربری با شماره موبایل وارد شده در سیستم وجود ندارد </p>');

						$('.alert-msg').removeClass('d-none');
						$('.alert-msg').addClass('d-block');
						$('.alert-msg p').text('هیچ کاربری با شماره موبایل وارد شده در سیستم وجود ندارد');

						$('.loading').hide();
						$('#phoneNumber').addClass("invalidPass");
					} else {
                      
						$('#phoneNumber').removeClass("invalidPass");
						$('#phoneNumber').hide();
						$('#btn-login-code').show();

						// sendVervifyCode(phoneInput);


						$('.alert-msg').removeClass('d-block');
						$('.alert-msg').addClass('d-none');
						$('.alert-msg p').text('');

						$('.removeCodeInput').remove();
						// $('#appendCodeInput').append(codeInput);

						$('#btnSmsReciver').hide();
						$('#codeDiv').show();
						codeTimer();
						$('.loading').hide();
						$('#n0').focus();
					}


				},
				failure: function (response) {
					console.log(5, response);
				}

			});
		}
		function codeTimer() {
			var timer2 = "2:00";
			var interval = setInterval(function () {
				var timer = timer2.split(':');
				//by parsing integer, I avoid all extra string processing
				var minutes = parseInt(timer[0], 10);
				var seconds = parseInt(timer[1], 10);
				--seconds;
				minutes = (seconds < 0) ? --minutes : minutes;
				if (minutes < 0) clearInterval(interval);
				seconds = (seconds < 0) ? 59 : seconds;
				seconds = (seconds < 10) ? '0' + seconds : seconds;
				//minutes = (minutes < 10) ?  minutes : minutes;
				$('.countdown').html(minutes + ':' + seconds);
				timer2 = minutes + ':' + seconds;

				//  ||
				if (timer2 === "0:00") {
					// $('.removeCodeInput').remove();

					//قسمت وارد کردن کد مخفی میشود
					$('#codeDiv').hide();

					//دکمه ورود مخفی میشود
					$('#btn-login-code').hide();

					//اینپوت برای وارد کردن کدها خالی میشود
					$('.codeInput').val('');

					//اینپوت برای وارد کردن شماره تماس باز میشود
					$('#phoneNumber').show();

					//دکمه برای دریافت کد باز میشود
					$('#btnSmsReciver').show();
				}

			}, 1000);
		}

		function sendVervifyCode(phoneInput) {
			$.ajax({
				async: false,
				dataType: 'json',
				type: 'POST',
				url: '@Url.Page("./Index", "SendSms")',
				headers: { "RequestVerificationToken": $('@Html.AntiForgeryToken()').val() },
				data: {
					'phone': phoneInput
				},
				success: function (response) {


				},
				failure: function (response) {
					console.log(5, response);
				}

			});
		}

		// function confirmCode() {
		//     var code = $('#code').val();
		//     // let no0 = $('#no0').val();
		//     // let no1 = $('#no1').val();
		//     // let no2 = $('#no2').val();
		//     // let no3 = $('#no3').val();
		//     // let no4 = $('#no4').val();
		//     // let no5 = $('#no5').val();
		//     //var code = no0 + no1 + no2 + no3 + no4 + no5;

		//     $.ajax({
		//         dataType: 'json',
		//         type: 'POST',
		//         url: '@Url.Page("./Index", "Verify")',
		//         headers: { "RequestVerificationToken": $('@Html.AntiForgeryToken()').val() },
		//         data: {
		//             'code': code
		//         },
		//         success: function (response) {

		//             if (response.exist === true) {
		//                 $(".phoneAlarm").remove();
		//                 console.log("true");
                       


		//             } else {
		//                 $('#Verfyusername').val("");
		//                 $('#VerfyId').val("");
		//                 $(".phoneAlarm").remove();
		//                 $(".error-box-VerifyCode").append('<p class="phoneAlarm" style="padding: 10px 7px 0px;"> کد وارد شده صحیح نیست </p>');
		//             }


		//         },
		//         failure: function (response) {
		//             console.log(5, response);
		//         }

		//     });
		// }


		//login after confirm code
		function confirmCodeToLogin() {
			let no0 = $('#n0').val();
			let no1 = $('#n1').val();
			let no2 = $('#n2').val();
			let no3 = $('#n3').val();
			let no4 = $('#n4').val();
			let no5 = $('#n5').val();
			var code = no0 + no1 + no2 + no3 + no4 + no5;

			if (code.length == 6) {
				$('.loading').show();
				setTimeout(function () {
					$.ajax({
						async : false,
						dataType: 'json',
						type: 'POST',
						url: '@Url.Page("./Index", "WithMobile")',
						headers: { "RequestVerificationToken": $('@Html.AntiForgeryToken()').val() },
						data: {
							'code': code,
							'phone': $('#phoneNumber').val()
						},
						success: function (response) {
							if (response.exist === true) {
								window.location.href = response.url;
							} else {
								$('.loading').hide();
								$('.alert-msg').removeClass('d-none');
								$('.alert-msg').addClass('d-block');
								$('.alert-msg p').text('کد وارد شده صحیح نیست');

								// $('#Verfyusername').val("");
								// $('#VerfyId').val("");

							}
						},
						failure: function (response) {
							console.log(5, response);
						}
					});
				}, 1000);
			}
		}
		//******************** عملیات ورود با موبایل و دریافت کد ********************

	</script>
}