card.classList.add('selected');
            }
            
            updateStats();
        }

        // Update statistics
        function updateStats() {
            let liveChannels = 0;
            let vodContent = 0;
            
            selectedCategories.forEach(category => {
                const count = parseInt(document.querySelector(`[data-category="${category}"]`).dataset.count);
                
                if (category.startsWith('AF-') || category.startsWith('AM-') || category.startsWith('AR-') || 
                    category.startsWith('EU-') || category.startsWith('DA-') || category.startsWith('VP-') || 
                    category.startsWith('XO-')) {
                    liveChannels += count;
                } else {
                    vodContent += count;
                }
            });
            
            document.getElementById('liveChannels').textContent = liveChannels.toLocaleString();
            document.getElementById('vodContent').textContent = vodContent.toLocaleString();
        }

        // Show notification
        function showNotification(message, type = 'success') {
            const notification = document.getElementById('notification');
            notification.textContent = message;
            notification.className = `notification show ${type}`;
            
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }

        // Submit form
        function submitForm() {
            const username = document.getElementById('username').value.trim();
            const fullname = document.getElementById('fullname').value.trim();
            const email = document.getElementById('email').value.trim();
            
            // Validation
            if (!username || !fullname || !email) {
                showNotification('Please fill in all required fields', 'error');
                return;
            }
            
            if (selectedCategories.size === 0) {
                showNotification('Please select at least one category', 'error');
                return;
            }
            
            // Update hidden form
            document.getElementById('hiddenUsername').value = username;
            document.getElementById('hiddenFullname').value = fullname;
            document.getElementById('hiddenEmail').value = email;
            
            // Add selected categories to hidden form
            const hiddenCategories = document.getElementById('hiddenCategories');
            hiddenCategories.innerHTML = '';
            
            selectedCategories.forEach(category => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'categories';
                input.value = category;
                hiddenCategories.appendChild(input);
            });
            
            // Submit the form
            document.querySelector('form[name="category-selection"]').submit();
            
            // Show success message
            showNotification('Form submitted successfully! We will contact you soon.');
            
            // Reset form
            setTimeout(() => {
                document.getElementById('username').value = '';
                document.getElementById('fullname').value = '';
                document.getElementById('email').value = '';
                selectedCategories.clear();
                document.querySelectorAll('.channel-card.selected').forEach(card => {
                    card.classList.remove('selected');
                });
                updateStats();
            }, 2000);
        }

        // Handle form submission via AJAX for better UX
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.querySelector('form[name="category-selection"]');
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const formData = new FormData(form);
                
                fetch('/', {
                    method: 'POST',
                    headers: { "Content-Type": "application/x-www-form-urlencoded" },
                    body: new URLSearchParams(formData).toString()
                })
                .then(() => {
                    showNotification('Form submitted successfully! We will contact you soon.');
                    
                    // Reset form
                    document.getElementById('username').value = '';
                    document.getElementById('fullname').value = '';
                    document.getElementById('email').value = '';
                    selectedCategories.clear();
                    document.querySelectorAll('.channel-card.selected').forEach(card => {
                        card.classList.remove('selected');
                    });
                    updateStats();
                })
                .catch((error) => {
                    showNotification('Error submitting form. Please try again.', 'error');
                });
            });
        });
    </script>
</body>
</html>