const root = document.getElementById("root");
let tableSelectionDomElement = document.getElementById("tabla");
let selectedTable = "tagok";

tableSelectionDomElement.addEventListener("change", function (){
    selectedTable = tableSelectionDomElement.value;
    switch (selectedTable) {
        case "tagok":
            CreateTagokForm();     
            break;
        case "tagsag":
            CreateTagsagForm();
            break;
        case "jelenlet":
            CreateJelenletForm();
            break;
        case "esemenyek":
            CreateEsemenyekForm();
            break;
        case "visszajelzes":
            CreateVisszajelzesForm();
            break;
        default:
            break;
    }
});

function RemoveTable(){
    if (document.getElementById("tabla_Form") != null){
        root.removeChild("tabla_Form");
        console.log("asd");
    }
    return;
}

function CreateTagokForm(){
    RemoveTable();
    //TODO fix names in the form
    let form = document.createElement("div");
    form.id = "tabla_Form";
    form.innerHTML = `
        <form method="POST" name="tagok">
            Vezeték név:    <input type="text" name="vnev"><br>
            Kereszt név:    <input type="text" name="knev"><br>
            Email:          <input type="email" name="email"><br>
            Telefon:        <input type="tel" name="phone"><br>
            Lakcím:         <input type="text" name="addr"><br>
            Tagság kezdete: <input type="date" name="membership_begin"><br>
            Aktív tagság:   <input type="checkbox" name="aktiv"><br>
            <button type="submit">Adat feltöltése</button>
        </form>
    `;
    root.appendChild(form);
    return;
}

function CreateTagsagForm() {
    RemoveTable();
    //TODO fix names in the form
    let form = document.createElement("div");
    form.id = "tabla_Form";
    form.innerHTML = `
        <form method="POST" name="tagsag">
        Tag id:             <input type="number" name="tag_id"><br>
        Díj összeg:         <input type="number" name="dij_osszeg"><br>
        Datum:              <input type="date" name="datum"><br>
        Fizetés státusz:    <input type="checkbox" name="fizetes_statusz"><br>
        Fizetés dátum:      <input type="date" name="fizetes_datum"><br>
        Nyugtaszám:         <input type="number" name="nyugtaszam"><br>
        Megjegyzés:         <input type="text" name="megjegyzes"><br>
        </form>
    `;
    root.appendChild(form);
    return;
}

function CreateJelenletForm(){
    RemoveTable();
    //TODO fix names in the form
    let form = document.createElement("div");
    form.id = "tabla_Form";
    form.innerHTML = `
         <form method="POST" name="jelenlet">
        Esemény id:         <input type="number" name="esemeny_id"><br>
        Tag id:             <input type="number" name="tag_id"><br>
        Jelenlét dátum:     <input type="date" name="jelenlet_datum"><br>
        Jelenlét státusz:   <input type="checkbox" name="jelenlet_statusz"><br>
        Visszajelzés:       <input type="text" name="visszajelzes"><br>
        Becsekkolás:        <input type="date" name="becsekkolas"><br>
        Kicsekkolás:        <input type="date" name="kicsekkolas"><br>
    </form>
    `;
    root.appendChild(form);
    return;
}

function CreateEsemenyekForm(){
    RemoveTable();
    //TODO fix names in the form
    let form = document.createElement("div");
    form.id = "tabla_Form";
    form.innerHTML = `
        <form method="POST" name="esemenyek">
        Esemény neve:       <input type="text" name="esemeny_neve"><br>
        Esemnény dátuma:    <input type="date" name="esemeny_datum"><br>
        Helyszín:           <input type="text" name="helyszin"><br>
        Leírás:             <input type="text" name="leiras"><br>
        Max letszam:        <input type="number" name="max_letszam"><br>
        Szervező:           <input type="text" name="szervezo"><br>
        Státusz:            <input type="checkbox" name="statusz"><br>
    </form>
    `;
    root.appendChild(form);
    return;
}

function CreateVisszajelzesForm(){
    RemoveTable();
    //TODO fix names in the form
    let form = document.createElement("div");
    form.id = "tabla_Form";
    form.innerHTML = `
        <form method="POST" name="visszajelzes">
        Tag id:                 <input type="number" name="tag_id"><br>
        Esemény id:             <input type="number" name="esemeny_id"><br>
        Visszajelzés szöveg:    <input type="text" name="visszajelzes_szoveg"><br>
        Értékelés:              <input type="text" name="ertekeles"><br>
        Beküldés dátum:         <input type="date" name="bekuldes_datum"><br>
        Láthatóság:             <input type="text" name="lathatosag"><br>
        Visszajelzés státusz:   <input type="text" name="visszajelzes_statusz"><br>
    </form>
    `;
    root.appendChild(form);
    return;
}