<style>
form label.error, #Nameerr {
    color : red;
}
.subject_l {
    width : 50%;
}
.con-pass {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
    color: #878a8d;
}
.password-wrp {
    position: relative;
}
</style>
<main class="common_margin" id="main">
    <div class="my-info-inner">
    <h3 class="common-heading"> My info</h3> 
        <div class="my-info-wraper">
            <ul class="my-info-header">
                <li><a href="<?php echo base_url() ?>student/my-info">My Info</a></li>
                <li><a href="<?php echo base_url() ?>student/my-course">Course Details</a></li>
                <li><a href="<?php echo base_url() ?>student/my-payments">Fee & Payments</a></li>
            </ul>
            <div class="user-info-row-one mb-4">
                <div class="user-info- mb-4">
                <?php if (empty($result['photo'])) {
                    if (strtolower($result['gender']) == 'female'){ ?>
                    <img src="<?php echo base_url() ?>common_assets/female_image.jpg" class="img-fluid" style="max-width: 200px;">
                    <?php } else { ?>
                    <img src="<?php echo base_url() ?>common_assets/male_image.jpg" class="img-fluid" style="max-width: 200px;">
                    <?php }
                } else if (file_exists('assets_student/application/'.$result['photo'])) { ?>
                        <img src="<?php echo base_url() ?>assets_student/application/<?php echo $result['photo'] ?>" class="img-fluid" style="max-width: 200px;">
                    <?php } else{
                        if ($result['gender'] == 'Female' ) {?>
                            <img src="<?php echo base_url() ?>common_assets/female_image.jpg" class="img-fluid" style="max-width: 200px;">
                     <?php } else{
                     ?>
                        <img src="<?php echo base_url() ?>common_assets/male_image.jpg" class="img-fluid" style="max-width: 200px;">
                    <?php } } ?>
                </div>
                <div class="user-info-one ">
                    <p>Roll Number &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</p>
                    <p><?php echo $result['roll_no'] ?></p>
                </div>
                <div class="user-info-one ">
                    <p>Student ID&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</p>
                    <p><?php echo $result['studentId'] ?></p>
                </div>                
                <div class="user-info-one">
                    <p>Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</p>
                    <p><?php echo $result['name'] ?></p>
                </div>
                <div class="user-info-one">
                    <p>Email&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</p>
                    <p><?php echo $result['email'] ?></p>
                </div>
                <div class="user-info-one">
                    <p>Contact number&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</p>
                    <p><?php echo $result['mobile'] ?></p>
                </div>
                <div class="user-info-one">
                    <p>Date of birth&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</p>
                    <p><?php echo $result['dob'] ?></p>
                </div>
                <div class="user-info-one">
                    <p>Gender&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</p>
                    <p><?php echo $result['gender'] ?></p>
                </div>

            </div>
            <h5 class="emergency-heading">Emergency contacts</h5>
            <div class="user-info-row-two">

                <div class="user-info-one">
                    <p>Parent Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</p>
                    <p><?php echo $result['emergency_contact_name'] ?></p>
                </div>

                <div class="user-info-one">
                    <p>Contact number&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</p>
                    <p><?php echo $result['emergency_contact_number'] ?></p>
                </div>
                <div class="user-info-one">
                    <p>Address&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</p>
                    <p><?php echo $result['address1'] ?></p>
                </div>
                <div class="user-info-one">
                    <p>Parent/Guardian PAN&nbsp;&nbsp;&nbsp;:</p>
                    <p><?php echo $result['parent_pan'] ?></p>
                </div>


            </div>
            <h6><a href="javascript:void(0)" onclick="showPwd()">Reset password</a></h6>

            <div class="reset-pwd-container mt-4" style="display:none">
                <form id="studentForm" class="w-50">
                 <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"><i class="far fa-eye"></i></span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="">Confirm Password<span class="text-danger font-weight-bold">*</span></label>
                    <div class="password-wrp">
                        <input type="password" id="confirm-password" name="confirm_password" class=" form-control" placeholder="Enter your password">
                        <span class="con-pass icon-y eye-icon"><i class="far fa-eye"></i></span>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>

                <div id="success-change" class="text-success mt-3" style="display:none">Password has been successfully updated</div>
                <div id="failure-change" class="text-danger mt-3" style="display:none">Password could not be updated. Please try again!</div>
            </form>
        </div>
    </div>
</div>
</main>

<script>

    $("document").ready(function () {

        $(".my-info-header li a").each(function(index,ele) {
            $(this).parent().removeClass("blue-line");

            let thisEle =  $(this).attr('href').split('/').pop();;

            var current_path = window.location.pathname.split('/').pop();

            if(thisEle == current_path) {
                $(this).parent().addClass("blue-line");
            }
        });

    });

    $(".con-pass").click(function() {

        $(".con-pass").toggleClass("icon-y");

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

    const showPwd = function() {
        $('.reset-pwd-container').show();
    }

    $(".passwrd-icon").click(function() {

        $(".passwrd-icon").toggleClass("icon-y");

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

    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.');

    $("#studentForm").validate({
        ignore: ":hidden",
        rules: {

            password : {
                required : true,
                minlength : 6,
                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'
            },
            confirm_password : {
                required : 'Please re-enter your password',
                equalTo : "Passwords doesn't match. Please provide a password same as above"
            },

        },
        submitHandler: function(form) {

            $('#success-change').hide();
            $('#failure-change').hide();

            var inputValue = $("input[name='password']",form).val();

            inputValue = inputValue.trim().replace(/\s\s+/g, ' ');

            let flag = false;

            $.ajax({
                url : '<?php echo base_url() ?>' +'student/ajax_update_student_password',
                data : {
                    pwd : inputValue,
                },
                type : 'POST',
                async : false,
                success: function(data){
                    console.log(data);
                        if(data == 'success'){
                            $('#success-change').show();
                        } else {
                            $('#failure-change').show();
                        }
                        

                    }
                });               

            }
        });

    </script>