{% extends "layout.html" %}
{% block title %}{{date.strftime('%B %Y')}}{% endblock %}
{% block head %}
  <script>
    function toggleAccounts() {
      document.querySelector('#accounts').classList.toggle('open');
    }

    function showAllTransactions() {
      var showMore = document.querySelector('#show-more');
      if (showMore) {
        showMore.remove();
        document.querySelector('.transactions.hidden').classList.remove('hidden');
      }
    }

    function uploadFile() {
      document.querySelector('#update-form > input[type="file"]').click();
    }

    function submitUpdate(files) {
      if (files.length) {
        document.querySelector('#update-form').submit();
      }
    }

    function transactionNodeToObject(node) {
      var obj = {
        id: node.dataset.txId,
        date: new Date(node.dataset.txDate),
        label: node.querySelector('.label').innerText,
        amount: node.dataset.txAmount,
        amount_text: node.querySelector('.amount').innerText,
        categories: [],
        goal: null
      };
      node.querySelectorAll('.category').forEach(function(node) {
        if (node.innerText) {
          obj.categories.push(node.innerText);
        }
      });
      var goalNode = node.querySelector('.goal');
      if (goalNode) {
        obj.goal = goalNode.getAttribute('title');
      }
      return obj;
    }

    var selectedTransactionNode;

    function showTransactionOptions(event) {
      event.stopPropagation();
      event.preventDefault();
      var form = document.querySelector('#transaction-options form');

      selectedTransactionNode = event.target.parentNode
      var tx = transactionNodeToObject(selectedTransactionNode);
      form.action = form.dataset.actionBase + '/' + tx.id;
      form.querySelector('h4').innerText = tx.label + ' (' + tx.amount_text + ')';
      form.querySelectorAll('input[name="categories"]').forEach(function(node) {
        node.checked = tx.categories.indexOf(node.value) !== -1;
      });
      form.querySelectorAll('input[name="goal"]').forEach(function(node) {
        node.checked = (!tx.goal && node.value === '') || (tx.goal && node.value === tx.goal);
      });

      document.querySelector('#transaction-options').classList.add('visible');
    }

    function onTransactionOptionsFormSubmit(event) {
      event.stopPropagation();
      event.preventDefault();
      var form = document.querySelector('#transaction-options form');

      var req = new XMLHttpRequest();
      req.responseType = 'json';
      req.addEventListener("load", function() {
        selectedTransactionNode.querySelectorAll('.category').forEach(function(node) {
          node.parentNode.removeChild(node);
        });
        var goalNode = selectedTransactionNode.querySelector('.goal');
        if (goalNode) {
          goalNode.parentNode.removeChild(goalNode);
        }
        var before = selectedTransactionNode.querySelector('.amount');
        form.querySelectorAll('input[name="goal"]').forEach(function(node) {
          if (node.checked && node.value) {
            var span = document.createElement('span');
            span.title = node.value;
            span.innerHTML = '&#9733;';
            span.classList.add('goal');
            span.onclick = showTransactionOptions;
            selectedTransactionNode.insertBefore(span, before);
          }
        });
        var hasCategory = false;
        form.querySelectorAll('input[name="categories"]').forEach(function(node) {
          if (node.checked) {
            var span = document.createElement('span');
            span.title = node.value;
            span.innerText = node.value;
            span.classList.add('category');
            span.onclick = showTransactionOptions;
            span.setAttribute("style", node.parentNode.getAttribute("style"));
            selectedTransactionNode.insertBefore(span, before);
            hasCategory = true;
          }
        });
        if (!hasCategory) {
          var span = document.createElement('span');
          span.classList.add('category');
          span.onclick = showTransactionOptions;
          selectedTransactionNode.insertBefore(span, before);
        }
        hideTransactionOptions();
      });
      req.open("POST", form.action);
      req.send(new FormData(form));
    }

    function hideTransactionOptions() {
      document.querySelector('#transaction-options').classList.remove('visible');
    }

    function filterTransactions(category) {
      showAllTransactions();
      document.querySelectorAll('ul.transactions li').forEach(function(node) {
        var tx = transactionNodeToObject(node);
        if ((category && tx.categories.indexOf(category) === -1) || (!category && tx.categories.length)) {
          node.classList.add('hide');
        } else {
          node.classList.remove('hide');
        }
      });
      document.querySelector('#clear-filter').style.display = 'block';
    }

    function clearTransactionsFilter() {
      document.querySelectorAll('ul.transactions li').forEach(function(node) {
        node.classList.remove('hide');
      });
      document.querySelector('#clear-filter').style.display = 'none';
    }
  </script>
{% endblock %}

