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

{% block title %}Party Balance Report{% endblock %}
{% block stylesheets %}
  <link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet"/>
  <style>
    @media print { .no-print { display: none; } }
  </style>
{% endblock %}

{% block heading %}Party Balance Report{% endblock %}

{% block content %}

<div class="no-print mb-3">
  <button onclick="window.print()" class="btn btn-outline-dark">Print</button>
</div>

<form method="get" class="form-inline mb-3 no-print">
  <label class="mr-2">Type:</label>
  <select name="type" class="form-control mr-2">
    <option value="">All</option>
    {% for val, label in party_types %}
      <option value="{{ val }}" {% if val == type_filter %}selected{% endif %}>{{ label }}</option>
    {% endfor %}
  </select>
  <button type="submit" class="btn btn-primary">Filter</button>
</form>

<table id="pbTable" class="table table-bordered table-hover text-nowrap">
  <thead class="thead-light">
    <tr>
      <th>Party Name</th>
      <th>Type</th>
      <th class="text-right">Opening Balance</th>
      <th class="text-right">Total Debit</th>
      <th class="text-right">Total Credit</th>
      <th class="text-right">Closing Balance</th>
      <th class="text-right">Max Balance</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    {% for b in balances %}
    <tr>
      <td>{{ b.party_name }}</td>
      <td>{{ b.party_type }}</td>
      <td class="text-right">{{ b.opening_balance|floatformat:2 }} {{ b.opening_type }}</td>
      <td class="text-right">{{ b.total_debit|floatformat:2 }}</td>
      <td class="text-right">{{ b.total_credit|floatformat:2 }}</td>
      <td class="text-right {% if b.balance_status == 'over' %}bg-danger text-white{% elif b.balance_status == 'warning' %}bg-warning{% endif %}">
        {{ b.closing_balance|floatformat:2 }} {{ b.closing_type }}
      </td>
      <td class="text-right">{% if b.max_balance %}{{ b.max_balance|floatformat:2 }}{% else %}—{% endif %}</td>
      <td><a href="{% url 'coa:party_ledger' b.party.id %}" class="btn btn-sm btn-info">Ledger</a></td>
    </tr>
    {% empty %}
    <tr><td colspan="8" class="text-center text-muted">No parties found.</td></tr>
    {% endfor %}
  </tbody>
  <tfoot>
    <tr class="font-weight-bold bg-light">
      <td colspan="3" class="text-right">Totals:</td>
      <td class="text-right">{{ total_debit|floatformat:2 }}</td>
      <td class="text-right">{{ total_credit|floatformat:2 }}</td>
      <td colspan="3"></td>
    </tr>
  </tfoot>
</table>

{% endblock %}

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