{% extends 'freight/base.html' %}
{% load i18n %}
{% load humanize %}
{% load static %}
{% load freight_filters %}

{% block details %}

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#routes" aria-controls="routes" role="tab" data-toggle="tab">Routes</a></li>
        <li role="presentation"><a href="#pilots" aria-controls="pilots" role="tab" data-toggle="tab">Pilots</a></li>
        <li role="presentation"><a href="#pilot_corporations" aria-controls="pilot_corporations" role="tab" data-toggle="tab">Pilot Corporations</a></li>
        <li role="presentation"><a href="#customers" aria-controls="customers" role="tab" data-toggle="tab">Customers</a></li>
    </ul>

    <!-- Tabs -->
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="tab-content">

                <!-- Route -->
                <div role="tabpanel" class="tab-pane active" id="routes">
                    <div class="table-responsive">
                        <table class="table table-striped table-width-fix" id="tab_routes">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Contracts</th>
                                    <th>Rewards&nbsp;(ISK)</th>
                                    <th>Collaterals&nbsp;(ISK)</th>
                                    <th>Volume&nbsp;(m3)</th>
                                    <th>Pilots</th>
                                    <th>Customers</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            <tfoot>
                                <tr class="success">
                                    <th>TOTALS</th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                </tr>
                        </tfoot>
                        </table>
                    </div>
                </div>

                <!-- Pilots -->
                <div role="tabpanel" class="tab-pane" id="pilots">
                    <div class="table-responsive">
                        <table class="table table-striped table-width-fix" id="tab_pilots">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Corporation</th>
                                    <th>Contracts</th>
                                    <th>Rewards&nbsp;(ISK)</th>
                                    <th>Collaterals&nbsp;(ISK)</th>
                                    <th>Volume&nbsp;(m3)</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            <tfoot>
                                <tr class="success">
                                    <th>TOTALS</th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>

                <!-- Pilot Corporations -->
                <div role="tabpanel" class="tab-pane" id="pilot_corporations">
                    <div class="table-responsive">
                        <table class="table table-striped table-width-fix" id="tab_pilot_corporations">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Alliance</th>
                                    <th>Contracts</th>
                                    <th>Rewards&nbsp;(ISK)</th>
                                    <th>Collaterals&nbsp;(ISK)</th>
                                    <th>Volume&nbsp;(m3)</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            <tfoot>
                                <tr class="success">
                                    <th>TOTALS</th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>

                <!-- Pilot Corporations -->
                <div role="tabpanel" class="tab-pane" id="customers">
                    <div class="table-responsive">
                        <table class="table table-striped table-width-fix" id="tab_customers">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Corporation</th>
                                    <th>Contracts</th>
                                    <th>Rewards&nbsp;(ISK)</th>
                                    <th>Collaterals&nbsp;(ISK)</th>
                                    <th>Volume&nbsp;(m3)</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            <tfoot>
                                <tr class="success">
                                    <th>TOTALS</th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <p class="text-muted">
        Statistics calculated for all contracts finished withn the last {{ max_days }} days
    </p>

{% endblock %}

