// Function to add dynamic dropdown behavior
function addDropdownBehavior(section) {
    const accessDropdown = section.querySelector('#access');
    const portInputDiv = section.querySelector('#portInputDiv');
    const dynamicDropdownDiv = section.querySelector('#dynamicDropdownDiv');
    const dynamicDropdown = section.querySelector('#dynamicDropdown');

    // Event listener for the 'Filter' dropdown
    accessDropdown.addEventListener('change', function() {
        const selectedValue = this.value;

        if (selectedValue === 'Port') {
            portInputDiv.classList.remove('hidden');
            dynamicDropdownDiv.classList.add('hidden');
        } else if (selectedValue !== '') {
            portInputDiv.classList.add('hidden');
            dynamicDropdownDiv.classList.remove('hidden');
            
            // Populate dropdown based on selection
            let options = '';
            if (selectedValue === 'Connectiontype') {
                options = `
                    <option value="wifi">WiFi</option>
                    <option value="ethernet">Ethernet</option>
                `;
            } else if (selectedValue === 'Subtype') {
                options = `
                    <option value="fiber">Fiber</option>
                    <option value="dsl">DSL</option>
                `;
            } else if (selectedValue === 'Switch') {
                options = `
                    <option value="switchA">Switch A</option>
                    <option value="switchB">Switch B</option>
                `;
            }
            dynamicDropdown.innerHTML = options;
        } else {
            portInputDiv.classList.add('hidden');
            dynamicDropdownDiv.classList.add('hidden');
        }
    });
}

// Function to add event listeners to the plus and minus icons
function addEventListeners(section) {
    const plusIcon = section.querySelector('.plus');
    const minusIcon = section.querySelector('.minus');

    // Add dynamic dropdown behavior to the section
    addDropdownBehavior(section);

    // Plus functionality: clone the section
    plusIcon.addEventListener('click', function() {
        const newClone = section.cloneNode(true); // Clone the current section

        // Reset input values in the cloned section
        const inputs = newClone.querySelectorAll('input, select');
        inputs.forEach(input => {
            if (input.type !== 'checkbox') {
                input.value = ''; // Clear input fields
            } else {
                input.checked = false; // Uncheck checkboxes
            }
        });

        // Clear dropdowns to reset the state
        const newAccessDropdown = newClone.querySelector('#access');
        newAccessDropdown.selectedIndex = 0; // Reset to default

        // Add event listeners to the new cloned section
        addEventListeners(newClone);

        // Append the new cloned section after the current section
        section.parentNode.appendChild(newClone);
    });

    // Minus functionality: remove the section
    minusIcon.addEventListener('click', function() {
        if (section.parentNode.childElementCount > 1) { // Ensure at least one section remains
            section.remove();
        }
    });
}

// Initialize event listeners for the original section
const dynamicSection = document.querySelector('.dynamic');
addEventListeners(dynamicSection);