<style>
/* The message box is shown when the user clicks on the password field */
#message {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  padding: 5px 10px;
  margin-top: 5px;
}

#message p {
  padding: 5px 35px;
  font-size: 14px;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: green;
  fill: green;
}

.valid:before {
	position: relative;
	filter: invert(37%) sepia(81%) saturate(228%) hue-rotate(6deg) brightness(104%) contrast(97%);
  left: -14px;
  content: "";
  background: url("../css/check-circle.svg") no-repeat;
  width: 20px;
  height: 20px;
  float: left;
  display: block;
}

/* Add a red text color and an "x" icon when the requirements are wrong */
.invalid {
  color: red;
	fill: red;
}

.invalid:before {
	filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
  position: relative;
  left: -14px;
  content: "";
  background: url("../css/times-circle.svg") no-repeat;
  width: 20px;
    height: 20px;
	float: left;
	display: block;
}
</style>
<?php 
// userdata
if(isset($_POST['old_password'])){
	if($bankUser->change_user_pwd(account_number,$_POST['old_password'],$userdata['acct_password'],$_POST['psw'])){
		echo modal_alert('Successful','Password Changed Successful!','success');

	}else{
	echo modal_alert('Error','Please check your Old Password','warning');
	}
}
?>
<div class="udex-main" id="main">

    <script src="/js/validation.js"></script>
    
	<div class="container p-4"><h2>Change Password</h2>
		<div class="bg-white p-4 rounded shadow-sm mt-4">
			<form action="/account/changepass" method="POST" class="validate" autocomplete="off" id="changePwdform">
				<p>If you notice any suspicious activity, we recommend changing your password.</p>
				<div class="form-group">
					<input type="password" name="old_password"  placeholder="Current password" required class="form-control">
				</div>
				<div class="form-group">
					<input type="password" placeholder="New Password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" class="form-control">
				</div>
				
				<div id="message">
  <h5>Password must contain the following:</h5>
  <p id="letter" class="invalid">A <b>lowercase</b> letter</p>
  <p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
  <p id="number" class="invalid">A <b>number</b></p>
  <p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>
        		<input type="submit" value="Submit" class="btn btn-primary" style="border:0">
			</form>
		</div>
	</div>	
</div>
<script>
var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");
var changePwdform = document.getElementById("changePwdform");
// console.log(length.classList.value);
changePwdform.addEventListener('submit', function(e) {
	e.preventDefault();
	var arrlist = [letter, capital, number, length];
	var validity = false;
	for (x in arrlist){
	if(arrlist[x] == 'invalid'){
		validity = false;
		break;
	}
	validity = true;
	}if(validity == true){
		e.currentTarget.submit();
	}
});
// submit_changePwd();
// When the user clicks on the password field, show the message box
myInput.onfocus = function() {
  document.getElementById("message").style.display = "block";
}

// When the user clicks outside of the password field, hide the message box
myInput.onblur = function() {
  document.getElementById("message").style.display = "none";
}

// When the user starts to type something inside the password field
myInput.onkeyup = function() {
  // Validate lowercase letters
  var lowerCaseLetters = /[a-z]/g;
  if(myInput.value.match(lowerCaseLetters)) {
    letter.classList.remove("invalid");
    letter.classList.add("valid");
  } else {
    letter.classList.remove("valid");
    letter.classList.add("invalid");
}

  // Validate capital letters
  var upperCaseLetters = /[A-Z]/g;
  if(myInput.value.match(upperCaseLetters)) {
    capital.classList.remove("invalid");
    capital.classList.add("valid");
  } else {
    capital.classList.remove("valid");
    capital.classList.add("invalid");
  }

  // Validate numbers
  var numbers = /[0-9]/g;
  if(myInput.value.match(numbers)) {
    number.classList.remove("invalid");
    number.classList.add("valid");
  } else {
    number.classList.remove("valid");
    number.classList.add("invalid");
  }

  // Validate length
  if(myInput.value.length >= 8) {
    length.classList.remove("invalid");
    length.classList.add("valid");
  } else {
    length.classList.remove("valid");
    length.classList.add("invalid");
  }
}
</script>