{% extends "base.html" %}
{% from "_macros.html" import state_badge, pay_badge, icon with context %}
{% block title %}{{ t('Dashboard') }}{% endblock %}
{% macro delta(cur, prev, up_is_good=True) -%}
  {%- if prev -%}
    {%- set pct = (cur - prev) / (prev if prev > 0 else -prev) * 100 -%}
    {%- set good = (pct >= 0) == up_is_good -%}
    <span class="delta {{ 'flat' if pct|abs < 0.05 else ('good' if good else 'bad') }}">{{ '▲' if pct >= 0 else '▼' }} {{ '%.1f'|format(pct|abs) }}%</span>{{ t('vs last year') }}
  {%- else -%}{{ t('Year to date') }}{%- endif -%}
{%- endmacro %}
{% block content %}
{% if empty %}
  <div class="card empty">{{ t('You do not have access to any branch. Ask an administrator.') }}</div>
{% else %}
<div class="page-head">
  <div>
    <h1>{{ t(greeting) }}{{ '،' if rtl else ',' }} {{ (user.full_name or user.username).split(' ')[0] if lang == 'en' else (user.full_name or user.username) }}</h1>
    <div class="dash-sub">
      <span class="pill">{% if branches|length > 1 %}{{ branches|length }} {{ t('branches') }} · {{ t('Consolidated') }}{% else %}{{ nm(branches[0]) }}{% endif %}</span>
      <span>{{ t('Fiscal year from') }} {{ fys }}</span><span>·</span><span>{{ t('Amounts in') }} {{ currency }}</span>
    </div>
  </div>
  {% if can_write %}
  <div class="actions">
    {% if has('sales') %}<a class="btn ghost" href="{{ url_for('orders.form', kind='sale') }}">{{ icon('file') }}{{ t('Quotation') }}</a>{% endif %}
    {% if has('procurement') %}<a class="btn ghost" href="{{ url_for('procurement.mr_new') }}">{{ icon('clipboard') }}{{ t('Material Request') }}</a>{% endif %}
    <a class="btn ghost" href="{{ url_for('invoices.form', kind='in_invoice') }}">{{ icon('file-in') }}{{ t('Vendor Bill') }}</a>
    <a class="btn ghost" href="{{ url_for('entries.form') }}">{{ icon('book') }}{{ t('Journal Entry') }}</a>
    <a class="btn" href="{{ url_for('invoices.form', kind='out_invoice') }}">{{ icon('receipt') }}{{ t('Customer Invoice') }}</a>
  </div>
  {% endif %}
</div>
{% if error %}<div class="flash error">{{ icon('alert') }}<span>{{ error }}</span></div>{% endif %}

{% set revs = [] %}{% for m in months %}{% set _ = revs.append(series[m][0]) %}{% endfor %}
{% set smax = [revs|max, 1]|max %}
<div class="kpis">
  <div class="kpi">
    <div class="top"><span class="label">{{ t('Revenue (YTD)') }}</span><span class="ibox t-indigo">{{ icon('trend') }}</span></div>
    <div class="value num">{{ totals.revenue|money(currency) }}<small>{{ currency }}</small></div>
    <div class="sub">{{ delta(totals.revenue, last_year.revenue) }}</div>
    <svg class="spark" viewBox="0 0 130 46" preserveAspectRatio="none" aria-hidden="true">
      <defs><linearGradient id="spark-g" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="var(--chart-1)" stop-opacity=".22"/><stop offset="1" stop-color="var(--chart-1)" stop-opacity="0"/></linearGradient></defs>
      {% set pts = [] %}{% for v in revs %}{% set _ = pts.append('%.1f %.1f'|format(loop.index0 * 130 / (revs|length - 1), 42 - ([v, 0]|max) / smax * 34)) %}{% endfor %}
      <path d="M{{ pts|join(' L') }} L130 46 L0 46Z" fill="url(#spark-g)"/>
      <path d="M{{ pts|join(' L') }}" fill="none" stroke="var(--chart-1)" stroke-width="1.8"/>
    </svg>
  </div>
  <div class="kpi">
    <div class="top"><span class="label">{{ t('Expenses (YTD)') }}</span><span class="ibox t-amber">{{ icon('wallet') }}</span></div>
    <div class="value num">{{ totals.expenses|money(currency) }}<small>{{ currency }}</small></div>
    <div class="sub">{{ delta(totals.expenses, last_year.expenses, False) }}</div>
  </div>
  <div class="kpi {{ 'alert' if totals.profit < 0 }}">
    <div class="top"><span class="label">{{ t('Net Profit (YTD)') }}</span><span class="ibox {{ 't-red' if totals.profit < 0 else 't-green' }}">{{ icon('chart') }}</span></div>
    <div class="value num">{{ totals.profit|money(currency) }}<small>{{ currency }}</small></div>
    <div class="sub">{% if totals.revenue %}<span class="delta {{ 'good' if totals.profit >= 0 else 'bad' }}">{{ '%.1f'|format(totals.profit / totals.revenue * 100) }}%</span>{{ t('net margin') }}{% else %}{{ t('Year to date') }}{% endif %}</div>
  </div>
  <div class="kpi">
    <div class="top"><span class="label">{{ t('Bank and Cash') }}</span><span class="ibox t-blue">{{ icon('bank') }}</span></div>
    <div class="value num">{{ totals.cash|money(currency) }}<small>{{ currency }}</small></div>
    <div class="sub">{{ cash_accounts }} {{ t('bank and cash accounts') }}</div>
  </div>
