<section>
  <div class="admin-header">
    <h1>Payroll</h1>
  </div>

  <div class="detail-grid">
    <div>
      <div class="detail-panel">
        <h3>Run payroll</h3>
        <p class="hint">Computes PAYE, NSSF, SHIF, and the Housing Levy for every active staff member with a gross salary set (<%= users.filter(function(u){ return u.grossMonthlySalaryKes !== null; }).length %> of <%= users.length %> right now). Re-running a period overwrites that period's figures.</p>
        <form method="POST" action="/admin/hr/payroll/run">
          <label>
            Month
            <select name="periodMonth">
              <% for (var m = 1; m <= 12; m++) { %>
                <option value="<%= m %>" <%= m === defaultMonth ? 'selected' : '' %>><%= m %></option>
              <% } %>
            </select>
          </label>
          <label>
            Year
            <input type="number" name="periodYear" value="<%= defaultYear %>" required>
          </label>
          <button type="submit" class="button button-primary" style="margin-top:0.5rem;">Run payroll</button>
        </form>
      </div>

      <div class="detail-panel">
        <h3>Past periods</h3>
        <% if (!pastPeriods.length) { %>
          <p class="hint">No payroll has been run yet.</p>
        <% } else { %>
          <table class="admin-table">
            <thead><tr><th>Period</th><th></th></tr></thead>
            <tbody>
              <% pastPeriods.forEach(function(p) { %>
                <tr>
                  <td><%= p.periodMonth %>/<%= p.periodYear %></td>
                  <td><a href="/admin/hr/payroll/<%= p.periodYear %>/<%= p.periodMonth %>">View</a></td>
                </tr>
              <% }) %>
            </tbody>
          </table>
        <% } %>
      </div>
    </div>

    <div>
      <div class="detail-panel">
        <h3>Salaries on file</h3>
        <table class="admin-table">
          <thead><tr><th>Staff</th><th>Gross (KES)</th></tr></thead>
          <tbody>
            <% users.forEach(function(u) { %>
              <tr>
                <td><a href="/admin/hr/staff/<%= u.id %>/edit"><%= u.name %></a></td>
                <td><%= u.grossMonthlySalaryKes !== null && u.grossMonthlySalaryKes !== undefined ? Number(u.grossMonthlySalaryKes).toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) : '-' %></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>
