document.addEventListener('DOMContentLoaded', function() {
    const table = document.getElementById('user_table');
    const popup = document.getElementById("popup");
    const popupMessage = document.getElementById("popup-message");
    const confirmButton = document.getElementById("confirm-button");
    const cancelButton = document.getElementById("cancel-button");
    const searchInput = document.getElementById("search");
    let currentPid = null;

    table.addEventListener('click', function(event) {
        const target = event.target;

        if (target.classList.contains('btn_delete')) {
            // Handle delete button click
            currentPid = target.getAttribute('data-pid');
            if (currentPid) {
                popupMessage.textContent = "Do you really want to delete the user: " + currentPid + "?";
                popup.style.display = "block";

                // Set confirm button for delete action
                confirmButton.onclick = function() {
                    const deleteForm = document.createElement('form');
                    deleteForm.action = '../configuration/switch_delete.php';
                    deleteForm.method = 'POST';

                    const pidInputField = document.createElement('input');
                    pidInputField.type = 'hidden';
                    pidInputField.name = 'pid';
                    pidInputField.value = currentPid;
                    deleteForm.appendChild(pidInputField);

                    document.body.appendChild(deleteForm);
                    deleteForm.submit();
                    popup.style.display = "none";
                };
            }
            event.stopPropagation();
        }

        if (target.classList.contains('btn_modify')) {
            currentPid = target.getAttribute('data-pid');
            if (currentPid) {
                popupMessage.textContent = "Do you want to modify the switch with PID: " + currentPid + "?";
                popup.style.display = "block";

                // Set confirm button for modify action (using POST method)
                confirmButton.onclick = function() {
                    const modifyForm = document.createElement('form');
                    modifyForm.action = '../configuration/switch_modify.php';
                    modifyForm.method = 'POST';

                    // Hidden input field to send the PID via POST
                    const pidInputField = document.createElement('input');
                    pidInputField.type = 'hidden';
                    pidInputField.name = 'pid';
                    pidInputField.value = currentPid;
                    modifyForm.appendChild(pidInputField);

                    document.body.appendChild(modifyForm);
                    modifyForm.submit();
                    popup.style.display = "none";
                };
            } else {
                console.error("No PID found for modify button.");  // Log an error if PID is not found
            }
            event.stopPropagation();
        }
    });

    cancelButton.addEventListener('click', function() {
        popup.style.display = "none";
    });

    // Close popup when clicking outside of it
    window.addEventListener('click', function(event) {
        if (event.target == popup) {
            popup.style.display = "none";
        }
    });

    // Clear search input
    document.getElementById("clear_btn").addEventListener('click', function(event) {
        event.preventDefault();
        searchInput.value = '';
    });
});