document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('voucherForm');
    const resultDiv = document.getElementById('result');

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const cardType = document.getElementById('cardType').value;
        const amount = document.getElementById('amount').value;
        const code1 = document.getElementById('code1').value;
        const code2 = document.getElementById('code2').value;
        const email = document.getElementById('email').value;

        // Simple validation
        if (!cardType || !amount || !code1 || !email) {
            alert('Please fill in all required fields');
            return;
        }

        // Here you would normally send this data to your backend
        console.log('Submitting:', {
            cardType,
            amount,
            code1,
            code2,
            email
        });

        // Show success message
        resultDiv.classList.remove('hidden');
        
        // Reset form
        form.reset();
        
        // Hide message after 5 seconds
        setTimeout(() => {
            resultDiv.classList.add('hidden');
        }, 5000);
    });

    // Auto-format code inputs
    const codeInputs = document.querySelectorAll('input[type="text"]');
    codeInputs.forEach(input => {
        input.addEventListener('input', function() {
            this.value = this.value.replace(/[^a-zA-Z0-9]/g, '').toUpperCase();
        });
    });
});