<?php
    session_start();
    include "ajax/konnection.php";
    include "ajax/func.php";
    
    if(!isset($_SESSION["user"])){
        header("location: login");
        die();
    }
    
    $email  = $_SESSION["user"];
    $bal = getBal($email);
    $user = getUserDetails($email);
    $verifs = 0;
    $charges = getCharges();
    $page = "SECURITY";
?>
<!DOCTYPE html>

<html lang="en" class="light-style layout-compact layout-navbar-fixed layout-menu-fixed     " dir="ltr" data-theme="theme-default" data-assets-path="/assets/" data-base-url="/assets/" data-framework="html" data-template="vertical-menu-theme-default-light">


<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

  <title><?= $site_title;?> Dashboard</title>
  <meta name="description" content="" />
  <meta name="keywords" content="">
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com/">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&amp;display=swap" rel="stylesheet">

<link rel="stylesheet" href="assets/vendor/fonts/boxiconsc4a7.css?id=87122b3a3900320673311cebdeb618da" />
<link rel="stylesheet" href="assets/vendor/fonts/fontawesome8a69.css?id=a2997cb6a1c98cc3c85f4c99cdea95b5" />
<link rel="stylesheet" href="assets/vendor/fonts/flag-icons80a8.css?id=121bcc3078c6c2f608037fb9ca8bce8d" />
<!-- Core CSS -->
<link rel="stylesheet" href="assets/vendor/css/rtl/corea8ac.css?id=55b2a9dfaa009c41df62ca8d16e913a8" class="template-customizer-core-css" />
<link rel="stylesheet" href="assets/vendor/css/rtl/theme-default4c4b.css?id=9182924a7b965439eca5e189ba43eba1" class="template-customizer-theme-css" />
<link rel="stylesheet" href="assets/css/demob77a.css?id=69dfc5e48fce5a4ff55ff7b593cdf93d" />
<!-- Vendors CSS -->
<link rel="stylesheet" href="assets/vendor/libs/perfect-scrollbar/perfect-scrollbare482.css?id=73d641bb8db2475ecafc6c68461ed01b" />
<link rel="stylesheet" href="assets/vendor/libs/typeahead-js/typeahead05d2.css?id=de339ead5e9c9e36f12e46cbef7aaffd" />

<!-- Vendor Styles -->
<link rel="stylesheet" href="assets/vendor/libs/apex-charts/apex-charts.css">
<link rel="stylesheet" href="assets/vendor/libs/toastr/toastr.css" />
<link rel="stylesheet" href="assets/vendor/libs/animate-css/animate.css" />

<!-- Page Styles -->

  <!-- Include Scripts for customizer, helper, analytics, config -->
  <!-- $isFront is used to append the front layout scriptsIncludes only on the front layout otherwise the variable will be blank -->
  <!-- laravel style -->
<script src="assets/vendor/js/helpers.js"></script>
<!-- beautify ignore:start -->
  <!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
  <!--? Template customizer: To hide customizer set displayCustomizer value false in config.js.  -->
  <script src="assets/vendor/js/template-customizer.js"></script>

  <!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
  <script src="assets/js/config.js"></script>

  <script>
    window.templateCustomizer = new TemplateCustomizer({
      cssPath: '',
      themesPath: '',
      defaultStyle: "light",
      defaultShowDropdownOnHover: "true", // true/false (for horizontal layout only)
      displayCustomizer: "true",
      lang: 'en',
      pathResolver: function(path) {
        var resolvedPaths = {
          // Core stylesheets
                      'core.css': '/assets/vendor/css/rtl/core.css?id=55b2a9dfaa009c41df62ca8d16e913a8',
            'core-dark.css': '/assets/vendor/css/rtl/core-dark.css?id=d98ae2a03b5b1b05651411ee58ef81a6',
          
          // Themes
                      'theme-default.css': '/assets/vendor/css/rtl/theme-default.css?id=9182924a7b965439eca5e189ba43eba1',
            'theme-default-dark.css':
            '/assets/vendor/css/rtl/theme-default-dark.css?id=ae30991ef3f62e7c03ca6f8930843e80',
                      'theme-bordered.css': '/assets/vendor/css/rtl/theme-bordered.css?id=a4f95a927b1e2bcdfd57a3bbfb2bd3d9',
            'theme-bordered-dark.css':
            '/assets/vendor/css/rtl/theme-bordered-dark.css?id=2a668deb480284f975db82d0a7277156',
                      'theme-semi-dark.css': '/assets/vendor/css/rtl/theme-semi-dark.css?id=9c02fb39c47f91b2d198f343fa8b4df7',
            'theme-semi-dark-dark.css':
            '/assets/vendor/css/rtl/theme-semi-dark-dark.css?id=c4b1950a14ffd431f752917b97a0ee51',
                  }
        return resolvedPaths[path] || path;
      },
      'controls': ["rtl","style","headerType","contentLayout","layoutCollapsed","layoutNavbarOptions","themes"],
    });
  </script>
