{% extends "pos/base.html" %}
{% block heading %}Purchase History – {{ product.name }}{% endblock heading %}

{% block content %}
<div class="row">
  <!-- LEFT: main table -->
  <div class="col-lg-9">

    <form method="get" class="form-inline mb-3">
      <label class="mr-2">From:</label>
      <!-- ✅ use date_from_val -->
      <input type="date" name="date_from" value="{{ date_from_val }}" class="form-control mr-3">

      <label class="mr-2">To:</label>
      <!-- ✅ use date_to_val -->
      <input type="date" name="date_to" value="{{ date_to_val }}" class="form-control mr-3">

      <button class="btn btn-primary">Search</button>
    </form>

    <div class="mb-3">
      <a href="{% url 'reports:purchase_history_export_excel' product.prod_id %}?{{ query_string }}" class="btn btn-success">Excel</a>
      <a href="{% url 'reports:purchase_history_export_pdf'   product.prod_id %}?{{ query_string }}" class="btn btn-danger">PDF</a>
    </div>

    <div class="table-responsive">
      <table class="table table-bordered table-sm">
        <thead class="thead-light">
          <tr>
            <th>Order No</th><th>Date</th><th>Builty No</th><th>Vendor</th>
            <th class="text-right">Qty</th><th class="text-right">Item Price</th><th class="text-right">Disc</th><th class="text-right">Total Price</th>
          </tr>
        </thead>
        <tbody>
          {% for r in rows %}
          <tr>
            <td>{{ r.pur_order_no }}</td>
            <td>{{ r.pur_date }}</td>
            <td>{{ r.builty_no }}</td>

            <!-- ✅ show vendor name instead of id -->
            <td>{{ r.vendor_display }}</td>

            <td class="text-right">{{ r.quantity }}</td>
            <td class="text-right">{{ r.item_price }}</td>
            <td class="text-right">{{ r.product_disc }}</td>
            <td class="text-right">{{ r.total_price }}</td>
          </tr>
          {% empty %}
          <tr><td colspan="8" class="text-center text-muted">No purchases.</td></tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr>
            <th colspan="4" class="text-right">Totals:</th>
            <th class="text-right">{{ total_qty }}</th>
            <th></th><th></th>
            <th class="text-right">{{ grand_total }}</th>
          </tr>
        </tfoot>
      </table>
    </div>

  </div>

  <!-- RIGHT: vendor-wise summary -->
  <div class="col-lg-3">
    <div class="card">
      <div class="card-header font-weight-bold">
        Vendor Summary
      </div>
      <div class="card-body p-2">
        <div class="table-responsive">
          <table class="table table-sm mb-0">
            <thead>
              <tr>
                <th>Vendor</th>
                <th class="text-right">Qty</th>
                <th class="text-right">Total</th>
              </tr>
            </thead>
            <tbody>
              {% for v in vendor_summary %}
              <tr>
                <td>{{ v.vendor_name }}</td>
                <td class="text-right">{{ v.qty }}</td>
                <td class="text-right">{{ v.total }}</td>
              </tr>
              {% empty %}
              <tr>
                <td colspan="3" class="text-center text-muted">No data</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        <hr class="my-2">
        <div class="d-flex justify-content-between">
          <strong>Grand Total</strong>
          <strong>{{ grand_total }}</strong>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}