{% extends 'moonmining/base.html' %}
{% load i18n %}
{% load static %}

{% block details %}
    <ul id="myTabs" class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
            <a href="#tab_owned_value" aria-controls="tab_owned_value" role="tab" data-toggle="tab">Potential monthly income</a>
        </li>
        <li role="presentation">
            <a href="#tab_user_mining" aria-controls="tab_user_mining" role="tab" data-toggle="tab">Member Mining</a>
        </li>
        <li role="presentation">
            <a href="#tab_user_uploaded" aria-controls="tab_user_uploaded" role="tab" data-toggle="tab">Member Uploads</a>
        </li>
        <li role="presentation">
            <a href="#tab_ore_prices" aria-controls="tab_ore_prices" role="tab" data-toggle="tab">Ore prices</a>
        </li>
    </ul>

    <div class="panel panel-default panel-tabs">
        <div class="panel-body">
            <div class="tab-content">
                {% include "moonmining/partials/reports_owned_value_tab.html" %}
                {% include "moonmining/partials/reports_user_mining_tab.html" %}
                {% include "moonmining/partials/reports_user_uploaded_tab.html" %}
                {% include "moonmining/partials/reports_ore_prices_tab.html" %}
            </div>
        </div>
    </div>


    <!-- Modals -->
    {% include "moonmining/modals/base.html" with modal_id="modalMoonDetails" modal_content_id="modalMoonDetailsContent" %}
{% endblock %}

