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

{% block content %}
<div class="row">

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

      <label class="mr-2">To:</label>
      <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:sale_history_export_excel' product.prod_id %}?{{ query_string }}" class="btn btn-success">Excel</a>
      <a href="{% url 'reports:sale_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>Invoice</th>
            <th>Date</th>
            <th>Qty</th>
            <th>Item Price</th>
            <th>Disc</th>
            <th>Total Price</th>
            <th>Customer</th>
          </tr>
        </thead>
        <tbody>
          {% for r in rows %}
          <tr>
            <td>{{ r.invoice_no }}</td>
            <td>{{ r.sale_date }}</td>
            <td class="text-right">{{ r.quantity }}</td>
            <td class="text-right">{{ r.item_price }}</td>
            <td class="text-right">{{ r.discount }}</td>
            <td class="text-right">{{ r.total_price }}</td>
            <td>{{ r.customer_display }}</td>
          </tr>
          {% empty %}
          <tr><td colspan="7" class="text-center text-muted">No sales.</td></tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr>
            <th colspan="2" class="text-right">Totals:</th>
            <th class="text-right">{{ total_qty }}</th>
            <th></th><th></th>
            <th class="text-right">{{ grand_total }}</th>
            <th></th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

  <div class="col-lg-3">
    <div class="card">
      <div class="card-header font-weight-bold">
        Customer Summary
      </div>
      <div class="card-body p-2">
        <div class="table-responsive">
          <table class="table table-sm mb-0">
            <thead>
              <tr>
                <th>Customer</th>
                <th class="text-right">Qty</th>
                <th class="text-right">Total</th>
              </tr>
            </thead>
            <tbody>
              {% for s in customer_summary %}
              <tr>
                <td>{{ s.customer_name }}</td>
                <td class="text-right">{{ s.qty }}</td>
                <td class="text-right">{{ s.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 %}