{% extends 'pos/base.html' %}
{% block content %}
<div class="container" style="max-width:700px">
  <div class="row mb-3">
    <div class="col"><h4>Profit & Loss Statement</h4></div>
    <div class="col-auto">
      <form class="d-flex gap-2" method="get">
        <input type="date" name="start_date" value="{{ start_date }}" class="form-control form-control-sm">
        <input type="date" name="end_date"   value="{{ end_date }}"   class="form-control form-control-sm">
        <button class="btn btn-primary btn-sm">Go</button>
      </form>
    </div>
  </div>
 
  <!-- Revenue -->
  <table class="table table-sm mb-0">
    <thead class="table-success"><tr><th>Income</th><th class="text-end">Amount</th></tr></thead>
    <tbody>
      {% for row in income_rows %}
      <tr><td>{{ row.code }} — {{ row.name }}</td><td class="text-end">{{ row.amount|floatformat:2 }}</td></tr>
      {% endfor %}
    </tbody>
    <tfoot class="fw-bold"><tr class="table-success"><td>Total Income</td><td class="text-end">{{ total_income|floatformat:2 }}</td></tr></tfoot>
  </table>
 
  <!-- COGS -->
  <table class="table table-sm mb-0 mt-2">
    <thead class="table-warning"><tr><th>Cost of Goods Sold</th><th class="text-end">Amount</th></tr></thead>
    <tbody>
      {% for row in cogs_rows %}
      <tr><td>{{ row.code }} — {{ row.name }}</td><td class="text-end">{{ row.amount|floatformat:2 }}</td></tr>
      {% endfor %}
    </tbody>
    <tfoot class="fw-bold"><tr class="table-warning"><td>Total COGS</td><td class="text-end">{{ total_cogs|floatformat:2 }}</td></tr></tfoot>
  </table>
 
  <div class="alert {% if gross_profit >= 0 %}alert-success{% else %}alert-danger{% endif %} py-2 my-2">
    <strong>Gross Profit: {{ gross_profit|floatformat:2 }}</strong>
  </div>
 
  <!-- Expenses -->
  <table class="table table-sm mb-0">
    <thead class="table-danger"><tr><th>Expenses</th><th class="text-end">Amount</th></tr></thead>
    <tbody>
      {% for row in expense_rows %}
      <tr><td>{{ row.code }} — {{ row.name }}</td><td class="text-end">{{ row.amount|floatformat:2 }}</td></tr>
      {% endfor %}
    </tbody>
    <tfoot class="fw-bold"><tr class="table-danger"><td>Total Expenses</td><td class="text-end">{{ total_expense|floatformat:2 }}</td></tr></tfoot>
  </table>
 
  <div class="alert {% if is_profit %}alert-success{% else %}alert-danger{% endif %} py-2 mt-2">
    <h5 class="mb-0">Net {% if is_profit %}Profit{% else %}Loss{% endif %}: {{ net_profit|floatformat:2 }}</h5>
  </div>
</div>
{% endblock %}