
<!-- Bottom Navigation -->
<div class="bottom-nav">
  <a href="." class="active"><i class="bi bi-house-door"></i></a>
  <a href="transfer"><i class="bi bi-arrow-left-right"></i></a>
  <a href="cards"><i class="bi bi-credit-card-2-front"></i></a>
  <a href="loan"><i class="bi bi-cash-coin"></i></a>
  <a href="settings"><i class="bi bi-gear"></i></a>
  <!--<a href="#" title="Logout" class="logout-trigger"><i class="bi bi-box-arrow-right"></i></a>-->
</div>

<!-- ✅ Logout Confirmation Modal -->
<div class="modal fade logoutModal" id="logoutModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content dmodal">
      <div class="modal-header"><h5 class="modal-title">Confirm Logout</h5></div>
      <div class="modal-body text-center">Are you sure you want to log out?</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <a href="logout" class="btn btn-danger text-white">Logout</a>
      </div>
    </div>
  </div>
</div>

<!-- Floating Theme Toggle -->
<div class="theme-toggle bi bi-brightness-high" title="Toggle Light/Dark Mode"></div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
  // Theme toggle
  const toggle = document.querySelector('.theme-toggle');
  toggle.addEventListener('click', () => {
    document.body.classList.toggle('light-mode');
    toggle.classList.toggle('bi-moon');
    toggle.classList.toggle('bi-brightness-high');
  });

  // Hide/Show balances
  const hideBtn = document.getElementById('toggleBalance');
  const balances = document.querySelectorAll('.balance');
  let hidden = false;
  const originalValues = Array.from(balances).map(el => el.textContent);

  hideBtn.addEventListener('click', () => {
    hidden = !hidden;
    balances.forEach((b, i) => {
      b.textContent = hidden ? '••••••' : originalValues[i];
    });
    hideBtn.innerHTML = hidden ? '<i class="bi bi-eye"></i> Show' : '<i class="bi bi-eye-slash"></i> Hide';
  });

  document.querySelectorAll('.logout-trigger').forEach(button => {
    button.addEventListener('click', (e) => {
      e.preventDefault();
      const modal = new bootstrap.Modal(document.getElementById('logoutModal'));
      modal.show();
    });
  });
</script>
</body>
</html>
