{% extends "pos/base.html" %}
{% block title %}Commission Entries{% endblock %}
{% block heading %}Commission Entries{% endblock %}
{% block content %}
  <div class="d-flex justify-content-between align-items-center mb-3">
    <a href="{% url 'payroll:commission_add' %}" class="btn btn-success">Add Commission</a>
  </div>

  <table class="table table-striped table-bordered align-middle">
    <thead class="table-light">
      <tr>
        <th>#</th>
        <th>Invoice #</th>
        <th>Staff</th>
        <th>Date</th>
        <th>Amount</th>
        <th>Remarks</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for p in commission_list %}
      <tr>
        <td>{{ forloop.counter }}</td>
        <td>{{ p.description }}</td>
        <td>{{ p.party_descp }}</td>
        <td>{{ p.transaction_date }}</td>
        <td>{{ p.total_amount|floatformat:2 }}</td>
        <td>
          {% with raw=p.bill_title_descp %}
            {{ raw|cut:"Commission ("|cut:")"|truncatechars:200 }}
          {% endwith %}
        </td>
        <td>
          <a 
            href="{% url 'payroll:commission_edit' p.description %}" 
            class="btn btn-sm btn-primary"
          >Edit</a>
          <a 
            href="{% url 'payroll:commission_delete' p.description %}" 
            class="btn btn-sm btn-danger"
            onclick="return confirm('Delete commission Invoice #{{ p.description }}?');"
          >Delete</a>
        </td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="7" class="text-center">No commissions found.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
{% endblock %}