<?php 
	include("header.php"); 
    $show_msg      = '';
    $curr_pass      = '';
    $new_pass       = '';
    $confirm_pass   = '';
    if(isset($_POST['reset_now'])){

        $curr_pass      = $_POST['current_password_input'];
        $new_pass       = $_POST['new_password_input'];
        $confirm_pass   = $_POST['confirm_password_input'];

        $get_u_info = mysqli_query($conn, "SELECT * FROM db_users WHERE password='".md5($curr_pass)."' and id=".$_SESSION['loggedin_user']);

        if($get_u_info->num_rows == 0){
            $show_msg = '<p style="color:red">Current Password is incorrect.</p>';
        } else {
            if(md5($curr_pass) == md5($new_pass)){
                $show_msg = '<p style="color:red">New passowrd and old password can not be same.</p>';
            } else {
                mysqli_query($conn, "UPDATE db_users SET password='".md5($new_pass)."', first_time_login=1 WHERE id=".$_SESSION['loggedin_user']);
                $show_msg = '<p style="color:green;font-weight: bold;">Password changed Successfully. <a href="'.$site_url.'" style="color: green;text-decoration: underline;">View Dashboard here.</a></p>';
                echo "<script>alert('Password changed Successfully.!!'); setTimeout(function(){ window.location.href='".$site_url."?signout=1'; },500);</script>";
                $curr_pass      = '';
                $new_pass       = '';
                $confirm_pass   = '';
            }
            
           // header("location:".$site_url."?signout=1");
        }

    }
?>
<div class="body d-flex py-3">
                <div class="container-xxl">
                    <div class="row align-items-center">
                        <div class="border-0 mb-4">
                            <div class="card-header py-3 no-bg bg-transparent d-flex align-items-center px-0 justify-content-between border-bottom flex-wrap">
                                <h3 class="h4 mb-0">Reset Your First Time Password</h3>
                            </div>
                        </div>
                    </div> <!-- Row end  -->
                    
                    <div class="row g-3">
                        <div class="col-12">
                            
                            <div class="tab-content mt-3">
                                <div class="tab-pane active show" id="passwod_settings">
                                    <div class="card mb-3">
                                        <div class="card-header p-3">
                                            
                                        </div>
                                        <div class="card-body">
                                            <form class="row g-3" method="post">
                                                <?= $show_msg; ?>
                                            	<div class="col-12">
                                            		<div class="col-md-4 col-sm-12">
	                                                    <div class="form-group">
	                                                        <label class="form-label">Current Password<span class="text-danger">*</span></label>
	                                                        <input class="form-control" type="password" name="current_password_input" value="<?= $curr_pass; ?>" required=""><i class="pwd-toggle icofont-eye"></i>
                                                            <p class="passwod-meter" style="display:none;"></p>
                                                            
	                                                    </div>
                                                	</div>
                                            	</div>
                                                <div class="col-12">
	                                                <div class="col-sm-4">
	                                                    <div class="form-group">
	                                                        <label class="form-label">New Password<span class="text-danger">*</span></label>
	                                                         <input class="form-control" type="password" name="new_password_input" value="<?= $new_pass; ?>" required=""><i class="pwd-toggle icofont-eye"></i>
                                                             <p class="passwod-meter" style="display:none;"></p>
	                                                    </div>
	                                                </div>
	                                            </div>
	                                            <div class="col-12">
	                                                <div class="col-sm-4">
	                                                    <div class="form-group">
	                                                        <label class="form-label">Confirm Password<span class="text-danger">*</span></label>
	                                                        <input class="form-control cnf_pswd" name="confirm_password_input" value="<?= $confirm_pass; ?>" type="password" required=""><i class="pwd-toggle icofont-eye"></i>
                                                            <p class="passwod-meter" style="display:none;"></p>
                                                            <p style="display: none;" class="cnf_pswd_error">Confirm Password not matched.</p>
                                                            
	                                                    </div>
	                                                </div>
                                                </div>
                                                <div class="col-12 mt-4">
                                                    <button type="submit" class="btn btn-primary reset-btn" name="reset_now" disabled="">Reset Now</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


<style>
p.passwod-meter {
    color: #2c2f34;
    padding: 8px;
    width: 98%;
}

