{% extends "pos/base.html" %}
{% load static %}
{% block title %}Item Wise Purchase Report{% endblock %}
{% block heading %}Item Wise Purchase Report{% endblock %}

{% block content %}
{% csrf_token %}
<form method="get" class="filter-box mb-3">
  <div class="row align-items-end">
    <div class="col-md-3 mb-2">
      <label class="small mb-1">Vendor</label>
      <select id="vendor_select" name="vendor_id" class="form-control" style="width:100%">
        {% if filters.vendor_id %}<option value="{{ filters.vendor_id }}" selected>{{ filters.vendor_id }}</option>{% endif %}
      </select>
    </div>
    <div class="col-md-3 mb-2">
      <label class="small mb-1">Company</label>
      <select id="company_select" name="company_id" class="form-control" style="width:100%">
        {% if filters.company_id %}<option value="{{ filters.company_id }}" selected>{{ filters.company_id }}</option>{% endif %}
      </select>
    </div>
    <div class="col-md-3 mb-2">
      <label class="small mb-1">Category</label>
      <select id="category_select" name="category_id" class="form-control" style="width:100%">
        {% if filters.category_id %}<option value="{{ filters.category_id }}" selected>{{ filters.category_id }}</option>{% endif %}
      </select>
    </div>
    <div class="col-md-3 mb-2">
      <label class="small mb-1">Group By</label>
      <select name="group_by" class="form-control">
        <option value="" {% if not filters.group_by %}selected{% endif %}>None</option>
        <option value="company" {% if filters.group_by == "company" %}selected{% endif %}>Company</option>
        <option value="category" {% if filters.group_by == "category" %}selected{% endif %}>Category</option>
      </select>
    </div>
  </div>
  <div class="row align-items-end mt-2">
    <div class="col-md-3 mb-2">
      <label class="small mb-1">From</label>
      <input type="date" name="date_from" value="{{ filters.date_from }}" class="form-control">
    </div>
    <div class="col-md-3 mb-2">
      <label class="small mb-1">To</label>
      <input type="date" name="date_to" value="{{ filters.date_to }}" class="form-control">
    </div>
    <div class="col-auto mb-2">
      <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-search me-1"></i>Search</button>
      <a href="?" class="btn btn-secondary btn-sm">Reset</a>
    </div>
    <div class="col-auto mb-2">
      <a href="#" id="btnExportPdf" class="btn btn-danger btn-sm"><i class="fas fa-file-pdf me-1"></i>Export PDF</a>
      <a href="#" id="btnExportExcel" class="btn btn-success btn-sm"><i class="fas fa-file-excel me-1"></i>Export Excel</a>
    </div>
  </div>
</form>

<div class="card shadow mb-4">
  <div class="card-body">
    {% if result.grouped %}
      {% for g in result.groups %}
      <h6 class="fw-bold mt-3">{{ g.label }}</h6>
      <div class="table-responsive mb-2">
        <table class="table table-bordered table-sm">
          <thead>
            <tr><th>Product</th><th class="text-end">Qty</th><th class="text-end">Avg Rate</th>
                <th class="text-end">Discount</th><th class="text-end">Total</th>
                {% if filters.show_weight %}<th class="text-end">Tonnage</th>{% endif %}</tr>
          </thead>
          <tbody>
            {% for r in g.rows %}
            <tr>
              <td>{{ r.name }}</td>
              <td class="text-end">{{ r.qty|floatformat:2 }}</td>
              <td class="text-end">{{ r.avg_rate|floatformat:2 }}</td>
              <td class="text-end">{{ r.discount|floatformat:2 }}</td>
              <td class="text-end">{{ r.total|floatformat:2 }}</td>
              {% if filters.show_weight %}<td class="text-end">{{ r.weight|floatformat:2 }}</td>{% endif %}
            </tr>
            {% endfor %}
          </tbody>
          <tfoot>
            <tr class="fw-bold bg-light">
              <td>Subtotal</td>
              <td class="text-end">{{ g.subtotal.qty|floatformat:2 }}</td>
              <td></td>
              <td class="text-end">{{ g.subtotal.discount|floatformat:2 }}</td>
              <td class="text-end">{{ g.subtotal.total|floatformat:2 }}</td>
              {% if filters.show_weight %}<td class="text-end">{{ g.subtotal.weight|floatformat:2 }}</td>{% endif %}
            </tr>
          </tfoot>
        </table>
      </div>
      {% endfor %}
    {% else %}
      <div class="table-responsive">
        <table class="table table-bordered table-sm" id="dataTable">
          <thead>
            <tr><th>Product</th><th class="text-end">Qty</th><th class="text-end">Avg Rate</th>
                <th class="text-end">Discount</th><th class="text-end">Total</th>
                {% if filters.show_weight %}<th class="text-end">Tonnage</th>{% endif %}</tr>
          </thead>
          <tbody>
            {% for r in result.rows %}
            <tr>
              <td>{{ r.name }}</td>
              <td class="text-end">{{ r.qty|floatformat:2 }}</td>
              <td class="text-end">{{ r.avg_rate|floatformat:2 }}</td>
              <td class="text-end">{{ r.discount|floatformat:2 }}</td>
              <td class="text-end">{{ r.total|floatformat:2 }}</td>
              {% if filters.show_weight %}<td class="text-end">{{ r.weight|floatformat:2 }}</td>{% endif %}
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% endif %}
    <div class="text-end mt-2">
      <span class="badge bg-primary p-2" style="color:#fff;font-weight:bold;">
        Grand Total — Qty: {{ result.grand.qty|floatformat:2 }} |
        Discount: {{ result.grand.discount|floatformat:2 }} |
        Total: {{ result.grand.total|floatformat:2 }}
        {% if filters.show_weight %}| Tonnage: {{ result.grand.weight|floatformat:2 }}{% endif %}
      </span>
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
<script>
  $(function(){
    if ($('#dataTable').length) $('#dataTable').DataTable({ paging:true });

    $('#vendor_select').select2({
      placeholder: 'All Vendors', allowClear: true,
      ajax: {
        url: "{% url 'purchases:get_vendors' %}", type: 'POST',
        headers: { 'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val() },
        data: p => ({ term: p.term || '' }),
        processResults: d => ({ results: d.results }),
      },
    });
    $('#company_select').select2({
      placeholder: 'All Companies', allowClear: true,
      ajax: {
        url: "{% url 'purchases:po_company_search' %}",
        data: p => ({ term: p.term || '' }),
        processResults: d => ({ results: d.results }),
      },
    });
    $('#category_select').select2({
      placeholder: 'All Categories', allowClear: true,
      ajax: {
        url: "{% url 'purchases:po_category_search' %}",
        data: p => ({ term: p.term || '' }),
        processResults: d => ({ results: d.results }),
      },
    });

    function _qs(){ return new URLSearchParams(window.location.search).toString(); }
    $('#btnExportPdf').on('click', function(e){
      e.preventDefault();
      window.open("{% url 'reports:item_wise_purchase_report_pdf' %}?" + _qs(), '_blank');
    });
    $('#btnExportExcel').on('click', function(e){
      e.preventDefault();
      window.location.href = "{% url 'reports:item_wise_purchase_report_excel' %}?" + _qs();
    });
  });
</script>
{% endblock %}