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

<?php

	//THis is check if user can be identified!!
	
	if(!isset($_SESSION['user_id'])){
		header('location: '.dir_root.'resetPassword_email.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>Reset Password | 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;
		        }*/

                .hide {
                    display: none;
                }

                .show {
                    display: block;
                }
		    </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>Reset 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-8">

                        <div id="password-guidelines" class="form-row">
							        	<div class="alert alert-warning" role="alert">
							        		<h4 class="alert-heading">Guidelines For Password</h4>
							        		<p>Password is a combination of small, large alphabets and numbers with special symbols if possible. It should contain at least one of each and should have a length of at least 8 words.</p>
							        		<hr>
							        		<p class="mb-0">Reason: Just to ensure that your account remains secure.</p>
							        	</div>
							        </div>
                            
                            <br/>

				            <!-- Default form login -->
				            <form class="text-center border border-light p-5 ctm-outer" method="POST" name="signin" id="resetPassword" onsubmit="event.preventDefault();">

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

								<div class="alert alert-primary" role="alert" id="success">Your Password Is Updated<br>Page will auto redirect in 3 seconds</div>
								<div class="alert alert-danger" role="alert" id="failure">System Error Has Occured Try Later</div>
				                
				                <br/>
				                <!-- Email -->
					                <input id="password" name="password" type="password" class="form-control mb-4" placeholder="New Password">
					                	<div class="alert alert-danger" role="alert" id="pass-error">Please read the guidelines</div>
					                <!-- <div class="alert alert-warning" role="alert" id="user-check">Email or username does not exists!!</div> -->
				                
				                <!-- Password -->
					                <input id="re-password" name="re-password" type="password" class="form-control mb-4" placeholder="Confirm Password" onblur="checkPassword();">
					                	<div class="alert alert-danger" role="alert" id="repass-error">Password don't Match</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>

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

				                <!-- Register -->
					                <!-- <p>Not a member?
					                    <a href="signup.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>


                


                $(document).ready(function(){

                    $("#password-guidelines").addClass('hide');
                    $("#pass-error").css("display","none");
                    $("#repass-error").css("display","none");

					$("#success").css("display","none");
					$("#failure").css("display","none");


                    $("#password").blur(function(){
                        var password = $("#password").val();
                        $("#password").val(password.trim());
                        password = password.trim();
                        var re = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;

                        if(re.test(password)){
                            $("#password-guidelines").addClass('hide');
                            $("#pass-error").css("display","none");
                        }else{
                            $("#password-guidelines").removeClass('hide');
                            $("#pass-error").css("display","block");
                        }
                    });

                    $("#re-password").blur(function(){
                        var repassword = $("#re-password").val();
                        $("#re-password").val(repassword.trim());
                        repassword = repassword.trim();
                        var password = $("#password").val();
                        password = password.trim();
                        if(password == repassword){
                            $("#repass-error").css("display","none");
                        }else{
                            $("#repass-error").css("display","block");
                        }
                    });

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

                        var password = $("#password").val();
                        var repassword = $("#re-password").val();
                        password = password.trim();
                        repassword = repassword.trim();
                        $("#password").val(password.trim());
                        $("#re-password").val(repassword.trim());
                        var re = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/; 
                        if(re.test(password)){

                            $("#password-guidelines").css("display","none");
                            $("#pass-error").css("display","none");

                            //SO password is on the rules defined
                            if(password == repassword){
                                //Than we update the user password
                               
                                $("#repass-error").css("display","none");                                
                                
								var xmlhttp = new XMLHttpRequest();
								xmlhttp.onreadystatechange = function(){

									if(this.readyState == 4 && this.status == 200){
										
										var response = this.responseText;
										if(response == 1 || response == "1"){
											//This means the password of the user has been updated
											$("#success").css("display","block");
											$("#failure").css("display","none");
											setInterval(function(){
												window.location.replace("<?php echo dir_root; ?>sign-in.php");
											},3000);
											
										}else{ //respose == 0
											//this means something went wrong
											$("#failure").css("display","block");
											$("#success").css("display","none");
										}
									}
								};
								xmlhttp.open("POST","<?php echo dir_root; ?>/php/request/post_passwordUpdate.php?pass=" + password, false);
								xmlhttp.send();
                            }else{  
                                //this means we show that password doesn't match
                                $("#repass-error").css("display","block");
                            }
                        }else{
                            $("#password-guidelines").removeClass("hide");
                            $("#pass-error").css("display","block");
                        }
                        //just remove this over here
                    });

                });

		        

		        
		    </script>

	</body>
</html>