{% extends "minecraft_manager/dashboard.html" %}
{% load csrf_html %}
{% block title %}Chat{% endblock %}
{% block section %}
<div id="content">
    <div class="row">
        <div class="col-xs-8 col-md-5">
            <h3>Global Chat</h3>
            <div id="global_chat" style="overflow:scroll; height:40em;">
                Loading...
            </div>
            <br/>
            <div class="input-group">
                <span class="input-group-addon">Auto-Scroll</span>
                <span class="input-group-addon">
                    <input id="global_scroll" type="checkbox" aria-label="Auto-Scroll" checked="checked">
                </span>
                <input id="global_input" type="text" class="form-control" placeholder="Global Chat...">
                <span class="input-group-btn">
                    <button id="global_button" onClick="chat('global');" class="btn btn-secondary" type="button">Send</button>
                </span>
            </div>
        </div>
        <div class="col-xs-2 col-md-2">
            <h3>Players <span id="player_online">N</span>/<span id="player_max">A</span></h3>
            <div id="player_list">
                <div>Loading...</div>
            </div>
        </div>
        {% if staff %}
        <div class="col-xs-8 col-md-5">
            <h3>Staff Chat</h3>
            <div id="staff_chat" style="overflow:scroll; height:40em;">
                Loading...
            </div>
            <br/>
            <div class="input-group">
                <span class="input-group-addon">Auto-Scroll</span>
                <span class="input-group-addon">
                    <input id="staff_scroll" type="checkbox" aria-label="Auto-Scroll" checked="checked">
                </span>
                <input id="staff_input" type="text" class="form-control" placeholder="Staff Chat...">
                <span class="input-group-btn">
                    <button id="staff_button" onClick="chat('staff');" class="btn btn-secondary" type="button">Send</button>
                </span>
            </div>
        </div>
        {% endif %}
    </div>
</div>
<script>
    $(document).ready(function() {
        $("#global_input").keypress(function(e) {
            if (e.keyCode === 13) {
                $("#global_button").click();
            }
        });
        scrollGlobal();

        {% if staff %}
        $("#staff_input").keypress(function(e) {
            if (e.keyCode === 13) {
                $("#staff_button").click();
            }
        });
        scrollStaff();
        {% endif %}

        setInterval(function() {
            $.ajax({
                url: "{% url "api-web" 'log' %}?api={{ api }}",
                success: function(res, status, xhr) {
                    $("#global_chat").html(res.html.global);
                    if ($("#global_scroll").prop("checked")) {
                        scrollGlobal();
                    }

                    {% if staff %}
                    $("#staff_chat").html(res.html.staff);
                    if ($("#staff_scroll").prop("checked")) {
                        scrollStaff();
                    }
                    {% endif %}
					
					$('[data-toggle="tooltip"]').tooltip(); 
                }
            });
            $.ajax({
                url: "{% url "api-web" 'online' %}?api={{ api }}",
                success: function(res, status, xhr) {
                    $("#player_list").html(res.html);
                    $("#player_online").html(res.query.online);
                    $("#player_max").html(res.query.max);
                }
            });
        }, 1000);
    });

    function chat(type) {
        var msg = $("#" + type + "_input").val();
        if (msg != null && msg != "") {
            $.ajax({
                type: 'POST',
                data: {'csrfmiddlewaretoken': '{% get_csrf_token request %}','chat': type, 'message': msg}
            });
            $("#" + type + "_input").val('');
        }
    }

    function scrollGlobal() {
        var global_chat = document.getElementById("global_chat");
        global_chat.scrollTop = global_chat.scrollHeight;
    }

    {% if staff %}
    function scrollStaff() {
        var staff_chat = document.getElementById("staff_chat");
        staff_chat.scrollTop = staff_chat.scrollHeight;
    }
    {% endif %}
</script>
{% endblock section %}