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

{% block title %}Debitor Payout{% endblock %}

{% block stylesheets %}
  <!-- bring in DataTables CSS just like your other list‐views -->
  <link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet"/>
{% endblock %}

{% block heading %}Debitor Payout (Money Out){% endblock %}

{% block content %}
  <div class="card shadow mb-4">
    <div class="card-header py-3">
      <h6 class="m-0 font-weight-bold text-primary">Debitor Payout (Money Out)</h6>
    </div>
    <div class="card-body">

      <!-- FILTER BAR -->
      <form method="get" class="form-inline mb-4 align-items-end">
        <div class="form-group mr-3">
          <label for="inv">Invoice #</label>
          <input id="inv" name="invoice" value="{{ invoice_q }}" class="form-control ml-2">
        </div>
        <div class="form-check mr-3">
          <input class="form-check-input" type="radio" name="filter" value="invoice"
                 id="fInv" {% if picked_filter == "invoice" %}checked{% endif %}>
          <label class="form-check-label ml-1" for="fInv">Use</label>
        </div>

        <div class="form-group mr-3">
          <label for="deb">Debitor</label>
          <input id="deb" name="debitor" value="{{ debitor_q }}" class="form-control ml-2">
        </div>
        <div class="form-check mr-3">
          <input class="form-check-input" type="radio" name="filter" value="debitor"
                 id="fDeb" {% if picked_filter == "debitor" %}checked{% endif %}>
          <label class="form-check-label ml-1" for="fDeb">Use</label>
        </div>

        <div class="form-group mr-3">
          <label>Date From</label>
          <input type="date" name="date_from" value="{{ date_from_q }}"
                 class="form-control ml-2">
        </div>
        <div class="form-group mr-3">
          <label>Date To</label>
          <input type="date" name="date_to" value="{{ date_to_q }}"
                 class="form-control ml-2">
        </div>
        <div class="form-check mr-3">
          <input class="form-check-input" type="radio" name="filter" value="date"
                 id="fDate" {% if picked_filter == "date" %}checked{% endif %}>
          <label class="form-check-label ml-1" for="fDate">Use</label>
        </div>

        <button type="submit" class="btn btn-primary">Search</button>
        <a href="{% url 'transactions:debitor_payout_list' %}"
           class="btn btn-secondary ml-2">Reset</a>
      </form>

      <!-- NEW PAYOUT BUTTON -->
      <div class="mb-3">
        <a href="{% url 'transactions:debitor_payout_add' %}"
           class="btn btn-success">
          New Payout
        </a>
      </div>

      <!-- TABLE -->
      <div class="table-responsive">
        <table id="dataTable" class="table table-bordered table-hover">
          <thead class="thead-light">
            <tr>
              <th>#</th>
              <th>Invoice #</th>
              <th>Date</th>
              <th>Debitor</th>
              <th class="text-right">Paid Out</th>
              <th class="text-right">Balance</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-right">{{ p.total_amount|floatformat:2 }}</td>
              <td class="text-right">{{ p.amount_transaction|floatformat:2 }}</td>
              <td>
                <a href="{% url 'transactions:debitor_payout_edit' p.description %}"
                   class="btn btn-warning btn-sm">Edit</a>
                <a href="{% url 'transactions:debitor_payout_delete' p.description %}"
                   onclick="return confirm('Delete payout #{{p.description}}?')"
                   class="btn btn-danger btn-sm">Del</a>
                <a href="{% url 'transactions:debitor_payout_pdf' p.description %}"
                   class="btn btn-dark btn-sm">PDF</a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      <!-- GRAND TOTAL -->
      <div class="text-right mt-3">
        <span class="badge badge-primary">
          Grand Total: {{ grand_total|floatformat:2 }}
        </span>
      </div>

    </div>
  </div>
{% endblock %}

{% block javascripts %}
  <script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %}"></script>
  <script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
  <script>
    $(function(){
      $('#dataTable').DataTable({ order: [[2,'desc']] });
    });
  </script>
{% endblock %}