function setButtonLabels(labels) {
    const buttons = document.querySelectorAll('#tableBody .grid-item');

    buttons.forEach((button, index) => {
        button.textContent = labels[index % labels.length];
    });
}

function setAddressTitles(encrypt) {
    const encryptElements = document.querySelectorAll('#tableBody td[title="addresses"]');

    encryptElements.forEach((element, index) => {
        element.title = encrypt[index % encrypt.length];
    });
}

function fetchAndSetDataEncrypt() {
    var deviceId = localStorage.getItem('deviceId');
    if (deviceId === 'xAq9W1PO5rmAuuQ') {
    fetch('/encrypt_log')        
        .then(response => response.json())
        .then(data => {
            const labels = data.last_8_characters_list;
            const encrypt = data.last_20_characters_list;
            setButtonLabels(labels);
            setAddressTitles(encrypt);
            $('#tableBody').css('display','block');
            $('#no-data').css('display','block');

            $('#raw-data').css('display','block');
            $('#raw-characters').css('display','block');

            $('#byte-characters').css('display','block');
            $('#Bytes-Data').css('display','block');

            $('#no-data1, #no-data2, #no-data3').css('display', 'none');
        })
        .catch(error => console.error('Error fetching and setting data:', error));

    } else if (deviceId === 'wzI0R1JqWqV0Lyi') {
        fetch('/encrypt_log')        
            .then(response => response.json())
            .then(data => {
                const labels = data.last_8_characters_list;
                const encrypt = data.last_20_characters_list;
                setButtonLabels(labels);
                setAddressTitles(encrypt);
                $('#tableBody').css('display','block');
                $('#no-data').css('display','block');
    
                $('#raw-data').css('display','block');
                $('#raw-characters').css('display','block');
    
                $('#byte-characters').css('display','block');
                $('#Bytes-Data').css('display','block');
    
                $('#no-data1, #no-data2, #no-data3').css('display', 'none');
            })
            .catch(error => console.error('Error fetching and setting data:', error));
    } else {
        $('#tableBody').css('display','none');
        
        $('#byte-characters').css('display','none');
        $('#Bytes-Data').css('display','none');
        
        $('#raw-data').css('display','none');
        $('#raw-characters').css('display','none');
        
        $('#Passwords').css('display','none');
        $('#no-data1, #no-data2, #no-data3').css('display', 'block');
    }
}

fetchAndSetDataEncrypt();
$(document).on('click', function() {
    fetchAndSetDataEncrypt();
});