{% load humanize %}
{% load dashboard_extras %}
<!-- MONTHLY -->
<div class="tab-pane fade" id="monthly">
  <div class="table-scroll-x table-fixed-header">
    <table class="table table-hover align-middle">
      <thead>
        <tr>
          <th>Month</th>
          <th class="num">Cash</th>
          <th class="num">Mpesa</th>
          <th class="num">Total Sales</th>
          <th class="num">Gross Profit</th>
          <th class="num">Op. Expenses</th>
          <th class="num">Net Profit</th>
        </tr>
      </thead>
      <tbody>
        {% for row in monthly_profits %}
        {% with op_exp=monthly_expenses_map|get_item:row.month|default:0 %}
        <tr>
          <td>{{ row.month|date:"M Y" }}</td>
          <td class="num">Ksh {{ row.cash_sales|default:0|intcomma }}</td>
          <td class="num">Ksh {{ row.mpesa_sales|default:0|intcomma }}</td>
          <td class="num fw-bold">Ksh {{ row.total_sales|intcomma }}</td>
          <td class="num positive">Ksh {{ row.total_profit|intcomma }}</td>
          <td class="num negative">
            {% if op_exp > 0 %}
              − Ksh {{ op_exp|intcomma }}
            {% else %}
              <span class="text-muted">—</span>
            {% endif %}
          </td>
          <td class="num fw-bold {% if row.total_profit >= op_exp %}positive{% else %}negative{% endif %}">
            Ksh {{ row.total_profit|subtract:op_exp|intcomma }}
          </td>
        </tr>
        {% endwith %}
        {% empty %}
        <tr>
          <td colspan="7" class="text-center text-muted">No data</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>