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

{% block title %}Vendor Settlement{% endblock %}

{% block stylesheets %}

  <style>.filter-box .form-control, .filter-box .form-check-input { font-size:.85rem; }</style>
{% endblock %}

{% block heading %}Vendor Settlement{% endblock %}

{% block content %}
<form method="get" class="filter-box mb-3">
  <div class="row align-items-end">
    <div class="col-md-3 mb-2">
      <label>Transaction #</label>
      <input type="text" name="invoice" value="{{ invoice_q }}" class="form-control" placeholder="Invoice #">
    </div>
    <div class="col-auto mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="filter" value="invoice"
               id="fInvoice" {% if picked_filter == "invoice" %}checked{% endif %}>
        <label class="form-check-label small" for="fInvoice">Use</label>
      </div>
    </div>

    <div class="col-md-3 mb-2">
      <label>Vendor Name</label>
      <input type="text" name="vendor" value="{{ vendor_q }}" class="form-control" placeholder="Vendor name">
    </div>
    <div class="col-auto mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="filter" value="vendor"
               id="fVendor" {% if picked_filter == "vendor" %}checked{% endif %}>
        <label class="form-check-label small" for="fVendor">Use</label>
      </div>
    </div>

    <div class="col-md-4 mb-2">
      <label class="d-block small mb-1">Search by Date</label>
      <div class="d-flex">
        <input type="date" name="date_from" value="{{ date_from_q }}" class="form-control me-1">
        <input type="date" name="date_to"   value="{{ date_to_q   }}" class="form-control">
      </div>
    </div>
    <div class="col-auto mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="filter" value="date"
               id="fDate" {% if picked_filter == "date" %}checked{% endif %}>
        <label class="form-check-label small" for="fDate">Use</label>
      </div>
    </div>

    <div class="col-auto mb-2">
      <button class="btn btn-primary btn-sm"><i class="fas fa-search"></i> Search</button>
      <a href="{% url 'transactions:vendor_settlement_list' %}" class="btn btn-secondary btn-sm">Reset</a>
    </div>
  </div>
</form>

<div class="mb-3">
  <a href="{% url 'transactions:vendor_settlement_add' %}" class="btn btn-success btn-sm">
    <i class="fas fa-plus"></i> New Vendor Settlement
  </a>
</div>

<div class="card shadow mb-4">
  <div class="card-body">
    <div class="table-responsive">
      <table id="dataTable" class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>#</th><th>Invoice #</th><th>Date</th><th>Vendor</th>
            <th class="text-end">Adjusted</th><th class="text-end">Prev Balance</th><th>Type</th><th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for p in payments %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ p.description }}</td>
            <td>{{ p.transaction_date }}</td>
            <td>{{ p.party_descp }}</td>
            <td class="text-end">{{ p.amount_transaction|floatformat:2 }}</td>
            <td class="text-end">{{ p.previous_balance|floatformat:2 }}</td>
            <td>{{ p.remarks1 }}</td>
            <td>
              <a href="{% url 'transactions:vendor_settlement_edit' p.description %}" class="btn btn-warning btn-sm">
                <i class="fas fa-edit"></i>
              </a>
              <a href="{% url 'transactions:vendor_settlement_delete' p.description %}"
                 class="btn btn-danger btn-sm"
                 onclick="return confirm('Delete settlement #{{ p.description }}?');">
                <i class="fas fa-trash"></i>
              </a>
              {# Optional details:
              <a href="{% url 'transactions:vendor_settlement_details' p.description %}"
                 class="btn btn-info btn-sm">
                <i class="fas fa-info-circle"></i>
              </a> #}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <div class="text-end mt-3">
      <span class="badge bg-primary fs-6">
        Grand Total: {{ grand_total|floatformat:2 }}
      </span>
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}

<script>
  $(function(){
    $('#dataTable').DataTable({ order:[[2,'desc']] });
  });
</script>
{% endblock %}