<?php
require_once '../settings.php';

if (session_status() == PHP_SESSION_NONE) {
    session_start();
}

// Verifica se está acessando via HTTPS
$protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http';
$link = $protocol . '://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];

// Redirecionamentos
if (!isset($_SESSION['userdata']) && !strpos($link, 'login.php')) {
    redirect('admin/login.php');
}
if (isset($_SESSION['userdata']) && strpos($link, 'login.php')) {
    redirect('admin/index.php');
}
?>
<!DOCTYPE html>
<html :class="{ 'theme-dark': dark }" x-data="data()" lang="pt-BR">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login - Painel Admin</title>
   <!-- Adicionando variáveis CSS -->
	<style>
		:root {
			--primary-color: #ff3030;
			--secondary-color: #FFDBBB;
			--sidebar-color: #262B30;
			--background-color: #1A1F24;
		}
	</style>

	<!-- Estilos comuns -->
	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap">
	<link rel="shortcut icon" href="/media/favicons/RAIO_1.png" type="image/x-icon">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
	<link rel="stylesheet" href="/static/reset.css">
	<link rel="stylesheet" href="/static/pages/auth.css">

	<!-- Bloco para estilos adicionais -->
	<style>
		/* Para Chrome, Safari e Opera */
		.custom-input:-webkit-autofill,
		.custom-input:-webkit-autofill:hover,
		.custom-input:-webkit-autofill:focus,
		.custom-input:-webkit-autofill:active {
			-webkit-transition-delay: 99999s;
			/* Pseudo-soluÃ§Ã£o para combater o estilo de preenchimento automÃ¡tico do Chrome */
			-webkit-text-fill-color: inherit;
			transition: background-color 0s;
			-webkit-box-shadow: 0 0 0 1000px inherit inset;
		}

		/* Para Firefox */
		.custom-input:-moz-autofill {
			background-color: inherit;
			color: inherit;
		}

		/* Para Internet Explorer e Edge */
		.custom-input:-ms-autofill {
			background-color: inherit;
			color: inherit;
		}

		input[type="email"]:-webkit-autofill,
		input[type="password"]:-webkit-autofill,
		input[type="email"]:-webkit-autofill:hover,
		input[type="password"]:-webkit-autofill:hover,
		input[type="email"]:-webkit-autofill:focus,
		input[type="password"]:-webkit-autofill:focus,
		input[type="email"]:-webkit-autofill:active,
		input[type="password"]:-webkit-autofill:active {
			-webkit-transition: background-color 5000s ease-in-out 0s;
			transition: background-color 5000s ease-in-out 0s;
			-webkit-text-fill-color: inherit;
			/* Isso vai fazer o texto adotar a cor do input */
			color: inherit;
		}

		/* Removendo o destaque padrÃ£o do preenchimento automÃ¡tico para Firefox */
		input[type="email"]:-moz-autofill,
		input[type="password"]:-moz-autofill {
			filter: none;
		}

		/* Removendo o destaque padrÃ£o do preenchimento automÃ¡tico para Internet Explorer e Edge */
		input[type="email"]:-ms-autofill,
		input[type="password"]:-ms-autofill {
			filter: none;
		}

		/* Prevenindo o foco azul no Chrome */
		input[type="email"]:focus,
		input[type="password"]:focus {
			outline: none;
			box-shadow: none;
		}

		/* Para Chrome, Safari e Opera */
		.custom-input::-webkit-input-placeholder {
			color: inherit;
			/* herda a cor que vocÃª jÃ¡ definiu para o input */
			opacity: 1;
			/* opcional: garante a opacidade total */
		}

		/* Para Chrome e Opera */
		input:-webkit-autofill::placeholder {
			color: #414954 !important;
		}

		/* Para Firefox */
		input:-moz-autofill::placeholder {
			color: #414954 !important;
		}

		/* Para Internet Explorer e Edge */
		input:-ms-input-placeholder {
			color: #414954 !important;
		}

		/* Para Chrome, Safari e Opera */
		.custom-input::placeholder,
		input[type="email"]::placeholder,
		input[type="password"]::placeholder {
			color: #414954 !important;
			/* Cor que vocÃª definir */
			opacity: 1 !important;
			/* Opacidade total */
		}

		/* Para Firefox */
		.custom-input::-moz-placeholder,
		input[type="email"]::-moz-placeholder,
		input[type="password"]::-moz-placeholder {
			color: #414954 !important;
			/* Cor que vocÃª definir */
			opacity: 1 !important;
			/* Opacidade total */
		}

		/* Para Internet Explorer e Edge */
		.custom-input:-ms-input-placeholder,
		input[type="email"]:-ms-input-placeholder,
		input[type="password"]:-ms-input-placeholder {
			color: #414954 !important;
			/* Cor que vocÃª definir */
			opacity: 1 !important;
			/* Opacidade total */
		}

		body input[type="email"]:-webkit-autofill,
		body input[type="password"]:-webkit-autofill {
			-webkit-text-fill-color: #414954 !important;
			color: #414954 !important;
			background-color: #29313C;
		}

		body input[type="email"]:focus:-webkit-autofill,
		body input[type="password"]:focus:-webkit-autofill {
			-webkit-text-fill-color: #FFFFFF !important;
			color: #FFFFFF !important;
			background-color: #29313C;
		}

		body input[type="password"]:not(:placeholder-shown):-webkit-autofill {
			-webkit-text-fill-color: #414954 !important;
			color: #414954 !important;
		}

		body input[type="password"]:not(:placeholder-shown):focus:-webkit-autofill {
			-webkit-text-fill-color: #FFFFFF !important;
			color: #FFFFFF !important;
		}

		body input[type="email"].custom-input:-webkit-autofill {
			background-color: #29313C !important;
		}

		.custom-input:-webkit-autofill {
			-webkit-text-fill-color: #414954;
			background-color: #29313C;
		}

		.custom-input:-webkit-autofill:focus {
			-webkit-text-fill-color: #FFFFFF;
			background-color: #1F2630;
		}

		#senha[type="text"] {
			color: #FFFFFF !important;
			/* ForÃ§a a cor branca mesmo apÃ³s a mudanÃ§a de tipo */
		}

		body {
			font-family: 'Poppins', sans-serif;
		}

		.custom-input {
			background-color: #29313C !important;
			border: 3px solid transparent;
			border-radius: 15px;
			/* borda arredondada mais pronunciada */
			color: #414954;
			font-size: 16px;
			padding-left: 50px;
			/* espaÃ§o Ã  esquerda para o Ã­cone */
			transition: all 0.3s;
			height: 50px;
			/* altura fixa para o input */
		}

		.custom-input:focus {
			box-shadow: none;
			border-color: var(--primary-color);
			color: white;
			background-color: #1F2630;
			/* cor de fundo mais escura quando focado */
		}

		.btn-warning {
			background-color: var(--primary-color);
			color: white;
			border: none;
			border-radius: 15px;
			font-size: 16px;
			transition: all 0.3s;
			padding: 10px 20px;
			font-weight: bold;
			width: 100%;
		}

		.btn-warning:hover {
			background-color: var(--primary-color);
		}

		.input-group-icon {
			position: relative;
		}

		.input-group-icon>i {
			position: absolute;
			left: 20px;
			top: 50%;
			transform: translateY(-50%);
			color: #414954;
			/* cor inicial do Ã­cone */
			z-index: 2;
			font-size: 20px;
		}

		.input-group-icon>i::after {
			content: "|";
			position: absolute;
			left: 24px;
			/* ajuste a posiÃ§Ã£o para adicionar espaÃ§o */
			top: 50%;
			transform: translateY(-50%);
			color: #414954;
			/* cor inicial da barra | */
			font-size: 24px;
		}

		/* CorreÃ§Ã£o: MudanÃ§a de cor do Ã­cone quando o input estiver focado */
		.custom-input:focus+i,
		.custom-input:focus+i::after {
			color: var(--primary-color);
		}

		.text-muted {
			color: var(--primary-color) !important;
			text-decoration: none;
		}

		.custom-input::placeholder {
			color: #414954;
			/* cor inicial do placeholder */
		}

		.custom-input:focus::placeholder {
			color: #FFFFFF;
			/* cor do placeholder quando focado */
		}

		.text-muted-custom {
			color: #999999;
			text-decoration: none;
		}

		.text-muted-custom:hover {
			text-decoration: underline;
		}

		.form-check-label,
		.text-muted-custom {
			font-size: 13px;
			/* Define o tamanho da fonte que vocÃª deseja. Eu coloquei 14px como exemplo. */
		}

		.form-check-input:checked {
			background-color: #999999;
			border-color: #999999;
			margin-right: 3px;
		}

		.form-check-input {
			background-color: #999999;
			border-color: #999999;
			margin-right: 3px;
		}

		.logo-img {
			width: 400px;
			/* ou qualquer outro valor que vocÃª queira */
			height: auto;
			/* para manter a proporÃ§Ã£o */
		}

		.full-height {
			min-height: 100vh;
			/* 100% da altura da viewport */
			display: flex;
			align-items: center;
			/* Centralizar verticalmente */
			justify-content: center;
			/* Centralizar horizontalmente */
		}

		.form-group {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.form-group.form-check {
			flex-direction: row;
			justify-content: space-between;
		}


		#togglePassword:focus {
			outline: none;
			box-shadow: none;
		}

		#togglePassword i {
			color: #414954;
		}

		#senha:focus+i+#togglePassword i {
			color: var(--primary-color);
		}

		#togglePasswordRepetir:focus {
			outline: none;
			box-shadow: none;
		}

		#togglePasswordRepetir i {
			color: #414954;
		}

		#senhaRepetir:focus+i+#togglePasswordRepetir i {
			color: var(--primary-color);
		}
	</style>
    <script>
        var _base_url_ = '<?= BASE_URL ?>';
    </script>
