script.js

document.addEventListener('DOMContentLoaded', function() {
  // Dark mode toggle functionality
  const themeToggle = document.getElementById('theme-toggle');
  const themeToggleBall = document.getElementById('theme-toggle-ball');
  
  function toggleTheme() {
    document.documentElement.classList.toggle('dark');
    localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
  }
  
  // Check for saved theme preference
  if (localStorage.getItem('theme') === 'dark') {
    document.documentElement.classList.add('dark');
    themeToggleBall.classList.remove('translate-x-1');
    themeToggleBall.classList.add('translate-x-6');
  } else {
    document.documentElement.classList.remove('dark');
    themeToggleBall.classList.add('translate-x-1');
    themeToggleBall.classList.remove('translate-x-6');
  }
  
  // Theme toggle event
  themeToggle.addEventListener('click', toggleTheme);
  
  // Initialize tooltips when data is added
  function initTooltips() {
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function(tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl);
    });
  }
  
  // Feather icons replacement
  feather.replace();
  
  // Sample data for demonstration (would be replaced with real data in production)
  const sampleHelocData = {
    lender: "Example Bank",
    maxLine: "$150,000",
    draw: "$50,000",
    rate: "5.25%",
    closingCosts: "$1,200",
    annualFee: "$75"
  };
  
  const sampleRefiData = {
    lender: "Example Mortgage",
    loanAmount: "$300,000",
    rate: "4.99%",
    term: "30 years",
    points: "1%",
    closingCosts: "$3,500"
  };
  
  // Would use these to populate tables when "Add" buttons are clicked
});