let countId = 0;
let students = [
    {
        id: -1,
        name: "NTB Phước",
        email: "a@g.c",
        phoneNumber: "0329577177",
        address: "HCM",
        gender: true
    }
]

if(localStorage.getItem("students")) {
    students = JSON.parse(localStorage.getItem("students"))
}


const tbodyEL = document.querySelector("tbody");
const se_ipEL = document.querySelector("#se_ip");

let studentEdit = null;

function renderUi(arrStu) {
    let tbodyHtml = ``;

    for (let i = 0; i < arrStu.length; i++) {
        tbodyHtml += `
            <tr>
                <td>${arrStu[i].id}</td>
                <td>${arrStu[i].name}</td>
                <td>${arrStu[i].email}</td>
                <td>${arrStu[i].phoneNumber}</td>
                <td>${arrStu[i].address}</td>
                <td>${arrStu[i].gender ? "nam" : "nữ"}</td>
                <td>
                    <button onclick="deleteStu(${arrStu[i].id})">Xóa</button>
                    <button onclick="editLoad(${arrStu[i].id})">Sửa</button>
                </td>
                <td></td>
            </tr>

        `
    }

    tbodyEL.innerHTML = tbodyHtml

    if (studentEdit) {
        let formEdit = document.querySelector("form");
        formEdit.querySelectorAll("input")[0].value = studentEdit.name;
        formEdit.querySelectorAll("input")[1].value = studentEdit.email;
        formEdit.querySelectorAll("input")[2].value = studentEdit.phoneNumber;
        formEdit.querySelectorAll("input")[3].value = studentEdit.address;
        formEdit.querySelectorAll("input")[studentEdit.gender ? 4 : 5].checked = true;
    }

    localStorage.setItem("students", JSON.stringify(students))
}


function save(e) {
    e.preventDefault()

    const form = e.target;

    let newStudent = {
        id: studentEdit ? studentEdit.id : countId++,
        name: form.name.value,
        email: form.email.value,
        phoneNumber: form.phoneNumber.value,
        address: form.address.value,
        gender: form.gender.value == "true" ? true : false
    }

    if (studentEdit) {
        for (let i = 0; i < students.length; i++) {
            if (students[i].id == studentEdit.id) {
                students[i] = newStudent;
                break
            }
        }
        studentEdit = null;
        form.reset()
    } else {
        students.push(newStudent)
    }


    renderUi(students);
}

function deleteStu(stuId) {
    for (let i = 0; i < students.length; i++) {
        if (students[i].id == stuId) {
            students.splice(i, 1)
            break
        }
    }
    renderUi(students)
}

function search() {
    let textSe = se_ipEL.value;

    let kq = [];

    for (let i = 0; i < students.length; i++) {
        if (students[i].name.includes(textSe)) {
            kq.push(students[i])
        }
    }

    renderUi(kq)

}

function sapXep() {
    renderUi(students.sort((a, b) => a.name.localeCompare(b.name)))
}


function editLoad(stuId) {
    for (let i = 0; i < students.length; i++) {
        if (students[i].id == stuId) {
            studentEdit = students[i];
        }
    }
    renderUi(students)
}

renderUi(students)