{% extends "base.html" %}

{% block header %}
    {# Show the setup name, as set in the config file, as page title. Don't escape HTML entities. #}
    <h1>{{ setupname|safe }} Sales Statistics</h1>
    <style>
        @media all {
            svg g text {
                display: none;
            }
            svg g:hover text {
                display: block;
            }
            span.input-replacement {
                display: none;
            }
        }
        @media print {
            svg g text {
                display: block;
            }
            input {
                display: none;
            }
            span.input-replacement {
                display: inline;
            }
        }
    </style>
    {{ super() }}
{% endblock %}

{% block main %}

    <section id="statistics-range">

        <h2>Time Range</h2>

        <form action="/statistics" method="get" accept-charset="utf-8">
            <label for="statistics-range-from">From:</label>
            <input type="date" id="statistics-range-from" name="fromdate" value="{{fromdate}}" />
            <span class="input-replacement">{{fromdate}}</span>

            <label for="statistics-range-to">To:</label>
            <input type="date" id="statistics-range-to" name="todate" value="{{todate}}" />
            <span class="input-replacement">{{todate}}</span>

            <input type="submit" value="Update">
        </form>

    </section>

    <section id="statistics-total">

        <h2>Totals</h2>

        <ul>
            <li>Total products purchased: {{ total_consumption }}</li>
            <li>Total income: {{ total_income|chf }}</li>
            <li>Total deposited: {{ total_deposits|chf }}</li>
            <li>Total accounts balance: {{ total_balance|chf }}</li>
        </ul>

    </section>

    <section>

        <h2>Purchases</h2>

        <table>
            <tr class="head"><td>Product</td><td>Income</td><td>Units</td></tr>
            {% for prod, data in consumptions.items() %}
            <tr class="{{ loop.cycle('odd', '') }}"><td><b>{{ prod }}</b></td><td>{{ -data[0]|chf }}</td><td>{{ data[1] }}</td></tr>
            {% endfor %}
            <tr class="foot"><td>Total</td><td>{{ total_income|chf }}</td><td>{{ total_consumption }}</td></tr>
        </table>

        {# Really hacky pie chart implementation. #}
        <svg width="400" height="400">
            {% for s in product_slices %}
            <g>
                <path d="M 200 200 L {{ s[1]+200 }} {{ s[2]+200 }} A 100 100 0 {{ s[5] }} 1 {{ s[3]+200 }} {{ s[4]+200 }} L 200 200"
                    fill="{{ loop.cycle('green', 'red', 'blue', 'yellow', 'purple', 'orange') }}"></path>
                <text text-anchor="middle"
                    x="{{ 200 + s[6] }}"
                    y="{{ 200 + s[7] }}">{{ s[0] }} ({{ s[8] }})</text>
            </g>
            {% endfor %}
        </svg>

    </section>

    <section id="statistics-balances">

        <h2>Account Balances</h2>

        <ul>
            <li>Total account balances: {{ total_balance|chf }}</li>
            <li>Total positive account balances: {{ positive_balance|chf }}</li>
            <li>Total negative account balances: {{ negative_balance|chf }}</li>
        </ul>

    </section>

    {{ super() }}

{% endblock %}