<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <title>Synrok - Mobile HTML Template</title>
  <!-- Plugins -->
  <link rel="stylesheet" type="text/css" href="assets/plugins/metismenu/metisMenu.min.css">
  <link rel="stylesheet" type="text/css" href="assets/plugins/metismenu/mm-vertical.css">
  <link rel="stylesheet" type="text/css" href="assets/plugins/slick/slick.css">
  <link rel="stylesheet" type="text/css" href="assets/plugins/slick/slick-theme.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.6/css/jquery.dataTables.min.css">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!--CSS Files-->
  <link href="assets/css/bootstrap.min.css" rel="stylesheet">
  <link href="../../../css2-1?family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="../npm/bootstrap-icons%401.8.3/font/bootstrap-icons-1.css">
  <link href="assets/css/style.css" rel="stylesheet">
  <link href="assets/css/dark-theme.css" rel="stylesheet">

  <?php
  include('headerlink.php');
  ?>
  <style>
    .eye-icon {
      cursor: pointer;
    }

    input:focus {
      outline: none !important;
      box-shadow: none !important;
    }
  </style>



</head>

<body>

  <!--page loader-->
  <div class="loader-wrapper">
    <div class="d-flex justify-content-center align-items-center position-absolute top-50 start-50 translate-middle">
      <div class="spinner-border text-white" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div>
  </div>
  <!--end loader-->

  <!--start wrapper-->
  <div class="wrapper">

    <!--start to header-->
    <header class="top-header background fixed-top border-bottom d-flex align-items-center">
      <nav class="navbar navbar-expand w-100 p-0 gap-3 align-items-center">
        <div class="nav-button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSidenav"><a href="javascript:;"><i class="bi bi-list text-white"></i></a></div>
        <div class="brand-logo ">
          <h1 style="font-size: 20px;  margin: 2px;" class="text-white">Change Password</h1>
        </div>
        <form class="searchbar">
          <div class="position-absolute top-50 translate-middle-y search-icon start-0"><i class="bi bi-search"></i></div>
          <input class="form-control px-5" type="text" placeholder="Search for anything">
          <div class="position-absolute top-50 translate-middle-y end-0 search-close-icon"><i class="bi bi-x-lg"></i></div>
        </form>
        <ul class="navbar-nav ms-auto d-flex align-items-center top-right-menu">
          <li class="nav-item">
            <a class="nav-link position-relative" href="user_logout.php">
              <!-- <i class="fa fa-sign-out text-white" aria-hidden="true"></i> -->
            </a>
          </li>
        </ul>
      </nav>
    </header>
    <!--end to header-->

    <!--start to page content-->
    <div class="page-content">

      <div class="login-body">
        <h5 class="fw-bold">Update Your Password</h5>

        <form>
          <div class="form-group">
            <label for="newPassword">Change Password</label>
            <div class="input-group">
              <input type="password" class="form-control" id="newPassword" placeholder="Enter New Password">
              <span class="input-group-text eye-icon" onclick="togglePassword('newPassword')">
                <i class="bi bi-eye-slash"></i>
              </span>
            </div>
          </div>
          <div class="form-group">
            <label for="newPassword">Change Email</label>
            <div class="input-group">
              <input type="password" class="form-control" id="newPassword" placeholder="Enter New Password">
              <span class="input-group-text eye-icon" onclick="togglePassword('newPassword')">
                <i class="bi bi-eye-slash"></i>
              </span>
            </div>
          </div>
          <div class="form-group">
            <label for="newPassword">Change Answer</label>
            <div class="input-group">
              <input type="password" class="form-control" id="newPassword" placeholder="Enter New Password">
              <span class="input-group-text eye-icon" onclick="togglePassword('newPassword')">
                <i class="bi bi-eye-slash"></i>
              </span>
            </div>
          </div>
          <div class="form-group">
            <label for="newPassword">Change Number</label>
            <div class="input-group">
              <input type="password" class="form-control" id="newPassword" placeholder="Enter New Password">
              <span class="input-group-text eye-icon" onclick="togglePassword('newPassword')">
                <i class="bi bi-eye-slash"></i>
              </span>
            </div>
          </div>

          <div class="form-group">
            <label for="newPassword">Change TItle</label>
            <div class="input-group">
              <input type="password" class="form-control" id="newPassword" placeholder="Enter New Password">
              <span class="input-group-text eye-icon" onclick="togglePassword('newPassword')">
                <i class="bi bi-eye-slash"></i>
              </span>
            </div>
          </div>
          <div class="form-group">
            <label for="confirmPassword">Confirm Password</label>
            <div class="input-group">
              <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password">
              <span class="input-group-text eye-icon" onclick="togglePassword('confirmPassword')">
                <i class="bi bi-eye-slash"></i>
              </span>
            </div>
          </div>
          <button type="submit" class="btn background text-white w-100">Submit</button>
        </form>



      </div>

    </div>
    <!--end to page content-->
    <?php
    include('sidebar.php');
    ?>


    <!--start to footer-->
    <footer class="page-footer fixed-bottom background  border-top d-flex align-items-center justify-content-center">
      <a href="authentication-log-in.html" class=" btn-ecomm text-white">Back to Log In</a>
    </footer>
    <!--end to footer-->

  </div>
  <!--end wrapper-->


  <script src="https://code.jquery.com/jquery-3.6.0.min.js">
  </script>
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.6/js/jquery.dataTables.min.js"></script>
  <script src="assets/js/bootstrap.bundle.min.js"></script>

  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/cookies-theme-switcher.js"></script>
  <script src="assets/plugins/metismenu/metisMenu.min.js"></script>
  <script src="assets/plugins/slick/slick.min.js"></script>
  <script src="assets/js/main.js"></script>
  <script src="assets/js/index.js"></script>
  <script src="assets/js/loader.js"></script>

  <script>
    function togglePassword(inputId) {
      const passwordInput = document.getElementById(inputId);
      const eyeIcon = passwordInput.nextElementSibling;

      if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        eyeIcon.innerHTML = '<i class="bi bi-eye"></i>';
      } else {
        passwordInput.type = 'password';
        eyeIcon.innerHTML = '<i class="bi bi-eye-slash"></i>';
      }
    }
  </script>



</body>

</html>