{% extends "base.html" %}

{% block header %}
  <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 %}

  <h1>Sales Statistics</h1>

  <section id="statistics-range">

    <h2>Time Range</h2>

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

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

      <input class="btn btn-primary" 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 class="table table-striped">
      <thead>
        <tr><th>Product</th><th>Income</th><th>Units</th></tr>
      </thead>
      <tbody>
        {% for prod, data in consumptions.items() %}
          <tr><td>{{ prod }}</td><td>{{ -data[0]|chf }}</td><td>{{ data[1] }}</td></tr>
        {% endfor %}
      </tbody>
      <tfoot>
        <tr><td>Total</td><td>{{ total_income|chf }}</td><td>{{ total_consumption }}</td></tr>
      </tfoot>
    </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 %}