{{ block title }}
    Testchat
{{ endblock }}
{{ block content }}

<div class="textBox">
        <div id="chat_messages" style="font-size: large;">
        </div>
    </div>

    <!-- text input -->
    <div class="inputBox">
        <div class="typeInputBox">
            <textarea type="textarea" rows="10" id="chat_input" style="width: 600px;"></textarea>
            <button id="sendbtn1" type="button" onclick="sendMsg()" style="color: #fff; background-color: #0d6efd; border-color: #0d6efd;">Begründung absenden</button>
        </div>
    </div>


    <input type='hidden' name='chatLog' value='' id='chatLog'/>
    <input type='hidden' name='receive' value='' id='receive'/>
    <input type='hidden' name='msg botText' value='' id='msg botText'/>
     <button id="nextbtn" style="display: none" class="otree-btn-next btn btn-primary">Weiter</button>


<script>
        // adapting chat from oTree snippets page
        var chat_input = document.getElementById('chat_input');

        chat_input.addEventListener("keydown", function (event) {
            if (event.key === "Enter") {
                sendMsg();
            }
        });



        // function to append text in webpage
        function sendMsg() {
            document.getElementById('sendbtn1').style.display='none';
            var text = document.getElementById('chat_input').value.trim();
            document.getElementById('chat_input').style.display='none';
            if (text) {
                liveSend({'text': text});
                let msgSpan = document.createElement('span');
                msgSpan.textContent = text;
                // write chatLog to input field
                document.getElementById('chatLog').value = text;
                let row = `<div class="msg selfText">${msgSpan.innerHTML}</div><br>`;
                chat_messages.insertAdjacentHTML('beforeend', row);
            }
            chat_input.value = '';
        }

        // specify messages element
        var chat_messages = document.getElementById('chat_messages');

        // function for live receiving from server
        function liveRecv(data) {
            let msgSpan = document.createElement('span');
            msgSpan.textContent = data;
            document.getElementById('receive').value = data;

            document.getElementById('nextbtn').style.display='inline-block';
        }
</script>


{{ endblock }}