


<?php include "header.php";?>


<div class="container">
  <div class="page-inner">
    <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4"  >
      <div>
        <h3 class="fw-bold mb-3">Change Password</h3>
      </div>
    </div>


    <div class="row">
      <div class="col-md-12">
        <div class="card" style="width: 50%;">

          <div class="card-body">


            <form class="form-grid"   action="" method="post" id="passwordForm" name="passwordForm">

              <div class="form-group">
                <label class="form-label">Current Password</label>
                <div class="input-wrapper">
                    <input type="password" class="form-control"  id="currentPass" placeholder="Enter current password" required>
                    <i class="fa-solid fa-eye toggle-password" onclick="toggleField('currentPass', this)"></i>
                </div>
              </div>
              <div class="form-group">
                <label class="form-label">New Password</label>
                <div class="input-wrapper">
                    <input type="password" class="form-control"  id="newPass" placeholder="Enter new password" required oninput="evaluatePasswordRequirements()">
                    <i class="fa-solid fa-eye toggle-password" onclick="toggleField('newPass', this)"></i>
                </div>
              </div>

              <!-- Real-time Requirement Checker Box -->
              <div class="validation-box">
                  <div class="validation-title">Password Requirements:</div>
                  <ul class="validation-list">
                      <li class="validation-item" id="reqLength"><i class="fa-solid fa-circle-xmark"></i> Min 8 characters</li>
                      <li class="validation-item" id="reqLower"><i class="fa-solid fa-circle-xmark"></i> One lowercase letter</li>
                      <li class="validation-item" id="reqUpper"><i class="fa-solid fa-circle-xmark"></i> One uppercase letter</li>
                      <li class="validation-item" id="reqNumber"><i class="fa-solid fa-circle-xmark"></i> One numeric value</li>
                      <li class="validation-item" id="reqSymbol" style="grid-column: span 2;"><i class="fa-solid fa-circle-xmark"></i> One special symbol (!@#$%^&*)</li>
                  </ul>
              </div>

              <!-- Confirm New Password -->
              <div class="form-group">
                  <label class="form-label">Confirm New Password</label>
                  <div class="input-wrapper">
                      <input type="password" class="form-control"  id="confirmPass" placeholder="Confirm new password" required oninput="checkMatch()">
                      <i class="fa-solid fa-eye toggle-password" onclick="toggleField('confirmPass', this)"></i>
                  </div>
                  <div class="match-error" id="matchError">Passwords do not match!</div>
              </div>

              <button type="submit" class="btn btn-success">Update Password</button>
            </form>
          </div>
        </div>
      </div>
    </div>





  </div>
</div>


<?php include "footer.php";?>


    <script>
        // Left Nav Sidebar Submenu toggle
        function toggleSubmenu(event) {
            const submenu = event.currentTarget.nextElementSibling;
            const chevron = event.currentTarget.querySelector('.chevron');
            submenu.classList.toggle('open');
            chevron.classList.toggle('rotate');
        }

        // Header Droplist Trigger
        function toggleProfileDropdown(event) {
            event.stopPropagation();
            document.getElementById('profileDropdown').classList.toggle('show');
        }

        // Show/Hide Visibility Toggler
        function toggleField(id, icon) {
            const field = document.getElementById(id);
            if(field.type === 'password') {
                field.type = 'text';
                icon.classList.replace('fa-eye', 'fa-eye-slash');
            } else {
                field.type = 'password';
                icon.classList.replace('fa-eye-slash', 'fa-eye');
            }
        }

        // Dynamic Verification Logic
        function evaluatePasswordRequirements() {
            const val = document.getElementById('newPass').value;

            // Validation conditions
            const rules = {
                reqLength: val.length >= 8,
                reqLower: /[a-z]/.test(val),
                reqUpper: /[A-Z]/.test(val),
                reqNumber: /[0-9]/.test(val),
                reqSymbol: /[^A-Za-z0-9]/.test(val)
            };

            // Dynamic rule styling loops
            for (const [key, passed] of Object.entries(rules)) {
                const element = document.getElementById(key);
                const icon = element.querySelector('i');
                if (passed) {
                    element.classList.remove('invalid');
                    element.classList.add('valid');
                    icon.classList.replace('fa-circle-xmark', 'fa-circle-check');
                } else {
                    element.classList.remove('valid');
                    element.classList.add('invalid');
                    icon.classList.replace('fa-circle-check', 'fa-circle-xmark');
                }
            }
            checkMatch();
        }

        // Real-time Match Checker
        function checkMatch() {
            const newPass = document.getElementById('newPass').value;
            const confirmPass = document.getElementById('confirmPass').value;
            const errorDiv = document.getElementById('matchError');

            if (confirmPass && newPass !== confirmPass) {
                errorDiv.style.display = 'block';
            } else {
                errorDiv.style.display = 'none';
            }
        }

        // Secure submission interception hook
        function validateAndSubmit(event) {
            event.preventDefault();
            const newPass = document.getElementById('newPass').value;
            const confirmPass = document.getElementById('confirmPass').value;

            // Enforce Rule Checks
            const standardPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}$/;

            if (!standardPattern.test(newPass)) {
                alert('Please ensure your password matches all security standard.');
                return;
            }
            if (newPass !== confirmPass) {
                alert('Confirm password values do not match.');
                return;
            }

            alert('Password changed successfully!');
            document.getElementById('passwordForm').reset();
            evaluatePasswordRequirements(); // Reset validation indicators
        }

        window.addEventListener('click', function() {
            const dropdown = document.getElementById('profileDropdown');
            if (dropdown.classList.contains('show')) dropdown.classList.remove('show');
        });
    </script>
