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

{% load i18n %}

{% block page_title %}{{ corporation }} {% translate "Statistics" %}{% endblock %}

{% block afat_header %}
    <br>
    {% include "afat/partials/menu.html" %}

    <h2>{{ corporation }} {% translate "Statistics" %}</h2>
{% endblock %}

{% block afat_body %}
    {% include "afat/bundles/chartjs-js.html" %}

    {% if month == "1" %}
        {% url "afat:statistics_corporation" corp.corporation_id year_prev 12 as url_previous_month %}
    {% else %}
        {% url "afat:statistics_corporation" corp.corporation_id year month_prev as url_previous_month %}
    {% endif %}

    {% if month == "12" %}
        {% url "afat:statistics_corporation" corp.corporation_id year_next 1 as url_next_month %}
        {% url "afat:statistics_corporation" corp.corporation_id year_current month_current as url_current_month %}
    {% else %}
        {% url "afat:statistics_corporation" corp.corporation_id year month_next as url_next_month %}
        {% url "afat:statistics_corporation" corp.corporation_id year_current month_current as url_current_month %}
    {% endif %}
    {% include "afat/partials/month_navigation.html" with url_previous_month=url_previous_month url_next_month=url_next_month url_current_month=url_current_month %}

    {% include "afat/partials/statistics/corporation/tabs_navigation.html" %}

    <div class="tab-content">
        {% include "afat/partials/statistics/corporation/tabs/graphs.html" %}
        {% include "afat/partials/statistics/corporation/tabs/member.html" %}
    </div>
{% endblock %}

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

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

    <script>
        /**
         * datetime formatting
         *
         * @param format
         * @param locale
         */
        $.fn.dataTable.moment = function(format, locale) {
            let 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-DD, HH:mm');

            $('#corp-members').DataTable({
                order: [
                    [1, 'desc'],
                    [0, 'asc']
                ],
            });
        });
    </script>
{% endblock %}
