{% extends 'base.html' %}
{% load compress %}
{% load i18n %}
{% load i18n sizeformat %}

{% block title %}{% trans "Usage Costs" %}{% endblock %}

{% block css %}
    {% include "_stylesheets.html" %}

    <link href="{{ STATIC_URL }}catalystdashboard/nv.d3.min.css" rel="stylesheet" type="text/css">
    <link href='{{ STATIC_URL }}catalystdashboard/scss/style.css' type='text/css' rel='stylesheet'>
{% endblock %}

{% block page_header %}
  {% include "horizon/common/_page_header.html" with title=_("Usage Costs") %}
{% endblock page_header %}

{% block main %}

<p>Disclaimer: This is an estimate for your usage cross <b>ALL regions</b>, not your final invoice. It includes the free router and network discount. All costs are in New Zealand dollars and are exclusive of GST.</p>

<div class="row-fluid">
    <div id="credits_div" class="list-group">
       <h4 class="quota-heading dot_line">{% trans "Credits" %}</h4>
       <ul id="credits_list" class="fa-ul" style="margin-left: 1.7em">
       </ul>
    </div>
    <div>
        <h4 class="quota-heading dot_line">{% trans "Usage Cost History" %}
        </h4>
        <div id="line_chart">
            <svg class="line"></svg>
        </div>
    </div>

    <div>
        <h4 id="monthly_title" class="quota-heading dot_line">{% trans "Monthly Cost Break Down" %}</h4>
        <div class="col-md-4" style="padding:0px;">
            <div id="pie_chart">
               <select id="month_select" class="form-control" style="width:95%;"></select>
               <svg class="pie"></svg>
            </div>
        </div>
        <div class="col-md-8" style="padding:0px;">
            <table id="month_details" class="table table-striped">
                <thead>
                    <tr>
                        <th>Product Name</th>
                        <th>Resource Name/ID</th>
                        <th>Quantity</th>
                        <th>Unit</th>
                        <th>Rate</th>
                        <th>Cost</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Product Name</th>
                        <th>Resource Name/ID</th>
                        <th>Quantity</th>
                        <th>Unit</th>
                        <th>Rate</th>
                        <th>Cost</th>
                    </tr>
                </tfoot>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Current d3 version is 3.4.1 -->
