<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<!-- Metas -->
		<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">

		<!-- Manifest JSON -->
		<link href="<?php show_file_link("/manifest.json"); ?>" rel="manifest">

		<!-- Icon -->
		<link href="<?php show_file_link(PROJECT_ICON); ?>" rel="icon">

		<!-- Title -->
		<title><?php show_title("Login"); ?></title>

		<!-- Bootstrap v5.1.3 CSS -->
		<link href="<?php show_file_link("/assets/vendor/bootstrap/css/bootstrap.min.css"); ?>" rel="stylesheet">

		<!-- Fonts Rubik -->
		<link href="<?php show_file_link("/assets/fonts/rubik/font.css"); ?>" rel="stylesheet">

		<!-- SB Admin CSS -->
		<link href="<?php show_file_link("/assets/vendor/sbadmin/css/sbadmin.css"); ?>" rel="stylesheet">

		<!-- Style CSS -->
		<link href="<?php show_file_link("/assets/css/style.css"); ?>" rel="stylesheet">

		<!-- Font Awesome CSS -->
		<link href="<?php show_file_link("/assets/vendor/fontawesome/releases/v6.0.0/css/all.css"); ?>" rel="stylesheet">

		<!-- JQuery Toast CSS -->
		<link href="<?php show_file_link("/assets/vendor/toast/css/toast.css"); ?>" rel="stylesheet">

		<!-- JQuery DataTables CSS -->
		<link href="<?php show_file_link("/assets/vendor/datatables/css/dataTables.bootstrap5.min.css"); ?>" rel="stylesheet">

		<!-- JQuery Datepicker CSS -->
		<link href="<?php show_file_link("/assets/vendor/datepicker/css/datepicker.css"); ?>" rel="stylesheet">

		<!-- JQuery Sweetalert CSS -->
		<link href="<?php show_file_link("/assets/vendor/sweetalert2/css/sweetalert2.css"); ?>" rel="stylesheet">

		<!-- JQuery JS -->
		<script src="<?php show_file_link("/assets/vendor/jquery/jquery.min.js"); ?>"></script>

		<!-- JQuery Toast JS -->
		<script src="<?php show_file_link("/assets/vendor/toast/js/toast.js"); ?>"></script>

		<!-- JQuery Mask JS -->
		<script src="<?php show_file_link("/assets/vendor/jquery-mask/jquery.mask.js"); ?>"></script>
		
		<!-- JQuery DataTables JS -->
		<script src="<?php show_file_link("/assets/vendor/datatables/js/jquery.dataTables.min.js"); ?>"></script>
		<script src="<?php show_file_link("/assets/vendor/datatables/js/dataTables.bootstrap5.min.js"); ?>"></script>

		<!-- JQuery Datepicker JS -->
		<script src="<?php show_file_link("/assets/vendor/datepicker/js/datepicker.min.js"); ?>"></script>
		<script src="<?php show_file_link("/assets/vendor/datepicker/js/language/datepicker.pt-BR.js"); ?>"></script>

		<!-- JQuery Sweetalert JS -->
		<script src="<?php show_file_link("/assets/vendor/sweetalert2/js/sweetalert2.min.js"); ?>"></script>

		<style>
			html, body{
				min-height: 100%;
				background: -webkit-gradient(linear, left top, left bottom, from(#0d6efd), to(#0b60dd)) fixed;
			}

			.background-login {
				background-size: cover;
				background-position: center;
				background-image: url("<?php show_file_link("/assets/images/background-login.jpg"); ?>");
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-xl-10 col-lg-10 col-md-9 col-sm-12">
					<div class="card o-hidden border-0 shadow-lg my-5">
						<div class="card-body p-0">
							<div class="row gx-0">
								<div class="col-lg-6 d-none d-lg-block background-login" style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;"></div>
								<div class="col-lg-6">
									<div class="p-4 p-md-5">
										<div class="h4 text-center mb-3 mb-md-4">
											<img src="<?php show_file_link("/assets/images/logo_secondaria.png"); ?>" alt="logo" style="max-width: 100%; max-height: 165px; width: auto; height: auto; margin-bottom: 5px;">
											<br>
											<?php echo PROJECT_NAME; ?>
											<br>
											<small>Acesso ao Sistema</small>
										</div>
										<form action="<?php show_link("/logar/"); ?>" method="POST" class="form-ajax">
											<div class="mb-3">
												<div class="input-group input-group-lg">
													<span class="input-group-text bg-white" onclick="$('#login-acesso').focus()">
														<i class="fa-regular fa-user"></i>
													</span>
													<span class="form-floating" style="flex: 1;">
														<input type="text" name="login_acesso" id="login-acesso" class="form-control form-control-lg border-start-0" autocomplete="off" autofocus="autofocus" placeholder="E-mail ou Login" style="padding-left: 8px; border-top-left-radius: 0; border-bottom-left-radius: 0;">
														<label for="login-acesso" class="form-label" style="padding-left: 8px;">
															E-mail ou Login
														</label>
													</span>
												</div>
											</div>
											<div class="mb-3">
												<div class="input-group input-group-lg">
													<span class="input-group-text bg-white" onclick="$('#senha-acesso').focus()">
														<i class="fa-regular fa-key"></i>
													</span>
													<span class="form-floating" style="flex: 1;">
														<input type="password" name="senha_acesso" id="senha-acesso" class="form-control form-control-lg border-start-0" autocomplete="off" placeholder="Senha" style="padding-left: 8px; border-top-left-radius: 0; border-bottom-left-radius: 0;">
														<label for="senha-acesso" class="form-label" style="padding-left: 8px;">
															Senha
														</label>
													</span>
												</div>
											</div>

											<div class="d-grid gap-2">
												<button type="submit" class="btn btn-primary btn-lg">
													<i class="fa-regular fa-sign-in"></i> Entrar
												</button>
											</div>

											<div class="mt-3 mt-md-4 mb-3 mb-md-0 text-center">
												<a href="<?php show_link("/esqueci-minha-senha/"); ?>">Esqueci minha senha</a>
											</div>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script>
			$("#login-acesso").keyup(function(){
				$(this).val($(this).val().toLowerCase().trim().normalize("NFD").replace(/[\u0300-\u036f]/g, ""));
			});
		</script>

		<!-- Bootstrap Bundle v5.1.3 JS -->
		<script src="<?php show_file_link("/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"); ?>"></script>

		<!-- JQuery Loading Overlay JS -->
		<script src="<?php show_file_link("/assets/vendor/loading-overlay/loading-overlay.js"); ?>"></script>

		<!-- Utils JS -->
		<script src="<?php show_file_link("/assets/js/utils.js"); ?>"></script>
	</body>
</html>