var Rows = null
var fullData=[];
function Form() {
    var formData = readFormData();
    if (Rows == null)
        insertNewRecord(formData);
    else
        updateRecord(formData);
    resetForm();
}

function sortData() {
    var tableData = document.getElementById('MyList').getElementsByTagName('tbody').item(0);
    var rowData = tableData.getElementsByTagName('tr');
    for(var i = 0; i < rowData.length - 1; i++) {
        for(var j = 0; j < rowData.length - (i + 1); j++) {
            if(parseInt(rowData.item(j).getElementsByTagName("td").item(1).innerHTML) > parseInt(rowData.item(j+1).getElementsByTagName("td").item(1).innerHTML)) {
                tableData.insertBefore(rowData.item(j+1),rowData.item(j));
            }
        }
    }
}

function readFormData() {
    var formData = [];
    formData["name"] = document.getElementById("name").value;
    formData["tel"] = document.getElementById("tel").value;
    formData["email"] = document.getElementById("email").value;
    return formData;
}

function insertNewRecord(data) {
    var table = document.getElementById("MyList").getElementsByTagName('tbody')[0];
    var newRow = table.insertRow(table.length);
    cell1 = newRow.insertCell(0);
    cell1.innerHTML = data.name;
    cell2 = newRow.insertCell(1);
    cell2.innerHTML = data.tel;
    cell3 = newRow.insertCell(2);
    cell3.innerHTML = `<a href="mailto:${data.email}">${data.email}</a>`;
    cell4 = newRow.insertCell(3);
    cell4.innerHTML = `<a onClick="Edit(this)">Edit</a>
        <a onClick="Delete(this)">Delete</a>`;
}

function insert(){
    var table = document.getElementById("MyList").getElementsByTagName('tbody')[0];
    var newRow = table.insertRow(table.length);
    cell1 = newRow.insertCell(0);
    cell1.innerHTML = "Nina";
    cell2 = newRow.insertCell(1);
    cell2.innerHTML = "48569244";
    cell3 = newRow.insertCell(2);
    cell3.innerHTML = "<a href='mailto:Nina@nol.com'>Nina@nol.com</a>";
    cell4 = newRow.insertCell(3);
    cell4.innerHTML = `<a onClick="Edit(this)">Edit</a>
        <a onClick="Delete(this)">Delete</a>`;
    var newRow = table.insertRow(table.length);
    cell1 = newRow.insertCell(0);
    cell1.innerHTML = "Susanne";
    cell2 = newRow.insertCell(1);
    cell2.innerHTML = "98569144";
    cell3 = newRow.insertCell(2);
    cell3.innerHTML = "<a href='mailto:susanne@nol.com'>mailtosusanne@nol.com</a>";
    cell4 = newRow.insertCell(3);
    cell4.innerHTML = `<a onClick="Edit(this)">Edit</a>
        <a onClick="Delete(this)">Delete</a>`;
    var newRow = table.insertRow(table.length);
    cell1 = newRow.insertCell(0);
    cell1.innerHTML = "harald";
    cell2 = newRow.insertCell(1);
    cell2.innerHTML = "45625894";
    cell3 = newRow.insertCell(2);
    cell3.innerHTML = "<a href='mailto:harald@nol.com>harald@nol.com</a>";
    cell4 = newRow.insertCell(3);
    cell4.innerHTML = `<a onClick="Edit(this)">Edit</a>
        <a onClick="Delete(this)">Delete</a>`;
}

function resetForm() {
    document.getElementById("name").value = "";
    document.getElementById("tel").value = "";
    document.getElementById("email").value = "";
    selectedRow = null;
}

function Edit(td) {
    selectedRow = td.parentElement.parentElement;
    document.getElementById("name").value = selectedRow.cells[0].innerHTML;
    document.getElementById("tel").value = selectedRow.cells[1].innerHTML;
    document.getElementById("email").value = selectedRow.cells[2].children[0].innerText;
}

function updateRecord(formData) {
    selectedRow.cells[0].innerHTML = formData.name;
    selectedRow.cells[1].innerHTML = formData.tel;
    selectedRow.cells[2].innerHTML = `<a href="mailto:${formData.email}">${formData.email}</a>`;
}

function Delete(td) {
    if (confirm('Do you want to delete it?')) {
        row = td.parentElement.parentElement;
        document.getElementById("MyList").deleteRow(row.rowIndex);
        resetForm();
    }
}