<!doctype html>
<html lang="en">
<head>
<title>Tim's Language Helper</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
    table.main, td.col_ctl, td.col_word, td.col_meaning {
        border: 1px solid red;
        border-collapse: collapse;
        padding:5px;
    }
    table.meaning, td.meaning {
        border: none;
        border-collapse: collapse;
    }
   
    p.debug {
        display: none;
    }

</style>
<script>
    function show_words() {
        // first validate the selection of from and to languages is okay
        slt_frm = document.getElementById("slt_from_language")
        from_language = slt_frm.options[slt_frm.options.selectedIndex].value
        slt_to = document.getElementById("slt_to_language")
        to_language = slt_to.options[slt_to.options.selectedIndex].value
        
        is_error = false
        error_text = ""
        if (from_language == '0') {
            is_error = true
            error_text += "From language not selected\n"
        }
        if (to_language == '0') {
            is_error = true
            error_text += "To language not selected\n"
        }
        if (from_language == to_language) {
            is_error = true
            error_text += "From language and To language must not be same\n"
        }

        if (is_error) {
          alert("Error found: " + error_text)  
        } else {
            getWords(from_language, to_language)
        }
    }
    
    // AJAX request to get word list
    function getWords(from_language, to_language) {
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function() {
            //alert("this.responseText:=" + this.responseText)
            document.getElementById("words").innerHTML = this.responseText;
            display_word_list(this.responseText)
        }
        request = "get_words_json.php?from_language=" + from_language + "&to_language=" + to_language
        xhttp.open("GET", request, true);
        xhttp.send();
    }

    function add_meaning(event) {
        alert("add meaning:" + event.target.id)
    }
 
    function edit_meaning(event) {
        alert("edit meaning:" + event.target.id)
    }
    
    function display_word_list(word_list_json) {
        word_list = JSON.parse(word_list_json)
        const work_table = document.createDocumentFragment();
        const t = document.createElement('table');
        t.id = "word_table"
        t.className = "main"
        for(i = 0; i < word_list.words.length; i++) {
            var cells = new Array()
            w = word_list.words[i]
            row = document.createElement('tr');

            // create 1st cell for control button
            x = cells.push(document.createElement('td')) - 1;
            cells[x].className = "col_ctl"
            btn = document.createElement('button')
            btn.textContent = "?"
            btn.id = "fw_" + w.id + "_" + w.word_language;
            cells[x].appendChild(btn)
            
            // create 2nd cell for word value
            x = cells.push(document.createElement('td')) - 1;
            cells[x].className = "col_word"
            cells[x].textContent = w.word
            
            // create 3rd cell for meanings
            x = cells.push(document.createElement('td')) - 1;
            cells[x].className = "col_meaning"
            if (w.meanings.length > 0) {
                //alert("w.meanings.length:=" + w.meanings.length)
                t2 = document.createElement('table')
                t2.className = "meaning"
                for (y = 0; y < w.meanings.length; y++) {
                    r2 = document.createElement('tr')
                    c1 = document.createElement('td')
                    c1.id = "fw_" + w.word_id + "_tw_" + w.meanings[y].meaning_id;
                    c1.className = "meaning"
                    c1.textContent = w.meanings[y].meaning
                    
                    c2 = document.createElement('td')
                    //c2.id = "btn_fw_" + w.word_id + "_tw_" + w.meanings[y].meaning_id;
                    c2.className = "meaning"
                    btn2 = document.createElement('button')
                    btn2.id = "btn_fw_" + w.word_id + "_tw_" + w.meanings[y].meaning_id;
                    btn2.addEventListener("click", edit_meaning)
                    btn2.innerHTML = "&#x2705;"
                    
                    c2.appendChild(btn2)
                    r2.appendChild(c1)
                    r2.appendChild(c2)
                    t2.appendChild(r2)
                }
                cells[x].appendChild(t2)
            } else {
                btn2 = document.createElement('button')
                btn2.id = "btn_fw_" + w.word_id
                btn2.addEventListener("click", add_meaning)
                btn2.innerHTML = "+"
                cells[x].appendChild(btn2)
            }
            
            // add cells to row
            for (x=0; x < cells.length; x++) {
                row.appendChild(cells[x])
            }
            
            t.appendChild(row)
        }
        work_table.appendChild(t);
        e = document.getElementById("words2")
        while (e.hasChildNodes()) {
            e.removeChild(e.firstChild);
        }
        document.getElementById("words2").appendChild(work_table);
    }

</script>
</head>
<body>

<h1>Tim's Language Helper</h1>
<h2>Word Check</h2>

    <br/>From Language: <select id="slt_from_language">
        <option value="0">--- Select ---</option>
        <option value="1">English</option>
        <option value="2">Greek</option>
        <option value="3">French</option>
    </select>
    <br/>To Language: <select id="slt_to_language">
        <option value="0">--- Select ---</option>
        <option value="1">English</option>
        <option value="2">Greek</option>
        <option value="3">French</option>
    </select>
    <br/><button onclick="show_words()">Show Words</button>

<div id="words"></div>
<div id="words2"></div>

<?php

?>

</body>
</html>