<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['ChangePin'])){
	if($bankUser->change_user_pin(account_number,$_POST['old_password'],$userdata['transfer_code'],$_POST['psw'])){
		echo modal_alert('Successful','Pin Changed Successful!','success');

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

    <script src="/js/validation.js"></script>
    
	<div class="container p-4"><h2>Change PIN</h2>
		<div class="bg-white p-4 rounded shadow-sm mt-4">
			<form action="/account/changepin" method="POST" class="validate" autocomplete="off" id="changePwdform">
				<p>If you notice any suspicious activity, we recommend changing your PIN.</p>
				<div class="form-group">
					<input type="password" name="old_password" minlength ="4" placeholder="Current PIN" required class="form-control">
				</div>
				<div class="form-group">
					<input type="password" placeholder="New PIN" id="psw" name="psw" minlength ="4"  title="Must not contain alphabet and special, and at least 4 or more characters" class="form-control" required>
				</div>
        		<input type="submit" value="Submit" name="ChangePin" class="btn btn-primary" style="border:0">
			</form>
		</div>
	</div>	
</div>