{% extends "pos/base.html" %}
{% block title %}Payroll Summary{% endblock %}

{% block content %}
<div class="container py-4">
  <h2>
    Payroll Summary
    <button type="button" class="btn btn-sm btn-outline-secondary float-end" 
            data-bs-toggle="modal" data-bs-target="#helpModal">
      ? 
    </button>
  </h2>

  <!-- Date-Range Filter & Export -->
  <form method="get" class="row g-2 align-items-end mb-3">
    <div class="col-md-3">
      <label>From</label>
      <input type="date" name="start_date" class="form-control"
             value="{{ start_date|date:'Y-m-d' }}" required>
    </div>
    <div class="col-md-3">
      <label>To</label>
      <input type="date" name="end_date" class="form-control"
             value="{{ end_date|date:'Y-m-d' }}" required>
    </div>
    <div class="col-md-2">
      <button class="btn btn-primary w-100">Filter</button>
    </div>
    <div class="col-md-4 text-end">
      <a href="{% url 'payroll:payroll_summary_excel' %}?start_date={{ start_date }}&end_date={{ end_date }}"
         class="btn btn-outline-success">Export Excel</a>
      <a href="{% url 'payroll:payroll_summary_pdf' %}?start_date={{ start_date }}&end_date={{ end_date }}"
         class="btn btn-outline-secondary">Export PDF</a>
    </div>
  </form>

  <div class="table-responsive">
    <table class="table table-bordered">
      <thead class="table-light">
        <tr>
          <th>#</th>
          <th>Staff</th>
          <th class="text-end">Attendance</th>
          <th class="text-end">Commission</th>
          <th class="text-end">Overtime</th>
          <th class="text-end">Bonus</th>
          <th class="text-end">Deduction</th>
          <th class="text-end">Net Salary</th>
        </tr>
      </thead>
      <tbody>
        {% for row in summary %}
        <tr>
          <td>{{ forloop.counter }}</td>
          <td>{{ row.staff_name }}</td>
          <td class="text-end">{{ row.attendance|floatformat:2 }}</td>
          <td class="text-end">{{ row.commission|floatformat:2 }}</td>
          <td class="text-end">{{ row.overtime|floatformat:2 }}</td>
          <td class="text-end">{{ row.bonus|floatformat:2 }}</td>
          <td class="text-end">{{ row.deduction|floatformat:2 }}</td>
          <td class="text-end">{{ row.net|floatformat:2 }}</td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot class="table-secondary">
        <tr>
          <th colspan="2" class="text-end">Grand Total:</th>
          <th class="text-end">{{ grand.attendance|floatformat:2 }}</th>
          <th class="text-end">{{ grand.commission|floatformat:2 }}</th>
          <th class="text-end">{{ grand.overtime|floatformat:2 }}</th>
          <th class="text-end">{{ grand.bonus|floatformat:2 }}</th>
          <th class="text-end">{{ grand.deduction|floatformat:2 }}</th>
          <th class="text-end">{{ grand.net|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">Payroll Summary Help</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>This report shows, for each staff member, the total attendance payout, commissions, overtime, bonuses, deductions, and net salary over the selected date range.</p>
      </div>
    </div>
  </div>
</div>
{% endblock %}