{% extends "tenant/layouts/base.html" %}
{% block title %}Commission & Pay{% endblock %}
{% block content %}
<h4 class="fw-bold mb-4">Commission & Pay Summary</h4>
{% if pay_periods %}
<div class="card shadow-sm mb-3">
  <div class="card-header fw-semibold">Pay Periods</div>
  <div class="table-responsive">
    <table class="table table-hover mb-0">
      <thead class="table-light"><tr><th>Period</th><th>Type</th><th>Base</th><th>Commission</th><th>Total</th><th>Status</th></tr></thead>
      <tbody>
        {% for pp in pay_periods %}
        <tr>
          <td class="small">{{ pp.period_start.strftime('%b %d') }}–{{ pp.period_end.strftime('%b %d, %Y') }}</td>
          <td class="small">{{ pp.pay_type.title() }}</td>
          <td>${{ "%.2f"|format(pp.base_amount) }}</td>
          <td>${{ "%.2f"|format(pp.commission_amount) }}</td>
          <td class="fw-semibold">${{ "%.2f"|format(pp.total_amount) }}</td>
          <td><span class="badge bg-{{ {'paid':'success','approved':'primary','draft':'secondary'}.get(pp.status,'secondary') }}">{{ pp.status }}</span></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}
{% if commission_logs %}
<div class="card shadow-sm">
  <div class="card-header fw-semibold">Recent Commissions</div>
  <div class="table-responsive">
    <table class="table table-sm mb-0">
      <thead><tr><th>Period</th><th>Amount</th></tr></thead>
      <tbody>
        {% for log in commission_logs %}
        <tr><td class="small">{{ log.period or '—' }}</td><td>${{ "%.2f"|format(log.amount) }}</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}
<a href="{{ url_for('staff_portal.index') }}" class="btn btn-outline-secondary btn-sm mt-3">Back</a>
{% endblock %}