{% extends "minecraft_manager/dashboard.html" %}
{% load static %}
{% block head %}
    <script src="{% static 'minecraft_manager/js/chart.min.js' %}"></script>
{% endblock %}
{% block section %}
    <div id="content">
        <div class="row">
            <div class="col-xs-9 col-md-6">
                <h3 class="center">Applications{% if form.apps.unanswered > 0 %} <a href="{% url "application" %}?accepted=">({{ form.apps.unanswered }} Unanswered)</a>{% endif %}</h3>
                <canvas id="appChart"  style="width:30em;height:15em" ></canvas>
            </div>
            <div class="col-xs-9 col-md-6">
                <h3 class="center">Tickets{% if form.tickets.unclaimed > 0 %} <a href="{% url "ticket" %}?claimed=false">({{ form.tickets.unclaimed }} Unclaimed)</a>{% endif %}</h3>
                <h4></h4>
                <canvas id="ticketChart"  style="width:30em;height:15em" ></canvas>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-18 col-md-12">
                <h3 class="center">Totals</h3>
                <canvas id="totalChart"  style="width:30em;height:15em" ></canvas>
            </div>
        </div>
    </div>
    <script>
    $(document).ready(function() {
        var app_data = {
            labels: [
                "Unanswered",
                "Denied",
                "Accepted"
            ],
            datasets: [
                {
                    data: [{{ form.apps.unanswered }}, {{ form.apps.denied }}, {{ form.apps.accepted }}],
                    backgroundColor: [
                        "#8080ff",
                        "#ff3333",
                        "#33cc33"
                    ],
                    hoverBackgroundColor: [
                        "#8080ff",
                        "#ff3333",
                        "#33cc33"
                    ]
                }
            ]
        };
        var app_options = {
            animation: {
                animateRotate: true
            }
        }
        var app_ctx = $("#appChart");
        var app_chart = new Chart(app_ctx,
            {
                type: 'pie',
                data: app_data,
                options: app_options
            }
        );

        var ticket_data = {
            labels: [
                "Unclaimed",
                "Claimed",
                "Resolved"
            ],
            datasets: [
                {
                    data: [{{ form.tickets.unclaimed }}, {{ form.tickets.claimed }}, {{ form.tickets.resolved }}],
                    backgroundColor: [
                        "#8080ff",
                        "#ff3333",
                        "#33cc33"
                    ],
                    hoverBackgroundColor: [
                        "#8080ff",
                        "#ff3333",
                        "#33cc33"
                    ]
                }
            ]
        };
        var ticket_options = {
            animation: {
                animateRotate: true
            }
        }
        var ticket_ctx = $("#ticketChart");
        var ticket_chart = new Chart(ticket_ctx,
            {
                type: 'pie',
                data: ticket_data,
                options: ticket_options
            }
        );

        var total_data = {
            labels: [
                "Applications",
                "Players",
                "IPs",
                "Tickets",
                "Warnings"
            ],
            datasets: [
                {
                    label: "Totals",
                    data: [
                        {{ form.counts.applications }},
                        {{ form.counts.players }},
                        {{ form.counts.ips }},
                        {{ form.counts.tickets }},
                        {{ form.counts.warnings }}
                    ],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)'
                    ],
                    borderWidth: 1
                }
            ]
        }
        var total_ctx = $("#totalChart");
        var total_chart = new Chart(total_ctx,
            {
                type: 'bar',
                data: total_data
            }
        );
    });
    </script>
{% endblock section %}