</div>

<div class="stat-row">
  <a class="stat" href="{{ url_for('reports.aged', side='receivable') }}"><span class="ibox t-indigo">{{ icon('receipt') }}</span>
    <div><div class="l">{{ t('Receivables') }}</div><div class="v num">{{ totals.receivable|money(currency) }}</div></div>
    <div class="r">{{ open_inv_n }} {{ t('open invoices') }}</div></a>
  <a class="stat" href="{{ url_for('reports.aged', side='payable') }}"><span class="ibox t-amber">{{ icon('file-in') }}</span>
    <div><div class="l">{{ t('Payables') }}</div><div class="v num">{{ totals.payable|money(currency) }}</div></div>
    <div class="r">{{ open_bills_n }} {{ t('open bills') }}</div></a>
  <a class="stat" href="{{ url_for('reports.aged', side='receivable', detail=1) }}"><span class="ibox t-red">{{ icon('alert') }}</span>
    <div><div class="l">{{ t('Overdue receivables') }}</div><div class="v num" {% if overdue_amt %}style="color:var(--bad)"{% endif %}>{{ overdue_amt|money(currency) }}</div></div>
    <div class="r"><b style="color:var(--text)">{{ overdue_n }}</b> {{ t('invoices') }}<br><span style="color:var(--primary)">{{ t('Follow up') }} →</span></div></a>
</div>

<div class="two-col">
  <div class="card flush" style="overflow:visible">
    <div class="card-h"><h2>{{ t('Revenue vs Expenses') }}</h2>
      <div style="display:flex;gap:14px;align-items:center;flex-wrap:wrap">
        <div class="legend"><span><i style="background:var(--chart-1)"></i>{{ t('Revenue') }}</span><span><i style="background:var(--chart-2)"></i>{{ t('Expenses') }}</span></div>
        <div class="seg" id="chart-range"><button type="button" data-n="6">6M</button><button type="button" data-n="12" class="on">12M</button><button type="button" data-n="ytd">{{ t('YTD') }}</button></div>
      </div></div>
    <div class="chart" id="chart">
      <div class="gridlines">{% for v in scale %}<div>{% set u = v / 1000 %}<span>{{ ('%gM'|format((u / 1000000)|round(1))) if u >= 1000000 else ('%gk'|format((u / 1000)|round(1))) if u >= 1000 else '%g'|format(u|round(0)) }}</span></div>{% endfor %}</div>
      {% for m in months %}{% set v = series[m] %}
        <div class="m" data-month="{{ m }}" title="{{ m }} — {{ t('Revenue') }}: {{ v[0]|money(currency) }} · {{ t('Expenses') }}: {{ v[1]|money(currency) }}">
          <div class="bars">
            <div class="bar rev" style="height:{{ [v[0], 0]|max / peak * 100 }}%"></div>
            <div class="bar exp" style="height:{{ [v[1], 0]|max / peak * 100 }}%"></div>
          </div>
          <span class="lbl">{{ m[5:] }}/{{ m[2:4] }}</span>
        </div>
      {% endfor %}
    </div>
  </div>
  <div class="card flush">
    <div class="card-h"><h2>{{ t('Needs your attention') }}</h2>{% if actions %}<span class="tag">{{ actions|length }}</span>{% endif %}</div>
    {% if actions %}
    <div class="tasks">
      {% for label, n, href in actions %}{% set ic = action_icons.get(label, ('alert', 'indigo')) %}
      <a href="{{ href }}"><span class="ibox t-{{ ic[1] }}">{{ icon(ic[0]) }}</span><span>{{ t(label) }}</span><span class="n">{{ n }}</span><span class="go">›</span></a>
      {% endfor %}
    </div>
    {% else %}
    <div class="all-clear"><div class="ibox t-green">{{ icon('check') }}</div><b style="color:var(--text)">{{ t('All caught up') }}</b><br>{{ t('Nothing is waiting for you.') }}</div>
    {% endif %}
    {% if drafts %}<div class="notes">{{ drafts }} {{ t('draft documents waiting to be posted') }}</div>{% endif %}
  </div>
</div>

