// Function to clone and insert a section
 function cloneAndInsertSectionBeforeDropdown2() {
    // Clone the first .dropdown1-container
    const originalSection = document.querySelector('.dropdown1-container');
    const clonedSection = originalSection.cloneNode(true);

    // Reset the values of the cloned inputs if necessary
    const inputs = clonedSection.querySelectorAll("input, select");
    inputs.forEach((input) => {
        if (input.tagName.toLowerCase() === 'select') {
            input.selectedIndex = 0; // Set the default option (----------------) for dropdowns
        } else if (input.tagName.toLowerCase() === 'input') {
            input.value = ""; // Clear input fields
        }
    });

    // Add a unique class to the cloned section
    clonedSection.classList.add('cloned-section');

    // Find the .dropdown2-container
    const dropdown2Container = document.querySelector('.dropdown2-container');

    if (dropdown2Container) {
        // Insert the cloned section before the .dropdown2-container
        dropdown2Container.insertAdjacentElement('beforebegin', clonedSection);
    } else {
        console.error('.dropdown2-container not found.');
    }

    // Reinitialize event listeners for the new section if needed
    initializeSectionControls();
}




// Function to initialize event listeners for sections
function initializeSectionControls() {
    // Event delegation for dynamic dropdowns
    document.body.addEventListener('change', function(event) {
        if (event.target.matches('select[name="dropdown1"]')) {
            toggleSecondDropdown(event.target);
        } else if (event.target.matches('select[name="dropdown3"]')) {
            showInputField(event.target);
        } else if (event.target.matches('select[name="dropdown2"]')) {
            handleActionChange(event.target);
        }
    });

    // Add event listeners for the add and remove images
    const addImages = document.querySelectorAll('.add');
    addImages.forEach((img) => {
        img.addEventListener('click', cloneAndInsertSectionBeforeDropdown2);
    });

    const removeImages = document.querySelectorAll('.remove');
    removeImages.forEach((img) => {
        img.addEventListener('click', removeSection);
    });
}

// Ensure the dropdowns and inputs in cloned sections are dynamic
function toggleSecondDropdown(selectElement) {
    var secondDropdown = selectElement.closest('.dropdown1-container').querySelector('#second-dropdown');
    if (selectElement.value !== '#') {
        secondDropdown.style.display = 'block';
    } else {
        secondDropdown.style.display = 'none';
        selectElement.closest('.dropdown1-container').querySelector('#value-input-group').style.display = 'none'; // Hide value input if condition is reset
    }
}

function showInputField(selectElement) {
    var valueInputGroup = selectElement.closest('.dropdown1-container').querySelector('#value-input-group');
    if (selectElement.value !== '#') {
        valueInputGroup.style.display = 'block';
    } else {
        valueInputGroup.style.display = 'none';
    }
}

function handleActionChange(selectElement) {
    var container = selectElement.closest('.dropdown2-container');
    var roleDropdown = container.querySelector('#role-dropdown');
    var accessDurationDropdown = container.querySelector('#access-duration-dropdown');
    var unregistrationDate = container.querySelector('#unregistration-date');

    // Hide all dropdowns first
    roleDropdown.style.display = 'none';
    accessDurationDropdown.style.display = 'none';
    unregistrationDate.style.display = 'none';

    // Show relevant dropdown based on selection
    switch (selectElement.value) {
        case 'A':
            roleDropdown.style.display = 'block';
            break;
        case 'B':
            accessDurationDropdown.style.display = 'block';
            break;
        case 'C':
            unregistrationDate.style.display = 'block';
            break;
    }
}

// Initialize event listeners for existing elements on page load
document.addEventListener('DOMContentLoaded', () => {
    initializeSectionControls();
});


// Function to remove a section
function removeSection(event) {
    // Only remove sections with the 'cloned-section' class
    const currentSection = event.target.closest('.cloned-section');
    if (currentSection) {
        currentSection.remove();
    }
}

// Initialize event listeners for existing elements on page load
document.addEventListener('DOMContentLoaded', () => {
    initializeSectionControls();
});




//-------------------------------------------SECOND SECTION STARTS----------------------------------------------//

// Cloning function
function cloneAndInsertSectionBeforeImage(cloneBtn) {
    // Find the closest .dropdown2-container of the clicked clone button
    const originalSection = cloneBtn.closest('.dropdown2-container');
    const clonedSection = originalSection.cloneNode(true);

    // Reset the values of the cloned inputs
    const inputs = clonedSection.querySelectorAll("input, select");
    inputs.forEach((input) => {
        if (input.tagName.toLowerCase() === 'select') {
            input.selectedIndex = 0; // Set dropdown to default value
        } else if (input.tagName.toLowerCase() === 'input') {
            input.value = ""; // Clear input fields
        }
    });

    // Add a unique class to the cloned section
    clonedSection.classList.add('cloned-section');

    // Reinitialize controls for the new cloned section
    initializeSectionControlsForCloned(clonedSection);

    // Find the .image container
    const imageContainer = document.querySelector('.image');

    if (imageContainer) {
        // Insert the cloned section before the .image container
        imageContainer.insertAdjacentElement('beforebegin', clonedSection);
    } else {
        console.error('.image container not found.');
    }
}

// Removal function
function removeClonedSection(removeBtn) {
    const sectionToRemove = removeBtn.closest('.dropdown2-container');

    // Only remove if it is a cloned section (i.e., not the original one)
    if (sectionToRemove.classList.contains('cloned-section')) {
        sectionToRemove.remove();
    } else {
        alert("Cannot remove the original section!");
    }
}

// Initialize event listeners for dynamically cloned sections
function initializeSectionControlsForCloned(clonedSection) {
    // Add click event listener to the clone image in the cloned section
    const cloneBtn = clonedSection.querySelector('.clone');
    cloneBtn.addEventListener('click', function () {
        cloneAndInsertSectionBeforeImage(cloneBtn);
    });

    // Add click event listener to the declone image in the cloned section
    const removeBtn = clonedSection.querySelector('.declone');
    removeBtn.addEventListener('click', function () {
        removeClonedSection(removeBtn);
    });
}

// Initial setup for original sections
document.addEventListener('DOMContentLoaded', function () {
    // Add click event listener to clone images in the original sections
    document.querySelectorAll('.clone').forEach(cloneBtn => {
        cloneBtn.addEventListener('click', function () {
            cloneAndInsertSectionBeforeImage(cloneBtn);
        });
    });

    // Add click event listener to declone images in the original sections
    document.querySelectorAll('.declone').forEach(removeBtn => {
        removeBtn.addEventListener('click', function () {
            removeClonedSection(removeBtn);
        });
    });
});