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

{% block title %}Expense Invoices{% endblock %}
{% block stylesheets %}
  <link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet"/>
{% endblock %}

{% block heading %}Expense Invoices{% endblock %}

{% block content %}

<div class="mb-3">
  <a href="{% url 'coa:exp_add' %}" class="btn btn-warning">+ New Expense</a>
</div>

<form method="get" class="form-inline mb-3">
  <label class="mr-2">From:</label>
  <input type="date" name="date_from" class="form-control mr-2" value="{{ date_from }}">
  <label class="mr-2">To:</label>
  <input type="date" name="date_to" class="form-control mr-2" value="{{ date_to }}">
  <button type="submit" class="btn btn-primary">Filter</button>
</form>

<table id="expTable" class="table table-bordered table-hover text-nowrap">
  <thead class="thead-light">
    <tr>
      <th>Voucher No</th>
      <th>Date</th>
      <th>Vendor / Paid Via</th>
      <th>Amount</th>
      <th>Narration</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    {% for v in vouchers %}
    <tr>
      <td>{{ v.voucher_no }}</td>
      <td>{{ v.voucher_date }}</td>
      <td>{{ v.party.name|default:v.cash_bank_account.account_name|default:"—" }}</td>
      <td>{{ v.total_amount|floatformat:2 }}</td>
      <td>{{ v.description }}</td>
      <td>
        <a href="{% url 'coa:exp_print' v.pk %}" target="_blank" class="btn btn-sm btn-secondary">Print</a>
        <a href="{% url 'coa:exp_edit' v.pk %}" class="btn btn-sm btn-primary">Edit</a>
        <form method="post" action="{% url 'coa:exp_delete' v.pk %}" style="display:inline;">
          {% csrf_token %}
          <button type="submit" class="btn btn-sm btn-danger"
                  onclick="return confirm('Delete this expense?');">Delete</button>
        </form>
      </td>
    </tr>
    {% endfor %}
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3" class="text-right">Total:</th>
      <th>{{ total_amount|floatformat:2 }}</th>
      <th colspan="2"></th>
    </tr>
  </tfoot>
</table>

{% endblock %}

{% block javascripts %}
<script>
  $(document).ready(function(){
    $('#expTable').DataTable({ pageLength: 25, ordering: false });
  });
</script>
{% endblock %}