<!DOCTYPE html>
<html lang="en">
<head>
    <title>Change Password - Golf Evolution</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php include 'member_layout/analyticscode.php' ?>
    <link rel="icon" href="<?= base_url()."/public/"; ?>assets/member_images/favicon.png" sizes="192x192" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="<?= base_url()."/public/"; ?>assets/member_css/front-style.css">        
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> 
    <style>

.show-password{
    position:relative;
}
.field-icon {
    right:25px;
    top:42px;
    position: absolute;
}

</style>
      <?php
        header('Cache-Control: no-cache, no-store, must-revalidate');
        header('Pragma: no-cache');
        header('Expires: 0');
        ?>
</head>
<body class="forgetpassword">
<?php include 'member_layout/header.php' ?>
<section class="pt-5 pb-5">
    <div class="container">
        <div class="recovery-account">
            <h1>Set Password</h1>
            <form method="post" action="<?= base_url()."update_password"; ?>" role="form" class="parsley-examples">
            <input id="id" type="hidden" value="<?= session()->getTempdata('id'); ?>" name="id">

            <?php if(session()->getTempdata('mail_success')):?>
               <div class="alert alert-success" >
               <?= session()->getTempdata('mail_success'); ?>
               </div>
               <?php endif;?>
               
               
               <?php if(session()->getTempdata('error')):?>
               <div class="alert alert-danger" >
               <?= session()->getTempdata('error'); ?>
               </div>
            <?php endif;?>

                <div class="row">
                    <div class="col-12 mb-3">
                        <label for="email">Email</label>
                        <input type="email" id="email" class="form-control" value="<?= session()->getTempdata('email'); ?>" readonly>
                    </div>
                    <div class="col-12 mb-4 show-password">
                        <label for="toggle-password">Password</label>
                        <span toggle="#hori-pass1" id="toggle-password"  class="fa fa-fw fa-eye field-icon toggle-password"></span>
                        <input type="password" id="hori-pass1" name="password" class="form-control" placeholder="Password">
                        <div class="aro-pswd_info">
				<div id="pswd_info">
					<h4>Password requirements</h4>
					<ul>
						<li id="letter" class="invalid">At least <strong>one letter</strong></li>
						<li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
						<li id="number" class="invalid">At least <strong>one number</strong></li>
						<li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
						<li id="space" class="invalid">use any one<strong> [~,!,@,#,$,%,^,&,*,-,=,.,;,']</strong></li>
					</ul>
				</div>
			</div>

                    </div>
                    <div class="col-12 mb-4 show-password">
                        <label for="toggle-password1">Confirm Password</label>
                        <input type="password" id="hori-pass2" data-parsley-equalto="#hori-pass1" class="form-control" placeholder="Enter confirm password" required>
                        <span toggle="#hori-pass2" id="toggle-password1"  class="fa fa-fw fa-eye field-icon toggle-password"></span>
                    </div>      
                </div> 
                <button type="submit" class="forget-submit">Submit</button>   
            </form>
        </div>    
    </div>    
</section>    
<?php include 'member_layout/footer.php' ?>

<script>
$(document).ready(function(){
	
	$('#hori-pass1').keyup(function() {
		var pswd = $(this).val();
		
		//validate the length
		if ( pswd.length < 8 ) {
			$('#length').removeClass('valid').addClass('invalid');
		} else {
			$('#length').removeClass('invalid').addClass('valid');
		}
		
		//validate letter
		if ( pswd.match(/[A-z]/) ) {
			$('#letter').removeClass('invalid').addClass('valid');
		} else {
			$('#letter').removeClass('valid').addClass('invalid');
		}

		//validate capital letter
		if ( pswd.match(/[A-Z]/) ) {
			$('#capital').removeClass('invalid').addClass('valid');
		} else {
			$('#capital').removeClass('valid').addClass('invalid');
		}

		//validate number
		if ( pswd.match(/\d/) ) {
			$('#number').removeClass('invalid').addClass('valid');
		} else {
			$('#number').removeClass('valid').addClass('invalid');
		}
		
		//validate space
		if ( pswd.match(/[^a-zA-Z0-9\-\/]/) ) {
			$('#space').removeClass('invalid').addClass('valid');
		} else {
			$('#space').removeClass('valid').addClass('invalid');
		}
		
	}).focus(function() {
		$('#pswd_info').show();
	}).blur(function() {
		$('#pswd_info').hide();
	});
	
});
</script>    
<script>
    $("#toggle-password").click(function() {
    $(this).toggleClass("fa-eye fa-eye-slash");
    var input = $($(this).attr("toggle"));
    if (input.attr("type") == "password") {
        input.attr("type", "text");
    } 
    else {
        input.attr("type", "password");
    }
    });

    $("#toggle-password1").click(function() {
      $(this).toggleClass("fa-eye fa-eye-slash");
      var input = $($(this).attr("toggle"));
      if (input.attr("type") == "password") {
        input.attr("type", "text");
      } 
      else {
        input.attr("type", "password");
      }
    });

    $("#hori-pass1").change(function() {
        const passwordPattern = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,}/;
        if (passwordPattern.test($('#hori-pass1').val()))
        {
            $('#pass-err').html("")
        }
        else
        {
            $('#pass-err').html("Must contain at least one number &#013;and one uppercase &#013;and one special character like !@#$%^&*() &#013;and lowercase letter,&#013;and at least 8 or more characters").css('color','red')
        }
    });
</script>
 <!-- Plugin js-->
 <script src="<?= base_url()."/public"; ?>/assets/libs/parsleyjs/parsley.min.js"></script>

 <!-- Validation init js-->
 <script src="<?= base_url()."/public"; ?>/assets/js/pages/form-validation.init.js"></script>
 </body>
</html>