{% extends "tenant/layouts/base.html" %}
{% block title %}Calculate Pay Period{% endblock %}
{% block content %}
<div class="row">
  <div class="col-md-5">
    <div class="card shadow-sm mb-4">
      <div class="card-header fw-semibold">Calculate Pay Period</div>
      <div class="card-body">
        <form method="POST" novalidate>
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <div class="row g-2 mb-3">
            <div class="col">
              <label class="form-label">Period Start <span class="text-danger">*</span></label>
              <input type="date" class="form-control" name="period_start"
                     value="{{ period_start.isoformat() if period_start else '' }}" required>
            </div>
            <div class="col">
              <label class="form-label">Period End <span class="text-danger">*</span></label>
              <input type="date" class="form-control" name="period_end"
                     value="{{ period_end.isoformat() if period_end else '' }}" required>
            </div>
          </div>
          <div class="mb-3">
            <label class="form-label">Staff Members <small class="text-muted">(leave blank for all)</small></label>
            <select class="form-select" name="staff_ids" multiple size="6">
              {% for s in staff_list %}
              <option value="{{ s.id }}">{{ s.name }} — {{ s.pay_type.title() }}</option>
              {% endfor %}
            </select>
            <div class="form-text">Hold Ctrl/Cmd to select multiple.</div>
          </div>
          <button type="submit" class="btn btn-primary w-100">Calculate</button>
        </form>
      </div>
    </div>
  </div>

  {% if results %}
  <div class="col-md-7">
    <div class="card shadow-sm">
      <div class="card-header fw-semibold">
        Results — {{ period_start.strftime('%b %d') if period_start else '' }}–{{ period_end.strftime('%b %d, %Y') if period_end else '' }}
      </div>
      <div class="table-responsive">
        <table class="table table-hover mb-0">
          <thead class="table-light">
            <tr><th>Staff</th><th>Type</th><th>Hours</th><th>Base</th><th>Commission</th><th>Total</th></tr>
          </thead>
          <tbody>
            {% for row in results %}
            <tr>
              <td class="fw-semibold">{{ row.staff.name }}</td>
              <td class="small">{{ row.calc.pay_type.title() }}</td>
              <td class="small">{{ "%.1f"|format(row.calc.total_hours) }}h</td>
              <td>${{ "%.2f"|format(row.calc.base_amount) }}</td>
              <td>${{ "%.2f"|format(row.calc.commission_amount) }}</td>
              <td class="fw-bold">${{ "%.2f"|format(row.calc.total_amount) }}</td>
            </tr>
            {% endfor %}
          </tbody>
          <tfoot class="table-light fw-bold">
            <tr>
              <td colspan="5">Grand Total</td>
              <td>${{ "%.2f"|format(results|sum(attribute='calc.total_amount')) }}</td>
            </tr>
          </tfoot>
        </table>
      </div>
      <div class="card-footer text-muted small">
        Records saved as drafts. Go to <a href="{{ url_for('pay_periods.index') }}">Pay Periods</a> to approve and mark as paid.
      </div>
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}