Sponsor rijstzakken

const MAX_PEOPLE = 15000;
const PEOPLE_PER_EURO = 3;
const UPDATE_DELAY = 350;
const MIN_DONATION = 5;

function formatNumber(num) {
  // Convert to number and format with periods for thousands
  const rounded = Math.round(num);
  return rounded.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
}

function formatCurrency(num) {
  // Format currency with comma as decimal separator and period as thousands separator
  const rounded = Math.round(num * 100) / 100; // Keep 2 decimals
  const parts = rounded.toFixed(2).split('.');
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
  return parts.join(',');
}

function extractNumber(value) {
  if (!value) return 0;
  const cleaned = value.toString().replace(/€/g, '').trim();
  // Remove periods (thousands separator) and replace comma with dot for parsing
  const normalized = cleaned.replace(/\./g, '').replace(',', '.');
  return parseFloat(normalized) || 0;
}

function updateDonationDisplay(form) {
  const customDonationInput = form.querySelector('.custom_donation input');
  const messageDisplay = form.querySelector('.message_display');
  const progressFill = form.querySelector('.progress-fill');
  const frequencyRadios = form.querySelectorAll('.donation_frequency input[type="radio"]');
  const rangeSlider = form.querySelector('.progress-wrapper input[type="range"]');
  
  if (!messageDisplay || !progressFill) return;

  const donationType = form.querySelector('.donation_type input[type="radio"]:checked');
  const donationPrivate = form.querySelector('.donation_am_p input[type="radio"]:checked');
  //const donationBusiness = form.querySelector('.donation_am_b input[type="radio"]:checked');
  
  let donationAmount = 0;
  
    if (donationPrivate) {
      if (donationPrivate.value === "Anders") {
        donationAmount = customDonationInput ? extractNumber(customDonationInput.value) : 0;
      } else {
        donationAmount = extractNumber(donationPrivate.value);
      }
    }
  

  let isMonthly = false;
  frequencyRadios.forEach(radio => {
    if (radio.checked && radio.value === 'Maandelijks') {
      isMonthly = true;
    }
  });

  const soulsPerMonth = donationAmount * PEOPLE_PER_EURO;
  const soulsPerYear = soulsPerMonth * 12;
  const yearlyAmount = donationAmount * 12;

  if (isMonthly) {
    messageDisplay.innerHTML = `12 x €${formatNumber(donationAmount)} per maand = €${formatNumber(yearlyAmount)} per jaar. Hiermee meten we per jaar <span class="badge">${formatNumber(soulsPerYear)} keuzes</span> keuzes voor Jezus`;
  } else {
    messageDisplay.innerHTML = `Met jouw partnerschap win je <span class="badge">${formatNumber(soulsPerMonth)} zielen</span> per maand.`;
  }

  const percentage = Math.min((soulsPerMonth / MAX_PEOPLE) * 100, 100);
  progressFill.style.width = percentage + '%';
  
  if (rangeSlider) {
    rangeSlider.value = percentage;
  }
}

function handleRangeSliderChange(form, rangeSlider) {
  const customDonationInput = form.querySelector('.custom_donation input');
  const progressFill = form.querySelector('.progress-fill');
  
  if (!customDonationInput || !progressFill) return;
  
  const percentage = parseFloat(rangeSlider.value);
  const soulsPerMonth = (percentage / 100) * MAX_PEOPLE;
  const donationAmount = Math.max(MIN_DONATION, Math.round(soulsPerMonth / PEOPLE_PER_EURO));
  
  // Click "Anders" radio button first
  const andersRadios = form.querySelectorAll('.gchoice input[value="Anders"]');
  if (andersRadios.length > 0) {
    setTimeout(() => {
      andersRadios.forEach(radio => {
        if (radio.closest('.donation_am_p')) {
          const donationType = form.querySelector('.donation_type input[type="radio"]:checked');
         
            radio.click();
          
        }
      });
    }, 50);
  }
  
  customDonationInput.value = `€${formatCurrency(donationAmount)}`;
  progressFill.style.width = percentage + '%';
  
  setTimeout(() => updateDonationDisplay(form), 100);
}

function initializeForm(form) {
  let updateTimer;
  const debouncedUpdate = () => {
    clearTimeout(updateTimer);
    updateTimer = setTimeout(() => updateDonationDisplay(form), UPDATE_DELAY);
  };

  const customDonationInput = form.querySelector('.custom_donation input');
  if (customDonationInput) {
    customDonationInput.addEventListener('input', debouncedUpdate);
    customDonationInput.addEventListener('change', debouncedUpdate);
    
    // Set minimum value
    customDonationInput.setAttribute('min', MIN_DONATION);
  }

  const allRadios = form.querySelectorAll('input[type="radio"]');
  allRadios.forEach(radio => {
    radio.addEventListener('change', debouncedUpdate);
  });

  const rangeSlider = form.querySelector('.progress-wrapper input[type="range"]');
  if (rangeSlider) {
    rangeSlider.addEventListener('input', () => handleRangeSliderChange(form, rangeSlider));
  }

  updateDonationDisplay(form);
}




function initializeAllForms() {
  const forms = document.querySelectorAll('.gospel_donation_form');
  forms.forEach(form => initializeForm(form));
}

// Initialize forms when DOM is ready or immediately if already loaded
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initializeAllForms);
} else {
  initializeAllForms();
}

// Gravity Forms events
const gformEvents = ['gform_page_loaded', 'gform/theme/scripts_loaded'];
gformEvents.forEach(event => {
  document.addEventListener(event, initializeAllForms);
});

// jQuery support for older Gravity Forms versions
if (typeof jQuery !== 'undefined') {
  jQuery(document).on('gform_page_loaded', initializeAllForms);
}