a.lost_password {
    cursor: pointer;
    text-decoration: underline;
}
p.cnf_pswd_error {
    margin-bottom: 0;
    color: red;
    padding-top: 5px;
}
.form-group input.form-control{
    width: 94%;
    display: inline-block;
    border-right: 0px;
    border-radius: 0.25rem 0px 0px 0.25rem;
}
.form-control:focus + i.pwd-toggle {
    background-color: var(--card-color);
    border-color: var(--primary-color);
}
i.pwd-toggle {
    padding: 11px 6px 9px 0px;
    cursor: pointer;
    background: #fff;
    margin-left: -5px;
    border: 1px solid #f0f0f0;
    border-left: 0px;
    border-radius: 0px 0.25rem 0.25rem 0px;
}

@media (max-width:991px){
	.card-body .col-md-4.col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
}
.card-body .col-sm-4 {
    flex: 0 0 50%;
    max-width: 50%;
}
}


</style>            

<?php include("footer.php"); ?>
<script type="text/javascript">
    var is_pwd_ok = 0;
    $(document).on("keyup",".cnf_pswd, input[name='new_password_input']", function(){
        is_pwd_ok = 0;
        if($('.cnf_pswd').val() != ''){
            if($('.cnf_pswd').val() != $("input[name='new_password_input']").val()){
                $('.cnf_pswd_error').show();
            } else {
                 $('.cnf_pswd_error').hide();
                 is_pwd_ok = 1;
            }
        } else {
            $('.reset-btn').attr('disabled','');
        }
    });
    $(document).on("keyup",".form-group input.form-control", function(){ 
            if($('input[name="current_password_input"]').val() != '' && $('.cnf_pswd').val() != '' && $('.cnf_pswd').val() == $("input[name='new_password_input']").val()){ 
                $('.reset-btn').removeAttr('disabled');
            } else {
                $('.reset-btn').attr('disabled','');
            }
    });
    $(document).on("click", ".pwd-toggle", function(){
        var cur_type = $(this).prev('input').attr('type');
        if(cur_type == 'password'){
            $(this).prev('input').attr('type','text');
            $(this).removeClass('icofont-eye');
            $(this).addClass('icofont-eye-blocked');
        } else {
            $(this).prev('input').attr('type','password');
            $(this).removeClass('icofont-eye-blocked');
            $(this).addClass('icofont-eye');
            
        }
      });

      function checkPasswordStrength(pwd) {
            // Initialize variables
            var password = pwd.value;
            var strength = 0;
            var tips = "";

            // Check password length
            if (password.length < 8) {
                tips += "Make the password longer. ";
            } else {
                strength += 1;
            }

            // Check for mixed case
            if (password.match(/[a-z]/) && password.match(/[A-Z]/)) {
                strength += 1;
            } else {
                tips += "Use both lowercase and uppercase letters. ";
            }

            // Check for numbers
            if (password.match(/\d/)) {
                strength += 1;
            } else {
                tips += "Include at least one number. ";
            }

            // Check for special characters
            if (password.match(/[^a-zA-Z\d]/)) {
                strength += 1;
            } else {
                tips += "Include at least one special character. ";
            }

            // Return results
            if (strength < 2) {
                pwd.closest('div').querySelector('p').style.backgroundColor  = "lightcoral";
                return "Easy to guess. " + tips;
            } else if (strength === 2) {
                pwd.closest('div').querySelector('p').style.backgroundColor  = "lightpink";
                return "Medium difficulty. " + tips;
            } else if (strength === 3) {
                pwd.closest('div').querySelector('p').style.backgroundColor  = "lightgray";
                return "Difficult. " + tips;
            } else {
                pwd.closest('div').querySelector('p').style.backgroundColor  = "lightgreen";
                return "Extremely difficult. " + tips;
            }
            }
        $(document).on('keyup', 'form input[type="password"]', function(){
            var curr = this;
            if(curr.value == ''){
                $(this).closest('div').find('.passwod-meter').hide();
            } else {
                $(this).closest('div').find('.passwod-meter').show();
                $(this).closest('div').find('.passwod-meter').text(checkPasswordStrength(curr));
                
            }
        });
</script>