{% extends "layout.html" %}
{% set active_page = active_page|default('meters') -%}
{% block title %}Energy Usage - {{meter_name}} - {{ period_desc }}{% endblock %}
{% block container %}
<h1 class="page-header">Energy Usage <small>{{meter_name}}</small></h1>


<nav aria-label="breadcrumb">
    <ol class="breadcrumb">

        <li class="breadcrumb-item"><a href="{{url_for('meters.usage_overview', meter_id=meter_id) }}">Overview</a></li>
        <li class="breadcrumb-item active">
            {{ period_desc }}&nbsp;

            <div class="btn-group btn-group-sm" role="group">

                {% if prev_fy %}
                <a class="btn btn-primary" href="{{ url_for('meters.usage_fy', meter_id=meter_id, fin_year=prev_fy) }}"
                    role="button">⏮️</a>
                {% else %}
                <a class="btn btn-primary disabled" href="#" role="button">⏮️</a>
                {% endif %}

                {% if next_fy %}
                <a class="btn btn-primary" href="{{ url_for('meters.usage_fy', meter_id=meter_id, fin_year=next_fy) }}"
                    role="button">⏭️</a>
                {% else %}
                <a class="btn btn-primary disabled" href="#" role="button">⏭️</a>
                {% endif %}
            </div>
        </li>
    </ol>

</nav>


<div id="load" style="max-width: 100%; height: 350px;"></div>
<img id="load-loading" src="{{ url_for('static', filename='img/loading_icon.gif') }}"
    style="position: absolute; visibility:visible" />


<div class="card card-body">
    <h3>Monthly Summary</h3>

    <table id="monthly_summary" class="table table-striped">
        <thead>
            <tr>
                <th colspan="2"></th>
                <th colspan="3">Ergon Energy</th>
                <th colspan="2">AGL</th>
                <th colspan="3">Origin</th>
            </tr>
            <tr>
                <th>Month</th>
                <th>T11</th>
                <th>T12</th>
                <th>T14</th>
                <th>T11</th>
                <th>T12</th>
                <th>T11</th>
                <th>T12</th>
            </tr>
        </thead>

        <tbody>



            <tr v-for="month in monthlies">
                <td>
                    <a v-bind:href="month.month_url">📈</a>
                    {% raw %}{{ month.period_desc }}{% endraw %}
                </td>
                <td>{% raw %}{{ Math.round(month.ergon_t11.total_charges.cost_incl_gst)/100 }}{% endraw %}</td>
                <td>{% raw %}{{ Math.round(month.ergon_t12.total_charges.cost_incl_gst)/100 }}{% endraw %}</td>
                <td>{% raw %}{{ Math.round(month.ergon_t14.total_charges.cost_incl_gst)/100 }}{% endraw %}</td>
                <td>{% raw %}{{ Math.round(month.agl_t11.total_charges.cost_incl_gst)/100 }}{% endraw %}</td>
                <td>{% raw %}{{ Math.round(month.agl_t12.total_charges.cost_incl_gst)/100 }}{% endraw %}</td>
                <td>{% raw %}{{ Math.round(month.origin_t11.total_charges.cost_incl_gst)/100 }}{% endraw %}</td>
                <td>{% raw %}{{ Math.round(month.origin_t12.total_charges.cost_incl_gst)/100 }}{% endraw %}</td>
            </tr>

        <tfoot>
            <td>Total</td>
            <td>{% raw %}{{ Math.round(fy_total.ergon_t11)/100 }}{% endraw %}</td>
            <td>{% raw %}{{ Math.round(fy_total.ergon_t12)/100 }}{% endraw %}</td>
            <td>{% raw %}{{ Math.round(fy_total.ergon_t14)/100 }}{% endraw %}</td>
            <td>{% raw %}{{ Math.round(fy_total.agl_t11)/100 }}{% endraw %}</td>
            <td>{% raw %}{{ Math.round(fy_total.agl_t12)/100 }}{% endraw %}</td>
            <td>{% raw %}{{ Math.round(fy_total.origin_t11)/100 }}{% endraw %}</td>
            <td>{% raw %}{{ Math.round(fy_total.origin_t12)/100 }}{% endraw %}</td>
            </tr>

        </tfoot>

    </table>

</div><!-- /card-body-->



<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
    {% include 'meters/chart_daily_totals.js' %}
</script>



<script>

    var dataURL = 'monthly_bills.json';
    var app = new Vue({
        el: '#monthly_summary',
        data: {
            monthlies: [],
            fy_total: []

        },
        mounted: function () { // when the Vue app is booted up, this is run automatically.
            var self = this; // create a closure to access component in the callback below
            $.ajax({
                dataType: "json",
                url: dataURL,
                success: onDataReceived
            });
            function onDataReceived(data) {
                self.monthlies = data.monthlies;
                self.fy_total = data.fy_total;
            };
        }
    });

</script>





{% endblock container%}