$(document).ready(function() {
    console.log("Setting page loaded");
    $('#btnApplySetting').on('click', function() {
        send_data(JSON.stringify({
            request: "SET_SETTING",
            args: {
                smtpServer: $('#smtpServer').val(),
                smtpPort: $('#smtpPort').val(),
                smtpUsername: $('#smtpUsername').val(),
                smtpPassword: $('#smtpPassword').val(),
                smtpSSL: $('#smtpSSL').is(':checked'),
                smtpSenderAddress: $('#smtpSenderAddress').val(),
                smtpSenderName: $('#smtpSenderName').val(),
                smtpSubject: $('#smtpSubject').val(),
                vx3kIP: $('#vx3kIP').val(),
                vx3kPort: $('#vx3kPort').val(),
                mqttBrokerIP: $('#mqttBrokerIP').val(),
                mqttPort: $('#mqttPort').val(),
                mqttUsername: $('#mqttUsername').val(),
                mqttPassword: $('#mqttPassword').val(),
                mqttClientID: $('#mqttClientID').val(),
                mqttTopic: $('#mqttTopic').val()
            }
        }));
    });
    $('#btnResetDefault').on('click', function() {
        send_data(JSON.stringify({request: "RESET_DEFAULT"}));
    });

    socket.onmessage = (event) => {
        const data = JSON.parse(event.data);
        console.log("Received from server:", data);
        if (data.response === "GET_SETTING") {
            $('#smtpServer').val(data.args.smtpServer);
            $('#smtpPort').val(data.args.smtpPort);
            $('#smtpUsername').val(data.args.smtpUsername);
            $('#smtpPassword').val(data.args.smtpPassword);
            $('#smtpSSL').prop('checked', data.args.smtpSSL);
            $('#smtpSenderAddress').val(data.args.smtpSenderAddress);
            $('#smtpSenderName').val(data.args.smtpSenderName);
            $('#smtpSubject').val(data.args.smtpSubject);
            $('#vx3kIP').val(data.args.vx3kIP);
            $('#vx3kPort').val(data.args.vx3kPort);
            $('#mqttBrokerIP').val(data.args.mqttBrokerIP);
            $('#mqttPort').val(data.args.mqttPort);
            $('#mqttUsername').val(data.args.mqttUsername);
            $('#mqttPassword').val(data.args.mqttPassword);
            $('#mqttClientID').val(data.args.mqttClientID);
            $('#mqttTopic').val(data.args.mqttTopic);
        } else if (data.response === "RESET_DEFAULT") {
            alert(data.args);
        } else if (data.response === "SET_SETTING") {
            alert(data.args);
        }
    };

    // first request to get settings
    send_data(JSON.stringify({request:"GET_SETTING"}));
});