/*

Quản lý student

*/
let countId = 0;

let students = [
    {
        id: -2,
        name: "Phước",
        age: 35,
        isInLove: false,
        gender: "male",
        dob: "1985-12-11"
    },
    {
        id: -1,
        name: "Hương",
        age: 25,
        isInLove: true,
        gender: "female",
        dob: "1895-11-05"
    }
]

const tbodyEL = document.querySelector("tbody")
const formEl = document.querySelector("form")

let editStudent = null;

function renderUi() {
    let tbodyHtml = ``

    students.forEach((value, key) => {
        tbodyHtml += `
            <tr>
                <td>${key}</td>
                <td>${value.id}</td>
                <td>${value.name}</td>
                <td>${value.age}</td>
                <td>${value.isInLove ? "có" : "không"}</td>
                <td>${value.gender}</td>
                <td>${value.dob}</td>
                <td>
                    <button onclick="deleteStudent(${value.id})">xóa</button>
                    <button onclick="setEditStudent(${value.id})">sửa</button>
                </td>
            </tr>  
        `
    })

    tbodyEL.innerHTML = tbodyHtml

    formEl.querySelector("#form_title").innerHTML = editStudent ? "Sửa sinh viên" : "Thêm Sinh Viên"

    if (editStudent) {
        formEl.querySelectorAll("input")[0].value = editStudent.name;
        formEl.querySelectorAll("input")[1].value = editStudent.age;
        formEl.querySelectorAll("input")[editStudent.isInLove ? 2 : 3].checked = true;

        let options = formEl.querySelectorAll("option");

        for (op of options) {
            if (op.value == editStudent.gender) {
                op.selected = true;
                break
            }
        }

        formEl.querySelectorAll("input")[4].value = editStudent.dob;

    }

}

function save(event) {
    event.preventDefault();
    let form = event.target;

    let newStudent = {
        id: editStudent ? editStudent.id : countId++,
        name: form.name.value,
        age: form.age.value,
        isInLove: form.isInLove.value,
        gender: form.gender.value,
        dob: form.dob.value
    }

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


    renderUi()
    formEl.reset()
    editStudent = null;
}

function deleteStudent(stuId) {
    if (confirm("xác nhận xóa!")) {
        students = students.filter(stu => stu.id != stuId)
    }

    renderUi()
}

function setEditStudent(stuId) {
    editStudent = students.find(stu => stu.id == stuId)

    renderUi()
}

renderUi()