{% extends "pos/base.html" %}
{% block title %}Print — Bonus Transfer #{{ tr.transfer_no }}{% endblock %}

{% block stylesheets %}
{{ block.super }}
<style>
  @media print {
    .no-print { display: none !important; }
    body { font-size: 12px; }
  }
  .print-header { border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 15px; }
  .info-table td { padding: 2px 10px; }
</style>
{% endblock %}

{% block content %}
<div class="no-print mb-3">
  <button class="btn btn-primary" onclick="window.print();">
    <i class="fas fa-print"></i> Print
  </button>
  <a class="btn btn-secondary"
     href="{% url 'products:bonus_transfers_edit' tr.transfer_no %}">
    ← Back to Edit
  </a>
</div>

<div class="print-header">
  <h4>Bonus → Stock Transfer
    <span class="float-right">#{{ tr.transfer_no }}</span>
  </h4>
</div>

<table class="info-table mb-3">
  <tr>
    <td><strong>Date:</strong></td>
    <td>{{ tr.transfer_date|date:"d-M-Y" }}</td>
    <td><strong>Status:</strong></td>
    <td>
      <span class="badge
        {% if tr.status == 'POSTED' %}badge-success
        {% elif tr.status == 'DRAFT' %}badge-warning
        {% else %}badge-danger{% endif %}">
        {{ tr.status }}
      </span>
    </td>
  </tr>
  {% if tr.remarks %}
  <tr>
    <td><strong>Remarks:</strong></td>
    <td colspan="3">{{ tr.remarks }}</td>
  </tr>
  {% endif %}
</table>

<table class="table table-sm table-bordered">
  <thead class="thead-dark">
    <tr>
      <th style="width:30px;">#</th>
      <th>Product</th>
      <th>Spec A</th>
      <th>Spec B</th>
      <th class="text-right" style="width:80px;">Bonus Before</th>
      <th class="text-right" style="width:80px;">On-Hand Before</th>
      <th class="text-right" style="width:80px;">Converted</th>
      <th class="text-right" style="width:80px;">Bonus After</th>
      <th class="text-right" style="width:80px;">On-Hand After</th>
      <th class="text-right" style="width:90px;">Rate</th>
      <th class="text-right" style="width:100px;">Total</th>
    </tr>
  </thead>
  <tbody>
    {% for ln in lines %}
    <tr>
      <td>{{ ln.line_no }}</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.rate_snapshot|floatformat:2 }}</td>
      <td class="text-right">{{ ln.line_total|floatformat:2 }}</td>
    </tr>
    {% endfor %}
  </tbody>
  <tfoot class="thead-light">
    <tr>
      <th colspan="6" class="text-right">Totals:</th>
      <th class="text-right">{{ tr.total_qty|floatformat:0 }}</th>
      <th colspan="2"></th>
      <th></th>
      <th class="text-right">{{ tr.total_value|floatformat:2 }}</th>
    </tr>
  </tfoot>
</table>
{% endblock %}