{% extends "pos/base.html" %}
{% block title %}Spec B Transfer Report{% endblock %}
{% block heading %}Spec B Transfer Report{% endblock %}

{% block content %}
<div class="d-flex mb-3">
  <a class="btn btn-secondary font-weight-bold mr-2"
     href="{% url 'products:spec_b_transfers_list' %}">
    ← Back to List
  </a>
  <a class="btn btn-outline-info font-weight-bold mr-2"
     href="{% url 'products:reports_spec_b_by_product' %}">
    By Product
  </a>
  <a class="btn btn-outline-info font-weight-bold"
     href="{% url 'products:reports_spec_b_by_spec' %}">
    By Spec B
  </a>
</div>

<!-- Filters -->
<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-2">
        <label><small>Status</small></label>
        <select name="status" class="form-control form-control-sm">
          <option value="">All</option>
          <option value="DRAFT"  {% if filters.status == "DRAFT" %}selected{% endif %}>DRAFT</option>
          <option value="POSTED" {% if filters.status == "POSTED" %}selected{% endif %}>POSTED</option>
          <option value="VOID"   {% if filters.status == "VOID" %}selected{% endif %}>VOID</option>
        </select>
      </div>
      <div class="form-group col-md-1">
        <button class="btn btn-primary btn-sm btn-block">Filter</button>
      </div>
      <div class="form-group col-md-2">
        <a href="{% url 'products:reports_spec_b_transfers' %}"
           class="btn btn-outline-secondary btn-sm btn-block">Clear</a>
      </div>
    </form>
  </div>
</div>

<!-- Summary -->
<div class="row mb-3">
  <div class="col-md-3">
    <div class="card bg-success text-white text-center p-2">
      <strong>Total Qty (Posted)</strong>
      <h4>{{ totals.total_qty|floatformat:0 }}</h4>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card bg-info text-white text-center p-2">
      <strong>Total Value (Posted)</strong>
      <h4>{{ totals.total_value|floatformat:2 }}</h4>
    </div>
  </div>
</div>

<!-- Table -->
<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>#</th>
          <th>Date</th>
          <th>Status</th>
          <th class="text-right">Total Qty</th>
          <th class="text-right">Total Value</th>
          <th>Remarks</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for r in rows %}
        <tr class="{% if r.status == 'VOID' %}table-danger{% elif r.status == 'DRAFT' %}table-warning{% endif %}">
          <td class="font-weight-bold">{{ r.transfer_no }}</td>
          <td>{{ r.transfer_date|date:"d-M-Y" }}</td>
          <td>
            {% if r.status == "POSTED" %}<span class="badge badge-success">POSTED</span>
            {% elif r.status == "DRAFT" %}<span class="badge badge-warning">DRAFT</span>
            {% else %}<span class="badge badge-danger">VOID</span>{% endif %}
          </td>
          <td class="text-right">{{ r.total_qty|floatformat:0 }}</td>
          <td class="text-right">{{ r.total_value|floatformat:2 }}</td>
          <td>{{ r.remarks|default:"—"|truncatechars:40 }}</td>
          <td>
            <a class="btn btn-xs btn-info"
               href="{% url 'products:spec_b_transfers_edit' r.transfer_no %}">View</a>
            <a class="btn btn-xs btn-secondary" target="_blank"
               href="{% url 'products:spec_b_transfers_print' r.transfer_no %}">Print</a>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="7" class="text-center text-muted py-3">No records.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}