<?php include_once($_SERVER['DOCUMENT_ROOT'].'/_ps2020/_global/dir_root.php'); ?>
<?php include_once($_SERVER['DOCUMENT_ROOT'].'/_ps2020/config/cfg_loggedUser.php'); ?>

<!DOCTYPE HTML>
<!--
	Hielo by TEMPLATED
	templated.co @templatedco
	Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
	<head>
		<title>Sign In | GEESE</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />

		<?php include_once(dir_rootPHP.'_global/icon.php'); ?>


		<!-- libs -->
			<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
			<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/fontAwesome/css/font-awesome.min.css" /> -->
			<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/animate.css" /> -->

			<!-- Font Awesome -->
		    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
		    <!-- Google Fonts -->
		    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
		    <!-- Bootstrap core CSS -->
		    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
		    <!-- Material Design Bootstrap -->
		    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">

			<!-- animation -->
				<link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate.css" />
				<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_bounce.css" /> -->
				<link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_fade.css" />
				<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_flip.css" /> -->
				<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_other.css" /> -->
				<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_rotate.css" /> -->
				<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_slide.css" /> -->
				<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_zoom.css" /> -->

		<!-- css -->
			<link rel="stylesheet" href="<?php echo dir_root; ?>css/template-hielo/main.css" />

		<!-- css (custom) -->
			<link rel="stylesheet" href="<?php echo dir_root; ?>css/henry_style.css" />
			<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>css/tanuj_style.css" /> -->
			<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>css/karl_style.css" /> -->
			<!-- <link rel="stylesheet" href="<?php echo dir_root; ?>css/harsh_style.css" /> -->

			<style>
				html, body{
					height: 100%;
				}

		        #user-error {
		            display: none;
		        }

		        #p-error {
		            display: none;
		        }

		        .ctm-outer{
		        	background-color: white;
		        	box-shadow: 0 0 15px #dfdfdf;
		        }

		        .alert-warning{
		        	/*color: black;
		        	background-color: #ffcdcd;
		        	border-color: #ffbaba;*/
		        	/*color: white;
		        	background-color: #ff2b2b;
		        	border-color: red;*/
		        }
		        /*.alert-danger{
		        	color: white;
		        	background-color: #ff2b2b;
		        	border-color: red;
		        }*/
		    </style>

	</head>
	<!-- <body class="subpage"> -->
	<body>

		<!-- Header | Nav -->
			<?php include_once(dir_rootPHP.'_global/navbar/navbar.php'); ?>
			<?php include_once(dir_rootPHP.'_global/navbar/navbar-mobile.php'); ?>

		
		<!-- Page-Title -->
			<section id="One" class="wrapper style3" style="padding-top: 9rem;">
				<div class="inner">
					<header class="align-center">
						<p>Greenscape Environmental Experience & Learning Survey Experiments</p>
						<h2>Sign-In</h2>
					</header>
				</div>
			</section>

		<!-- Content -->
			<section id="two" class="wrapper style2" style="padding: 8% 0 6% 0;">
				<div class="inner">
				
					<div class="row d-flex justify-content-center">

				        <!--Grid column-->
				        <div class="col-md-6">

				            <!-- Default form login -->
				            <form class="text-center border border-light p-5 ctm-outer" action="<?php echo dir_root; ?>php/request/post_signIn.php" name="signin" onsubmit="return checkSubmission();" method="post">

				                <p class="h4 mb-4">Sign In</p>

				                <?php
				                	$msg = empty($_GET['msg']) ? '' : $_GET['msg'];

				                	if($msg != ''){
				                ?>
				                		<div class='alert alert-warning' role='alert' ><?php echo $msg; ?></div>
				                <?php
				                	}
				                ?>
				                
				                <br/>
				                <!-- Email -->
					                <input id="email" name="email" type="text" class="form-control mb-4" placeholder="E-mail or Username" onblur="checkUsername();">
					                	<div class="alert alert-danger" role="alert" id="user-error">Email or username is required</div>
					                <!-- <div class="alert alert-warning" role="alert" id="user-check">Email or username does not exists!!</div> -->
				                
				                <!-- Password -->
					                <input id="password" name="password" type="password" class="form-control mb-4" placeholder="Password" onblur="checkPassword();">
					                	<div class="alert alert-danger" role="alert" id="p-error">Password is required</div>

					                <div class="d-flex justify-content-around">
					                    <!-- Remember me -->
					                    <!-- <div>
					                        <div class="custom-control custom-checkbox">
					                            <input type="checkbox" class="custom-control-input" id="defaultLoginFormRemember">
					                            <label class="custom-control-label" for="defaultLoginFormRemember">Remember me</label>
					                        </div>
					                    </div> -->
					                    <!-- Forgot password -->
					                    <div>
					                        <a href="resetPassword.php">Forgot password?</a>
					                    </div>
					                </div>

				                <!-- Sign in button -->
				                	<button id="sign-in" class="btn btn-info btn-block my-4" type="submit" style="background-color: #548B54 !important;">Sign-In</button>

				                <!-- Register -->
					                <p>Not a member?
					                    <a href="pre-sign-up.php">Register</a>
					                </p>

				            </form>
				            <!-- Default form login -->

				        </div>
				        <!--Grid column-->

				    </div>
				    <!--Grid row-->

				</div>
			</section>
			

		<!-- Footer -->
			<?php include_once(dir_rootPHP.'_global/footer/footer.php'); ?>

		<!-- Scripts -->
			<script src="<?php echo dir_root; ?>js/template-hielo/jquery.min.js"></script>
			<script src="<?php echo dir_root; ?>js/template-hielo/jquery.scrollex.min.js"></script>
			<script src="<?php echo dir_root; ?>js/template-hielo/skel.min.js"></script>
			<script src="<?php echo dir_root; ?>js/template-hielo/util.js"></script>
			<script src="<?php echo dir_root; ?>js/template-hielo/main.js"></script>

		<!-- Scripts (custom) -->
			<script>
		        function checkUsername() {
		            var user = document.forms["signin"]["email"].value.trim();

		            document.forms["signin"]["email"].value = user;

		            if (user.length < 4) {
		                document.getElementById("user-error").style.display = "block";
		                return false;

		            } else {
		                document.getElementById("user-error").style.display = "none";
		                return true;

		            }

		        }

		        function checkPassword() {
		            var pass = document.forms["signin"]["password"].value.trim();

		            document.forms["signin"]["password"].value = pass;

		            if (pass.length == 0) {
		                document.getElementById("p-error").style.display = "block";
		                return false;

		            } else {
		                document.getElementById("p-error").style.display = "none";
		                return true;

		            }

		        }

		        function checkSubmission(e){
		            var username = checkUsername();
		            var password = checkPassword();

		            if(username && password){
		                return true;
		            }else{

		                e.preventDefault();

		                return false;
		            }

		        }
		    </script>

	</body>
</html>