{% extends "corptools/character/char_base.html" %}
{% load colors %}
{% load l10n %}
{% load i18n %}
{% load humanize %}
{% block ct_block %}

    <div class="col-md-12">
        <div class="row panel panel-primary">
            <div class="panel-heading text-center">{% translate "Wallets" %}</div>
            <div class="panel-body">
                <table id="wallet" class="table table-responsive">
                    <thead>
                        <th>{% translate "Date" %}</th>
                        <th>{% translate "From" %}</th>
                        <th>{% translate "To" %}</th>
                        <th>{% translate "Amount" %}</th>
                        <th>{% translate "Balance" %}</th>
                        <th>{% translate "Reason" %}</th>
                        <th>{% translate "Ref Type" %}</th>
                        <th>{% translate "Character Filter" %}</th>
                    </thead>
                    <tbody>
                        {% for t in wallet %}
                            <tr>
                                <td class="">{{ t.date|date:"Y-m-d h:i" }}</td>
                                <td class="">{{ t.first_party_name.name }}</td>
                                <td class="">{{ t.second_party_name.name }}</td>
                                <td class="">{{ t.amount|intcomma }}</td>
                                <td class="">{{ t.balance|intcomma }}</td>
                                <td class="">{{ t.reason }}</td>
                                <td class="">{{ t.ref_type|deslug|title }}</td>
                                <td class="">{{ t.character.character.character_name }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row panel panel-primary">
            <div class="panel-heading text-center">{% translate "Wallet Activity" %}</div>
            <div class="panel-body">
                <div id="chartdiv-polar" style="min-height: 600px;"></div>
            </div>
        </div>
        {% if manager_perms %}
            <div class="row panel panel-primary">
                <div class="panel-heading text-center">{% translate "Interaction Map" %}</div>
                <div class="panel-body">

                    <div id="chartdiv" style="min-height: 600px;"></div>
                    <div class="pull-right">
                        <button id="toggle-interaction" class="btn btn-info">
                            {% translate "Toggle to" %} <span id="toggle-text">{% translate "Isk Amount" %}</span>
                        </button>
                    </div>
                </div>
            {% endif %}
        </div>

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

        <script src="https://www.amcharts.com/lib/4/core.js"></script>
        <script src="https://www.amcharts.com/lib/4/charts.js"></script>
        <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>

        <script>
            ! function(t) {
                function e(t) {
                    var e = {
                        columns: [],
                        columnsIdxList: [],
                        bootstrap: !1,
                        autoSize: !0,
                        label: "Filter "
                    };
                    if ("bootstrap" in t && "boolean" == typeof t.bootstrap && (e.bootstrap = t.bootstrap), "autoSize" in t && "boolean" == typeof t.autoSize && (e.autoSize = t.autoSize), "label" in t && "string" == typeof t.label && (e.label = t.label), "columns" in t)
                        for (var i = 0; i < t.columns.length; i++) {
                            var n = t.columns[i];
                            if ("idx" in n && "number" == typeof n.idx) {
                                var o = n.idx;
                                e.columns[o] = {
                                    title: null,
                                    maxWidth: null,
                                    autoSize: !0
                                }, e.columnsIdxList.push(o), "title" in n && "string" == typeof n.title && (e.columns[o].title = n.title), "maxWidth" in n && "string" == typeof n.maxWidth && (e.columns[o].maxWidth = n.maxWidth), "autoSize" in n && "boolean" == typeof n.autoSize && (e.columns[o].autoSize = n.autoSize)
                            }
                        }
                    return e
                }
                t(document).on("preInit.dt", function(i, n) {
                    if ("dt" === i.namespace) {
                        var o = new t.fn.dataTable.Api(n),
                            a = o.table().node().id,
                            l = o.init();
                        if ("filterDropDown" in l) {
                            var r = e(l.filterDropDown);
                            if (0 != r.columns.length) {
                                var u = o.table().container(),
                                    s = a + "_filterWrapper",
                                    c = s + " " + (r.bootstrap ? "form-inline" : "");
                                t(u).prepend('<div id="' + s + '" class="' + c + '">' + r.label + "</div>"), o.columns(r.columnsIdxList).every(function() {
                                    var e = this.index(),
                                        i = null !== r.columns[e].title ? r.columns[e].title : t(this.header()).html();
                                    "" == i && (i = "column " + (e + 1));
                                    var n = "form-control " + a + "_filterSelect",
                                        o = a + "_filterSelect" + e;
                                    t("#" + s).append('<select id="' + o + '" class="' + n + '"></select>');
                                    var l = t("#" + o).empty().append('<option value="">(' + i + ")</option>");
                                })
                            }
                        }
                    }
                }), t(document).on("init.dt", function(i, n) {
                    if ("dt" === i.namespace) {
                        var o = new t.fn.dataTable.Api(n),
                            a = o.table().node().id,
                            l = o.init();
                        if ("filterDropDown" in l) {
                            var r = e(l.filterDropDown);
                            o.table().container();
                            o.columns(r.columnsIdxList).every(function() {
                                var e = this,
                                    i = e.index(),
                                    n = t("#" + (a + "_filterSelect" + i));
                                n.on("change", function() {
                                    var i = t.fn.dataTable.util.escapeRegex(t(this).val());
                                    e.search(i ? "^" + i + "$" : "", !0, !1).draw()
                                }), e.data().unique().sort().each(function(t, e) {
                                    "" != t && n.append('<option value="' + t + '">' + t + "</option>")
                                })
                            })
                        }
                    }
                })
            }(jQuery);
        </script>
    {% endbloc extra_javascriptk %}
    {% block ct_extra_script %}

        $(document).ready(function() {

        $('#wallet').DataTable({
        "filterDropDown": {
        columns: [{
        idx: 6
        },
        {
        idx: 7
        }],
        bootstrap: true
        },
        "columnDefs": [
        { "visible": false, "targets": [7] }
        ],
        "order": [
        [0, "desc"]
        ],
        "pageLength": 25
        });
        });

        $("#toggle-interaction").on("click", function() {
        if (show_count){
        chart.data = amount_data;
        show_count = false;
        $('#toggle-text').text('Interaction Count');
        } else {
        chart.data = count_data;
        show_count = true;
        $('#toggle-text').text('Isk Amount');
        }

        });
        var chart = null;
        var show_count = true;
        var count_data = [
        {% for fp, data in chords.items %}
            {% for sp, am in data.items %}
                {"from":"{{ fp }}", "to":"{{ sp }}", "value":{{ am.c }}},
            {% endfor %}
        {% endfor %}
        ]
        var amount_data = [
        {% for fp, data in chords.items %}
            {% for sp, am in data.items %}{"from":"{{ fp }}", "to":"{{ sp }}", "value":{{ am.a }}},{% endfor %}
        {% endfor %}
        ]

        am4core.ready(function() {
        {% if manager_perms %}

            chart = am4core.create("chartdiv", am4charts.ChordDiagram);
            chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

            // colors of main characters
            chart.colors.saturation = 0.45;
            chart.colors.step = 3;
            var colors = {
            {% for fp in chords.keys %}"{{ fp }}":chart.colors.next(),{% endfor %}
            }

            9
            chart.data = count_data;

            chart.dataFields.fromName = "from";
            chart.dataFields.toName = "to";
            chart.dataFields.value = "value";

            chart.nodePadding = 1;
            chart.minNodeSize = 0.1;
            chart.startAngle = 80;
            chart.endAngle = chart.startAngle + 360;
            chart.sortBy = "value";
            chart.fontSize = 10;
            //chart.nonRibbon = true;
            //chart.nonScaling = false;

            var nodeTemplate = chart.nodes.template;
            nodeTemplate.readerTitle = "Click to show/hide or drag to rearrange";
            nodeTemplate.showSystemTooltip = true;
            nodeTemplate.propertyFields.fill = "color";
            nodeTemplate.tooltipText = "{name}'s Transferred: ${total}";

            // when rolled over the node, make all the links rolled-over
            nodeTemplate.events.on("over", function(event) {
            var node = event.target;
            node.outgoingDataItems.each(function(dataItem) {
            if(dataItem.toNode){
            dataItem.link.isHover = true;
            dataItem.toNode.label.isHover = true;
            }
            })
            node.incomingDataItems.each(function(dataItem) {
            if(dataItem.fromNode){
            dataItem.link.isHover = true;
            dataItem.fromNode.label.isHover = true;
            }
            })

            node.label.isHover = true;
            })

            // when rolled out from the node, make all the links rolled-out
            nodeTemplate.events.on("out", function(event) {
            var node = event.target;
            node.outgoingDataItems.each(function(dataItem) {
            if(dataItem.toNode){
            dataItem.link.isHover = false;
            dataItem.toNode.label.isHover = false;
            }
            })
            node.incomingDataItems.each(function(dataItem) {
            if(dataItem.fromNode){
            dataItem.link.isHover = false;
            dataItem.fromNode.label.isHover = false;
            }
            })

            node.label.isHover = false;
            })

            var label = nodeTemplate.label;
            label.relativeRotation = 90;
            {% if NIGHT_MODE %}label.fill = am4core.color("white");{% endif %}
            label.fillOpacity = 0.8;

            let labelHS = label.states.create("hover");
            labelHS.properties.fillOpacity = 1;

            nodeTemplate.cursorOverStyle = am4core.MouseCursorStyle.pointer;
            // this adapter makes non-main character nodes to be filled with color of the main character
            nodeTemplate.adapter.add("fill", function(fill, target) {
            let node = target;
            let counters = {};
            let mainChar = false;
            node.incomingDataItems.each(function(dataItem) {
            if(colors[dataItem.toName]){
            mainChar = true;
            }

            if(isNaN(counters[dataItem.fromName])){
            counters[dataItem.fromName] = dataItem.value;
            }
            else{
            counters[dataItem.fromName] += dataItem.value;
            }
            })
            if(mainChar){
            return fill;
            }

            let count = 0;
            let color;
            let biggest = 0;
            let biggestName;

            for(var name in counters){
            if(counters[name] > biggest){
            biggestName = name;
            biggest = counters[name];
            }
            }
            if(colors[biggestName]){
            fill = colors[biggestName];
            }

            return fill;
            })

            // link template
            var linkTemplate = chart.links.template;
            linkTemplate.strokeOpacity = 0;
            linkTemplate.fillOpacity = 0.15;
            linkTemplate.tooltipText = "{fromName} > {toName}:{value.value}";

            var hoverState = linkTemplate.states.create("hover");
            hoverState.properties.fillOpacity = 0.7;
            hoverState.properties.strokeOpacity = 0.7;
        {% endif %}

        var chart_polar = am4core.create("chartdiv-polar", am4charts.RadarChart);
        chart_polar.hiddenState.properties.opacity = 0; // this creates initial fade-in

        let data = [
        {% for gd, data in graphs.items %}
            {
            category: "{{ gd }}",
            {% for k, v in data.items %}"{{ k }}": {{ v }},{% endfor %}
            },
        {% endfor %}
        ]

        chart_polar.data = data;
        chart_polar.radius = am4core.percent(90);
        chart_polar.numberFormatter.numberFormat = "#"

        var categoryAxis = chart_polar.xAxes.push(new am4charts.CategoryAxis());
        categoryAxis.dataFields.category = "category";
        categoryAxis.renderer.labels.template.location = 0.5;
        categoryAxis.renderer.tooltipLocation = 0.5;

        var valueAxis = chart_polar.yAxes.push(new am4charts.ValueAxis());
        valueAxis.tooltip.disabled = true;
        valueAxis.renderer.labels.template.horizontalCenter = "left";

        {% if NIGHT_MODE %}
            valueAxis.renderer.labels.template.fill = am4core.color("white");
            categoryAxis.renderer.labels.template.fill = am4core.color("white");
        {% endif %}

        {% for series in graph_people %}
            var series{{ forloop.count }} = chart_polar.series.push(new am4charts.RadarColumnSeries());
            series{{ forloop.count }}.name = "{{ series }}";
            series{{ forloop.count }}.dataFields.categoryX = "category";
            series{{ forloop.count }}.dataFields.valueY = "{{ series }}";
            series{{ forloop.count }}.stroke = am4core.color("#ffffff");
            series{{ forloop.count }}.fill = chart_polar.colors.next();
            series{{ forloop.count }}.columns.template.strokeOpacity = 0.2;
            series{{ forloop.count }}.stacked = true;
            series{{ forloop.count }}.sequencedInterpolation = true;
            series{{ forloop.count }}.columns.template.width = am4core.percent(100);
            series{{ forloop.count }}.columns.template.tooltipText = "{name}: {valueY.value}";
        {% endfor %}
        chart_polar.seriesContainer.zIndex = -1;

        chart_polar.scrollbarY = new am4core.Scrollbar();
        chart_polar.scrollbarY.exportable = false;

        var range1 = categoryAxis.axisRanges.create();
        range1.category = "0000";
        range1.endCategory = "0500";
        range1.axisFill.fill = am4core.color("#0066CC");
        range1.axisFill.fillOpacity = 0.2;
        var range2 = categoryAxis.axisRanges.create();
        range2.category = "2100";
        range2.endCategory = "2300";
        range2.axisFill.fill = am4core.color("#0066CC");
        range2.axisFill.fillOpacity = 0.2;

        var range3 = categoryAxis.axisRanges.create();
        range3.category = "1400";
        range3.endCategory = "2000";
        range3.axisFill.fill = am4core.color("#CC3333");
        range3.axisFill.fillOpacity = 0.2;
        var range2 = categoryAxis.axisRanges.create();
        range2.category = "0700";
        range2.endCategory = "1200";
        range2.axisFill.fill = am4core.color("#55AB55");
        range2.axisFill.fillOpacity = 0.2;

        chart_polar.cursor = new am4charts.RadarCursor();
        chart_polar.cursor.xAxis = categoryAxis;
        chart_polar.cursor.fullWidthXLine = true;
        chart_polar.cursor.lineX.strokeOpacity = 0;
        chart_polar.cursor.lineX.fillOpacity = 0.1;
        chart_polar.cursor.lineX.fill = am4core.color("#000000");
        }); // end am4core.ready()
    {% endblock ct_extra_script %}
