// Function to clone the entire additional-fields-container
function cloneAdditionalFieldsContainer() {
    // Clone the original additional-fields-container
    const originalContainer = document.querySelector('#additional-fields-container');
    const clonedContainer = originalContainer.cloneNode(true);

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

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

    // Add event listeners to the plus and minus images in the cloned container
    initializeCloneControls(clonedContainer);

    // Find the original additional-fields-container to insert the cloned container after it
    if (originalContainer) {
        // Insert the cloned container after the original .additional-fields-container
        originalContainer.insertAdjacentElement('afterend', clonedContainer);
    } else {
        console.error('#additional-fields-container not found.');
    }
}


// Function to remove the most recently added cloned container
function removeLastClonedContainer() {
    const clonedContainers = document.querySelectorAll('#additional-fields-container.cloned-container');
    if (clonedContainers.length > 0) {
        clonedContainers[clonedContainers.length - 1].remove(); // Remove the last cloned container
    } else {
        alert('No cloned containers to remove.');
    }
}

// Function to initialize plus and minus functionality for cloned containers
function initializeCloneControls(container) {
    const addImage = container.querySelector('.plus');
    const removeImage = container.querySelector('.minus');

    if (addImage) {
        addImage.addEventListener('click', function(event) {
            event.preventDefault(); // Prevent default behavior
            cloneAdditionalFieldsContainer(); // Clone another container
        });
    }

    if (removeImage) {
        removeImage.addEventListener('click', function(event) {
            event.preventDefault(); // Prevent default behavior
            removeLastClonedContainer(); // Remove the last cloned container
        });
    }
}

// Initialize event listeners for the original plus and minus images
document.addEventListener('DOMContentLoaded', function() {
    // Add click event listener to the plus image in the original container
    const originalAddImage = document.querySelector('#add-field');
    if (originalAddImage) {
        originalAddImage.addEventListener('click', function(event) {
            event.preventDefault(); // Prevent default behavior
            cloneAdditionalFieldsContainer(); // Clone the container
        });
    }

    // Add click event listener to the minus image in the original container
    const originalRemoveImage = document.querySelector('#remove-field');
    if (originalRemoveImage) {
        originalRemoveImage.addEventListener('click', function(event) {
            event.preventDefault(); // Prevent default behavior
            removeLastClonedContainer(); // Remove the last cloned container
        });
    }
});