<script type="text/javascript" src="{{ STATIC_URL }}catalystdashboard/d3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="{{ STATIC_URL }}catalystdashboard/nv.d3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="{{ STATIC_URL }}catalystdashboard/jquery.simplePagination.js" charset="utf-8"></script>
<script type="text/javascript">
    var LINE_CHART_DATA = {{line_chart_data | safe}};
    var PIE_CHART_DATA = {{pie_chart_data | safe}};
    var MONTH_DETAILS = {{month_details | safe}};
    var MONTHS = {{x_axis_line_chart | safe}};
    var CREDITS = {{credits | safe}};

    function draw_pie(where, source){
        var h = 500;
        var r = h/2;
        var arc = d3.svg.arc().outerRadius(r) /2 ;
        nv.addGraph(function() {
            var chart = nv.models.pieChart()
                .x(function(d) { return d.key })
                .y(function(d) { return d.value })
                .margin({left: 0, right: 50})
                .showLabels(true)
                .labelType("percent")
                .labelThreshold(.05)
                .donut(true).donutRatio(0.35);
            d3.select("#pie_chart svg")
                .datum(source)
                .transition().duration(1200)
                .call(chart);
            return chart;
        });
    }

    function draw_line(where, source){
        nv.addGraph(function() {
            d3.select(source).remove();
            var chart = nv.models.lineChart()
                .margin({left: 75, right: 50})
                .size(100);

            chart.tooltipContent(function(key, x, y, graph) {
                pay_status = "";
                if (key == "Cost"){
                    status = LINE_CHART_DATA[0].values[MONTHS.indexOf(x)].p;
                    pay_status = "<br/>which is a quotation";
                    switch(status) {
                        case "paid":
                            pay_status = "<br/>which has been paid";
                            break;
                        case "open":
                            pay_status = '<br/>which has <strong style="color: #E6550D;">NOT</strong> been paid';
                            break;
                        default:
                            text = "<br/>which is a quotation";
                    }
                }
                return '<h3>' + key + '</h3>' + '<span style=\'padding:8px\'>$' + y + ' at ' + x + pay_status + '</span>'
            });

            chart.legend
                .radioButtonMode(true);

            chart.xAxis.axisLabel("Cost per Month")
                .tickValues([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11])
                .tickFormat(function(m){return MONTHS[m]});

            chart.yAxis
                .axisLabel("Cost (NZD) excl. GST")
                .tickFormat(d3.format(',.2f'));
            d3.select(where).select('.nv-interactive').selectAll("circle").remove();
            d3.select(where)
                .datum(source)
                .transition()
                .duration(500)
                .call(chart)
                .each("end", function(){
                    var svg = d3.select(this);
                    var data = LINE_CHART_DATA;
                    var unpaid = svg.select('.nv-interactive').selectAll("circle")
                        .data(data[0].values.filter(function (d) {
                        return d.p == 'open';
                    }))
                        .enter().append("circle")
                        .attr("class", "unpaid")
                        .style("fill", "#E6550D")
                        .attr("r", 6)
                        .attr("cx", function(d) {
                        return chart.xAxis.scale()(d.x);
                    })
                        .attr("cy", function(d) {
                        return chart.yAxis.scale()(d.y);
                    });
                    //    .on("click", function(d) {
                    //        showMonthlyCost(d["x"]);
                    //});

                    current_month = LINE_CHART_DATA[0].values[11];
                    var current = svg.select('.nv-interactive')
                        .append("circle")
                        .attr("class", "mycircle")
                        .style("fill", "#31A354")
                        .attr("r", 6)
                        .attr("cx", function(d) {return chart.xAxis.scale()(current_month.x);})
                        .attr("cy", function(d) {return chart.yAxis.scale()(current_month.y);});
                });

            nv.utils.windowResize(chart.update);

            return chart;
        });
    }


    function showMonthlyCost(monthIndex){
        // Build the details table
        var link_mapping = {"c1": "/project/instances/",
                            "b1": "/project/volumes/"}
        $('#month_details tbody').empty();
        if (MONTH_DETAILS.length == 0) {return}
        month_detail = MONTH_DETAILS[monthIndex]
        for(i = 0; i < month_detail.length; i++) {
            var resource_id = ""
            var resource_url = "#";
            if (month_detail[i]['resource_id'] != null && month_detail[i]['resource_id'] != "") {
                resource_id = "(" + month_detail[i]['resource_id']+")"
                var resource_type = month_detail[i]["product"].split(".")[1];
                var product_name = month_detail[i]["product"].split(".")[2];
                if (resource_type in link_mapping){
                    resource_url = link_mapping[resource_type] + month_detail[i]['resource_id'];
                }
                if (resource_type == 'n1'){
                    if (product_name == 'network'){
                        resource_url = '/project/networks/'+ month_detail[i]['resource_id'] +'/detail';
                    }
                    if (product_name == 'router'){
                        resource_url = '/project/routers/'+ month_detail[i]['resource_id'];
                    }
                    if (product_name == 'vpn'){
                        resource_url = '/project/vpn/vpnservice/'+ month_detail[i]['resource_id'];
                    }
                }
            }

            resource = resource_id == ""? month_detail[i]['resource_name']+resource_id : "<a href="+ resource_url +">" + month_detail[i]['resource_name'] + resource_id + "</a>"
            $('#month_details tbody').append('<tr><td>' + month_detail[i]['product'] + '</td><td>' + resource +'</td><td>'+month_detail[i]['quantity']+'</td><td>'+month_detail[i]['unit']+'</td><td>'+month_detail[i]['rate']+'</td><td>$'+month_detail[i]['cost']+'</td></tr>');
        }

        $("#month_details").simplePagination({
            perPage: 10,
        });

        // Refresh the pie chart
        draw_pie("#pie_chart .pie", function(){
            return PIE_CHART_DATA[monthIndex];
        });
    }

    $(document).ready(function(){
        draw_line("#line_chart .line", function(){
            return LINE_CHART_DATA;
        });

        $(window).resize(function(){
            draw_line("#line_chart .line", function(){
                return LINE_CHART_DATA;
            });
        });

        for(i = MONTHS.length -1 ; i >= 0; i--) {
            amount = LINE_CHART_DATA[0].values[i]["y"]
            $("#month_select").append('<option value="'+ i.toString() +'">'+MONTHS[i] + ': $' + amount +'</option>');
        }
        $("#month_select").change(function (e) {
            var optionSelected = $("option:selected", this);
            var valueSelected = this.value;
            showMonthlyCost(this.value);
        });

        showMonthlyCost(11);

        if (CREDITS["credits"].length == 0) {
            $("#credits_div").hide();
        } else {
             $("#credits_div").show();
            for(i=0;i<CREDITS["credits"].length;i++){
                $("#credits_list").append('<li><i class="fa-li fa fa-credit-card"></i> Balance of ' + CREDITS["credits"][i].type + ' is $' + CREDITS["credits"][i].balance + '. This will expire on ' + CREDITS["credits"][i].expiry_date + '</li>');
            }
        }
    });

</script>

{% endblock %}