{% extends "pos/base.html" %}
{% block title %}Stock → Bonus Transfers{% endblock %}
{% block heading %}Stock → Bonus Transfers{% endblock %}

{% block content %}
<div class="d-flex mb-3">
  <a class="btn btn-success font-weight-bold mr-2"
     href="{% url 'products:onhand_to_bonus_transfers_add' %}">
    <i class="fas fa-plus"></i> New Stock → Bonus Transfer
  </a>
  <a class="btn btn-info font-weight-bold mr-2"
     href="{% url 'products:reports_onhand_to_bonus_transfers' %}">
    <i class="fas fa-chart-bar"></i> Reports
  </a>
  <a class="btn btn-secondary font-weight-bold"
     href="{% url 'products:transfers_list' %}">
    ← Back to All Transfers
  </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-3">
        <label><small>Search</small></label>
        <input type="text" name="q" class="form-control form-control-sm"
               value="{{ filters.q }}" placeholder="Transfer # or remarks...">
      </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:onhand_to_bonus_transfers_list' %}"
           class="btn btn-outline-secondary btn-sm btn-block">Clear</a>
      </div>
    </form>
  </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 style="width:70px;">#</th>
          <th style="width:110px;">Date</th>
          <th style="width:100px;">Status</th>
          <th style="width:100px;" class="text-right">Total Qty</th>
          <th style="width:120px;" class="text-right">Total Value</th>
          <th>Remarks</th>
          <th style="width:200px;">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:50 }}</td>
          <td>
            <a class="btn btn-xs btn-info"
               href="{% url 'products:onhand_to_bonus_transfers_edit' r.transfer_no %}">
              <i class="fas fa-edit"></i> Edit
            </a>
            <a class="btn btn-xs btn-secondary" target="_blank"
               href="{% url 'products:onhand_to_bonus_transfers_print' r.transfer_no %}">
              <i class="fas fa-print"></i> Print
            </a>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="7" class="text-center text-muted py-4">
            No stock → bonus transfers found.
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}