<style>
    .field-icon {
    float: right;
    margin-left: -35px;
    margin-top: 10px;
    margin-right: 12px;
    position: relative;
    z-index: 3;
}
</style>
<div class="account-pages mt-5 mb-5">
            <div class="container">
                <div class="row justify-content-center">

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-body">
                                <h3 class="header-title" style="text-align: center;">Change Password</h3>
                                <p class="sub-header">
                                </p>

                                <form method="post" action="<?= base_url()."user_password_change"; ?>" role="form" class="parsley-examples">
                                <input id="id" type="hidden" value="<?= $userdata->id; ?>" name="id">
                                <input id="email" type="hidden" value="<?= $userdata->email; ?>" name="email">

                                <?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="form-group row">
                                        <label for="hori-pass1" class="col-4 col-form-label">Old Password<span class="text-danger">*</span></label>
                                        <div class="col-7">
                                        <input id="hori-pass" type="password" placeholder="Password" required
                                                class="form-control" name="old_password">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="hori-pass1" class="col-4 col-form-label">Password<span class="text-danger">*</span></label>
                                        <div class="col-7">
                                            <input id="hori-pass1" type="password" placeholder="Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,}" 
                                            title="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"  required
                                                class="form-control" name="password">
                                        </div>
                                        <span toggle="#hori-pass1" id="toggle-password"  class="fa fa-fw fa-eye field-icon toggle-password"></span>    

                                    </div>
                                    <div class="form-group row">
                                        <label for="hori-pass2" class="col-4 col-form-label">Confirm<br> Password
                                            <span class="text-danger">*</span></label>
                                        <div class="col-7">
                                            <input data-parsley-equalto="#hori-pass1" type="password" required
                                                placeholder="Password" class="form-control" id="hori-pass2">
                                        </div>
                                        <span toggle="#hori-pass2" id="toggle-password1"  class="fa fa-fw fa-eye field-icon toggle-password"></span>
                                    </div>
                                  

                                    
                                    <div class="form-group row">
                                        <div class="col-8 offset-4">
                                            <button type="submit" class="btn btn-primary waves-effect waves-light mr-1">
                                                Submit
                                            </button>
                                            <button type="reset" onclick="history.back()"
                                                    class="btn btn-secondary waves-effect">
                                                Cancel
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div> <!-- end card-box -->

                    </div> <!-- end col -->
                </div>
                <!-- end row -->
            </div>
            <!-- end container -->
        </div>

        <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");
              }
            });
        </script>