index-main/assets/js/donation-tabs.js

/**
 * Gestion des onglets de donation (ponctuel / mensuel)
 */
document.addEventListener('DOMContentLoaded', function() {
    const tabButtons = document.querySelectorAll('.nav--tabs__btn');
    const donationLinks = document.querySelectorAll('.btn--donation[data-amount]');

    if (tabButtons.length === 0 || donationLinks.length === 0) return;

    tabButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Retirer la classe is-selected de tous les boutons
            tabButtons.forEach(btn => btn.classList.remove('is-selected'));

            // Ajouter la classe is-selected au bouton cliqué
            this.classList.add('is-selected');

            // Récupérer l'intervalle (o = ponctuel, m = mensuel)
            const interval = this.getAttribute('data-interval');

            // Mettre à jour les liens de donation
            donationLinks.forEach(link => {
                const amount = link.getAttribute('data-amount');
                const currentHref = link.getAttribute('href');

                // Remplacer l'intervalle dans l'URL
                const newHref = currentHref.replace(
                    /default_interval=[om]/,
                    `default_interval=${interval}`
                );

                link.setAttribute('href', newHref);

                // Mettre à jour le texte (ajouter /mois pour mensuel)
                const amountSpan = link.querySelector('.amount-value');
                const boldText = link.querySelector('.bold');

                if (amountSpan && boldText) {
                    if (interval === 'm') {
                        boldText.innerHTML = `<span class="amount-value">${amount}</span>€/mois`;
                    } else {
                        boldText.innerHTML = `<span class="amount-value">${amount}</span>€`;
                    }
                }
            });

            // Mettre à jour aussi le lien "Montant libre"
            const freeAmountLink = document.querySelector('.btn--donation:not([data-amount])');
            if (freeAmountLink) {
                const currentHref = freeAmountLink.getAttribute('href');
                const newHref = currentHref.replace(
                    /default_interval=[om]/,
                    `default_interval=${interval}`
                );
                freeAmountLink.setAttribute('href', newHref);
            }
        });
    });
});