$(document).ready(function() {
    // Your code here
    //console.log('pocreceiver.js is ready!');
    const path = window.location.pathname;
    const ws = new WebSocket('ws://' + window.location.host + path + '/ws');

    ws.onopen = function() {
        //console.log('WebSocket connection opened');
        $('#indicatorDisconnected').addClass('visually-hidden');
        $('#indicatorConnected').removeClass('visually-hidden');
        setInterval(function() {
            sendCommand({ command: "getZelloStatus" });
        }, 1000);
    };

    ws.onmessage = function(event) {
        //console.log('WebSocket message received:', event.data);
        let msg = {};
        try {
            msg = JSON.parse(event.data);
        } catch (e) {
            console.error('Invalid JSON:', event.data);
            $('#zelloStatus').text('Status Not Available');
            return;
        }
        if (msg.reply === "getZelloStatus" && msg.data !== undefined && msg.data.length > 0) {
            const zelloData = msg.data;
            //console.log('Zello Status Data:', zelloData);
            $('#zelloStatus').text(zelloData);
        }
    };

    ws.onclose = function() {
        //console.log('WebSocket connection closed');
        $('#indicatorDisconnected').removeClass('visually-hidden');
        $('#indicatorConnected').addClass('visually-hidden');
    };

    ws.onerror = function(error) {
        console.error('WebSocket error:', error);
    };

    function sendCommand(command) {
        if (ws.readyState === WebSocket.OPEN) {
            ws.send(JSON.stringify(command));
        } else {
            console.error('WebSocket is not open. Unable to send command:', command);
        }
    }
});