{% extends "layout.html" %}

{% macro chartScript(divId, data, unit)%}
    {% set hash = divId | md5 %}

    data_{{ hash }} = [{% for stop in data %}{
                                "date": "{{stop.date}}",
                                "value": {{stop.value}}
                            }{% if not loop.last %},{%endif%}
                            {% endfor%}
                            ]
    var chart_{{ hash }} = createChart('{{divId}}', data_{{ hash }}, '{{unit}}');

    function zoom_chart_{{ hash }}() {
        chart_{{ hash }}.zoomToIndexes(
            chart_{{ hash }}.dataProvider.length - 40,
            chart_{{ hash }}.dataProvider.length - 1
        );
    }

    chart_{{ hash }}.addListener("rendered", zoom_chart_{{ hash }});

    zoom_chart_{{ hash }}()
{% endmacro %}

{% macro nav_tab(id, text, active) %}
    {#
        Create a UI element to select the shown pane of a tabbed view

        id:
            id of the pane to select
        text:
            the text in the UI element
        active:
            boolean stating if the tab is active or not
    #}
    <li class="{% if active %}active{% endif %}">
        <a href="#ref_{{id}}" id="id_{{id}}" data-toggle="tab" >
            {{ text }}
        </a>
    </li>
{% endmacro %}

{% macro tab_pane(id, content, active) %}
     <div class="tab-pane {% if active %}active{% endif %}" id="ref_{{ id }}">
         {{ content }}
     </div>
{% endmacro %}

{% macro chart(data, baseId, unit, link) %}
    {% if data|length > 0 %}
        {% set chartID = 'chart_' + baseId %}
        <div id="{{ chartID }}" style="width:100%; height:500px;"></div>
        <script type="text/javascript">
            {{ chartScript(chartID, data, unit) }}
        </script>
    {% else %}
        <div class="alert alert-warning" role="alert">
            not enough data: <a href="{{ link }}">log a pitstop</a>?
        </div>
    {% endif %}
{% endmacro %}

{% macro print_consumable_table(consumable) %}
    <table class="table table-striped table-bordered table-condensed">
        <tr>
            <th>Average Distance:</th>
            <td>{{ consumable.average_distance | round(2) }} km</td>
        </tr>
        <tr>
            <th>Amount fuelled:</th>
            <td>{{ consumable.overall_amount | round(2) }} {{ consumable.unit }}</td>
        </tr>
        <tr>
            <th>Average Amount fuelled:</th>
            <td>{{ consumable.average_amount_fuelled | round(2) }} {{ consumable.unit }}</td>
        </tr>
        <tr>
            <th>Average Amount used:</th>
            <td>{{ consumable.average_amount_used | round(2) }} {{ consumable.unit }}/100km</td>
        </tr>
    </table>
{% endmacro %}

{% macro print_vehicle_table(vehicle) %}
    <h3>{{vehicle.name}}</h3>
    <div class="table-responsive">
        <table class="table table-striped table-bordered table-condensed">
            <tr>
                <th>Logged Distance:</th>
                <td>{{ vehicle.overall_distance | round(2) }} km</td>
            </tr>
            <tr>
                <th>Logged Costs:</th>
                <td>{{ vehicle.overall_costs | round(2) }} €</td>
            </tr>
            <tr>
                <th>Logged Costs per km:</th>
                {% if vehicle.costs_per_distance != 'N/A' %}
                    <td>{{ vehicle.costs_per_distance  | round(2) }} €/100km</td>
                {% else %}
                   <td>{{ vehicle.costs_per_distance }}</td>
                {% endif %}
            </tr>
       </table>
    </div>
{% endmacro %}

{% macro tab_script(id) %}
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $('#{{id}}').tab();
            if(window.location.hash != "") {
                  $('a[href="' + window.location.hash + '"]').click()
            }
          });
    </script>
{% endmacro %}

{% block body %}
    <div id="content">
        <ul id="vehicle_tabs" class="nav nav-tabs" data-tabs="tabs">
            {% for vehicle in data %}
                {{ nav_tab(vehicle.id, vehicle.name, loop.first) }}
            {% endfor %}
        </ul>
        <div id="vehicle_content" class="tab-content ">
            {% for vehicle in data %}
                <div class="tab-pane {% if loop.first %}active{% endif %}" id="ref_{{vehicle.id}}">
                    {{ print_vehicle_table(vehicle) }}
                    <ul id="vehicle_{{vehicle.id}}_tabs" class="nav nav-tabs" data-tabs="tabs">
                        {{ nav_tab(vehicle.id|string + '_odometer', 'Odometer', true) }}
                        {{ nav_tab(vehicle.id|string + '_costs', 'Costs', false) }}
                        {% for consumable in vehicle.consumables %}
                            {{ nav_tab(vehicle.id|string + '_' + consumable.id|string, consumable.name, false) }}
                        {% endfor %}
                    </ul>
                    <div id="vehicle_{{vehicle.id}}_content" class="tab-content ">
                        {{ tab_pane(
                            vehicle.id|string + '_odometer',
                            chart(
                                vehicle.odometers,
                                'ref_' + vehicle.id|string + '_odometer',
                                'km',
                                url_for('select_consumable_for_new_pitstop', vid=vehicle.id)
                            ),
                            true
                            )
                        }}
                        {{ tab_pane(
                            vehicle.id|string + '_costs',
                            chart(
                                vehicle.costs,
                                'ref_' + vehicle.id|string + '_costs',
                                '€',
                                url_for('select_consumable_for_new_pitstop', vid=vehicle.id)
                            ),
                            false
                            )
                        }}
                        {% for consumable in vehicle.consumables %}
                            <div class="tab-pane" id="ref_{{vehicle.id}}_{{consumable.id}}">
                                {{ print_consumable_table(consumable) }}
                                <ul id="consumable_{{vehicle.id}}_{{consumable.id}}_tabs" class="nav nav-tabs" data-tabs="tabs">
                                    {{ nav_tab(vehicle.id|string + '_' + consumable.id|string + '_consumption', 'Consumption', true) }}
                                    {{ nav_tab(vehicle.id|string + '_' + consumable.id|string + '_amount', 'Amount', false) }}
                                </ul>
                                <div id="consumable_{{vehicle.id}}_{{consumable.id}}_content" class="tab-content ">
                                    {{ tab_pane(
                                        vehicle.id|string + '_' + consumable.id|string + '_consumption',
                                        chart(
                                            consumable.average_amount,
                                            'ref_' + vehicle.id|string + '_' + consumable.id|string + '_consumption',
                                            consumable.unit + '/100km',
                                            url_for('create_pit_stop_form', vid=vehicle.id, cid=consumable.id)
                                            ),
                                        true
                                        )
                                    }}
                                    {{ tab_pane(
                                        vehicle.id|string + '_' + consumable.id|string + '_amount',
                                        chart(
                                            consumable.amounts,
                                            'ref_' + vehicle.id|string + '_' + consumable.id|string + '_amount',
                                            consumable.unit,
                                            url_for('create_pit_stop_form', vid=vehicle.id, cid=consumable.id)
                                            ),
                                        false
                                        )
                                    }}
                                </div>
                                {{ tab_script('vehicle_' + vehicle.id|string + '_' + consumable.id|string + '_tabs') }}
                            </div>
                        {% endfor %}
                    </div>
                    {{ tab_script('vehicle_' + vehicle.id|string + '_tabs') }}
                </div>
            {% endfor %}
        </div>
        {{ tab_script('vehicle_tabs') }}
    </div>
{% endblock %}