document.addEventListener('DOMContentLoaded', function() {
    const numChildrenSelect = document.getElementById('num_children');
    
    if (numChildrenSelect) {
        // Run once on page load to initialize visibility
        toggleChildrenFields(parseInt(numChildrenSelect.value) || 0);
        
        // Listen for changes
        numChildrenSelect.addEventListener('change', function() {
            toggleChildrenFields(parseInt(this.value) || 0);
        });
    }
});

function toggleChildrenFields(count) {
    // We support 0 to 4 children
    for (let i = 1; i <= 4; i++) {
        const section = document.getElementById(`child_section_${i}`);
        if (section) {
            if (i <= count) {
                section.style.display = 'block';
                // Make inputs required if visible (optional, but let's let them be optional)
                // toggleInputsRequired(section, true);
            } else {
                section.style.display = 'none';
                // toggleInputsRequired(section, false);
            }
        }
    }
}

function toggleInputsRequired(container, isRequired) {
    const inputs = container.querySelectorAll('input');
    inputs.forEach(input => {
        // We only make the Name required if the section is shown
        if (input.name.endsWith('_name')) {
            input.required = isRequired;
        }
    });
}