<!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 add_word() {
        word = document.getElementById("i_word").value
        slt_lang = document.getElementById("slt_language")
        language = slt_lang.options[slt_lang.options.selectedIndex].value
        alert("word:=" + word + "; language:=" + language)

        const xhttp = new XMLHttpRequest();
        xhttp.onload = function() {
            //alert("this.responseText:=" + this.responseText)
            document.getElementById("word").innerHTML = this.responseText;
        }
        request = "add_word.php?word=" + word + "&language=" + language
        xhttp.open("GET", request, true);
        xhttp.send();
    }
    

</script>
</head>
<body>

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

    <br/>Language: <select id="slt_language">
        <option value="0">--- Select ---</option>
        <option value="1">English</option>
        <option value="2">Greek</option>
        <option value="3">French</option>
    </select>
    <br/>Word: <input type="text" id="i_word">
    <br/><button onclick="add_word()">Add Word</button>

<div id="word"></div>

<?php

?>

</body>
</html>