   <?php

   session_start();

    include_once('../../config/conn/db-connection.php');
    include_once('../../config/class/sap_model.php');


   if(!isset($_SESSION['logged_in']))
    {
       header("location:../../index.php");
    }else{

    $user_session = trim($_SESSION['user_no']);
    $SAP = new SAP_infosytem();
    $fetchchangepassword = $SAP->fetch_changepassword($user_session);  

    /////////////////////////////////////////////////


?>


   <?php include '../header/main-header2.php';?>
   <div class="content-wrapper">
       <section class="content-header">
           <div class="container-fluid">
               <div class="row mb-2">
                   <div class="col-sm-6">
                       <h1>Change Password</h1>
                   </div>
                   <div class="col-sm-6">
                       <ol class="breadcrumb float-sm-right">
                           <li class="breadcrumb-item"><a href="../home-page.php">Home</a></li>
                           <li class="breadcrumb-item active">Change Password</li>
                       </ol>
                   </div>
               </div>
           </div>
       </section>

       <section class="content">
           <div class="container-fluid">
               <div class="row">
                   <div class="col-12">
                       <?php foreach($fetchchangepassword as $changepass){ ?>
                       <div class="card" style="border-top: 2px solid #f5821d">
                           <div class="card-header" align="left"><i class="fa fa-user"></i> Change Account</a></div>
                           <div class="card-body">

                               <div class="offset-md-4 col-md-4">

                                   <form class="form-horizontal" method="POST">
                                       <div id="success-alert" style="display:none"></div>
                                       <div id="error-alert" style="display:none"></div>
                                       <div class="form-outline mb-4">
                                           <input type="text" id="username" value="<?= htmlentities($changepass['username']); ?>" name="username" class="form-control" readonly />
                                           <label class="form-label" for="form1Example2">Username</label>
                                       </div>
                                       <div class="form-outline mb-4">
                                           <input type="password" id="password" value="<?= htmlentities($changepass['password']); ?>" name="password" class="form-control" readonly />
                                           <label class="form-label" for="form1Example2">Old Password</label>
                                       </div>
                                       <div class="form-outline mb-4">
                                           <input type="password" id="new_password" name="new_password" class="form-control" />
                                           <label class="form-label" for="form1Example2">New Password</label>
                                       </div>
                                       <div class="form-outline mb-4">
                                           <input type="password" id="confirm_newpassword" name="Confirm_newpassword" class="form-control" />
                                           <label class="form-label" for="form1Example2">Confirm password</label>
                                           <div id="message" style="font-weight: bold;"></div>
                                       </div>
                                       <!-- Submit button -->
                                       <input type="hidden" class="form-control ml-4" id="Userreg_id" value="<?php echo $user_id;?>">
                                       <button type="submit" class="btn btn-primary btn-block changes">Update Password</button>
                                   </form>
                               </div>
                           </div>
                      </div>
                 <?php } ?>
              </div>
           </div>
      </div>
   </div>
   </div>
   </section>
   </div>

   <?php } ?>
   <footer class="main-footer">
       <div class="float-right d-none d-sm-block">
           <b>Version</b> 1.0.0
       </div>
       <strong>Copyright &copy; 2021 <b>SAP Information System </b>.</strong>
   </footer>

   <aside class="control-sidebar control-sidebar-dark">
   </aside>
   </div>

   <script type="text/javascript">
       /*=====================start change password=====================*/
       $('#new_password, #confirm_newpassword').on('keyup', function() {
           if ($('#new_password').val() == $('#confirm_newpassword').val()) {
               $('#message').html('<img src="../../images/35e56e96-8a3f-4f53-ac80-f32568f5878f.svg" width="20" height="20">&nbsp;Matching...').css('color', 'green');
               $(".changes").prop('disabled', false);
           } else {
               $('#message').html('<img src="../../images/35e56e96-8a3f-4f53-ac80-f32568f5878f.svg" width="20" height="20">&nbsp;Not Matching...').css('color', 'red');
               $('.changes').prop('disabled', true);
           }
       });
       $(document).ready(function() {

           $('.changes').click(function(e) {
               e.preventDefault(); ///i hahandle nito yung submit button kung wala laman na, nilagay sa field
               var delay = 100;
               const password = document.getElementById('password').value;
               const new_password = document.getElementById('new_password').value;
               const confirm_newpassword = document.getElementById('confirm_newpassword').value;
               const user_id = document.getElementById('Userreg_id').value;

               $.ajax({

                   type: 'POST',
                   data: {
                       Password: password,
                       new_password: new_password,
                       confirm_newpassword: confirm_newpassword,
                       user_id: user_id

                   },
                   url: '../../controllers/changepassword_process.php',
                   async: false,
                   cache: false,
                   success: function(data) {
                       setTimeout(function() {
                           $('#success-alert').html(data);
                           $("#success-alert").show();
                           setTimeout(function() {
                               $("#success-alert").hide();
                           }, 2000);
                       }, delay);
                       // setTimeout(location.reload.bind(location), 1000);

                   },
                   error: function(data) {
                       $("#error-alert").html(data);
                       $("#error-alert").show();
                       setTimeout(function() {
                           $("#error-alert").hide();
                       }, 2000);
                   }

               });

           });

       });

       /*=====================end change password=====================*/
   </script>

   <script src="../../plugins/jquery/jquery.min.js"></script>
   <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
   <script src="../../dist/js/adminlte.min.js"></script>
   <script src="../../dist/js/demo.js"></script>
   </body>

   </html>