async function loadServers() {
    const serverSelect = document.getElementById('server-select');
    const actionSelect = document.getElementById('action-select');
    const response = await fetch('http://localhost:5000/api/servers');
    const responseAc = await fetch('http://localhost:5000/api/actions');
    const servers = await response.json();
    const actions = await responseAc.json();

    // Clear existing options
    serverSelect.innerHTML = '';

    servers.forEach(server => {
        const option = document.createElement('option');
        option.value = server[1]; // IP address
        option.textContent = server[2]; // Server name
        serverSelect.appendChild(option);
    });
    // Clear existing options
    actionSelect.innerHTML = '';

    actions.forEach(action => {
        const optionAc = document.createElement('option');
        optionAc.textContent = action[2]; // Do not know
        optionAc.textContent = action[1];
        actionSelect.appendChild(optionAc);
    });
}

//async function loadActions() {
//    const actionSelect = document.getElementById('action-select');
//    const responseAc = await fetch('http://localhost:5000/api/actions');
//    const actions = await responseAc.json();
//
//    // Clear existing options
//    actionSelect.innerHTML = '';
//
//    actions.forEach(action => {
//    const optionAc = document.createElement('option');
//    optionAc.textContent = action[2]; // Do not know
//    optionAc.textContent = action[1];
//    actionSelect.appendChild(optionAc);
//    });
//}


// Load servers and actions when the page loads
window.onload = loadServers;

// Handle API call choice. 
document.getElementById('confirmButton').addEventListener('click', async () => {
    const ip = document.getElementById('server-select').value;
    const action = document.getElementById('action-select').value;
    const action_low = action.toLowerCase();
    const action_done = action_low.replace(/ /g, "-");

    const response = await fetch(`http://localhost:5000/api/${action_done}?ip=${ip}`);
    const data = await response.json();
    document.getElementById('server-info').textContent = JSON.stringify(data, null, 2);
});

//// Handle SNMP info fetch
//document.getElementById('confirmButton').addEventListener('click', async () => {
//    const ip = document.getElementById('server-select').value;
//    const action = document.getElementById('action-select').value;
//
//    const response = await fetch(`http://localhost:5000/api/${action}?ip=${ip}`);
//    const data = await response.json();
//    document.getElementById('server-info').textContent = JSON.stringify(data, null, 2);
//});
//
//// SNMP send test message
//document.getElementById('confirmButton').addEventListener('click', async () => {
//    const ip = document.getElementById('server-select').value;
//    const action = document.getElementById('action-select').value;
//
//    const response = await fetch(`http://localhost:5000/api/${action}?ip=${ip}`);
//    const data = await response.json();
//    document.getElementById('server-info').textContent = JSON.stringify(data, null, 2);
//});

// Handle form submission to add new server
document.getElementById('add-server-form').addEventListener('submit', async (event) => {
    event.preventDefault(); // Prevent form from reloading the page

    const ip = document.getElementById('server-ip').value;
    const name = document.getElementById('server-name').value;

    const response = await fetch('http://localhost:5000/api/add-server', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ ip: ip, name: name })
    });

    if (response.ok) {
        alert('Server added successfully!');
        // Reload server list
        loadServers();
    } else {
        alert('Error adding server');
    }
});


// Handle form submission to add new API call
document.getElementById('add-action-form').addEventListener('submit', async (event) => {
    event.preventDefault(); // Prevent form from reloading the page

    const name = document.getElementById('action-name').value;
    const endpoint = document.getElementById('action-call').value;

    const response = await fetch('http://localhost:5000/api/add-endpoint', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ name: name, endpoint: endpoint })
    });

    if (response.ok) {
        alert('API call added successfully!');
        // Reload server list
        loadServers();
    } else {
        alert('Error adding API call');
    }
});