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

{% block title %}Investor Payout{% endblock %}
{% block stylesheets %}

{% endblock %}
{% block heading %}Investor Payout (Cash 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">Investor Payout (Cash 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="invtr">Investor</label>
        <input id="invtr" name="investor" value="{{ investor_q }}" class="form-control ml-2">
      </div>
      <div class="form-check mr-3">
        <input class="form-check-input" type="radio" name="filter" value="investor"
               id="fInvtr" {% if picked_filter == "investor" %}checked{% endif %}>
        <label class="form-check-label ml-1" for="fInvtr">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:investor_payout_list' %}"
         class="btn btn-secondary ml-2">Reset</a>
    </form>

    <!-- NEW PAYOUT BUTTON -->
    <div class="mb-3">
      <a href="{% url 'transactions:investor_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>Investor</th>
            <th class="text-right">Paid Out</th>
            <th class="text-right">Previous Bal.</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.amount_transaction|floatformat:2 }}</td>
            <td class="text-right">{{ p.previous_balance|floatformat:2 }}</td>
            <td>
              <a href="{% url 'transactions:investor_payout_edit' p.description %}"
                 class="btn btn-warning btn-sm">Edit</a>
              <a href="{% url 'transactions:investor_payout_delete' p.description %}"
                 onclick="return confirm('Delete payout #{{p.description}}?')"
                 class="btn btn-danger btn-sm">Del</a>
              <a href="{% url 'transactions:investor_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>
$(function(){
  $('#dataTable').DataTable({ order: [[2,'desc']] });
});
</script>
{% endblock %}