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

{% block content %}
<div class="d-flex mb-3">
  <a class="btn btn-secondary font-weight-bold mr-2"
     href="{% url 'products:reports_spec_b_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>Spec B</small></label>
        <select name="spec_b_id" class="form-control form-control-sm">
          <option value="">— All —</option>
          {% for st in spec_b_terms %}
            <option value="{{ st.id }}"
                    {% if filters.spec_b_id == st.id %}selected{% endif %}>
              {{ st.name }}
            </option>
          {% endfor %}
        </select>
      </div>
      <div class="form-group col-md-2">
        <label><small>Direction</small></label>
        <select name="direction" class="form-control form-control-sm">
          <option value="BOTH" {% if filters.direction == "BOTH" %}selected{% endif %}>Both</option>
          <option value="IN"   {% if filters.direction == "IN" %}selected{% endif %}>IN (received)</option>
          <option value="OUT"  {% if filters.direction == "OUT" %}selected{% endif %}>OUT (sent)</option>
        </select>
      </div>
      <div class="form-group col-md-1">
        <button class="btn btn-primary btn-sm btn-block">Filter</button>
      </div>
    </form>
  </div>
</div>

{% if spec_term %}
  <div class="alert alert-info">
    <strong>Spec B:</strong> {{ spec_term.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>Common Spec A</th>
          <th>FROM Spec B</th>
          <th>TO Spec B</th>
          <th class="text-right">Qty</th>
          <th class="text-right">Bonus</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.common_spec_a.name|default:"—" }}</td>
          <td><strong>{{ ln.from_spec_b.name|default:"—" }}</strong></td>
          <td><strong>{{ ln.to_spec_b.name|default:"—" }}</strong></td>
          <td class="text-right">{{ ln.qty|floatformat:0 }}</td>
          <td class="text-right">{{ ln.bonus_qty|floatformat:0 }}</td>
          <td class="text-right">{{ ln.line_total|floatformat:2 }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="9" class="text-center text-muted py-3">No records.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}