{% extends 'core/base.html' %}  <!-- Replace with your base template -->

{% block content %}
<div class="container-fluid">
  <h2>Invoice List</h2>
  {% if request.user.user_type == '1' or request.user.user_type == '2' %}
  <a href="{% url 'invoice-create' %}" class="float-right link btn btn-primary"><i class="fa fa-plus"></i> Generate New</a>
  {% endif %}
  <table id="invoiceTable" class="table table-striped">
    <thead>
      <tr>
        <th>Lease</th>
        <th>Invoice Type</th>
        <th>Invoiced Amount</th>
        <th>Invoice Balance</th>
        <th>Due Date</th>
        <th>Payment Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for invoice in invoices %}
      <tr>
        <td>{{ invoice.lease }}</td>
        <td>{{ invoice.invoice_type }}</td>
        <td>{{ invoice.amount }}</td>
        <td>{{ invoice.balance }}</td>
        <td>{{ invoice.due_date }}</td>
         <td>{{ invoice.status }}</td>
        <td>
          <a href="{% url 'invoice-detail' invoice.pk %}" class="btn btn-info btn-sm">View</a>
           {% if request.user.user_type == '1' or request.user.user_type == '2' %}
           {% if invoice.status != 'Paid' %}
          <a href="{% url 'payment_create' %}" class="btn btn-success btn-sm">Pay</a>
          {% endif %}
          <a href="{% url 'invoice-update' invoice.pk %}" class="btn btn-primary btn-sm">Edit</a>
          <a href="{% url 'invoice-delete' invoice.pk %}" class="btn btn-danger btn-sm">Delete</a>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<script>
  $(document).ready(function() {
    $('#invoiceTable').DataTable({
      paging: true,
      searching: true,
      order: [[3, 'asc']],  // Order by Due Date column
      columnDefs: [
        { type: 'date', targets: 3 }  // Date sorting for Due Date column
      ]
    });
  });
</script>
{% endblock %}