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

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

{% block heading %}Sale Invoices{% endblock %}

{% block content %}

<p class="text-muted mb-3">
  Sale Invoices are posted automatically by the ticket / sale modules — there's no manual "Add" here.
</p>

<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="slTable" class="table table-bordered table-hover text-nowrap">
  <thead class="thead-light">
    <tr>
      <th>Voucher No</th>
      <th>Date</th>
      <th>Type</th>
      <th>Party</th>
      <th>Description</th>
      <th>Amount</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    {% for v in vouchers %}
    <tr>
      <td>{{ v.voucher_no }}</td>
      <td>{{ v.voucher_date }}</td>
      <td><span class="badge badge-light">{{ v.type_label }}</span></td>
      <td>{{ v.party.name|default:"—" }}</td>
      <td>{{ v.description }}</td>
      <td>{{ v.total_amount|floatformat:2 }}</td>
      <td>
        <a href="{% url 'coa:sl_print' v.pk %}" target="_blank" class="btn btn-sm btn-secondary">Print</a>
        <a href="{% url 'coa:sl_edit' v.pk %}" class="btn btn-sm btn-primary">Edit</a>
        <form method="post" action="{% url 'coa:sl_delete' v.pk %}" style="display:inline;">
          {% csrf_token %}
          <button type="submit" class="btn btn-sm btn-danger"
                  onclick="return confirm('Permanently delete this Sale Invoice? This cannot be undone. (If the source ticket invoice is saved again, it will simply be re-created.)');">Delete</button>
        </form>
      </td>
    </tr>
    {% endfor %}
  </tbody>
  <tfoot>
    <tr>
      <th colspan="5" class="text-right">Total:</th>
      <th>{{ total_amount|floatformat:2 }}</th>
      <th></th>
    </tr>
  </tfoot>
</table>

{% endblock %}

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