<?php
use App\Libraries\MyEncrypt;
use App\Models\CommonModel;
$session = session();
$validation =  \Config\Services::validation();
$this->db = db_connect();

$CommonModel = model('CommonModel');
$header_data = $CommonModel->GetSiteSettings('site');
if(!$header_data){
	$header_data = $CommonModel->defaultlangSettingall('site');
}
foreach ($header_data as $row) 
{
	$headers[$row->site_key] = $row->site_value;
}
?>
<!doctype html>
<html lang="en" translate="no" class="w-[640px] mx-auto md:w-full">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $headers['site_meta_title'];?></title>
<!--Basic Bootstrap-->
<link href="<?php echo base_url();?>/styles/web_style/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!--Font icons-->
<link href="<?php echo base_url();?>/styles/web_style/css/all.css"  rel="stylesheet" type="text/css">
<!--Carousel Slider-->
<link href="<?php echo base_url();?>/styles/web_style/css/owl.carousel.min.css" rel="stylesheet" type="text/css">
<link href="<?php echo base_url();?>/styles/web_style/css/owl.theme.default.min.css" rel="stylesheet" type="text/css">
<!--fonts-->
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
<!--Theme CSS -->
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>/styles/web_style/css/style.css">
<style>
.user-box {
  position: relative;
  margin-bottom: 30px;
}
.user-box input {
    display: block;
  width: 100%;
  padding: 15px 10px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  background-color: #2e2d2c;
  background-clip: padding-box;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 10px;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.user-box input:focus ~ label,
.user-box input:valid ~ label {
  transform: translateY(-20px);
  font-size: 14px;
  color: #333;
}

.password-toggle-icon {
  position: absolute;
  top: 68%;
  right: 10px;
  color:#fff;
  transform: translateY(-50%);
  cursor: pointer;
}

.password-toggle-icon i {
  font-size: 18px;
  line-height: 1;
  color: #fff;
  transition: color 0.3s ease-in-out;
  margin-bottom: 20px;
}

.password-toggle-icon i:hover {
  color: gold;
}

.password-toggle-icon1 {
  position: absolute;
  top: 68%;
  right: 10px;
  color:#fff;
  transform: translateY(-50%);
  cursor: pointer;
}

.password-toggle-icon1 i {
  font-size: 18px;
  line-height: 1;
  color: #fff;
  transition: color 0.3s ease-in-out;
  margin-bottom: 20px;
}

.password-toggle-icon1 i:hover {
  color: gold;
}

.help-block 
{
  color:red;
  font-size:12px;
  font-weight:bold;
}

p.frgtpwd1 {
  background:#8DC540 !important
}
p.frgtpwd1 i {
  background:#8DC540 !important;
  color:#fff !important
}
p.frgtpwd {
  font-size: 13px;
  color: #fff;
  text-align: left;
  line-height: 24px;
  margin: 0 0 1em 0;
  background: #22313F;
  border-radius: 2px;
  padding:10px 39px 10px 10px;
  font-weight: 600;
  position: relative;
}
p.frgtpwd i {
  position: absolute;
  top: 0;
  right: 0;
  padding:15px 8px 8px 8px;
  font-size: 14px;
  background: #F5AB35;
  color: #22313F;
  height: 100%;
}
p.frgtpwdred {
  background:#EB5055 !important
}
p.frgtpwdred i {
  background:#EB5055 !important
}
.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
    font-size: 12px;
}
</style>
</head>
<body class="reg-overflow">
<!---header---->
<section class=" pb-1 banner-bg login-page">
         <div class="container">
            <div class="innerpages-bg relative h-full m-auto md:w-full ">
               <div class="row bg-black">
               <div class="col-3">
                     <div class="header-arrow">
                        <a href="<?php echo base_url();?>/login"><img src="<?php echo base_url();?>/styles/web_style/images/header-arrow.png" alt=""></a> 
                     </div>
                  </div>
                  <div class="col-9">
                     <div class="reg-logo">
                        <img src="<?php echo base_url();?>/styles/web_style/images/login-logo.png" alt="" style="width:80%;">
                     </div>
                  </div>
                  </div>
               </div>
<div class="login-scroller">
    <div class="reg-page">
    <div class="row">
    <div class="col-lg-12">
      <div class="title py-2 text-center">
        <h2 class="fw-bold text-primary mb-3 ">Change Password</h2>
       
      </div>
    </div>
</div>

<form class="steps-validation reset" id="reset" method="post" action="<?php echo base_url();?>/user/login/resetupdate">
<div class="form-page">
<div class="row">

<?php 
$session = \Config\Services::session();