{% block extra_javascript %}
    {{ block.super }}
    <script type="application/javascript" src="{% static 'moonmining/vendor/datatables/plugins/dataTables.rowGroup.min.js' %}"></script>
    <script type="text/javascript">
        $(function() {
            $('#table_owned_value').DataTable(
                {
                ajax: {
                    url: '{% url "moonmining:report_owned_value_data" %}',
                    dataSrc: '',
                    cache: true
                },
                columns: [
                    { data: 'corporation' },
                    { data: 'moon',
                        render: {
                            _: 'display',
                            sort: 'sort'
                        }
                    },
                    { data: 'region' },
                    { data: 'rarity_class' },
                    {
                        data: 'value',
                        render: $.fn.dataTable.render.formatisk()
                    },
                    {
                        data: 'grand_total_percent',
                        render: $.fn.dataTable.render.number(',', '.', 0)
                    },
                    { data: 'rank' },
                    {
                        data: 'total',
                        render: $.fn.dataTable.render.formatisk()
                    },
                ],
                lengthMenu: DEFAULT_LENGTH_MENU,
                pageLength: DEFAULT_PAGE_LENGTH,
                order: [ [0, "asc"], [1, "asc"] ],
                ordering: false,
                rowGroup: {
                    dataSrc: 'corporation',
                    className: 'table-group'
                },
                columnDefs: [
                    { "visible": false, "targets": [ 0 ] },
                    { "orderable": false, "targets": [ 1 ] },
                ],
                createdRow: function( row, data, dataIndex ) {
                    if (data['is_total']) {
                        $(row).addClass('info');
                    }
                },
                footerCallback: function (row, data, start, end, display) {
                    const api = this.api();

                    dataTableFooterSumColumn(api, 5);
                    dataTableFooterSumColumn(api, 7, 'isk');
                }
            });

            $('#table_user_mining').DataTable(
                {
                ajax: {
                    url: '{% url "moonmining:report_user_mining_data" %}',
                    dataSrc: '',
                    cache: true
                },
                columns: [
                    { data: 'name' },
                    { data: 'corporation' },
                    { data: 'state' },
                    {
                        data: 'volume_month_3',
                        render: $.fn.dataTable.render.number(',', '.', 0)
                    },
                    {
                        data: 'price_month_3',
                        render: $.fn.dataTable.render.formatisk()
                    },
                    {
                        data: 'volume_month_2',
                        render: $.fn.dataTable.render.number(',', '.', 0)
                    },
                    {
                        data: 'price_month_2',
                        render: $.fn.dataTable.render.formatisk()
                    },
                    {
                        data: 'volume_month_1',
                        render: $.fn.dataTable.render.number(',', '.', 0)
                    },
                    {
                        data: 'price_month_1',
                        render: $.fn.dataTable.render.formatisk()
                    },
                    {
                        data: 'volume_month_0',
                        render: $.fn.dataTable.render.number(',', '.', 0)
                    },
                      {
                        data: 'price_month_0',
                        render: $.fn.dataTable.render.formatisk()
                    }

                ],
                lengthMenu: DEFAULT_LENGTH_MENU,
                pageLength: DEFAULT_PAGE_LENGTH,
                order: [ [0, "asc"] ],
                filterDropDown: {
                    columns: [
                        {
                            idx: 1,
                            title: "Corporation"
                        },
                        {
                            idx: 2,
                            title: "State"
                        }
                    ],
                    bootstrap: true,
                    autoSize: false
                },
                footerCallback: function (row, data, start, end, display) {
                    const api = this.api();

                    dataTableFooterSumColumn(api, 3);
                    dataTableFooterSumColumn(api, 4, 'isk');
                    dataTableFooterSumColumn(api, 5);
                    dataTableFooterSumColumn(api, 6, 'isk');
                    dataTableFooterSumColumn(api, 7);
                    dataTableFooterSumColumn(api, 8, 'isk');
                    dataTableFooterSumColumn(api, 9);
                    dataTableFooterSumColumn(api, 10, 'isk');
                }
            });

            $('#table_user_uploaded').DataTable(
                {
                ajax: {
                    url: '{% url "moonmining:report_user_uploaded_data" %}',
                    dataSrc: '',
                    cache: true
                },
                columns: [
                    { data: 'name' },
                    { data: 'corporation' },
                    { data: 'state' },
                    {
                        data: 'num_moons',
                        render: $.fn.dataTable.render.number(',', '.', 0)
                    }
                ],
                lengthMenu: DEFAULT_LENGTH_MENU,
                pageLength: DEFAULT_PAGE_LENGTH,
                order: [ [0, "asc"] ],
                filterDropDown: {
                    columns: [
                        {
                            idx: 1,
                            title: "Corporation"
                        },
                        {
                            idx: 2,
                            title: "State"
                        }
                    ],
                    bootstrap: true,
                    autoSize: false
                },
                footerCallback: function (row, data, start, end, display) {
                    dataTableFooterSumColumn(this.api(), 3);
                }
            });

            $('#table_ore_prices').DataTable(
                {
                ajax: {
                    url: '{% url "moonmining:report_ore_prices_data" %}',
                    dataSrc: '',
                    cache: true
                },
                columns: [
                    { data: 'name' },
                    {
                        data: 'price',
                        render: $.fn.dataTable.render.number(',', '.', 2)
                    },
                    { data: 'group' },
                    {
                        data: 'rarity_html',
                        render: {
                            _: 'display',
                            sort: 'sort'
                        }

                    },
                    { data: 'description' },
                    { data: 'rarity_str' },
                ],
                lengthMenu: DEFAULT_LENGTH_MENU,
                pageLength: DEFAULT_PAGE_LENGTH,
                order: [ [0, "asc"] ],
                columnDefs: [
                    { "visible": false, "targets": [ 5 ] },
                ],
                filterDropDown: {
                    columns: [
                        {
                            idx: 2
                        },
                        {
                            idx: 5,
                            title: "Rarity"
                        }
                    ],
                    bootstrap: true,
                    autoSize: false
                }
            });

            handle_modal_events("modalMoonDetails", "modalMoonDetailsContent")
        });
    </script>
{% endblock %}

{% block extra_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'memberaudit/vendor/datatables/plugins/rowGroup.dataTables.min.css' %}" type="text/css">
    <link href="{% static 'moonmining/css/reports.css' %}" type="text/css" rel="stylesheet">
{% endblock %}

{% block extra_script %}
{% endblock %}
