{% extends "base.html" %}
{% block title %}Receivables{% endblock %}
{% block content %}
<div class="page-head"><div><h1>Receivables</h1>
  <p class="muted">Every invoice in your tracked data. Statuses update by themselves: from replies (“we'll pay Friday”), when promises pass, and when invoices disappear from the data (paid). You can also set them here.</p></div></div>
{% if not tracked %}<div class="card empty">No data is being tracked yet. On the <a href="{{ url_for('data_sources') }}">Data</a> page, switch on “Track each invoice” for your invoice data.</div>{% endif %}
<div class="stats compact" style="grid-template-columns:repeat(auto-fit,minmax(118px,1fr))">
  {% for key, label in statuses.items() %}{% set t = totals.get(key, {'count': 0, 'amount': 0}) %}
  <a class="card stat {{ 'on' if status_filter == key }}" href="{{ url_for('receivables', status=key) }}">
    <span>{{ label }}</span><b>{{ t.count }}</b>{% if t.amount %}<span class="small">{{ h.fmt_value(t.amount|round(0)|int) }}</span>{% endif %}</a>
  {% endfor %}
</div>
<form class="actions" style="margin-bottom:14px">
  <input type="text" name="q" value="{{ search }}" placeholder="Search invoice or customer/project" style="max-width:320px">
  {% if status_filter %}<input type="hidden" name="status" value="{{ status_filter }}">{% endif %}
  <button class="btn">Search</button>{% if status_filter or search %}<a class="btn" href="{{ url_for('receivables') }}">Show All</a>{% endif %}
</form>
<div class="card">
  {% if rows %}<ul class="list">{% for r in rows %}
    <li style="flex-wrap:wrap">
      <div class="body" style="min-width:220px"><b>{{ r.ref }} · {{ r.entity }}</b>
        <span class="muted">{{ h.fmt_value(r.amount) if r.amount is not none }} · due {{ r.due or '?' }}{% if r.last_chased %} · chased {{ r.chase_count }}× (last {{ h.time_ago(r.last_chased) }}){% endif %}{% if r.promised_date %} · promised {{ r.promised_date }}{% endif %}{% if labels.get(r.source) %} · {{ labels[r.source] }}{% endif %}</span></div>
      <span class="pill {{ {'paid':'on','promised':'reply','reported':'reply','disputed':'review','broken':'review'}.get(r.status, '') }}">{{ statuses.get(r.status, r.status) }}</span>
      <details style="width:100%"><summary class="small">Update or see history</summary>
        <form method="post" class="actions small" style="margin:8px 0">
          <input type="hidden" name="source" value="{{ r.source }}"><input type="hidden" name="ref" value="{{ r.ref }}">
          <select name="status" style="width:auto">{% for k, l in statuses.items() %}<option value="{{ k }}" {{ 'selected' if r.status == k }}>{{ l }}</option>{% endfor %}</select>
          <input type="date" name="promised_date" value="{{ r.promised_date or '' }}" min="{{ today }}" style="width:auto" title="Promised payment date">
          <input type="text" name="note" placeholder="Note (optional)" style="max-width:260px">
          <button class="btn small primary">Save</button></form>
        <ul class="small muted" style="margin:0;padding-left:18px">{% for e in (loads(r.history) if r.history else [])|reverse %}<li>{{ e.at[:10] }} · {{ e.event }}{% if e.by %} ({{ e.by }}){% endif %}</li>{% endfor %}</ul>
      </details>
    </li>{% endfor %}</ul>
  {% else %}<div class="empty">Nothing to show.</div>{% endif %}
</div>
{% endblock %}