{% extends "pos/base.html" %}
{% load static %}
{% block title %}Vendor Product Catalog{% endblock %}
{% block heading %}Vendor Product Catalog{% endblock %}

{% block content %}
{% csrf_token %}
<form method="get" class="filter-box mb-3">
  <div class="row align-items-end">
    <div class="col-md-4 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_name }}</option>{% endif %}
      </select>
    </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">
    <div class="table-responsive">
      <table class="table table-bordered table-sm" id="dataTable" width="100%">
        <thead>
          <tr>
            <th>Code</th><th>Name</th><th>Company</th><th>Category</th>
            <th class="text-end">Purchase</th><th class="text-end">Retail</th><th class="text-end">Stock</th>
          </tr>
        </thead>
        <tbody>
          {% for r in rows %}
          <tr>
            <td>{{ r.code }}</td>
            <td>{{ r.name|title }}</td>
            <td>{{ r.company }}</td>
            <td>{{ r.category }}</td>
            <td class="text-end">{{ r.purchase|floatformat:2 }}</td>
            <td class="text-end">{{ r.retail|floatformat:2 }}</td>
            <td class="text-end">{{ r.stock|floatformat:2 }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </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(){
    $('#dataTable').DataTable({ order:[[1,'asc']], paging:true });

    $('#vendor_select').select2({
      placeholder: 'Search vendor…',
      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 }),
      },
    });

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