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

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

{% block page_title %}{{ alliance }} {% 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>{{ alliance }} {% 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="#members">{% trans "Corporations" %}</a></li>
        </ul>

        <div class="tab-content">
            <div id="graphs" class="tab-pane fade in active panel-default">
                <div class="panel-body">
                    <ul class="nav nav-pills">
                        <li class="active"><a data-toggle="tab" href="#fatsbyship">{% trans "FATs By Ship Type" %}</a></li>
                        <li><a data-toggle="tab" href="#avgfats">{% trans "Corporation Performance" %}</a></li>
                        <li><a data-toggle="tab" href="#fatsbytime">{% trans "FATs By Time" %}</a></li>
                        <li><a data-toggle="tab" href="#fatsbyweek">{% trans "FATs By Weekday" %}</a></li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane fade in active panel-default" id="fatsbyship">
                            <div class="panel-body">
                                <h3>{% trans "FATs By Ship Type" %}</h3>

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

                        <div id="fatsbytime" class="tab-pane fade in panel-default">
                            <div class="panel-body">
                                <h3>{% trans "FATs By Time" %}</h3>

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

                        <div class="tab-pane fade in panel-default" id="fatsbyweek">
                            <div class="panel-body">
                                <h3>{% trans "FATs By Weekday" %}</h3>

                                <canvas id="weekday-line" width="800" height="500"></canvas>
                                <script>
                                    var weekdayLineChart = new Chart(document.getElementById('weekday-line'), {
                                        type: 'line',
                                        data:{
                                            datasets: [{
                                                label: '# of FATs',
                                                backgroundColor: {{ data_weekday.2|safe }},
                                                data: {{ data_weekday.1 }}
                                            }],
                                            labels: {{ data_weekday.0|safe }}
                                        },
                                        options: {
                                            responsive: false
                                        }
                                    })
                                </script>
                            </div>
                        </div>

                        <div class="tab-pane fade in panel-default" id="avgfats">
                            <div class="panel-body">
                                <h3>{% trans "Average FATs By Corporation" %}</h3>

                                <canvas id="avgs" width="1000" height="700"></canvas>
                                <script>
                                    var averagesHorizontalBarChart = new Chart(document.getElementById('avgs'), {
                                        type: 'horizontalBar',
                                        data:{
                                            datasets: [{
                                                label: 'Average # of FATs',
                                                backgroundColor: '{{ data_avgs.2|safe }}',
                                                data: {{ data_avgs.1 }}
                                            }],
                                            labels: {{ data_avgs.0|safe }}
                                        },
                                        options: {
                                            responsive: false,
                                            scales: {
                                                xAxes: [{
                                                    ticks: {
                                                        autoSkip: false
                                                    }
                                                }],
                                                yAxes:[{
                                                    ticks: {
                                                        beginAtZero: true
                                                    }
                                                }]
                                            }
                                        }
                                    })
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade in panel-default" id="members">
                <div class="panel-body">
                    <h3>{{ alliance }} {% trans "Member Corps" %}</h3>

                    <table class="table" id="member-corps">
                        <thead>
                            <th>{% trans "Corporation" %}</th>
                            <th>{% trans "FATs" %}</th>
                            <th>{% trans "Avg FATs" %}</th>
                            <th>{% trans "Corporation Stats" %}</th>
                        </thead>

                        <tbody>
                            {% for key, value in corps.items %}
                                <tr>
                                    <td><img src="{{ value.0|corporation_logo_url:32 }}" style="margin-right: 1rem;" />{{ key }}</td>
                                    <td>{{ value.1 }}</td>
                                    <td>{{ value.2 }}</td>
                                    <td>
                                        <a class="btn btn-primary" href="/afat/stats/corp/{{ value.0 }}/{{ month }}/{{ year }}/">
                                            <span class="glyphicon glyphicon-eye-open"></span>
                                        </a>
                                    </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');

        $('#member-corps').DataTable();
    });
{% endblock %}
