{# templates/transactions/vendor_payment_bulk_invoice.html #}
{% extends "pos/base.html" %}
{% load static %}

{% block title %}Vendor Bulk #{{ bulk.bulk_no }}{% endblock %}
{% block heading %}Vendor Bulk Payment #{{ bulk.bulk_no }}{% endblock %}

{% block stylesheets %}
<style>
  .invoice-meta { font-size: 0.85rem; }
  .invoice-meta .label { color: #718096; font-weight: 600; }
  table.inv-table th, table.inv-table td { padding: 6px 8px; font-size: 0.85rem; }
  @media print {
    .no-print { display: none !important; }
    .card { border: none !important; box-shadow: none !important; }
  }
</style>
{% endblock %}

{% block content %}

<div class="d-flex justify-content-between align-items-center mb-3 no-print">
  <a href="{% url 'transactions:vendor_bulk_payment_list' %}" class="btn btn-sm btn-secondary">
    &laquo; Back to List
  </a>
  <div>
    <a href="{% url 'transactions:vendor_bulk_payment_edit' bulk.bulk_no %}" class="btn btn-sm btn-info">
      <i class="fas fa-edit mr-1"></i>Edit
    </a>
    <button onclick="window.print()" class="btn btn-sm btn-primary">
      <i class="fas fa-print mr-1"></i>Print
    </button>
  </div>
</div>

<div class="card">
  <div class="card-body">

    <div class="row invoice-meta mb-3">
      <div class="col-md-3">
        <span class="label">Bulk #</span><br>{{ bulk.bulk_no }}
      </div>
      <div class="col-md-3">
        <span class="label">Date</span><br>{{ bulk.transaction_date|date:"Y-m-d" }}
      </div>
      <div class="col-md-3">
        <span class="label">Operator</span><br>{{ operator_obj.name|default:"—" }}
      </div>
      <div class="col-md-3">
        <span class="label">Lines</span><br>{{ bulk.line_count }}
      </div>
    </div>

    {% if bulk.remarks %}
    <div class="invoice-meta mb-3">
      <span class="label">Remarks:</span> {{ bulk.remarks }}
    </div>
    {% endif %}

    <div class="table-responsive">
      <table class="table table-bordered inv-table">
        <thead class="thead-light">
          <tr>
            <th style="width:50px;">#</th>
            <th>Vendor</th>
            <th class="text-right">Previous</th>
            <th class="text-right">Payment</th>
            <th class="text-right">Remaining</th>
            <th>Type</th>
            <th>Bank</th>
            <th>Note</th>
          </tr>
        </thead>
        <tbody>
          {% for ln in lines %}
            <tr>
              <td class="text-center">{{ forloop.counter }}</td>
              <td>
                {{ ln.vendor_obj.name|default:ln.vendor_id }}
                {% if ln.vendor_obj.mobile %}
                  <small class="text-muted">— {{ ln.vendor_obj.mobile }}</small>
                {% endif %}
              </td>
              <td class="text-right">{{ ln.previous_balance_snapshot }}</td>
              <td class="text-right">{{ ln.amount }}</td>
              <td class="text-right">{{ ln.remaining_balance_snapshot }}</td>
              <td>{{ ln.cash_type }}</td>
              <td>{{ ln.bank_obj.name|default:"—" }}</td>
              <td>{{ ln.note }}</td>
            </tr>
          {% empty %}
            <tr><td colspan="8" class="text-center text-muted">No lines.</td></tr>
          {% endfor %}
        </tbody>
        <tfoot class="thead-light">
          <tr class="font-weight-bold">
            <td colspan="3" class="text-right">Total Paid</td>
            <td class="text-right">{{ total_amount }}</td>
            <td colspan="4"></td>
          </tr>
        </tfoot>
      </table>
    </div>

  </div>
</div>

{% endblock %}