{% block extra_javascript %}
    {% include 'bundles/datatables-js.html' %}
    {% include "freight/partials/global_js.html" %}

    <script type="application/javascript">
        // Remove the formatting to get integer data for summation
        function intVal(i)
        {
            return typeof i === 'string'
                ? i.replace(/[\$,]/g, '')*1
                : typeof i === 'number'
                    ? i
                    : 0;
        };

        $(document).ready(function(){
            $('#tab_routes').DataTable({
                ajax: {
                    url: '{% url 'freight:statistics_routes_data' %}',
                    dataSrc: '',
                    cache: false
                },
                columns: [
                    { data: 'name' },
                    {
                        data: 'contracts',
                        render: $.fn.dataTable.render.number( ',', '.', 0 )
                    },
                    {
                        data: 'rewards',
                        render: $.fn.dataTable.render.formatisk()
                    },
                    {
                        data: 'collaterals',
                        render: $.fn.dataTable.render.formatisk()
                    },
                    {
                        data: 'volume',
                        render: $.fn.dataTable.render.number( ',', '.', 0 )
                    },
                    {
                        data: 'pilots',
                        render: $.fn.dataTable.render.number( ',', '.', 0 )
                    },
                    {
                        data: 'customers',
                        render: $.fn.dataTable.render.number( ',', '.', 0 )
                    },
                ],
                order: [ [ 1, "desc" ], [ 2, "desc" ] ],
                footerCallback: function ( row, data, start, end, display ) {
                    const api = this.api();
                    dataTableFooterSumColumn(api, 1);
                    dataTableFooterSumColumn(api, 2, "isk");
                    dataTableFooterSumColumn(api, 3, "isk");
                    dataTableFooterSumColumn(api, 4);
                    dataTableFooterSumColumn(api, 5);
                    dataTableFooterSumColumn(api, 6);
                }
            });

            $('#tab_pilots').DataTable({
                ajax: {
                    url: '{% url 'freight:statistics_pilots_data' %}',
                    dataSrc: '',
                    cache: false
                },

                columns: [
                    { data: 'name' },
                    { data: 'corporation' },
                    {
                        data: 'contracts',
                        render: $.fn.dataTable.render.number( ',', '.', 0 )
                    },
                    {
                        data: 'rewards',
                        render: $.fn.dataTable.render.formatisk()
                    },
                    {
                        data: 'collaterals',
                        render: $.fn.dataTable.render.formatisk()
                    },
                    {
                        data: 'volume',
                        render: $.fn.dataTable.render.number( ',', '.', 0 )
                    },
                ],
                order: [ [ 2, "desc" ], [ 3, "desc" ] ],
                footerCallback: function ( row, data, start, end, display ) {
                    const api = this.api();
                    dataTableFooterSumColumn(api, 2);
                    dataTableFooterSumColumn(api, 3, "isk");
                    dataTableFooterSumColumn(api, 4, "isk");
                    dataTableFooterSumColumn(api, 5);
                }
            });

            $('#tab_pilot_corporations').DataTable({
                ajax: {
                    url: '{% url 'freight:statistics_pilot_corporations_data' %}',
                    dataSrc: '',
                    cache: false
                },

                columns: [
                    { data: 'name' },
                    { data: 'alliance' },
                    {
                        data: 'contracts',
                        render: $.fn.dataTable.render.number( ',', '.', 0 )
                    },
                    {
                        data: 'rewards',
                        render: $.fn.dataTable.render.formatisk()
                    },
                    {
                        data: 'collaterals',
                        render: $.fn.dataTable.render.formatisk()
                    },
                    {
                        data: 'volume',
                        render: $.fn.dataTable.render.number( ',', '.', 0 )
                    },
                ],
                order: [ [ 2, "desc" ], [ 3, "desc" ] ],
                footerCallback: function ( row, data, start, end, display ){
                    const api = this.api();
                    dataTableFooterSumColumn(api, 2);
                    dataTableFooterSumColumn(api, 3, "isk");
                    dataTableFooterSumColumn(api, 4, "isk");
                    dataTableFooterSumColumn(api, 5);
                }
            });

            $('#tab_customers').DataTable({
                ajax: {
                    url: '{% url 'freight:statistics_customer_data' %}',
                    dataSrc: '',
                    cache: false
                },

                columns: [
                    { data: 'name' },
                    { data: 'corporation' },
                    {
                        data: 'contracts',
                        render: $.fn.dataTable.render.number( ',', '.', 0 )
                    },
                    {
                        data: 'rewards',
                        render: $.fn.dataTable.render.formatisk()
                    },
                    {
                        data: 'collaterals',
                        render: $.fn.dataTable.render.formatisk()
                    },
                    {
                        data: 'volume',
                        render: $.fn.dataTable.render.number( ',', '.', 0 )
                    },
                ],
                order: [ [ 2, "desc" ], [ 3, "desc" ] ],
                footerCallback: function ( row, data, start, end, display ) {
                    const api = this.api();
                    dataTableFooterSumColumn(api, 2);
                    dataTableFooterSumColumn(api, 3, "isk");
                    dataTableFooterSumColumn(api, 4, "isk");
                    dataTableFooterSumColumn(api, 5);
                }
            });
        });
    </script>
{% endblock %}

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

    <link href="{% static 'freight/css/kalkoken.css' %}" type="text/css" rel="stylesheet">
    <link href="{% static 'freight/css/statistics.css' %}" type="text/css" rel="stylesheet">
{% endblock %}

{% block extra_script %}
{% endblock %}