</head>

<body>
  
     
  <!-- Layout Content -->
  <div class="layout-wrapper layout-content-navbar ">
  <div class="layout-container">

<?php include "includes/aside.php"; ?>
    <!-- Layout page -->
    <div class="layout-page">

      
      

      <!-- BEGIN: Navbar-->
            <!-- Navbar -->
<?php include "includes/navbar.php"; ?>
  <!-- / Navbar -->
            <!-- END: Navbar-->


      <!-- Content wrapper -->
      <div class="content-wrapper">
        <!-- Content -->
                  <div class="container-xxl flex-grow-1 container-p-y">
            <h5>Welcome to <?= $site_title;?>, <?php echo $user["firstName"]; ?>!</h5>

        <br />
            <div class="row">
  
  <div class="col-lg-12 col-md-4 order-1">
    <!-- Change Password -->
    <div class="card mb-4">
      <h5 class="card-header">Change Password</h5>
      <div class="card-body">
        <form id="formAccountSettings" method="POST" onsubmit="return false">
          <div class="row">
            <div class="mb-3 col-md-6 form-password-toggle">
              <label class="form-label" for="currentPassword">Current Password</label>
              <div class="input-group input-group-merge">
                <input class="form-control form-control-lg" type="password" name="currentPassword" id="currentPassword" placeholder="" />
                <span class="input-group-text cursor-pointer"><i class="bx bx-hide"></i></span>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="mb-3 col-md-6 form-password-toggle">
              <label class="form-label" for="newPassword">New Password</label>
              <div class="input-group input-group-merge">
                <input class="form-control form-control-lg" type="password" id="newPassword" name="newPassword" placeholder="" />
                <span class="input-group-text cursor-pointer"><i class="bx bx-hide"></i></span>
              </div>
            </div>

            <div class="mb-3 col-md-6 form-password-toggle">
              <label class="form-label" for="confirmPassword">Confirm New Password</label>
              <div class="input-group input-group-merge">
                <input class="form-control form-control-lg" type="password" name="confirmPassword" id="confirmPassword" placeholder="" />
                <span class="input-group-text cursor-pointer"><i class="bx bx-hide"></i></span>
              </div>
            </div>
            <div class="col-12 mb-4">
              <p class="fw-medium mt-2">Password Requirements:</p>
              <ul class="ps-3 mb-0">
                <li class="mb-1">
                  Minimum 8 characters long - the more, the better
                </li>
                <li class="mb-1">At least one lowercase character</li>
                <li>At least one number, symbol, or whitespace character</li>
              </ul>
            </div>
            
          </div>
        </form>
        <div class="col-12 mt-1">
              <button id="loginButton" onClick="changePass()" class="btn btn-lg btn-primary me-2">Change Password</button>
              
            </div>
      </div>
    </div>
    <!--/ Change Password -->
  </div>
</div>

          </div>
          <!-- / Content -->

          <!-- Footer -->
                    <!-- Footer-->
<footer class="content-footer footer bg-footer-theme">
  <div class="container-xxl d-flex flex-wrap justify-content-between py-2 flex-md-row flex-column">
    <div class="mb-2 mb-md-0">
      © <script>document.write(new Date().getFullYear())</script>
      , <a href="#" target="_blank" class="footer-link fw-medium"><?= $site_title;?></a>
    </div>
  
  </div>