</head>
<body style="background-color: #161c24">

	<!-- Bloco de conteúdo principal -->

	<main>
		<section class="full-height">
			<div class="container">
				<div class="row justify-content-center">
					<div class="col-md-6">
						                  <div class="text-center mb-4">
							<img src="<?php echo BASE_URL; ?>uploads/logo.png" alt="Logo do Sistema" class="logo-img">
						</div>
						<div class="card p-4" style="background-color: #1F2630; border: none;">
							<form id="login-frm" action="" method="post" method="POST">
								<input type="hidden" name="csrfmiddlewaretoken" value="DmVrQ0TYfhrc04amAHGGoFHHDrr1P7rDeCWOU2mgmjrIJCKA5FSDIuYXmbD6bBeq">
								<div class="form-group input-group-icon">
									<input type="text" class="form-control custom-input" name="username" id="username" placeholder="Seu Nome de Usuário">
									<i class="fas fa-user"></i> <!-- Ícone de usuário -->
								</div>
								<div class="form-group mt-3 input-group-icon">
									<input type="password" name="password" class="form-control custom-input" id="senha" placeholder="Senha">
									<i class="fas fa-lock"></i> <!-- Ícone de cadeado -->
									<button type="button" class="btn btn-sm" id="togglePassword" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: none; border: none;"><i class="fas fa-eye"></i></button> <!-- Botão para mostrar/esconder senha -->
								</div>
								<div class="form-group form-check mt-3 d-flex justify-content-between align-items-center">
									<div class="d-flex align-items-center">
										<input type="checkbox" class="form-check-input" id="lembrarConta">
										<label class="form-check-label text-muted-custom" for="lembrarConta">Lembrar conta</label>
									</div>
									<a href="/admin/recover.php/" class="text-muted-custom">Esqueci a minha senha</a>
								</div>
								<div class="form-group mt-3 col-12 text-center">
									<button type="submit" class="btn btn-warning btn-block mt-3">Acessar conta</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</section>
	</main>

	<!-- Modal para Mensagens de Erro -->
	<div class="modal fade " id="errorMessageModal" tabindex="-1" aria-labelledby="errorMessageModalLabel" aria-hidden="true" style="">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="errorMessageModalLabel">Erro ao Entrar</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">

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


	<!-- Scripts comuns -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>


	<script>
		$(document).ready(function() {
			$('#togglePassword').click(function() {
				// Alterna o tipo de input
				var fieldType = $('#senha').attr('type');
				if (fieldType == 'password') {
					$('#senha').attr('type', 'text');
					$('#togglePassword i').toggleClass('fa-eye fa-eye-slash'); // Alterna os ícones
				} else {
					$('#senha').attr('type', 'password');
					$('#togglePassword i').toggleClass('fa-eye fa-eye-slash'); // Alterna os ícones
				}
			});
		});
	</script>

	<script>
		document.addEventListener('DOMContentLoaded', function() {
			var btnClose = document.querySelector('#errorMessageModal .btn-close');
			if (btnClose) {
				btnClose.addEventListener('click', function() {
					var modal = document.getElementById('errorMessageModal');
					modal.classList.remove('show', 'd-block');
					modal.style.display = 'none';
				});
			}
		});
	</script>
	<script>
		$(document).ready(function() {
			$('#login-frm').submit(function(e) {

				e.preventDefault()
				var _this = $(this)
				var el = $('<div>')
				el.addClass('alert alert-dark err_msg')
				el.hide()
				$('.err_msg').remove()
				$.ajax({
					url: _base_url_ + "class/Auth.php?action=login",
					method: 'POST',
					type: 'POST',
					data: new FormData($(this)[0]),
					dataType: 'json',
					cache: false,
					processData: false,
					contentType: false,
					error: err => {
						//console.log(err)
						alert('Erro na requisição')
					},
					success: function(resp) {
						if (resp.status == 'success') {
							location.href = ('./')
						} else if (!!resp.msg) {
							el.html(resp.msg)
							el.show('slow')
							_this.prepend(el)
							$('html, body').scrollTop(0)
						} else {
							alert('Usuário ou senha inválido')
							//console.log(resp)
						}
					}
				})
			})
		})
	</script>
</body>

</html>
