document.getElementById("buttonGet").onclick = function () {

    const data = document.getElementById("textcopied");
    console.table(data.value);

    const serialsList = data.value.split("\n")
    console.log(serialsList);

    // $('#tablePlace').append('<tr><th>Модель</th><th>Сер.номер</th><th>Заявленная неисправность</th><th>Произведенная работа</th><th>Файл</th><th>Сервер</th></tr>')
    
    serialsList.forEach(element => {
        if (element) {
            // console.log(element);
            check(element);
            check(element, 'searchLive', 'tablePlace2');
        }
    });


};
let counter = 0



$('#buttonRest').on('click', () => {
    document.getElementById("textcopied").focus();
    $("#textcopied").select();

    // $('#titleInput2').val('Cleaned!')
    $('#tablePlace').text('')
    counter = 0
    $('.counter').text('') 

});


function check(serialUnchecked, searchLink = 'search2', tablePlace = 'tablePlace') {
    const serial = keyboardLayoutSwitch(serialUnchecked);
    
    if (serial === "") {
        displayMessage('Empty!', 'red');
        return;
    }

    displayMessage('Sending ... wait', 'yellow');
    $('#buttonGet').css('background-color', 'yellow');

    fetchData(serial, searchLink)
        .then(data => {
            updateUIOnSuccess(data, serial, tablePlace);
        })
        .catch(error => {
            handleError(error, tablePlace);
        });
}

function fetchData(serial, searchLink) {
    return axios.get(`http://${serverEnv.ip}/${searchLink}?sn=${serial}`)
        .then(response => {
            if (response.statusText !== 'OK') {
                throw new Error('Server responded with an error');
            }
            // counter = counter + response.data.length
            return response.data;
        });
}

function updateUIOnSuccess(data, serial, tablePlace) {
    let bold = data.length > 1;
    console.log(data);
    
    if (data.length === 0) {
        appendData(false, serial, 'No results found', bold, tablePlace);
    } else {
        data.forEach(item => {
            appendData(item, serial, 'Search successful', bold, tablePlace);
        });
    }

    counter = counter + data.length;
    $('.counter').text(`найден : ${counter}`);
    $('#searchText').text('Search');
    $('#buttonGet').css('background-color', 'chartreuse');
}

function handleError(error, tablePlace) {
    $('#' + tablePlace).append('<tr class="redTable"><td>error !</td>  <td colspan="4"> No answer from server , try again or ask Ahmed !</td> <td>' + error.code + '</td></tr>');
    $('#searchText').text(error.message);
    $('#buttonGet').css('background-color', 'orangered');
    console.error(error);
}

function displayMessage(message, color) {
    $('#searchText').text(message);
    $('#buttonGet').css('background-color', color);
}

const list = document.getElementById("json-data");

function appendData(data, sn, statusText, bold, tablePlace) {
    console.log(data);
    
    // Check if the table exists; if not, create it
    let table = document.getElementById(tablePlace);
    if (!table) {
        table = document.createElement('table');
        table.id = tablePlace;
        document.body.appendChild(table); // or append to a specific parent element
    }

    if (data) {
        // Create a new row and cells
        const row = document.createElement('tr');
        row.className = 'redTable' + (bold ? ' bold' : '');

        // Create cells for each piece of data
        const modelCell = createCell(data.Model);
        const serialNumberCell = createCell(data.SerialNumber);
        const problemCell = createCell(data.Problem);
        const detailsCell = createCell(data.Details);
        const filenameCell = createCell(data.filename);
        const statusCell = createCell(statusText);

        // Append cells to the row
        row.appendChild(modelCell);
        row.appendChild(serialNumberCell);
        row.appendChild(problemCell);
        row.appendChild(detailsCell);
        row.appendChild(filenameCell);
        row.appendChild(statusCell);

        // Append the row to the table
        table.appendChild(row);

        // Prepare xlsx format string
        const xlsxFormat = `${data.Model}\t${data.SerialNumber}\t${data.Problem}\t${data.Details}\t${data.filename}\n`;
        console.log('This data textarea is: ', xlsxFormat);
        const copyTextarea = document.getElementById(`copy${tablePlace}`);
        copyTextarea.value += xlsxFormat;  // Append to the textarea
        copyTextarea.setAttribute('rows', '15'); // Set the number of rows
    } else {
        // Create a new row for the "not found" state
        const row = document.createElement('tr');
        row.className = 'greenTable';

        const okCell = createCell('ОК');
        const serialNotFoundCell = createCell(sn);
        const messageCell = createCell('Серийный номер не найден в БД', { colSpan: 3 });
        const statusNotFoundCell = createCell(statusText);

        // Append cells to the row
        row.appendChild(okCell);
        row.appendChild(serialNotFoundCell);
        row.appendChild(messageCell);
        row.appendChild(statusNotFoundCell);

        // Append the row to the table
        table.appendChild(row);
    }
}

// Helper function to create a cell
function createCell(content, options) {
    const cell = document.createElement('td');
    cell.textContent = content;
    if (options && options.colSpan) {
        cell.colSpan = options.colSpan;
    }
    return cell;
}

 

 
$(document).ready(function(){
    // your code
    $('#version').text(serverEnv.version)
    });