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

{% block content %}
<div class="d-flex mb-3">
  <a class="btn btn-secondary font-weight-bold mr-2" href="{% url 'products:spec_a_transfers_list' %}">
    ← Back to List
  </a>
  <a class="btn btn-info font-weight-bold mr-2" href="{% url 'products:reports_spec_a_by_product' %}">
    By Product
  </a>
  <a class="btn btn-info font-weight-bold" href="{% url 'products:reports_spec_a_by_spec' %}">
    By Spec A
  </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="POSTED" {% if filters.status == "POSTED" %}selected{% endif %}>POSTED</option>
          <option value="DRAFT" {% if filters.status == "DRAFT" %}selected{% endif %}>DRAFT</option>
          <option value="VOID" {% if filters.status == "VOID" %}selected{% endif %}>VOID</option>
        </select>
      </div>
      <div class="form-group col-md-2">
        <button class="btn btn-primary btn-sm btn-block">Apply</button>
      </div>
    </form>
  </div>
</div>

<!-- Summary -->
<div class="row mb-3">
  <div class="col-md-4">
    <div class="card bg-success text-white">
      <div class="card-body text-center">
        <h5>Total Qty (Posted)</h5>
        <h3>{{ totals.total_qty|floatformat:0 }}</h3>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card bg-primary text-white">
      <div class="card-body text-center">
        <h5>Total Value (Posted)</h5>
        <h3>{{ totals.total_value|floatformat:2 }}</h3>
      </div>
    </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>
          <td>{{ r.transfer_no }}</td>
          <td>{{ r.transfer_date|date:"d-M-Y" }}</td>
          <td>
            <span class="badge {% if r.status == 'POSTED' %}badge-success{% elif r.status == 'DRAFT' %}badge-warning{% else %}badge-danger{% endif %}">
              {{ r.status }}
            </span>
          </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_a_transfers_edit' r.transfer_no %}">View</a>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="7" class="text-center text-muted py-3">No records found.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}