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

{% block title %}Ledger{% if staff %} – {{ staff.name }}{% endif %}{% endblock %}
{% block heading %}Ledger{% if staff %}: {{ staff.name }} (ID: {{ staff.t_id }}){% endif %}{% endblock %}

{% block content %}
  <div class="mb-3">
    <a href="{% url 'payroll:salary_range' %}" class="btn btn-secondary">
      Salary by Range
    </a>
  </div>

  <form method="get"
        action="{% url 'payroll:staff_ledger' %}"
        class="row g-3 mb-3">

    <!-- Select2 staff picker -->
    <div class="col-md-4">
      <select id="staff-select"
              name="staff"
              class="form-control"
              style="width: 100%;"
              data-placeholder="Search staff by name">
        {% if staff %}
          <option value="{{ staff.t_id }}" selected>
            {{ staff.name }}
          </option>
        {% endif %}
      </select>
    </div>

    <!-- date filters -->
    <div class="col-md-3">
      <input type="date"
             name="start_date"
             class="form-control"
             value="{{ start_date }}">
    </div>
    <div class="col-md-3">
      <input type="date"
             name="end_date"
             class="form-control"
             value="{{ end_date }}">
    </div>

    <div class="col-md-2">
      <button type="submit" class="btn btn-primary w-100">
        Filter
      </button>
    </div>
  </form>

  <table class="table table-striped table-bordered">
    <thead class="table-light">
      <tr>
        <th>#</th><th>Invoice #</th><th>Date</th>
        <th>Description</th><th>Debit</th><th>Credit</th><th>Balance</th>
      </tr>
    </thead>
    <tbody>
      {% for row in ledger_rows %}
        <tr>
          <td>{{ forloop.counter }}</td>
          <td>{{ row.invoice }}</td>
          <td>{{ row.date }}</td>
          <td>{{ row.description }}</td>
          <td>{{ row.debit|floatformat:2 }}</td>
          <td>{{ row.credit|floatformat:2 }}</td>
          <td>{{ row.balance|floatformat:2 }}</td>
        </tr>
      {% empty %}
        <tr>
          <td colspan="7" class="text-center">
            No ledger entries found.
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>

  <div class="row mt-3">
    <div class="col-md-4"><strong>Total Credit:</strong> {{ total_credit|floatformat:2 }}</div>
    <div class="col-md-4"><strong>Total Debit:</strong> {{ total_debit|floatformat:2 }}</div>
    <div class="col-md-4"><strong>Net Balance:</strong> {{ net_balance|floatformat:2 }}</div>
  </div>
{% endblock %}


{% block javascripts %}

  <script>
    $(function() {
      $('#staff-select').select2({
        placeholder: $( '#staff-select' ).data('placeholder'),
        allowClear: true,
        ajax: {
          url: "{% url 'payroll:staff_autocomplete' %}",
          dataType: 'json',
          delay: 250,
          data: params => ({ term: params.term }),
          processResults: data => ({ results: data.results }),
          cache: true
        }
      });
    });
  </script>
{% endblock %}