<?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>Forgot Password</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;
		        }

		        
		    </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>Forgot Password</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" id="resetForm"  name="signin"  method="post" onsubmit = "event.preventDefault();">

				                <p class="h4 mb-4">Forgot Password</p>

                                <div class="alert alert-danger" role="alert" id="invalid-email-error">An error occured to send an email, please try again.</div>
                                <div class="alert alert-danger" role="alert" id="disabled-email-error"><b>Your account has been disabled !!</b><br>Please contact your educational institution or the researcher via 'Contact Us'.</div>
				                
                                <div class="alert alert-primary" role="alert" id="email-sent">Please check your inbox for the instruction to reset your password.</div>
				                
				                <br/>
				                <!-- Email -->
					                <input id="email" name="email" type="text" class="form-control mb-4" placeholder="Enter Your Email">
					                	<div class="alert alert-danger" role="alert" id="email-error">Invalid Email</div>
					                <!-- <div class="alert alert-warning" role="alert" id="user-check">Email or username does not exists!!</div> -->
				                
				                <!-- Password -->
					                
					                

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

				                <!-- Register -->
					                <p>Not a member?
					                    <a href="<?php echo dir_root; ?>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>


		<!-- ==========  <- Loading-Screen ->  ========== -->
		<?php include_once(dir_rootPHP.'_global/tools/screenLoader.php'); ?>

		<!-- Scripts (custom) -->
			<script>
		        
                $(document).ready(function(){

                    $("#email-error").css("display","none");
                    $("#invalid-email-error").css("display","none");
                    $("#disabled-email-error").css("display","none");
                    $("#email-sent").css("display","none");

                    $("#email").blur(function(){
                        //this is just to check if user has entered an email
                        var email = $("#email").val();
                        $("#email").val(email.trim());
                        email = email.trim();

                        var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

                        if(email.match(mailformat)){
                            $("#email-error").css("display","none");
                        }else{
                            $("#email-error").css("display","block");
                        }

                    });

                    $("#resetForm").submit(function(){

                    	var email = $("#email").val();
                        $("#email").val(email.trim());
                        email = email.trim();

                        var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

                        if(email.match(mailformat)){
                            $("#email-error").css("display","none");

                            //Here we will fetch the email and verify if it exists
                            loader_show();

                            $.ajax({
								type :'POST',
								url  :'<?php echo dir_root; ?>/php/request/post_passwordReset.php?email=' + email,
								date :'',
								success:function(response){
									// console.log(m);
									loader_hide();

									if(response == 1 || response == "1"){	// email Sent

                                        $("#invalid-email-error").css("display","none");
                                        $("#disabled-email-error").css("display","none");
                                        $("#email-sent").css("display","block");
                                        $("#email-sent").text();

                                    }
                                    else if(response == 2){	// account Disabled

                                        $("#invalid-email-error").css("display","none");
                                        $("#email-sent").css("display","none");
                                        $("#disabled-email-error").css("display","block");

                                    }
                                    else{	// Error

                                        $("#email-sent").css("display","none");
                                        $("#disabled-email-error").css("display","none");
                                        $("#invalid-email-error").css("display","block");
                                       
                                    }
								}
							});

                        }else{
                            $("#email-error").css("display","block");
                        }
                    });
                });


		    </script>

	</body>
</html>