<div class="two-col">
  {% if branches|length > 1 %}
  <div class="card flush">
    <div class="card-h"><h2>{{ t('Branch performance') }} <small>({{ currency }})</small></h2><a class="link" href="{{ url_for('reports.pl') }}">{{ t('Consolidated reports') }} →</a></div>
    <table>
      <thead><tr><th>{{ t('Branch') }}</th><th class="num">{{ t('Revenue (YTD)') }}</th><th class="num">{{ t('Net Profit (YTD)') }}</th><th>{{ t('Share of revenue') }}</th><th class="num">{{ t('Receivables') }}</th></tr></thead>
      <tbody>
      {% set tones = ['indigo', 'green', 'amber', 'blue', 'red'] %}
      {% for b in branches %}{% set s = stats[b.id] %}
        <tr><td><div class="who"><span class="av t-{{ tones[loop.index0 % 5] }}">{{ b.code }}</span><div><b>{{ nm(b) }}</b><small>{{ b.currency }}{% if b.currency != currency %} → {{ currency }}{% endif %}</small></div></div></td>
          <td class="num">{{ s.revenue|money(currency) }}</td>
          <td class="num {{ 'neg' if s.profit < 0 }}">{{ s.profit|money(currency) }}</td>
          <td><div class="hbar"><i style="width:{{ (s.revenue / totals.revenue * 100) if totals.revenue > 0 and s.revenue > 0 else 0 }}%"></i></div></td>
          <td class="num">{{ s.receivable|money(currency) }}</td></tr>
      {% endfor %}
      </tbody>
      <tfoot><tr><td>{{ t('Total') }}</td><td class="num">{{ totals.revenue|money(currency) }}</td><td class="num">{{ totals.profit|money(currency) }}</td><td></td><td class="num">{{ totals.receivable|money(currency) }}</td></tr></tfoot>
    </table>
    {% if translated %}<div class="notes">{{ t('Foreign-currency branches are translated at today\'s closing rate. Inter-branch balances are not eliminated here; see the consolidated reports.') }}</div>{% endif %}
  </div>
  {% else %}
  <div class="card flush">
    <div class="card-h"><h2>{{ t('Position') }}</h2></div>
    <table><tbody>
      <tr><td>{{ t('Bank and Cash') }}</td><td class="num">{{ totals.cash|money(currency) }}</td></tr>
      <tr><td>{{ t('Receivables') }}</td><td class="num">{{ totals.receivable|money(currency) }}</td></tr>
      <tr><td>{{ t('Payables') }}</td><td class="num">{{ totals.payable|money(currency) }}</td></tr>
      <tr><td><b>{{ t('Net Profit (YTD)') }}</b></td><td class="num"><b>{{ totals.profit|money(currency) }}</b></td></tr>
    </tbody></table>
  </div>
  {% endif %}
  <div class="card flush">
    <div class="card-h"><h2>{{ t('Recent invoices') }}</h2><a class="link" href="{{ url_for('invoices.index', kind='out_invoice') }}">{{ t('View all') }} →</a></div>
    <table><tbody>
    {% set tones = ['blue', 'green', 'amber', 'indigo', 'red'] %}
    {% for i in recent %}{% set pname = nm({'name_en': i.pname_en, 'name_ar': i.pname_ar}) %}
      <tr data-href="{{ url_for('invoices.view', inv_id=i.id) }}">
        <td><div class="who"><span class="av t-{{ tones[loop.index0 % 5] }}">{{ (pname[:2] if lang == 'en' else pname[:1])|upper }}</span><div><b>{{ i.number or t('Draft') }}</b><small>{{ pname }}</small></div></div></td>
        <td>{% if i.overdue %}<span class="badge overdue">{{ t('Overdue') }}</span>{% elif i.pay %}{{ pay_badge(i.pay) }}{% else %}{{ state_badge(i.state) }}{% endif %}</td>
        <td class="num"><b>{{ i.amount_total|money }}</b></td>
      </tr>
    {% else %}<tr><td class="empty">{{ t('Nothing yet.') }}</td></tr>{% endfor %}
    </tbody></table>
  </div>
</div>
{% endif %}
{% endblock %}
{% block scripts %}
<script>
(function () {
  var seg = document.getElementById('chart-range');
  if (!seg) return;
  var bars = Array.prototype.slice.call(document.querySelectorAll('#chart .m')), fy = '{{ fy_month }}';
  seg.addEventListener('click', function (e) {
    var b = e.target.closest('button'); if (!b) return;
    seg.querySelectorAll('button').forEach(function (x) { x.classList.toggle('on', x === b); });
    bars.forEach(function (m, i) {
      var show = b.dataset.n === 'ytd' ? m.dataset.month >= fy : i >= bars.length - parseInt(b.dataset.n, 10);
      m.classList.toggle('hide', !show);
    });
  });
})();
</script>
{% endblock %}