{% 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">
            <a href="{{url_for('meters.usage_fy', meter_id=meter_id, fin_year=fin_yr) }}">{{fin_yr}}</a>
        </li>

        <li class="breadcrumb-item active">
            {{ period_desc }}&nbsp;

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

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

                {% if next_month %}
                <a class="btn btn-primary"
                    href="{{ url_for('meters.usage_monthly', meter_id=meter_id, year=next_month.year, month=next_month.month) }}"
                    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>Tariff Comparison</h3>
    <table class="table table-sm table-striped">
        <thead class="thead-light">
            <tr>
                <th></th>
                <th></th>
                <th colspan="3">Ergon Energy</th>
                <th colspan="2">AGL</th>
                <th colspan="3">Origin</th>
            </tr>
            <tr>
                <th>Component</th>
                <th>Usage</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>
                <td>Service Fee</td>
                <td>{{ mth.num_days }} days</td>
                <td>${{ (mth.ergon_t11.supply_charge.cost_incl_gst/100)|round(2) }}</td>
                <td>${{ (mth.ergon_t12.supply_charge.cost_incl_gst/100)|round(2) }}</td>
                <td>${{ (mth.ergon_t14.supply_charge.cost_incl_gst/100)|round(2) }}</td>
                <td>${{ (mth.agl_t11.supply_charge.cost_incl_gst/100)|round(2) }}</td>
                <td>${{ (mth.agl_t12.supply_charge.cost_incl_gst/100)|round(2) }}</td>
                <td>${{ (mth.origin_t11.supply_charge.cost_incl_gst/100)|round(2) }}</td>
                <td>${{ (mth.origin_t12.supply_charge.cost_incl_gst/100)|round(2) }}</td>
            </tr>
            <tr>
                <td>Demand Charge</td>

                <td>{{ (mth.demand)|round(3) }} kW
                    {% if not peak_month %}<br /><small>min 3 kW</small>{% endif %}</td>
                <td>-</td>
                <td>-</td>
                <td>${{ (mth.ergon_t14.demand.cost_incl_gst/100)|round(2) }}</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>All Consumption</td>
                <td>{{ (mth.load_total)|round(2) }} kWh</td>
                <td>${{ (mth.ergon_t11.all_usage.cost_incl_gst/100)|round(2) }}</td>
                <td>-</td>
                <td>${{ (mth.ergon_t14.all_usage.cost_incl_gst/100)|round(2) }}</td>
                <td>${{ (mth.agl_t11.all_usage.cost_incl_gst/100)|round(2) }}</td>
                <td>-</td>
                <td>${{ (mth.origin_t11.all_usage.cost_incl_gst/100)|round(2) }}</td>
                <td>-</td>
            </tr>
            <tr>
                <td>Peak Consumption</td>
                <td>{{ (mth.load_peak1)|round(2) }} kWh <br /><small>SEQ: {{ (mth.load_peak2)|round(2) }}</small></td>
                <td>-</td>
                <td>${{ (mth.ergon_t12.peak.cost_incl_gst/100)|round(2) }}</td>
                <td>-</td>
                <td>-</td>
                <td>${{ (mth.agl_t12.peak.cost_incl_gst/100)|round(2) }}</td>
                <td>-</td>
                <td>${{ (mth.origin_t12.peak.cost_incl_gst/100)|round(2) }}</td>
            </tr>
            <tr>
                <td>Shoulder Consumption <small>SEQ Only</small></td>
                <td>{{ (mth.load_shoulder2)|round(2) }} kWh</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>${{ (mth.agl_t12.shoulder.cost_incl_gst/100)|round(2) }}</td>
                <td>-</td>
                <td>${{ (mth.origin_t12.shoulder.cost_incl_gst/100)|round(2) }}</td>
            </tr>

            <tr>
                <td>Off-Peak Consumption</td>
                <td>{{ (mth.load_offpeak1)|round(2) }} kWh <br /><small>SEQ: {{ (mth.load_offpeak2)|round(2) }}</small>
                </td>
                <td>-</td>
                <td>${{ (mth.ergon_t12.offpeak.cost_incl_gst/100)|round(2) }}</td>
                <td>-</td>
                <td>-</td>
                <td>${{ (mth.agl_t12.offpeak.cost_incl_gst/100)|round(2) }}</td>
                <td>-</td>
                <td>${{ (mth.origin_t12.offpeak.cost_incl_gst/100)|round(2) }}</td>
            </tr>
            <tr>
                <td>Total</td>
                <td></td>
                <td>${{ (mth.ergon_t11.total_charges.cost_incl_gst/100)|round(2) }}</td>
                <td>${{ (mth.ergon_t12.total_charges.cost_incl_gst/100)|round(2) }}</td>
                <td>${{ (mth.ergon_t14.total_charges.cost_incl_gst/100)|round(2) }}</td>
                <td>${{ (mth.agl_t11.total_charges.cost_incl_gst/100)|round(2) }}</td>
                <td>${{ (mth.agl_t12.total_charges.cost_incl_gst/100)|round(2) }}</td>
                <td>${{ (mth.origin_t11.total_charges.cost_incl_gst/100)|round(2) }}</td>
                <td>${{ (mth.origin_t12.total_charges.cost_incl_gst/100)|round(2) }}</td>
            </tr>
            <tr>
                <td>Savings <small>to Ergon T11</small></td>
                <td></td>
                <td> - </td>
                <td>${{ (mth.ergon_t11.total_charges.cost_incl_gst/100-mth.ergon_t12.total_charges.cost_incl_gst/100)|round(2) }}
                </td>
                <td>${{ (mth.ergon_t11.total_charges.cost_incl_gst/100-mth.ergon_t14.total_charges.cost_incl_gst/100)|round(2) }}
                </td>
                <td>${{ (mth.ergon_t11.total_charges.cost_incl_gst/100-mth.agl_t11.total_charges.cost_incl_gst/100)|round(2) }}
                </td>
                <td>${{ (mth.ergon_t11.total_charges.cost_incl_gst/100-mth.agl_t12.total_charges.cost_incl_gst/100)|round(2) }}
                </td>
                <td>${{ (mth.ergon_t11.total_charges.cost_incl_gst/100-mth.origin_t11.total_charges.cost_incl_gst/100)|round(2) }}
                </td>
                <td>${{ (mth.ergon_t11.total_charges.cost_incl_gst/100-mth.origin_t12.total_charges.cost_incl_gst/100)|round(2) }}
                </td>
            </tr>

        </tbody>
    </table>
</div><!-- /card-->


<div class="card card-body">
    <h3>Daily Summary</h3>
    <table id="daily_summary" class="table table-sm table-striped">
        <thead class="thead-light">
            <tr>
                <th>Date</th>
                <th>General Supply</th>
                <th>Controlled Load</th>
                <th>Generation</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="daily in dailies">
                <td>
                    <a v-bind:href="daily.day_url">📈</a>
                    {% raw %}{{ daily.day }}{% endraw %}
                </td>
                <td>{% raw %}{{ daily.load_total.toFixed(2) }}{% endraw %}</td>
                <td>{% raw %}{{ daily.control_total.toFixed(2) }}{% endraw %}</td>
                <td>{% raw %}{{ daily.export_total.toFixed(2) }}{% endraw %}</td>
            </tr>
        </tbody>
    </table>
</div>


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

<script>

    var dataURL = 'daily_totals.json';
    var app = new Vue({
        el: '#daily_summary',
        data: {
            dailies: []
        },
        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.dailies = data.dailies;
            };
        }
    });

</script>





{% endblock container%}