<!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>Security Center</title>
      <?php echo view('user/layout/head');?>
   </head>
   <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;
      }
      .password-toggle-icon2 {
      position: absolute;
      top: 68%;
      right: 10px;
      color:#fff;
      transform: translateY(-50%);
      cursor: pointer;
      }
      .password-toggle-icon2 i {
      font-size: 18px;
      line-height: 1;
      color: #fff;
      transition: color 0.3s ease-in-out;
      margin-bottom: 20px;
      }
      .password-toggle-icon2 i:hover {
      color: gold;
      }
      .password-toggle-icon3 {
      position: absolute;
      top: 68%;
      right: 10px;
      color:#fff;
      transform: translateY(-50%);
      cursor: pointer;
      }
      .password-toggle-icon3 i {
      font-size: 18px;
      line-height: 1;
      color: #fff;
      transition: color 0.3s ease-in-out;
      margin-bottom: 20px;
      }
      .password-toggle-icon3 i:hover {
      color: gold;
      }
      .password-toggle-icon4 {
      position: absolute;
      top: 68%;
      right: 10px;
      color:#fff;
      transform: translateY(-50%);
      cursor: pointer;
      }
      .password-toggle-icon4 i {
      font-size: 18px;
      line-height: 1;
      color: #fff;
      transition: color 0.3s ease-in-out;
      margin-bottom: 20px;
      }
      .password-toggle-icon4 i:hover {
      color: gold;
      }
      .password-toggle-icon5 {
      position: absolute;
      top: 68%;
      right: 10px;
      color:#fff;
      transform: translateY(-50%);
      cursor: pointer;
      }
      .password-toggle-icon5 i {
      font-size: 18px;
      line-height: 1;
      color: #fff;
      transition: color 0.3s ease-in-out;
      margin-bottom: 20px;
      }
      .password-toggle-icon5 i:hover {
      color: gold;
      }
      .nav-item
      {
      border:2px solid  rgba(140,98,10,1) !important;
      }
      .sam .active {
      background: linear-gradient(180deg, rgba(179,137,34,1) 0%, rgba(140,98,10,1) 50%, rgba(179,137,34,1) 100%, rgba(14,72,62,1) 100%) !important;
      border-radius: 0px !important;
      }
      .help-block {
      color: #eb5055;
      }
      .rules p {
      margin-bottom: 8px !important;
      font-size: 13px;
      display: flex;
      align-items: center;
      text-align: justify;
   }
   </style>
   <body class="reg-overflow">
      <section class="dash-banner-bg banner-bg">
         <div class="container">
            <!---header start---->
            <?php echo view('user/layout/header');?>
            <!---header end---->
            <!---banner start---->
            <div class="row">
               <div class="col-lg-12">
                  <div class="dash-wrap">
                     <div class="title text-center py-1">
                        <h2 class="text-primary ">Security Center</h2>
                     </div>
                     <?php 
                        $this->session = \Config\Services::session();
                        $this->db = db_connect();
                       $uusersid = $this->session->get('uusersid');
                     ?>
                     <div class="team-tab">
                        <ul class="nav sam d-flex justify-content-center ps-0" id="pills-tab" role="tablist">
                           
                           <li class="nav-item" role="presentation">
                              <button class="nav-link active" id="pills-dep2-tab " data-bs-toggle="pill" data-bs-target="#pills-dep2"
                                 type="button" role="tab" aria-controls="pills-dep2" aria-selected="true">
                                 <div class="make-list">
                                    <div class="process">
                                       <span>Login Password</span>
                                    </div>
                                 </div>
                              </button>
                           </li>
                           <li class="nav-item" role="presentation">
                              <button class="nav-link" id="pills-dep3-tab " data-bs-toggle="pill" data-bs-target="#pills-dep3"
                                 type="button" role="tab" aria-controls="pills-dep3" aria-selected="true">
                                 <div class="make-list">
                                    <div class="process">
                                       <span>Security Pin</span>
                                    </div>
                                 </div>
                              </button>
                           </li>
                        </ul>
                        <div class="tab-content" id="pills-tabContent" style="margin-top:8px;">
                           <div class="tab-pane fade show active  " id="pills-dep2" role="tabpanel" aria-labelledby="pills-dep2-tab">
                              <form class="steps-validation login" id="login" method="post">
                                 
                                 <div class="reg-page">
                                    <div class="row"  style="margin-top:20px">
                                       <div class="col-sm-12">
                                          <!--<div class="mb-2 form-block  form-group user-box">
                                             <input type="password" class="form-control" placeholder="Old Password" name="old_password" id="old_password">
                                             <span class="password-toggle-icon2"><i class="fas fa-eye-slash"></i></span>
                                          </div>-->
                                       
                                          <div class="col-sm-12">
                                             <div class=" form-block position-relative login-ico">
                                             <div class="form-ico password-toggle-icon2" style="right:0px;"><i class="fa-regular fa-eye-slash"></i></div>
                                              <input type="password" class="form-control " id="old_password" name="old_password" aria-describedby="" placeholder="Current Password">
                                              <div id="old_error" class="help-block"></div>
                                             </div>
                                          </div>

                                          <div class="col-sm-12">
                                             <div class=" form-block position-relative login-ico">
                                             <div class="form-ico password-toggle-icon" style="right:0px;"><i class="fa-regular fa-eye-slash"></i></div>
                                              <input type="password" class="form-control " id="password" name="password" aria-describedby="" placeholder="New Password">
                                            
                                             </div>
                                          </div>

                                          <div class="row">
                                             <div class="col-sm-12">
                                             <div class="rules">
                                             <div id="pass_error" class="help-block"></div>
                                             <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>
                                          </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="col-sm-12">
                                             <div class=" form-block position-relative login-ico">
                                             <div class="form-ico password-toggle-icon1" style="right:0px;"><i class="fa-regular fa-eye-slash"></i></div>
                                              <input type="password" class="form-control " id="cpassword" name="cpassword" aria-describedby="" placeholder="Enter confirm password">
                                             </div>
                                          </div>
                                          <div id="otpmsg"></div>
                                          <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>
                             </form>
                        </div>
                        <div class="tab-pane fade  " id="pills-dep3" role="tabpanel" aria-labelledby="pills-dep3-tab">
                           <div class="reg-page">
                              <form class="steps-validation pin" method="post"  id="pin">
                                 <div class="row" style="margin-top:20px ">
                                    <div class="col-lg-12">

                                    <div class=" form-block position-relative login-ico">
                                    <div class="form-ico password-toggle-icon3" style="right:0px;"><i class="fa-regular fa-eye-slash"></i></div>
                                       <input type="password" class="form-control" id="old_pin" name="old_pin" placeholder="Current Pin">
                                    </div>
                                      
                                    </div>
                                    <div class="col-lg-12">
                                      <div class=" form-block position-relative login-ico">
                                          <div class="form-ico password-toggle-icon4" style="right:0px;"><i class="fa-regular fa-eye-slash"></i></div>
                                             <input type="password" class="form-control" id="new_pin" name="new_pin" placeholder="New Pin">
                                          </div>
                                    </div>

                                    <div class="col-lg-12">
                                      <div class=" form-block position-relative login-ico">
                                          <div class="form-ico password-toggle-icon5" style="right:0px;"><i class="fa-regular fa-eye-slash"></i></div>
                                             <input type="password" class="form-control" id="conf_pin" name="conf_pin" placeholder="Confirm Pin">
                                          </div>
                                    </div>
                                 </div>
                                 <div id="otpmsg1"></div>
                                 <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>
                                 <!-- <button type="submit" id="pw_sub" name="pw_sub" class="btn btn-primary text-center" style="margin-bottom:20px;">Submit</button> -->
                              </form>
                           </div>
                        </div>
                     </div>
                     <!---banner end---->
                  </div>
               </div>
            </div>
            <?php echo view('user/layout/footer');?>
         </div>
      </section>
      <?php echo view('user/layout/footer-script');?>
      <script src="http://code.jquery.com/jquery-1.11.3.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() {
         
         $('.login').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");?>'
                         }
                     }
                 },
                 old_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='';
                     var old_password=document.getElementById('old_password').value;
                     var new_password=document.getElementById('password').value;
                     var userid='<?php echo $this->session->get('uusersid');?>';
                     /*document.getElementById("login").submit(); */
                     $.ajax({
                        type: 'post',
                        url : '<?php echo base_url();?>/user/changepassword',
                        data : {old_password:old_password,new_password:new_password,userid:userid},
                        dataType:'text',
                        success : function(msg)
                        {
                           var msg=msg.trim();
                              if(msg!=='')
                              {
                                 console.log(msg);
                                 if(msg=='error')
                                 {
                                    $("#old_password").focus();
                                    setTimeout(function()
                                    {
                                       $("#otpmsg").html('<div class="alert alert-danger"><i class="fa fa-times-circle"></i> Current Password Not matched with records</div>');
                                          setTimeout(function(){
                                          $("#otpmsg").html('');
                                          
                                       }, 4000); // Adjust this duration as needed
                                       }, 500);
                                 }
                                 else
                                 {
                                    $("#old_password").focus();
                                    $("#old_password").val('');
                                    $("#password").val('');
                                    $("#cpassword").val('');
                                    setTimeout(function(){
                                    $("#otpmsg").html('<div class="alert alert-success"><i class="fa fa-check-circle"></i> Password successfully updated</div>');
                                       setTimeout(function(){
                                       $("#otpmsg").html('');
                                       window.location.reload();
                                    }, 4000); // Adjust this duration as needed
                                    }, 500);
                                  
                                 }
                              }
                        }
                     })



                 }
                 });
         });
             
         
         })(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");
         }
         });
         
         
         const passwordField2 = document.getElementById("old_password");
         const togglePassword2 = document.querySelector(".password-toggle-icon2 i");
         
         togglePassword2.addEventListener("click", function () {
             
         if (passwordField2.type === "password") {
             passwordField2.type = "text";
             
             togglePassword2.classList.remove("fa-eye-slash");
             togglePassword2.classList.add("fa-eye");
         } else {
             passwordField2.type = "password";
             togglePassword2.classList.remove("fa-eye");
             togglePassword2.classList.add("fa-eye-slash");
         }
         });
         
      </script>
      <script>
         jQuery.noConflict();
         (function( $ ) {
             $(document).ready(function() {
         
         $('.pin').formValidation({
             framework: 'bootstrap',
             excluded: [':disabled'],
             icon: {
                 // valid: 'glyphicon glyphicon-ok',
                 // invalid: 'glyphicon glyphicon-remove',
                 // validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                     old_pin: {
                     validators: {
                         notEmpty: {
                             message: "<?php echo 'This old security pin is required and can not empty';?>"
                         }
                     }
                 },
                 new_pin: {
                    validators: {
                        notEmpty: {
                            message: 'New security pin is required and can not empty'
                        },
                        regexp: {
                            regexp: /^[0-9]*$/,
                            message: 'Only Accepts numerics values'
                        },
                        stringLength: {
                            min: 5,
                            message: 'Minimum 5 digits required'
                        }
                    }
                },
                conf_pin: {
                     validators: {
                         notEmpty: {
                             message: ''
                         },
                         identical: {
                             field: 'new_pin',
                             message: 'Confirm Pin not matched with New Pin'
                         }
                     }
                 }
                
                 
             }
         }).on('success.form.fv', function(e) {
                     // Prevent form submission
                  e.preventDefault();
         
                     var old_password=document.getElementById('old_pin').value;
                     var new_password=document.getElementById('new_pin').value;
                     var userid='<?php echo $this->session->get('uusersid');?>';
                     /*document.getElementById("login").submit(); */
                     $.ajax({
                        type: 'post',
                        url : '<?php echo base_url();?>/user/securitypin',
                        data : {old_password:old_password,new_password:new_password,userid:userid},
                        dataType:'text',
                        success : function(msg)
                        {
                           var msg=msg.trim();
                              if(msg!=='')
                              {
                                 console.log(msg);
                                 if(msg=='error')
                                 {
                                    $("#old_pin").focus();
                                    setTimeout(function()
                                    {
                                       $("#otpmsg1").html('<div class="alert alert-danger"><i class="fa fa-times-circle"></i> Current Security pin Not matched with records</div>');
                                          setTimeout(function(){
                                          $("#otpmsg1").html('');
                                          
                                       }, 4000); // Adjust this duration as needed
                                       }, 500);
                                 }
                                 else
                                 {
                                    $("#old_pin").focus();
                                    $("#old_pin").val('');
                                    $("#new_pin").val('');
                                    $("#conf_pin").val('');
                                    setTimeout(function(){
                                    $("#otpmsg1").html('<div class="alert alert-success"><i class="fa fa-check-circle"></i> Security pin successfully updated</div>');
                                       setTimeout(function(){
                                       $("#otpmsg1").html('');
                                       window.location.reload();
                                    }, 4000); // Adjust this duration as needed
                                    }, 500);
                                  
                                 }
                              }
                        }
                     })
                  });
             })
            })(jQuery);
         
         
         
         const passwordField3 = document.getElementById("old_pin");
         const togglePassword3 = document.querySelector(".password-toggle-icon3 i");
         
         togglePassword3.addEventListener("click", function () {
             
         if (passwordField3.type === "password") {
             passwordField3.type = "text";
             
             togglePassword3.classList.remove("fa-eye-slash");
             togglePassword3.classList.add("fa-eye");
         } else {
             passwordField3.type = "password";
             togglePassword3.classList.remove("fa-eye");
             togglePassword3.classList.add("fa-eye-slash");
         }
         });
         
         
         const passwordField4 = document.getElementById("new_pin");
         const togglePassword4 = document.querySelector(".password-toggle-icon4 i");
         
         togglePassword4.addEventListener("click", function () {
             
         if (passwordField4.type === "password") {
             passwordField4.type = "text";
             
             togglePassword4.classList.remove("fa-eye-slash");
             togglePassword4.classList.add("fa-eye");
         } else {
             passwordField4.type = "password";
             togglePassword4.classList.remove("fa-eye");
             togglePassword4.classList.add("fa-eye-slash");
         }
         });
         
         const passwordField5 = document.getElementById("conf_pin");
         const togglePassword5 = document.querySelector(".password-toggle-icon5 i");
         
         togglePassword5.addEventListener("click", function () {
             
         if (passwordField5.type === "password") {
             passwordField5.type = "text";
             
             togglePassword5.classList.remove("fa-eye-slash");
             togglePassword5.classList.add("fa-eye");
         } else {
             passwordField5.type = "password";
             togglePassword5.classList.remove("fa-eye");
             togglePassword5.classList.add("fa-eye-slash");
         }
         });
      </script>
   </body>
</html>