<!DOCTYPE html>
<html class="{theme}" lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<title><?= $company_name ?> | {log_in}</title>
	<link href="/assets/css/icons.css" rel="stylesheet" type="text/css">
	<link
		href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
		rel="stylesheet">
	<link href="/assets/css/sb-admin-2.css" rel="stylesheet">
	<link href="/assets/css/alert.css" rel="stylesheet">
	<script src="https://www.google.com/recaptcha/api.js" async defer></script>
	<script src="/assets/js/main.js"></script>
	<script>DisableDevtool();</script>
</head>

<body class="bg-gradient-primary">
	<div class="container">
		<div class="row justify-content-center">
			<div class="alert alert-info">
				{slogan}
			</div>
			<div class="col-xl-10 col-lg-12 col-md-9">
				<div class="card o-hidden border-0 shadow-lg my-5">
					<div class="card-body p-0">
						<div class="row">
							<div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
							<div class="col-lg-6">
								<div class="p-5">
									<div class="text-center">
										<h1 class="h4 text-blue-900 mb-4">{welcome_back}</h1>
									</div>
									<form class="user" method="POST" id="loginForm">
										<div class="form-group">
											<input type="email" class="form-control form-control-user"
												id="exampleInputEmail" aria-describedby="emailHelp"
												placeholder="{enter_email_address}" name="email">
										</div>
										<div class="form-group">
											<input type="password" class="form-control form-control-user"
												id="exampleInputPassword" placeholder="{password}" name="password">
										</div>
										<div class="form-group">
											<div class="custom-control custom-checkbox small">
												<input type="checkbox" class="custom-control-input" id="RememberMe"
													name="RememberMe">
												<label class="custom-control-label"
													for="RememberMe">{remember_me}</label>
											</div>
										</div>
										<div class="form-group" style="display: flex; justify-content: center;">
											<div class="g-recaptcha" id="recaptchaLogin"
												data-sitekey="<?= $recaptcha_public_key ?>"></div>
										</div>
										<button type="submit"
											class="btn btn-primary btn-user btn-block">{log_in}</button>
										<hr>
									</form>
									<div class="text-center">
										<a class="small" href="forgot-password.html">{forgot_password}</a>
									</div>
									<div class="text-center">
										<a class="small" href="/account/register">{create_account}</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="position-fixed" style="bottom: 20px; right: 20px; display: flex; gap: 10px;">
		<div class="dropdown">
			<button class="nav-link dropdown-toggle btn btn-light btn-sm" id="theme-toggle" type="button"
				data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				Смена Темы
			</button>
			<div class="dropdown-menu" aria-labelledby="theme-toggle">
				<a class="dropdown-item" href="javascript:void(0);" data-theme="dark">Темная</a>
				<a class="dropdown-item" href="javascript:void(0);" data-theme="light">Светлая</a>
			</div>
		</div>
		<div class="dropdown">
			<button class="nav-link dropdown-toggle btn btn-light btn-sm" id="language-toggle" type="button"
				data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				Смена Языка
			</button>
			<div class="dropdown-menu" aria-labelledby="language-toggle">
				<a class="dropdown-item" href="javascript:void(0);" id="en" data-language="en">English</a>
				<a class="dropdown-item" href="javascript:void(0);" id="ru" data-language="ru">Русский</a>
				<a class="dropdown-item" href="javascript:void(0);" id="uk" data-language="uk">Українська</a>
			</div>
		</div>
	</div>

	<script src="/assets/js/jquery.js"></script>
	<script src="/assets/js/bootstrap.bundle.js"></script>
	<script src="/assets/js/jquery.form.min.js"></script>
	<script src="/assets/js/sb-admin-2.js"></script>
	<script src="/assets/js/alert.js"></script>
	<script>
		function setCookie(name, value) {
			const expires = new Date();
			expires.setFullYear(expires.getFullYear() + 1);
			document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
		}

		function setTheme(theme) {
			document.documentElement.classList.remove('dark-theme', 'light-theme');
			document.documentElement.classList.add(theme + '-theme');
			setCookie('theme', theme + '-theme');
		}

		document.querySelectorAll('[data-theme]').forEach(item => {
			item.addEventListener('click', function () {
				const theme = this.getAttribute('data-theme');
				setTheme(theme);
			});
		});

		document.querySelectorAll('[data-language]').forEach(item => {
			item.addEventListener('click', function () {
				const lang = this.getAttribute('data-language');
				setCookie('lang', lang);
				location.reload();
			});
		});


		$('#loginForm').ajaxForm({
			url: '/account/login/ajax',
			dataType: 'text',
			success: function (data) {
				data = $.parseJSON(data);
				switch (data.status) {
					case 'error':
						cuteToast({ type: data.status, message: data.message, timer: data.time });
						grecaptcha.reset(recaptchaLogin);
						$('button[type=submit]').prop('disabled', false);
						break;
					case 'success':
						cuteToast({ type: data.status, message: data.message, timer: data.time });
						setTimeout("redirect('/')", 1500);
						break;
				}
			},
			beforeSubmit: function (arr, $form, options) {
				var email = $('#exampleInputEmail').val();
				var password = $('#exampleInputPassword').val();
				var recaptcha = grecaptcha.getResponse();
				if (email.length < 3) {
					cuteToast({ type: "error", message: "{invalid_email}", timer: 2000 });
					return false;
				} else if (password.length < 8) {
					cuteToast({ type: "error", message: "{invalid_password}", timer: 2000 });
					return false;
				} else if (!recaptcha) {
					cuteToast({ type: "error", message: "{invalid_recaptcha}", timer: 2000 });
					return false;
				}
				$('button[type=submit]').prop('disabled', true);
			}
		});

		// Handle button clicks
		$('#themeButton .dropdown-item').on('click', function () {
			var theme = $(this).data('theme');
			console.log('Вы выбрали тему: ' + theme);
		});

		$('#languageButton .dropdown-item').on('click', function () {
			var lang = $(this).data('lang');
			console.log('Вы выбрали язык: ' + lang);
		});
	</script>
</body>

</html>