{% extends "base.html" %}
{% block title %}{{ b.name }}{% endblock %}
{% block content %}
{% set cur = b.currency %}
<div class="page-head">
  <div><small><a href="{{ url_for('budgets.index') }}">{{ t('Budgets') }}</a> · {{ fy }} · {{ b.bcode }}{% if b.cc_code %} · {{ b.cc_code }}{% endif %}</small>
    <h1>{{ b.name }}</h1></div>
</div>
<form method="post" id="budget-form">
  <div class="card">
    <div class="grid">
      <div class="field"><label>{{ t('Name') }}</label><input name="name" value="{{ b.name }}"></div>
      <div class="field wide"><label>{{ t('Notes') }}</label><input name="notes" value="{{ b.notes or '' }}"></div>
    </div>
    <p class="help" style="margin:10px 0 0">{{ t('Enter amounts as positive numbers in') }} {{ cur }}: {{ t('expected income for income accounts, expected cost for expense accounts.') }}
      {{ t('Type a figure in the Year column to spread it evenly over the twelve months.') }}</p>
  </div>
  <div class="tabs">
    <a href="#" data-show="used" class="active">{{ t('Accounts in this budget') }}</a>
    <a href="#" data-show="all">{{ t('All income and expense accounts') }}</a>
  </div>
  <div class="card flush" style="overflow-x:auto">
    <table class="budget-grid" data-dec="{{ dec }}">
      <thead><tr><th class="sticky">{{ t('Account') }}</th>
        {% for p in pers %}<th class="num">{{ p }}</th>{% endfor %}<th class="num">{{ t('Year') }}</th></tr></thead>
      <tbody>
      {% for a in accounts %}{% set row = grid.get(a.id, {}) %}
        <tr data-used="{{ 1 if a.id in used else 0 }}">
          <td class="sticky"><b>{{ a.code }}</b> {{ nm(a) }}</td>
          {% for p in pers %}<td><input class="num" name="a{{ a.id }}_{{ loop.index0 }}" inputmode="decimal" value="{{ row.get(p)|plain(cur) if row.get(p) else '' }}" aria-label="{{ a.code }} {{ p }}"></td>{% endfor %}
          <td><input class="num year" inputmode="decimal" aria-label="{{ a.code }} {{ t('Year') }}"></td>
        </tr>
      {% endfor %}
      </tbody>
      <tfoot>
        <tr><td class="sticky">{{ t('Income') }}</td>{% for p in pers %}<td class="num" data-sum="income" data-col="{{ loop.index0 }}"></td>{% endfor %}<td class="num" data-sum="income" data-col="y"></td></tr>
        <tr><td class="sticky">{{ t('Expenses') }}</td>{% for p in pers %}<td class="num" data-sum="expense" data-col="{{ loop.index0 }}"></td>{% endfor %}<td class="num" data-sum="expense" data-col="y"></td></tr>
        <tr class="grand"><td class="sticky">{{ t('Budgeted profit') }}</td>{% for p in pers %}<td class="num" data-sum="net" data-col="{{ loop.index0 }}"></td>{% endfor %}<td class="num" data-sum="net" data-col="y"></td></tr>
      </tfoot>
    </table>
  </div>
  <div class="form-actions">
    <button class="btn">{{ t('Save') }}</button>
    <a class="btn ghost" href="{{ url_for('budgets.view', bid=b.id) }}">{{ t('Cancel') }}</a>
  </div>
</form>
<script>
(function () {
  var table = document.querySelector('.budget-grid');
  var dec = parseInt(table.dataset.dec, 10);
  var income = {{ accounts|selectattr('kind', 'in', ['income', 'income_other'])|map(attribute='code')|list|tojson }};
  var num = function (v) { var n = parseFloat(String(v).replace(/,/g, '')); return isNaN(n) ? 0 : n; };
  var fmt = function (n) { return n.toLocaleString('en-US', {minimumFractionDigits: dec, maximumFractionDigits: dec}); };
  var rows = Array.prototype.slice.call(table.querySelectorAll('tbody tr'));
  function cells(tr) { return Array.prototype.slice.call(tr.querySelectorAll('input:not(.year)')); }
  function isIncome(tr) { return income.indexOf(tr.querySelector('b').textContent) >= 0; }
  function recalc() {
    var sums = {income: new Array(13).fill(0), expense: new Array(13).fill(0)};
    rows.forEach(function (tr) {
      var total = 0, side = isIncome(tr) ? 'income' : 'expense';
      cells(tr).forEach(function (i, k) { var v = num(i.value); total += v; sums[side][k] += v; });
      sums[side][12] += total;
      var y = tr.querySelector('.year');
      if (document.activeElement !== y) y.value = total ? total.toFixed(dec) : '';
    });
    table.querySelectorAll('[data-sum]').forEach(function (td) {
      var k = td.dataset.col === 'y' ? 12 : parseInt(td.dataset.col, 10);
      var v = td.dataset.sum === 'net' ? sums.income[k] - sums.expense[k] : sums[td.dataset.sum][k];
      td.textContent = fmt(v);
      td.classList.toggle('neg', v < 0);
    });
  }
  rows.forEach(function (tr) {
    cells(tr).forEach(function (i) { i.addEventListener('input', recalc); });
    tr.querySelector('.year').addEventListener('change', function () {
      // spread the year evenly; rounding goes to the last month
      var unit = Math.pow(10, dec), total = Math.round(num(this.value) * unit), cs = cells(tr);
      var each = Math.trunc(total / 12);
      cs.forEach(function (i, k) { var v = k < 11 ? each : total - each * 11; i.value = v ? (v / unit).toFixed(dec) : ''; });
      recalc();
    });
  });
  var tabs = document.querySelectorAll('[data-show]');
  function show(mode) {
    tabs.forEach(function (a) { a.classList.toggle('active', a.dataset.show === mode); });
    rows.forEach(function (tr) { tr.hidden = mode === 'used' && tr.dataset.used !== '1'; });
  }
  tabs.forEach(function (a) { a.addEventListener('click', function (e) { e.preventDefault(); show(a.dataset.show); }); });
  show(rows.some(function (tr) { return tr.dataset.used === '1'; }) ? 'used' : 'all');
  recalc();
})();
</script>
{% endblock %}