document.addEventListener('DOMContentLoaded', async () => {
    const stripe = Stripe('pk_live_51SJvpVAgq1ywLQy0IPutpWNtY9AmGKijmeu0MgxOxsNQEXW1nsdrLuUS0o7aU2Cnki6OwkZ1YhV10nCVcBgRuWjO00jh0pFCLY');

    const { clientSecret } = await fetch('create-payment-intent.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({})
    }).then(r => r.json());

    const elements = stripe.elements({ clientSecret });
    const cardElement = elements.create('card');
    cardElement.mount('#card-element');

    const form = document.getElementById('payment-form');
    const errorContainer = document.getElementById('card-errors');

    form.addEventListener('submit', async (event) => {
        event.preventDefault();

        const { error } = await stripe.confirmPayment({
            elements,
            confirmParams: {
                return_url: window.location.href.split('?')[0] + '?payment=success'
            }
        });

        if (error) {
            errorContainer.textContent = error.message;
        } else {
            errorContainer.textContent = '';
        }
    });

    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('payment') === 'success') {
        document.getElementById('card-payment-form').classList.add('d-none');
        document.getElementById('spei-info').classList.add('d-none');
        document.getElementById('payment-success').classList.remove('d-none');
    }
});