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

{% block title %}Finalized Salary Records{% endblock %}
{% block heading %}Finalized Salary Records{% endblock %}
{% block content %}
<div class="container py-4">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <a href="{% url 'payroll:salary_range' %}" class="btn btn-primary">
      Run New Salary
    </a>
  </div>

  <table class="table table-striped table-bordered align-middle">
    <thead class="table-light">
      <tr>
        <th style="width: 40px;">#</th>
        <th>Invoice #</th>
        <th>Staff</th>
        <th>Period</th>
        <th class="text-end">Attendance Pay</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>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for s in salary_list %}
      <tr>
        <td>{{ forloop.counter }}</td>
        <td>{{ s.invoice_no }}</td>
        <td>{{ s.staff.name }}</td>
        <td>{{ s.start_date }} – {{ s.end_date }}</td>
        <td class="text-end">{{ s.attendance_amount|floatformat:2 }}</td>
        <td class="text-end">{{ s.commission_amount|floatformat:2 }}</td>
        <td class="text-end">{{ s.overtime_amount|floatformat:2 }}</td>
        <td class="text-end">{{ s.bonus_amount|floatformat:2 }}</td>
        <td class="text-end">{{ s.deduction_amount|floatformat:2 }}</td>
        <td class="text-end">{{ s.net_amount|floatformat:2 }}</td>
        <td>
          <a 
            href="{% url 'payroll:salary_edit' s.pk %}" 
            class="btn btn-sm btn-primary"
          >Edit</a>
          <a 
            href="{% url 'payroll:salary_delete' s.pk %}" 
            class="btn btn-sm btn-danger"
            onclick="return confirm('Delete salary invoice #{{ s.invoice_no }}?');"
          >Delete</a>
        </td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="11" class="text-center">No finalized salaries yet.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}