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

{% block title %}Finalized Salary Runs{% endblock %}

{% block content %}
<div class="container py-4">
  <h2 class="d-flex justify-content-between align-items-center">
    Finalized Salary Runs
    <button class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#helpModal">
      ?
    </button>
  </h2>

  <form method="get" class="row g-2 align-items-end mb-3">
    <div class="col-auto">
      <label for="start_date" class="form-label">From</label>
      <input type="date" id="start_date" name="start_date" class="form-control"
             value="{{ start_date|date:'Y-m-d' }}">
    </div>
    <div class="col-auto">
      <label for="end_date" class="form-label">To</label>
      <input type="date" id="end_date" name="end_date" class="form-control"
             value="{{ end_date|date:'Y-m-d' }}">
    </div>

    <div class="col-12">
      <label class="form-label d-block mb-1">Show columns</label>
      {% for key, label in optional_columns %}
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="cols" value="{{ key }}"
                 id="col_{{ key }}" {% if key in visible_cols %}checked{% endif %}>
          <label class="form-check-label" for="col_{{ key }}">{{ label }}</label>
        </div>
      {% endfor %}
    </div>

    <div class="col-auto">
      <button type="submit" class="btn btn-primary">Filter</button>
      <button type="submit" formaction="{% url 'payroll:finalized_runs_excel' %}"
              class="btn btn-sm btn-outline-success">Excel</button>
      <button type="submit" formaction="{% url 'payroll:finalized_runs_pdf' %}" formtarget="_blank"
              class="btn btn-sm btn-outline-secondary">PDF</button>
    </div>
  </form>

  <div class="alert alert-light border d-flex justify-content-between flex-wrap mb-3">
    <span><strong>{{ record_count }}</strong> staff in this period</span>
    <span>Grand Due Total: <strong>{{ totals.grand_due|floatformat:2 }}</strong></span>
  </div>

  <div class="table-responsive">
    <table class="table table-striped table-bordered align-middle">
      <thead class="table-light">
        <tr>
          <th>#</th>
          <th>Staff</th>
          <th class="text-end">Prev Balance</th>
          {% for key, label in optional_columns %}
            {% if key in visible_cols %}
              <th class="text-end">{{ label }}</th>
            {% endif %}
          {% endfor %}
          <th class="text-end">Current Salary</th>
          <th class="text-end">Other Adj.</th>
          <th class="text-end">Paid Amount</th>
          <th class="text-end">Grand / Due</th>
        </tr>
      </thead>
      <tbody>
        {% for r in rows %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ r.staff.name }}</td>
            <td class="text-end">{{ r.previous_balance|floatformat:2 }}</td>
            {% if 'attendance' in visible_cols %}<td class="text-end">{{ r.attendance|floatformat:2 }}</td>{% endif %}
            {% if 'commission' in visible_cols %}<td class="text-end">{{ r.commission|floatformat:2 }}</td>{% endif %}
            {% if 'overtime' in visible_cols %}<td class="text-end">{{ r.overtime|floatformat:2 }}</td>{% endif %}
            {% if 'bonus' in visible_cols %}<td class="text-end">{{ r.bonus|floatformat:2 }}</td>{% endif %}
            {% if 'deduction' in visible_cols %}<td class="text-end">{{ r.deduction|floatformat:2 }}</td>{% endif %}
            <td class="text-end">{{ r.current_salary|floatformat:2 }}</td>
            <td class="text-end">{{ r.other_adjustments|floatformat:2 }}</td>
            <td class="text-end">{{ r.paid_amount|floatformat:2 }}</td>
            <td class="text-end fw-semibold">{{ r.grand_due|floatformat:2 }}</td>
          </tr>
        {% empty %}
          <tr><td colspan="{{ total_cols }}" class="text-center">No runs finalized.</td></tr>
        {% endfor %}
      </tbody>
      <tfoot class="table-secondary">
        <tr>
          <th colspan="2" class="text-end">Grand Totals:</th>
          <th class="text-end">{{ totals.previous_balance|floatformat:2 }}</th>
          {% if 'attendance' in visible_cols %}<th class="text-end">{{ totals.attendance|floatformat:2 }}</th>{% endif %}
          {% if 'commission' in visible_cols %}<th class="text-end">{{ totals.commission|floatformat:2 }}</th>{% endif %}
          {% if 'overtime' in visible_cols %}<th class="text-end">{{ totals.overtime|floatformat:2 }}</th>{% endif %}
          {% if 'bonus' in visible_cols %}<th class="text-end">{{ totals.bonus|floatformat:2 }}</th>{% endif %}
          {% if 'deduction' in visible_cols %}<th class="text-end">{{ totals.deduction|floatformat:2 }}</th>{% endif %}
          <th class="text-end">{{ totals.current_salary|floatformat:2 }}</th>
          <th class="text-end">{{ totals.other_adjustments|floatformat:2 }}</th>
          <th class="text-end">{{ totals.paid_amount|floatformat:2 }}</th>
          <th class="text-end">{{ totals.grand_due|floatformat:2 }}</th>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

<!-- Help Modal -->
<div class="modal fade" id="helpModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Finalized Runs Help</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>Shows, per staff member, the salary picture for the selected date range:</p>
        <ul>
          <li><strong>Previous Balance</strong> — what was owed to/by the staff just before the "From" date.</li>
          <li><strong>Current Salary</strong> — total finalized salary earned inside this date range.</li>
          <li><strong>Other Adj.</strong> — any other credit activity in range not from a finalized salary run (manual balance corrections, advances returned, real-time commission/overtime/bonus postings, etc.).</li>
          <li><strong>Paid Amount</strong> — actual cash paid out to the staff inside this date range.</li>
          <li><strong>Grand / Due</strong> — Previous Balance + Current Salary − Paid Amount.</li>
        </ul>
        <p>Tick the checkboxes above to also show the Attendance/Commission/Overtime/Bonus/Deduction breakdown — in the page, Excel, and PDF alike.</p>
      </div>
    </div>
  </div>
</div>
{% endblock %}