if($session->getFlashData('success_message')) {?>
<p class="frgtpwd frgtpwd1"><i class="fa fa-thumbs-up"></i><?php echo $session->getFlashData('success_message');?></p>
<?php } elseif ($session->getFlashData('error_message')) { ?>
<p class="frgtpwd frgtpwd1 frgtpwdred"><i class="fa fa-thumbs-down"></i><?php echo $session->getFlashData('error_message');?></p>
<?php } else { }?>
  <div class="col-sm-12">
    
    <div class="mb-2 form-block  form-group user-box">
                                <input type="password" class="form-control" placeholder="New Password" name="password" id="password">
                                <span class="password-toggle-icon"><i class="fas fa-eye-slash"></i></span>
                                <div id="pass_error" class="help-block"></div>
                            </div>
                           <div class="rules">
                              <div id="disp1" style="display:none;">
                                 <p class="text-success mb-0">
                                    <iconify-icon icon="mdi:tick-circle-outline"></iconify-icon>
                                    Please ensure your entry consists of at least 8 characters
                                 </p>
                              </div>
                              <div id="disp1a">
                                 <p class="text-white mb-0">
                                    <iconify-icon icon="clarity:success-standard-solid"></iconify-icon>
                                    Please ensure your entry consists of at least 8 characters
                                 </p>
                              </div>
                              <div id="disp2" style="display:none;">
                                 <p class="text-success mb-0">
                                    <iconify-icon icon="mdi:tick-circle-outline"></iconify-icon>
                                    Please include at least 1 uppercase character in your entry.
                                 </p>
                              </div>
                              <div id="disp2a">
                                 <p class="text-white mb-0">
                                    <iconify-icon icon="clarity:success-standard-solid"></iconify-icon>
                                    Please include at least 1 uppercase character in your entry.
                                 </p>
                              </div>
                              <div id="disp3" style="display:none;">
                                 <p class="text-success mb-0">
                                    <iconify-icon icon="mdi:tick-circle-outline"></iconify-icon>
                                    Please ensure your entry contains at least 1 numerical digit
                                 </p>
                              </div>
                              <div id="disp3a">
                                 <p class="text-white mb-0">
                                    <iconify-icon icon="clarity:success-standard-solid"></iconify-icon>
                                    Please ensure your entry contains at least 1 numerical digit
                                 </p>
                              </div>
                              <div id="disp4" style="display:none;">
                                 <p class="text-success mb-0">
                                    <iconify-icon icon="mdi:tick-circle-outline"></iconify-icon>
                                    Please include at least 1 special character (e.g., ?/#~!) in your entry.
                                 </p>
                              </div>
                              <div id="disp4a">
                                 <p class="text-white">
                                    <iconify-icon icon="clarity:success-standard-solid"></iconify-icon>
                                    Please include at least 1 special character (e.g., ?/#~!) in your entry.
                                 </p>
                              </div>
                           </div>
                           <br>

                           <input type='hidden' name="ps_sudo1" id="ps_sudo1" value='0'>
                           <input type='hidden' name="ps_sudo2" id="ps_sudo2" value='0'>
                           <input type='hidden' name="ps_sudo3" id="ps_sudo3" value='0'>
                           <input type='hidden' name="ps_sudo4" id="ps_sudo4" value='0'>

                           <div class="mb-2 form-block  form-group user-box">
                                <input type="password" class="form-control" placeholder="Confirm Password" name="cpassword" id="cpassword">
                                <span class="password-toggle-icon1"><i class="fas fa-eye-slash"></i></span>
                            </div>
                            <input type="hidden" name="reset_id" value="<?php echo (isset($reset_id)) ? $reset_id : '';?>">  
                        
           <div class="form-btn-bg position-relative" >
            <div class="form-button ">
                <button class="btn btn-primary" type="submit"><iconify-icon icon="ep:d-arrow-right"></iconify-icon></button>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            </form>


    <div class="copy-rights text-center ">
      <span class="text-white"> 2024 <a href="" class="text-decoration-none"> @revotech </a> All Rights Reserved</span>
    </div>
  </div>
</div>
</div>
</div>
</section>


<script src="<?php echo base_url();?>/styles/web_style/js/jquery.min.js"></script>
<script src="<?php echo base_url();?>/styles/web_style/js/bootstrap.min.js"></script>
<script src="<?php echo base_url();?>/styles/web_style/js/script.js"></script>
<script src="<?php echo base_url();?>/styles/web_style/js/iconify-icon.min.js"></script>
<script src="<?php echo base_url();?>/styles/web_style/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>/assets/js/formValidation1.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>/assets/js/bootstrap.js"></script>
<script type="text/javascript">
jQuery.noConflict();
(function( $ ) {
    $(document).ready(function() {

$('.reset').formValidation({
    framework: 'bootstrap',
    excluded: [':disabled'],
    icon: {
        // valid: 'glyphicon glyphicon-ok',
        // invalid: 'glyphicon glyphicon-remove',
        // validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
            password: {
            validators: {
                notEmpty: {
                    message: '<?php echo lang("language_lang.activate_pwd_required");?>'
                }
            }
        },
        cpassword: {
            validators: {
                notEmpty: {
                    message: ' '
                },
                identical: {
                    field: 'password',
                    message: '<?php echo lang("language_lang.activat_error");?>'
                }
            }
        }
        
    }
}).on('success.form.fv', function(e) {
            // Prevent form submission
        e.preventDefault();

        // You can perform additional tasks here, like AJAX submission
        var $form = $(e.target);

        var ps1=document.getElementById('ps_sudo1').value;
        var ps2=document.getElementById('ps_sudo2').value;
        var ps3=document.getElementById('ps_sudo3').value;
        var ps4=document.getElementById('ps_sudo4').value;
        if(ps1=='0' || ps2=='0' || ps3=='0' || ps4=='0')
        {
            document.getElementById('pass_error').innerHTML='Password combination not verified';
            document.getElementById('password').focus();
        }
        else
        {
            document.getElementById('pass_error').innerHTML='';
            document.getElementById("reset").submit(); 
        }
        });
});
    

})(jQuery);


var myInput = document.getElementById('password');
// When the user clicks on the password field, show the message box
myInput.onfocus = function() {
// Add any code to show message box if needed
}
// When the user clicks outside of the password field, hide the message box
myInput.onblur = function() {
// Add any code to hide message box if needed
}
// When the user starts to type something inside the password field
myInput.onkeyup = function() {
document.getElementById('pass_error').innerHTML='';
// Validate special characters
var specialCharacters = /[*@!#%&()^~{}]/g;
if(myInput.value.match(specialCharacters)) { 
    document.getElementById('disp4a').style.display = 'none';
    document.getElementById('disp4').style.display = 'block';
    document.getElementById('ps_sudo1').value='1';
} else {
    document.getElementById('ps_sudo1').value='0';
    document.getElementById('disp4a').style.display = 'block';
    document.getElementById('disp4').style.display = 'none';
}

// Validate capital letters
var upperCaseLetters = /[A-Z]/g;
if(myInput.value.match(upperCaseLetters)) {
    document.getElementById('ps_sudo2').value='1';
    document.getElementById('disp2a').style.display = 'none';
    document.getElementById('disp2').style.display = 'block';
} else {
    document.getElementById('ps_sudo2').value='0';
    document.getElementById('disp2a').style.display = 'block';
    document.getElementById('disp2').style.display = 'none';
}

// Validate numbers
var numbers = /[0-9]/g;
if(myInput.value.match(numbers)) {
    document.getElementById('disp3a').style.display = 'none';
    document.getElementById('disp3').style.display = 'block';
    document.getElementById('ps_sudo3').value='1';
} else {
document.getElementById('ps_sudo3').value='0';
    document.getElementById('disp3a').style.display = 'block';
    document.getElementById('disp3').style.display = 'none';
}

// Validate length
if(myInput.value.length >= 8) {
    document.getElementById('disp1a').style.display = 'none';
    document.getElementById('disp1').style.display = 'block';
    document.getElementById('ps_sudo4').value='1';
} else {
document.getElementById('ps_sudo4').value='0';
    document.getElementById('disp1a').style.display = 'block';
    document.getElementById('disp1').style.display = 'none';
}
}
         

const passwordField = document.getElementById("password");
const togglePassword = document.querySelector(".password-toggle-icon i");

togglePassword.addEventListener("click", function () {
    
  if (passwordField.type === "password") {
    passwordField.type = "text";
    
    togglePassword.classList.remove("fa-eye-slash");
    togglePassword.classList.add("fa-eye");
  } else {
    passwordField.type = "password";
    togglePassword.classList.remove("fa-eye");
    togglePassword.classList.add("fa-eye-slash");
   
  }
});

const passwordField1 = document.getElementById("cpassword");
const togglePassword1 = document.querySelector(".password-toggle-icon1 i");

togglePassword1.addEventListener("click", function () {
    
if (passwordField1.type === "password") {
    passwordField1.type = "text";
    
    togglePassword1.classList.remove("fa-eye-slash");
    togglePassword1.classList.add("fa-eye");
} else {
    passwordField1.type = "password";
    togglePassword1.classList.remove("fa-eye");
    togglePassword1.classList.add("fa-eye-slash");
}
});

</script>
</body>
</html>
