<!doctype html>
<html lang="en"  class="w-[640px]">
   <head>
      <?php echo view('user/layout/head');?>
   </head>
   <style>
       .help-block 
         {
         color:red;
         font-size:12px;
         font-weight:bold;
         }
   </style>
   <body class="section-overflow">
      <!--banner start -->
      <section class="banner-bg overall-bg ">
         <div class="container">
            <?php echo view('user/layout/header');?>
         </div>
         <section class="dash-wrap team-wrap">
            <div class="container">
               <?php 
                  $this->session = \Config\Services::session();
                  $this->db = db_connect();
                  $uusersid = $this->session->get('uusersid');
                  ?>
               <div class="team-tab">
                  <ul class="nav nav-pills 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-dep1-tab " data-bs-toggle="pill" data-bs-target="#pills-dep1"
                           type="button" role="tab" aria-controls="pills-dep1" 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-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>Security Pin</span>
                              </div>
                           </div>
                        </button>
                     </li>
                  </ul>
                  <div class="tab-content" id="pills-tabContent">
                     <div class="tab-pane fade show active" id="pills-dep1" role="tabpanel" aria-labelledby="pills-dep1-tab">
                     <form class="steps-validation login" id="login" method="post">
                        <div class=" team-profit-content" style="text-align:start !important">
                           <div class="row">
                              <div class="col-sm-12">
                                 <div class="form-block form-group position-relative">
                                    <div class="form-ico">
                                       <iconify-icon icon="stash:eye-closed-solid" id="togglePasswordIcon"></iconify-icon>
                                    </div>
                                    <input type="password" class="form-control " id="old_password" name="old_password" aria-describedby="" placeholder="Old Password">
                                    <div id="old_error" class="help-block"></div>
                                 </div>
                                 <div class="form-block form-group position-relative">
                                    <div class="form-ico">
                                       <iconify-icon icon="stash:eye-closed-solid" id="togglePasswordIcon1"></iconify-icon>
                                    </div>
                                    <input type="password" class="form-control "  id="password" name="password" aria-describedby="" placeholder="New Password">
                                 </div>
                                 <div class="row" style="margin-top:10px">
                                    <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>
                                                At least 8 characters. 
                                             </p>
                                          </div>
                                          <div id="disp1a">
                                             <p class="text-white mb-0">
                                                <iconify-icon icon="clarity:success-standard-solid"></iconify-icon>
                                                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>
                                                At least 1 uppercase character. 
                                             </p>
                                          </div>
                                          <div id="disp2a">
                                             <p class="text-white mb-0">
                                                <iconify-icon icon="clarity:success-standard-solid"></iconify-icon>
                                                At least 1 uppercase character. 
                                             </p>
                                          </div>
                                          <div id="disp3" style="display:none;">
                                             <p class="text-success mb-0">
                                                <iconify-icon icon="mdi:tick-circle-outline"></iconify-icon>
                                                At least 1 number (0-9) 
                                             </p>
                                          </div>
                                          <div id="disp3a">
                                             <p class="text-white mb-0">
                                                <iconify-icon icon="clarity:success-standard-solid"></iconify-icon>
                                                At least 1 number (0-9) 
                                             </p>
                                          </div>
                                          <div id="disp4" style="display:none;">
                                             <p class="text-success mb-0">
                                                <iconify-icon icon="mdi:tick-circle-outline"></iconify-icon>
                                                At least 1 special character(e.g.?/#~!) 
                                             </p>
                                          </div>
                                          <div id="disp4a">
                                             <p class="text-white">
                                                <iconify-icon icon="clarity:success-standard-solid"></iconify-icon>
                                                At least 1 special character(e.g.?/#~!) 
                                             </p>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                                 <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="form-block form-group position-relative">
                                    <div class="form-ico">
                                       <iconify-icon icon="stash:eye-closed-solid" id="togglePasswordIcon2"></iconify-icon>
                                    </div>
                                    <input type="password" class="form-control " id="cpassword" name="cpassword" aria-describedby="" placeholder="Confirm password">
                                 </div>
                                 <div id="otpmsg"></div>
                                 <div class="form-btn my-4 text-center"> <button class="btn btn-primary" type="submit">
                                    Save
                                    </button>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </form>
                     </div>
                     <div class="tab-pane fade " id="pills-dep2" role="tabpanel" aria-labelledby="pills-dep2-tab">
                     <form class="steps-validation pin" method="post"  id="pin">
                        <div class=" team-profit-content" style="text-align:start !important">
                           <div class="row">
                              <div class="col-sm-12">
                                 <div class="form-block form-group position-relative">
                                    <div class="form-ico">
                                       <iconify-icon icon="stash:eye-closed-solid" id="togglePasswordIcon3"></iconify-icon>
                                    </div>
                                    <input type="password" class="form-control" id="old_pin" name="old_pin" placeholder="Current Pin">
                               
                                 </div>
                                 <div class="form-block form-group position-relative">
                                    <div class="form-ico">
                                       <iconify-icon icon="stash:eye-closed-solid" id="togglePasswordIcon4"></iconify-icon>
                                    </div>
                                    <input type="password" class="form-control" id="new_pin" name="new_pin" placeholder="New Pin">
                                 </div>
                                
                                 <div class="form-block form-group position-relative">
                                    <div class="form-ico">
                                       <iconify-icon icon="stash:eye-closed-solid" id="togglePasswordIcon5"></iconify-icon>
                                    </div>
                                    <input type="password" class="form-control" id="conf_pin" name="conf_pin" placeholder="Confirm Pin">
                                 </div>
                                 <div id="otpmsg1"></div>
                                 <div class="form-btn my-4 text-center"> <button class="btn btn-primary" type="submit">
                                    Save
                                    </button>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </form>
                     </div>
                     <!---banner end---->
                  </div>
               </div>
            </div>
         </section>
         <!--footer start -->
         <?php echo view('user/layout/footer');?>
         <!--footer end -->
      </section>
      <?php echo view('user/layout/footer-script');?>
      <script>
         AOS.init({
         });
      </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 togglePasswordIcon = document.getElementById("togglePasswordIcon1");

        togglePasswordIcon.addEventListener("click", function () {
            if (passwordField.type === "password") {
                // Change to text
                passwordField.type = "text";
                togglePasswordIcon.setAttribute("icon", "mdi:eye-outline"); // Change icon
            } else {
                // Change to password
                passwordField.type = "password";
                togglePasswordIcon.setAttribute("icon", "stash:eye-closed-solid"); // Change icon
            }
        });
         
         const passwordField1 = document.getElementById("cpassword");
         const togglePasswordIcon1 = document.getElementById("togglePasswordIcon2");
         
         togglePasswordIcon1.addEventListener("click", function () {
            if (passwordField1.type === "password") {
                // Change to text
                passwordField1.type = "text";
                togglePasswordIcon1.setAttribute("icon", "mdi:eye-outline"); // Change icon
            } else {
                // Change to password
                passwordField1.type = "password";
                togglePasswordIcon1.setAttribute("icon", "stash:eye-closed-solid"); // Change icon
            }
        });
         
         
         const passwordField2 = document.getElementById("old_password");
         const togglePasswordIcon2 = document.getElementById("togglePasswordIcon");
         
         togglePasswordIcon2.addEventListener("click", function () {
            if (passwordField2.type === "password") {
                // Change to text
                passwordField2.type = "text";
                togglePasswordIcon2.setAttribute("icon", "mdi:eye-outline"); // Change icon
            } else {
                // Change to password
                passwordField2.type = "password";
                togglePasswordIcon2.setAttribute("icon", "stash:eye-closed-solid"); // Change icon
            }
        });
         
      </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 togglePasswordIcon3 = document.getElementById("togglePasswordIcon3");
         
         togglePasswordIcon3.addEventListener("click", function () {
            if (passwordField3.type === "password") {
                // Change to text
                passwordField3.type = "text";
                togglePasswordIcon3.setAttribute("icon", "mdi:eye-outline"); // Change icon
            } else {
                // Change to password
                passwordField3.type = "password";
                togglePasswordIcon3.setAttribute("icon", "stash:eye-closed-solid"); // Change icon
            }
        });
         
         
         const passwordField4 = document.getElementById("new_pin");
         const togglePasswordIcon4 = document.getElementById("togglePasswordIcon4");
         
         togglePasswordIcon4.addEventListener("click", function () {
            if (passwordField4.type === "password") {
                // Change to text
                passwordField4.type = "text";
                togglePasswordIcon4.setAttribute("icon", "mdi:eye-outline"); // Change icon
            } else {
                // Change to password
                passwordField4.type = "password";
                togglePasswordIcon4.setAttribute("icon", "stash:eye-closed-solid"); // Change icon
            }
        });
         
         const passwordField5 = document.getElementById("conf_pin");
         const togglePasswordIcon5 = document.getElementById("togglePasswordIcon5");
         
         togglePasswordIcon5.addEventListener("click", function () {
            if (passwordField5.type === "password") {
                // Change to text
                passwordField5.type = "text";
                togglePasswordIcon5.setAttribute("icon", "mdi:eye-outline"); // Change icon
            } else {
                // Change to password
                passwordField5.type = "password";
                togglePasswordIcon5.setAttribute("icon", "stash:eye-closed-solid"); // Change icon
            }
        });
      </script>
   </body>
</html>
