{% extends "pos/base.html" %}
{% block title %}Bonus Transfers — By Product{% endblock %}
{% block heading %}Bonus Transfers — By Product{% endblock %}

{% block content %}
<div class="d-flex mb-3">
  <a class="btn btn-secondary font-weight-bold mr-2"
     href="{% url 'products:reports_bonus_transfers' %}">← Back to Report</a>
</div>

<div class="card mb-3">
  <div class="card-body">
    <form method="get" class="form-row align-items-end">
      <div class="form-group col-md-2">
        <label><small>Date From</small></label>
        <input type="date" name="date_from" class="form-control form-control-sm"
               value="{{ filters.date_from }}">
      </div>
      <div class="form-group col-md-2">
        <label><small>Date To</small></label>
        <input type="date" name="date_to" class="form-control form-control-sm"
               value="{{ filters.date_to }}">
      </div>
      <div class="form-group col-md-3">
        <label><small>Product ID</small></label>
        <input type="number" name="product_id" class="form-control form-control-sm"
               value="{{ filters.product_id|default:'' }}" placeholder="Product ID">
      </div>
      <div class="form-group col-md-1">
        <button class="btn btn-primary btn-sm btn-block">Filter</button>
      </div>
    </form>
  </div>
</div>

{% if product %}
  <div class="alert alert-info">
    <strong>Product:</strong> {{ product.product_code }} — {{ product.name }}
  </div>
{% endif %}

<div class="card">
  <div class="card-body table-responsive p-0">
    <table class="table table-sm table-bordered table-hover mb-0">
      <thead class="thead-dark">
        <tr>
          <th>Transfer #</th>
          <th>Date</th>
          <th>Product</th>
          <th>Spec A</th>
          <th>Spec B</th>
          <th class="text-right">Bonus Before</th>
          <th class="text-right">On-Hand Before</th>
          <th class="text-right">Converted</th>
          <th class="text-right">Bonus After</th>
          <th class="text-right">On-Hand After</th>
          <th class="text-right">Total</th>
        </tr>
      </thead>
      <tbody>
        {% for ln in rows %}
        <tr>
          <td>{{ ln.transfer.transfer_no }}</td>
          <td>{{ ln.transfer.transfer_date|date:"d-M-Y" }}</td>
          <td>{{ ln.product.product_code }} — {{ ln.product.name }}</td>
          <td>{{ ln.spec_a.name|default:"—" }}</td>
          <td>{{ ln.spec_b.name|default:"—" }}</td>
          <td class="text-right">{{ ln.bonus_before|floatformat:0 }}</td>
          <td class="text-right">{{ ln.onhand_before|floatformat:0 }}</td>
          <td class="text-right font-weight-bold text-success">
            {{ ln.qty|floatformat:0 }}
          </td>
          <td class="text-right">{{ ln.bonus_after|floatformat:0 }}</td>
          <td class="text-right">{{ ln.onhand_after|floatformat:0 }}</td>
          <td class="text-right">{{ ln.line_total|floatformat:2 }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="11" class="text-center text-muted py-3">No records.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}