//---------------------DYNAMIC DROPDOWN WHILE SELECTING CONDITION-------------------//
function toggleSecondDropdown(selectElement) {
    const secondDropdown = document.getElementById('second-dropdown');

    // Show the second dropdown when SSID or MAC address is selected
    if (selectElement.value === '1' || selectElement.value === '2') {
        secondDropdown.style.display = 'block';
    } else {
        secondDropdown.style.display = 'none';
        // Hide the value input if second dropdown is hidden
        document.getElementById('value-input-group').style.display = 'none';
    }
}

function showInputField(selectElement) {
    const valueInputGroup = document.getElementById('value-input-group');

    // Show the input field when any valid option is selected from the second dropdown
    if (selectElement.value !== '#' && selectElement.value !== "") {
        valueInputGroup.style.display = 'block';
    } else {
        valueInputGroup.style.display = 'none';
    }
}

//--------- CONDITIONAL DROPDOWN ACTION INPUT--------------//
function handleActionChange(selectElement) {
    const roleDropdown = document.getElementById('role-dropdown');
    const accessDurationDropdown = document.getElementById('access-duration-dropdown');
    const unregistrationDateInput = document.getElementById('unregistration-date');

    // Hide all additional elements initially
    roleDropdown.style.display = 'none';
    accessDurationDropdown.style.display = 'none';
    unregistrationDateInput.style.display = 'none';

    // Show the relevant element based on the selected value
    switch (selectElement.value) {
        case 'A':
            roleDropdown.style.display = 'block';
            break;
        case 'B':
            accessDurationDropdown.style.display = 'block';
            break;
        case 'C':
            unregistrationDateInput.style.display = 'block';
            break;
        default:
            // Optionally handle cases where the default or empty value is selected
            break;
    }
}

//---------------ADD AND REMOVE SECTION BASED ON ACTION DROPDOWN--------------------//

// Add event listeners to dynamically add/remove sections
document.addEventListener("DOMContentLoaded", function () {
    // Initialize event listeners on the first set of add/remove images
    initializeSectionControls();
});

// Function to initialize the add/remove event listeners on a section
function initializeSectionControls() {
    // Remove existing event listeners before adding new ones
    document.querySelectorAll(".dropdown1-container .add").forEach((button) => {
        button.replaceWith(button.cloneNode(true));
    });

    document.querySelectorAll(".dropdown1-container .remove").forEach((button) => {
        button.replaceWith(button.cloneNode(true));
    });

    document.querySelectorAll(".dropdown2-container .add").forEach((button) => {
        button.replaceWith(button.cloneNode(true));
    });

    document.querySelectorAll(".dropdown2-container .remove").forEach((button) => {
        button.replaceWith(button.cloneNode(true));
    });

    // Add section for dropdown1-container
    document.querySelectorAll(".dropdown1-container .add").forEach((button) => {
        button.addEventListener("click", function () {
            addSection("dropdown1-container");
        });
    });

    // Remove section for dropdown1-container
    document.querySelectorAll(".dropdown1-container .remove").forEach((button) => {
        button.addEventListener("click", function () {
            removeSection("dropdown1-container");
        });
    });

    // Add section for dropdown2-container
    document.querySelectorAll(".dropdown2-container .add").forEach((button) => {
        button.addEventListener("click", function () {
            addSection("dropdown2-container");
        });
    });

    // Remove section for dropdown2-container
    document.querySelectorAll(".dropdown2-container .remove").forEach((button) => {
        button.addEventListener("click", function () {
            removeSection("dropdown2-container");
        });
    });

    // Initialize dropdown event listeners (for dynamic fields)
    initializeDropdownEventListeners();
}

// Function to initialize dropdown-related event listeners
function initializeDropdownEventListeners() {
    document.querySelectorAll(".dropdown1-container select[name='dropdown1']").forEach((dropdown) => {
        dropdown.addEventListener("change", function () {
            toggleSecondDropdown(this);
        });
    });

    document.querySelectorAll(".dropdown1-container select[name='dropdown3']").forEach((dropdown) => {
        dropdown.addEventListener("change", function () {
            showInputField(this);
        });
    });

    document.querySelectorAll(".dropdown2-container select[name='dropdown2']").forEach((dropdown) => {
        dropdown.addEventListener("change", function () {
            handleActionChange(this);
        });
    });
}

// Function to add a section
function addSection(containerClass) {
    // Get the container
    const container = document.querySelector(`.${containerClass}`);

    // Clone the first section of the container
    const newSection = container.cloneNode(true);

    // Reset values of the cloned inputs if necessary
    const inputs = newSection.querySelectorAll("input, select");
    inputs.forEach((input) => (input.value = ""));

    // Append the cloned section to the parent
    container.parentNode.appendChild(newSection);

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

// Function to remove a section
function removeSection(containerClass) {
    // Get all sections of the specific container
    const sections = document.querySelectorAll(`.${containerClass}`);

    // Only remove if there is more than one section
    if (sections.length > 1) {
        sections[sections.length - 1].remove();
    }
}

// Function to handle dynamic behavior for dropdown1-container (Condition)
function toggleSecondDropdown(dropdown) {
    const secondDropdown = dropdown.closest(".dropdown1-container").querySelector("#second-dropdown");
    if (dropdown.value === "1" || dropdown.value === "2") {
        secondDropdown.style.display = "block";
    } else {
        secondDropdown.style.display = "none";
    }
}

// Function to show the input field when an option is selected from the second dropdown
function showInputField(dropdown) {
    const valueInputGroup = dropdown.closest(".dropdown1-container").querySelector("#value-input-group");
    if (dropdown.value !== "#") {
        valueInputGroup.style.display = "block";
    } else {
        valueInputGroup.style.display = "none";
    }
}

// Function to handle dynamic behavior for dropdown2-container (Action)
function handleActionChange(dropdown) {
    const roleDropdown = dropdown.closest(".dropdown2-container").querySelector("#role-dropdown");
    const accessDurationDropdown = dropdown.closest(".dropdown2-container").querySelector("#access-duration-dropdown");
    const unregistrationDate = dropdown.closest(".dropdown2-container").querySelector("#unregistration-date");

    // Reset visibility of all associated fields
    roleDropdown.style.display = "none";
    accessDurationDropdown.style.display = "none";
    unregistrationDate.style.display = "none";

    if (dropdown.value === "A") {
        roleDropdown.style.display = "block";
    } else if (dropdown.value === "B") {
        accessDurationDropdown.style.display = "block";
    } else if (dropdown.value === "C") {
        unregistrationDate.style.display = "block";
    }
}