</footer>
<!--/ Footer-->
                    <!-- / Footer -->
          <div class="content-backdrop fade"></div>
        </div>
        <!--/ Content wrapper -->
      </div>
      <!-- / Layout page -->
    </div>

        <!-- Overlay -->
    <div class="layout-overlay layout-menu-toggle"></div>
        <!-- Drag Target Area To SlideIn Menu On Small Screens -->
    <div class="drag-target"></div>
  </div>
  <!-- / Layout wrapper -->
    <!--/ Layout Content -->

  
  
  <!-- Include Scripts -->
  <!-- $isFront is used to append the front layout scripts only on the front layout otherwise the variable will be blank -->
  <!-- BEGIN: Vendor JS-->
<script src="assets/vendor/libs/jquery/jquery1e84.js?id=0f7eb1f3a93e3e19e8505fd8c175925a"></script>
<script src="assets/vendor/libs/popper/popper0a73.js?id=baf82d96b7771efbcc05c3b77135d24c"></script>
<script src="assets/vendor/js/bootstrapcfc4.js?id=4648227467e3fd3f4cf976cfb0e43aea"></script>
<script src="assets/vendor/libs/perfect-scrollbar/perfect-scrollbar6188.js?id=44b8e955848dc0c56597c09f6aebf89a"></script>
<script src="assets/vendor/libs/hammer/hammer2de0.js?id=0a520e103384b609e3c9eb3b732d1be8"></script>
<script src="assets/vendor/libs/typeahead-js/typeahead60e7.js?id=f6bda588c16867a6cc4158cb4ed37ec6"></script>
<script src="assets/vendor/js/menu2dc9.js?id=c6ce30ded4234d0c4ca0fb5f2a2990d8"></script>
<script src="assets/vendor/libs/clipboard/clipboard.js"></script>
<script src="assets/vendor/libs/apex-charts/apexcharts.js"></script>
<!-- END: Page Vendor JS-->
<!-- BEGIN: Theme JS-->
<script src="assets/js/maind63d.js?id=6bea3f2e092d5fe7327c226f3242f31b"></script>

<!-- END: Theme JS-->
<!-- Pricing Modal JS-->
<!-- END: Pricing Modal JS-->
<!-- BEGIN: Page JS-->
<script src="assets/js/dashboards-analytics.js"></script>
<script src="assets/js/extended-ui-misc-clipboardjs.js"></script>
<script src="assets/vendor/libs/toastr/toastr.js"></script>
<script src="js/misc.js"></script>
<!-- END: Page JS-->
<script>
    
    function changePass(){
        var currentPassword = document.querySelector('#currentPassword');
        var newPassword = document.querySelector('#newPassword');
        var confirmPassword = document.querySelector('#confirmPassword');
        
        
        if(currentPassword.value.length == 0){
            toastr.error("Current Password is required","Oops");
            return;
        }if(newPassword.value.length == 0){
            toastr.error("New Password is required","Oops");
            return;
        }if(confirmPassword.value.length == 0){
            toastr.error("Confirm Password is required","Oops");
            return;
        }if(newPassword.value != confirmPassword.value){
            toastr.error("New Password and Confirm Password have to be same!","Oops");
            return;
        }
       
        const params = {
            oldPassword: currentPassword.value,
            newPassword: newPassword.value,
            confirmNewPassword: confirmPassword.value,
        }
        disableButton("#loginButton","");
        var xhttp = new XMLHttpRequest();
    	xhttp.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
    		   var res = xhttp.responseText;
    		   var response = JSON.parse(res);
        		   if(response.status == true){
            		      toastr.error(response.message,"Status"); 
            		      window.location.href = 'security';
        		   }else{
        		      toastr.error(response.message,"Oops"); 
        		   }
        		   enableButton("#loginButton","Change Password");
    		}
        	};
        	xhttp.open("POST", "ajax/changePassword.php", true);
        	xhttp.setRequestHeader('Content-type', 'application/json');
        	xhttp.send(JSON.stringify(params));
    }
</script>

</body>
</html>
