{% extends "allianceauth/base.html" %}

{% load i18n %}
{% load static %}

{% block page_title %}{{ character }} {% trans "Statistics" %}{% endblock %}

{% block content %}
    <script type="text/javascript" src="{% static 'afat/javascript/chart-js/Chart.min.js' %}"></script>

    <div class="col-lg-12">
        <br>
        {% include 'afat/menu.html' %}

        <h2>{{ character }} {% trans "Statistics" %}</h2>
        <h4>{{ month|month }} {{ year }}</h4>

        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#graphs">{% trans "Graphs" %}</a></li>
            <li><a data-toggle="tab" href="#rawdata">{% trans "Raw Data" %}</a></li>
        </ul>

        <div class="tab-content">
            <div id="graphs" class="tab-pane fade in active panel-default">
                <div class="panel-body">
                    <div class="col-md-4">
                        <h4>{% trans "FATs by Ship Type" %}</h4>
                        <canvas style="width: 400px; max-width: 100%; height: 400px;" id="pie-ship"></canvas>

                        <script>
                            var shipPieChart = new Chart(document.getElementById("pie-ship"), {
                                type: "pie",
                                data: {
                                    datasets: [{
                                        data: {{ data_ship_type.1|safe }},
                                        backgroundColor: {{ data_ship_type.2|safe }}
                                    }],
                                    labels: {{ data_ship_type.0|safe }}
                                },
                                options: {
                                    responsive: false
                                }
                            })
                        </script>
                    </div>

                    <div class="col-md-8">
                        <h4>{% trans "FATs by Time of Day" %}</h4>
                        <canvas style="width: 100%; height: 400px;" id="line-time"></canvas>

                        <script>
                            var FATLineChart = new Chart(document.getElementById("line-time"),{
                                type: "line",
                                data: {
                                    datasets: [{
                                        label: "# of FATs",
                                        data: {{ data_time.1|safe }},
                                        backgroundColor: {{ data_time.2|safe }}
                                    }],
                                    labels: {{ data_time.0|safe }}
                                },
                                options: {
                                    responsive: false
                                }
                            })
                        </script>
                    </div>
                </div>
            </div>

            <div id="rawdata" class="tab-pane fade panel-default">
                <div class="panel-body">
                    <h4>{% trans "FATs for" %} {{ character }}</h4>

                    <table class="table" id="raw-data">
                        <thead>
                            <th>{% trans "Name" %}</th>
                            <th>{% trans "Fleet Type" %}</th>
                            <th>{% trans "Location" %}</th>
                            <th>{% trans "Ship" %}</th>
                            <th>{% trans "EVE Time" %}</th>
                        </thead>

                        <tbody>
                        {% for fat in fats %}
                            <tr>
                                <td>
                                    {% if fat.afatlink.fleet %}
                                        {{ fat.afatlink.fleet }}
                                    {% else %}
                                        {{ fat.afatlink.hash }}
                                    {% endif %}
                                </td>
                                <td>
                                    {% if fat.afatlink.link_type %}
                                        {{ fat.afatlink.link_type.name }}
                                    {% endif %}
                                </td>
                                <td>{{ fat.system }}</td>
                                <td>{{ fat.shiptype }}</td>
                                <td data-sort='{{ fat.afatlink.afattime|date:"Y-m-d H:i" }}'>{{ fat.afatlink.afattime|date:"Y-M-d, H:i" }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_javascript %}
    {% include 'bundles/datatables-js.html' %}
    {% include 'bundles/moment-js.html' %}
{% endblock %}

{% block extra_css %}
    {% include 'bundles/datatables-css.html' %}
{% endblock %}

{% block extra_script %}
    $.fn.dataTable.moment = function(format, locale) {
        var types = $.fn.dataTable.ext.type;

        // Add type detection
        types.detect.unshift(function(d) {
            return moment(d, format, locale, true).isValid() ?
                'moment-'+format :
                null;
        } );

        // Add sorting method - use an integer for the sorting
        types.order[ 'moment-'+format+'-pre' ] = function(d) {
            return moment(d, format, locale, true).unix();
        };
    };

    $(document).ready(function() {
        $.fn.dataTable.moment('YYYY-MMM-D, HH:mm');

        $('#raw-data').DataTable({
            "order": [[ 4, "desc" ]]
        });
    });
{% endblock %}