{% block page_header %}
  <div id="accounts" onclick="toggleAccounts()">
    <div class="balance">{{famount(account_balance or 0)}}</div>
    <table>
      <tr>
        <th colspan="2">Accounts</th>
      </tr>
      {% for acc in accounts %}
      <tr>
        <td width="80%">{{acc.title}}</td>
        <td>{{famount(acc.amount)}}</td>
      </tr>
      {% endfor %}
    </table>
    {% if budget_goals %}
    <table>
      <tr>
        <th colspan="2">Budget goals</th>
      </tr>
      {% for goal in budget_goals %}
      <tr>
        <td>{{goal.label}} ({{famount(goal.target)}})</td>
        <td width="150">
          <div class="goal-bar {{'success' if not goal.remaining else ''}}">
            {% if goal.used %}
            <span class="used" title="Used ({{famount(goal.used)}}) ({{goal.used_pct}}%)"
              style="flex-basis: {{goal.used_pct}}%"></span>
            {% endif %}
            {% if goal.remaining %}
            {% if goal.saved %}
            <span class="saved" title="Saved ({{famount(goal.saved)}}) ({{goal.saved_pct}}%)"
              style="flex-basis: {{goal.saved_pct}}%"></span>
            {% endif %}
            <span class="remaining" title="Remaining ({{famount(goal.remaining)}}) ({{goal.remaining_pct}}%)"></span>
            {% else %}
            <span class="saved" title="Saved ({{famount(goal.saved)}}) ({{goal.saved_pct}}%)"></span>
            {% endif %}
          </div>
        </td>
      </tr>
      {% endfor %}
    </table>
    {% endif %}
    <div class="yearly-savings">
      Savings this year: {{famount(budgets.savings)}}
      {% if budget.savings_goal %} / {{famount(budgets.savings_goal)}}
      ({{famount(budgets.savings - budgets.savings_goal)}}){% endif %}
    </div>
  </div>
  <div id="header">
    <a href="/{{prev_date.year}}-{{prev_date.month}}" title="Previous month">&laquo;</a>
    <h1 id="month">{{date.strftime('%B %Y')}}</h1>
    <form action="{{url_for('update', year=date.year, month=date.month)}}" method="POST" enctype="multipart/form-data" id="update-form">
      {% if bank_adapter.fetch_type == 'file' %}<input type="file" name="file" onchange="submitUpdate(this.files)">{% endif %}
      <button type="{{ 'submit' if bank_adapter.fetch_type == 'web' else 'button' }}" title="Update data ({{bank_adapter.name}})"
        {% if bank_adapter.fetch_type == 'file' %}onclick="uploadFile()"{% endif %}>&#8635;</button>
    </form>
    {% if next_date %}
      <a href="/{{next_date.year}}-{{next_date.month}}" title="Next month">&raquo;</a>
    {% endif %}
  </div>
{% endblock %}

{% block page %}
  {% if budget %}
    {% include "_budget.html" %}
    {% if budget.transactions %}
    {% if categories %}
      <div id="categories-bar">
        {% for category in categories %}
          {% if category.amount > 0 %}
          <span title="{{category.name or 'Uncategorized'}} ({{famount(category.amount)}}) ({{category.pct}}%)"
            style="flex-basis: {{category.pct}}%; background-color: {{category.color or '#eee'}}"
            data-name="{{category.name or 'Uncategorized'}}" data-amount="{{category.amount}}"
            onclick="filterTransactions({{ ("'" + category.name + "'") if category.name else ''}})"></span>
          {% endif %}
        {% endfor %}
      </div>
    {% else %}
      <hr>
    {% endif %}
    {% include "_transactions.html" %}
    <a id="clear-filter" href="javascript:" onclick="clearTransactionsFilter()">Clear filter</a>
    {% endif %}
  {% else %}
    <p id="nodata">No data for this month</p>
  {% endif %}
{% endblock %}

{% block footer %}
  <div id="footer">
    <a href="{{url_for('budget', year=date.year, month=date.month)}}">budget.json</a> -
    <a href="{{url_for('transactions', year=date.year, month=date.month)}}">transactions.json</a> -
    <a href="{{url_for('transactions_csv', year=date.year, month=date.month)}}">transactions.csv</a> -
    <a href="{{url_for('edit_config')}}">config</a> -
    <a href="{{url_for('logout')}}">logout</a>
  </div>
  <div id="transaction-options">
    <div class="backdrop" onclick="hideTransactionOptions()"></div>
    <form method="post" data-action-base="{{url_for('index', year=date.year, month=date.month)}}"
        onsubmit="onTransactionOptionsFormSubmit(event)">
      <h4></h4>
      <fieldset>
        <legend>Categories:</legend>
        {% for category in categories %}
          {% if category.name %}
            <label class="category" style="background-color: {{category.color or '#eee'}}">
              <input type="checkbox" name="categories" value="{{category.name}}">
              {{category.name}}
            </label>
          {% endif %}
        {% endfor %}
      </fieldset>
      <fieldset>
        <legend>Budget goal:</legend>
        <label class="goal">
          <input type="radio" name="goal" value=""> None
        </label>
        {% for goal in budget_goals %}
          <label class="goal">
            <input type="radio" name="goal" value="{{goal.label}}">
            {{goal.label}}
          </label>
        {% endfor %}
      </fieldset>
      <button type="sumit">Save</button>
      <button type="button" onclick="hideTransactionOptions()">Cancel</button>
    </form>
  </div>
{% endblock %}