{{ extends "oChat/Page.html" }}

{{ block global_styles  }}
<style>
    .otree-title {
        display: none;
        }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
{{ endblock }}

{{ block scripts }}

    <script>
        // list of chat messages as JSON dictionaries
        var chatLogData = [];

        // timestamp of page loading to determine when messages were sent
        var timeBase = Date.now();

        // 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 log chat
        function logChat(sender, chatText) {
            let timestamp = (Date.now() - timeBase) / 1000;

            // create dictionary for current message info
            var currentMsg = {
                sender: sender,
                text: chatText,
                timestamp: timestamp
            };

            // append chatLogData
            chatLogData.push(currentMsg);

            // write chatLog to input field
            document.getElementById('id_chatLog').value = JSON.stringify(chatLogData);

        }

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

                // scroll messages to bottom
                chat_messages.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'start' })

                // append chat log
                logChat('Participant', text)

            }
            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;
            let row = `<div class="msg botText">${msgSpan.innerHTML}</div><br>`;
            chat_messages.insertAdjacentHTML('beforeend', row);

            // scroll messages to bottom
            chat_messages.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'start' })

            // append chat log
            logChat('Bot', data)
        };

        document.addEventListener("DOMContentLoaded", function (event) {
            liveSend({});
        });

    </script>

{{ endblock }}


{{ block content }}

<!-- Header -->
    <nav class="navbar navbar-inverse sticky-top bg-white border-bottom justify-content-center" style="z-index:1">
        <div class="row justify-content-between align-content-center my-1 w-100 mx-0">
            <div class="col-auto">
                <div type="button" class="btn btn-sm btn-outline-danger" disabled>
                    <span class="otree-timer__time-left"></span>
                </div>
            </div>
            <div class="col-auto">
                <h5> Chat </h5>
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-sm btn-outline-danger">End Conversation</button>
            </div>
        </div>
    </nav>

    <!-- oTree timer.js -->


    <!-- div displaying chat messages -->
     <div class="card mt-5 bg-light" >
        <div class="card-body">
            <div class="textBox">
                <div id="chat_messages">
                </div>
            </div>
        </div>
     </div>

<!-- Controls -->

    <div class="container-fluid p-0 my-4 position-sticky">
        <div class="row align-items-center justify-content-center">
            <div class="col-lg-7 col-md-9 col-sm-12">
                <textarea class="form-control w-100 bg-white shadow-lg" type="text" id="chat_input" rows="3" autofocus></textarea>
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-primary shadow-lg" onclick="sendMsg();">
                    <strong>
                        <i class="bi bi-send"></i>
                    </strong>
                </button>
            </div>
            <!--
            <div class="col-auto">
                <button type="submit" class="btn btn-outline-danger"> End Chat </button>
            </div>
            -->
        </div>
    </div>




    <!-- hidden input to save chat log -->
    <input type='hidden' name='chatLog' value='' id='id_chatLog'/>

{{ endblock }}