{% extends "pos/base.html" %}
{% load static %}
{% block stylesheets %}

{% endblock %}

{% block heading %}Vendor Report{% endblock heading %}
{% block content %}

<form method="get" class="form-inline mb-3">
  <!-- Show All -->
  <div class="form-check mx-2">
    <input class="form-check-input" type="checkbox" name="show_all" id="show_all" {% if params.show_all %}checked{% endif %}>
    <label class="form-check-label" for="show_all">Show All Vendors</label>
  </div>

  <!-- Filter Name -->
  <div class="form-check mx-2">
    <input class="form-check-input" type="checkbox" name="filter_name" id="filter_name" {% if params.filter_name %}checked{% endif %}>
    <label class="form-check-label" for="filter_name">Filter by Name</label>
  </div>
  <select id="vendor_name" name="vendor_name" class="form-control mx-2" style="width:200px;">
    {% if params.filter_name and params.vendor_name %}
      <option selected>{{ params.vendor_name }}</option>
    {% endif %}
  </select>

  <!-- Filter ID -->
  <div class="form-check mx-2">
    <input class="form-check-input" type="checkbox" name="filter_id" id="filter_id" {% if params.filter_id %}checked{% endif %}>
    <label class="form-check-label" for="filter_id">Filter by ID</label>
  </div>
  <input type="text" name="vendor_id" class="form-control mx-2" placeholder="Vendor ID" value="{{ params.vendor_id }}">

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

<div class="mb-3">
  <a href="{{ export_excel_url }}?{{ request.GET.urlencode }}" class="btn btn-success">Export Excel</a>
  <button class="btn btn-danger" data-toggle="modal" data-target="#pdfModal">Export PDF</button>
</div>

<!-- PDF Options Modal -->
<div class="modal fade" id="pdfModal" tabindex="-1">
  <div class="modal-dialog">
    <form method="get" action="{{ export_pdf_url }}">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">PDF Export Options</h5>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <!-- carry-over filters -->
          {% for k,v in request.GET.items %}
            <input type="hidden" name="{{ k }}" value="{{ v }}">
          {% endfor %}

          <p>Select columns:</p>
          {% for key,label in all_columns %}
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="columns" value="{{ key }}" id="col_{{ key }}" checked>
              <label class="form-check-label" for="col_{{ key }}">{{ label }}</label>
            </div>
          {% endfor %}

          <hr>
          <p>Page size:</p>
          <select name="page_size" class="form-control">
            <option>A4</option>
            <option>A5</option>
            <option>Thermal</option>
          </select>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary">Generate PDF</button>
        </div>
      </div>
    </form>
  </div>
</div>

<table id="reportTable" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>T-ID</th><th>Name</th><th>Address</th>
      <th>Mobile</th><th>Phone</th><th>Balance</th><th>Action</th>
    </tr>
  </thead>
  <tbody>
    {% for r in rows %}
    <tr>
      <td>{{ r.t_id }}</td><td>{{ r.name }}</td><td>{{ r.address }}</td>
      <td>{{ r.mobile }}</td><td>{{ r.phone }}</td><td>{{ r.balance }}</td>
      <td>
        <div class="dropdown">
          <button class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown">Show</button>
          <div class="dropdown-menu">
            {% if 'vendor_edit' in allowed_features %}
            <a class="dropdown-item" href="{% url 'products:vendors_update' r.id %}">Edit</a>
            {% endif %}
            {% if 'vendor_delete' in allowed_features %}
            <a class="dropdown-item" href="{% url 'products:vendors_delete' r.id %}">Delete</a>
            {% endif %}
            <a class="dropdown-item"
               href="{% url 'reports:balance_slip_pdf_vendor' r.id %}?size=A5"
               target="_blank">
              Balance Slip (A5)
            </a>
            <a class="dropdown-item"
               href="{% url 'reports:balance_slip_pdf_vendor' r.id %}?size=Thermal"
               target="_blank">
              Balance Slip (Thermal)
            </a>
            <a class="dropdown-item" href="{% url 'vendors:vendor_ledger' %}">
              Vendor Ledger
            </a>
          </div>
        </div>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<div class="mt-3">
  <strong>Payables:</strong> {{ payables }} &nbsp;&nbsp;
  <strong>Receivables:</strong> {{ receivables }}
</div>

{% endblock %}

{% block javascripts %}

  <script>
    $(document).ready(function(){
      $.ajaxSetup({ headers: {'X-CSRFToken':'{{ csrf_token }}'} });

      // Vendor Name select2
      $('#vendor_name').select2({
        placeholder: 'Search vendor',
        allowClear: true,
        ajax: {
          url: "{% url 'vendors:get_vendors' %}",
          type: 'POST',
          dataType: 'json',
          delay: 250,
          data: params => ({ term: params.term }),
          processResults: data => ({
            results: data.results.map(item => ({
              // use the vendor name as the <option>'s value
              id:   item.text,
              text: item.text
            }))
          }),
          cache: true
        }
      });

      // DataTable
      $('#reportTable').DataTable({ order: [] });
    });
  </script>
{% endblock %}