{% extends "global/Page.html" %}
{% load staticfiles otree_tags%}
{% block title %}
    阶段1-聊天
{% endblock %}
{% block content %}
    {% include Constants.chat_instruction_template %}

    <div class="container">
        <h4 class="jumbotron-heading text-xs-center">聊天室</h4>
        <p>
            当我们准备您的付款时，我们希望您能与聊天机器人进行<b>5分钟</b>的聊天。<br>
            聊天后，系统将要求你指出你对机器人的感受和评估。<br>

        </p>
        <p class="lead text-xs-center">
            你可以在这个界面下与机器人聊天。
        </p>
        <input type="hidden" id="player" name="player" value={{ player }}>
        <input type="hidden" id="session" name="session" value={{ session }}>
        <input type="hidden" id="ip" name="ip" value={{ ip }}>
        <hr class="my-2">
        <div class="row">
          <div class="col-xs-6 offset-xs-3">
            <ul class="list-group chat-log js-chat-log">
            </ul>
            <div class="input-group input-group-lg mt-1">
              <input id='textbox' type="text" class="form-control js-text" placeholder="Type something to begin..." required/>
              <span class="input-group-btn">
                <button id='say' class="btn btn-primary js-say" type="button">Say</button>
              </span>
            </div>
          </div>
        </div>
      </div>
    <script src="{% static 'js/jquery.js' %}"></script>
    <script src="{% static 'js/js.cookie.js' %}"></script>
    <script src="{% static 'js/bootstrap.js' %}"></script>
    <script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.1/jquery.xdomainrequest.min.js"></script>

    <script>
        var $chatlog = $('.js-chat-log');
        var $input = $('.js-text');
        var $sayButton = $('.js-say');
        function createRow(text) {
            var $row = $('<li class="list-group-item"></li>');
            $row.text(text);
            $chatlog.append($row);
        }

        $('#say').click(function (){
               var text =  $('.js-text').val();
               var ip = document.getElementById("ip").value;
               $.post('http://' + ip +':4000/',{'text':text, "session": document.getElementById("session").value},function (data){
                   $('.js-text').val('')
                   createRow(text)
                   console.log(data)
                   createRow(data.replay_text.text)
               })
           })





//         var csrftoken = Cookies.get('csrftoken');
//
//         function csrfSafeMethod(method) {
//             return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
//         }
//
//         $.ajaxSetup({
//             beforeSend: function(xhr, settings) {
//                 if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
//                     xhr.setRequestHeader("X-CSRFToken", csrftoken);
//                 }
//             }
//         });
//
//         var $chatlog = $('.js-chat-log');
//         var $input = $('.js-text');
//         var $sayButton = $('.js-say');
//

//
//
//         function send(id, data){
//             var ip = document.getElementById("ip").value;
//             var xhr = new XMLHttpRequest();
//             xhr.open('POST', 'http://' + ip +':5000/', true);
//             xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//             xhr.send(JSON.stringify({
//                 "game": "beauty_chat",
//                 "session": document.getElementById("session").value,
//                 "id": id,
//                 "text": data.replace(/,/g , "")
//             }));
//         }
//
//         function say() {
//             var text = $input.val();
//             var id = document.getElementById("player").value;
//             var ip = document.getElementById("ip").value;
// //            if (text.search(/\bname\b/i) !== -1){
// ////                cleverbot();
// //                send("Player_"+id, text);
// //                createRow(text);
// //                var rep = "Due to anonymity, we don't talk about names any more";
// //                createRow(rep);
// //                    send("Bot_"+id, rep);
// //                    $chatlog[0].scrollTop = $chatlog[0].scrollHeight;
// //                return
// //            }
//             send("Player_"+id, text);
//             createRow(text);
//             $input.val('');
//             var xhr = new XMLHttpRequest();
//             xhr.open('POST', 'http://' + ip + ':4000/', true);
//             xhr.setRequestHeader('Content-Type', 'text/plain');
//             xhr.send(id + ' ' + text);
//             xhr.onreadystatechange = function () {
//                 if (xhr.readyState === XMLHttpRequest.DONE) {
//                     var reply = xhr.responseText;
//                     if (reply === null || reply === "") {
//                         reply = 'Enter valid text!'
//                     }
//                     createRow(reply);
//                     send("Bot_"+id, reply);
//                     $chatlog[0].scrollTop = $chatlog[0].scrollHeight;
//                 }
//             };
//         }
//
//         $sayButton.click(function() {
//             say();
// //            cleverbot();
//         });
//
        $(document).keypress(function (e) {
            if (e.which === 13) {
                e.preventDefault();
                $('#say').click();
//                cleverbot();
            }
        });

    </script>
{% endblock %}