<style>
	form label.error, #secNameerr {
		color : red;
	}
</style>
<main class="wraper responsive-width" id="main">
	<!----admin template Exam---->
	<div class="admin_tempblock">
		<div class="admin_tempsec">
			<div class="admin_sec">

				<form action="<?php echo base_url() ?>/admin/admin-change-password"  method="post" id="pwdForm">

					<?php if($this->session->flashdata('success')) { ?>

						<div class="alert alert-success alert-dismissible fade show" role="alert">
							<p><?php echo $this->session->flashdata('success') ?></p>
							<button type="button" class="close" data-dismiss="alert" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>

					<?php } ?>
					<?php if($this->session->flashdata('failed')) { ?>

		                <div class="alert alert-danger alert-dismissible fade show" role="alert">
		                    <p><?php echo $this->session->flashdata('failed') ?></p>
		                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
		                        <span aria-hidden="true">&times;</span>
		                    </button>
		                </div>

		            <?php } ?>

						<div class="subsec_sec">
							<div class="subject_l">
								<div class="subject_lsec">
									<div class="subject_lhead"><?php echo $title ?></div>
									<div class="subject_lformarea">
										<div class="form-group">
											<label for="">Password<span class="text-danger font-weight-bold">*</span></label>
											<div class="password-wrp">
						                        <input type="password" name="password" id="password" class="form-control" placeholder="Enter your password">
						                        <span class="passwrd-icon icon-y" id="icon_one"><i class="far fa-eye"></i></span>
						                    </div>
										</div> 
										<div class="form-group">
											<label for="">Retype New Password<span class="text-danger font-weight-bold">*</span></label>
											<div class="password-wrp">
						                        <input type="password" name="confirm_password" id="confirm_password" class="form-control" placeholder="Enter your password">
						                      	<span class="passwrd-icon icon-y" id="icon_two"><i class="far fa-eye"></i></span>
						                    </div>

										</div>
										<input type="submit" class="subject_addbtn" value="Save">
									</div>
								</div>
							</div>
						</div>
					</form>				
			</div>
		</div>
	</div>
	<!----admin template Exam end---->
</main>
<!--End right-top side-->

<script>
    $("#icon_one").click(function() {

        $("#icon_one").toggleClass("eye-icon");

        var input = $("#password");
        if (input.attr("type") == "password") {
            input.attr("type", "text");
        } else {
            input.attr("type", "password");
        }
    });

    $("#icon_two").click(function() {

        $("#icon_two").toggleClass("eye-icon");

        var input = $("#confirm_password");
        if (input.attr("type") == "password") {
            input.attr("type", "text");
        } else {
            input.attr("type", "password");
        }
    }); 
</script>

<script>

    jQuery.validator.addMethod("passwordregex", function(value, element) {
  return this.optional( element ) || /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!#%*?&])[A-Za-z\d@$#!%*?&]{6,16}$/.test( value );
}, 'Your password must be atleast 6 characters long, which inculdes one upper case, one numerical value and one special character.');

    $("#pwdForm").validate({

        ignore: ":hidden",  
        rules: {
            password: {
                required: true,
                minlength: 6,
                maxlength: 16,
                passwordregex:true
            },
            confirm_password : {
                required : true,
                minlength : 6,
                equalTo : '#password'
            }
        },
        messages: {

            password : {
                required : 'Please enter a valid password',
                minlength : 'Password should be more than 6 characters',
                maxlength : 'Password should not exceed 16 Characters'
            },
            confirm_password : {
                required : 'Please re-enter your password',
                equalTo : "Please enter the same password again."
            },

        },
        submitHandler: function(form) {                    
            form.submit();
        }
    });
</script>