$(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() {
            ws.send(JSON.stringify({ command: "getZelloStatus" }));
        }, 5000);
    };

    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.status);
        }
    };

    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);
    };
});