Fold: Voucher Request

document.addEventListener('DOMContentLoaded', () => {
  // Find all fold containers and set them up
  const foldContainers = document.querySelectorAll('.c-fold');

  foldContainers.forEach(container => {
    // Find the essential parts of the component
    const toggleButton = container.querySelector('.js-btn-fold-toggle');
    const detailsSection = container.querySelector('.c-fold__details');
    
    // Find the optional close button
    const closeButton = container.querySelector('.js-btn-close-fold');

    // If there's no toggle button or details section, this isn't a valid fold component
    if (!toggleButton || !detailsSection) {
      return;
    }

    // Get button texts from data attributes
    const showText = toggleButton.dataset.showText;
    const hideText = toggleButton.dataset.hideText;

    // --- STATE MANAGEMENT FUNCTIONS ---

    const openDetails = () => {
      detailsSection.style.display = 'flex';
      toggleButton.textContent = hideText;
      toggleButton.setAttribute('aria-expanded', 'true');
      detailsSection.setAttribute('aria-hidden', 'false');
    };

    const closeDetails = () => {
      detailsSection.style.display = 'none';
      toggleButton.textContent = showText;
      toggleButton.setAttribute('aria-expanded', 'false');
      detailsSection.setAttribute('aria-hidden', 'true');
    };
    
    // --- INITIAL STATE ---
    
    // Start with the details section closed
    closeDetails();

    // --- EVENT LISTENERS ---

    // 1. Toggle Button (Open/Close)
    const toggleFoldHandler = (event) => {
      event.preventDefault();
      const isHidden = detailsSection.style.display === 'none';
      if (isHidden) {
        openDetails();
      } else {
        closeDetails();
      }
    };

    toggleButton.addEventListener('click', toggleFoldHandler);
    toggleButton.addEventListener('keydown', (event) => {
      if (event.key === 'Enter' || event.key === ' ') {
        toggleFoldHandler(event);
      }
    });

    // 2. Optional Close Button (Close Only)
    if (closeButton) {
      const closeFoldHandler = (event) => {
        event.preventDefault();
        closeDetails();
      };

      closeButton.addEventListener('click', closeFoldHandler);
      closeButton.addEventListener('keydown', (event) => {
        if (event.key === 'Enter' || event.key === ' ') {
          closeFoldHandler(event);
        }
      });
    }
  });
});