{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-wrap items-center justify-between gap-3"><div><h2 class="text-xl font-semibold text-slate-900">Payroll Runs</h2><p class="text-sm text-slate-500">Create monthly payroll run, generate payslips, approve and mark paid.</p></div><a href="/employees/payroll/payslips" class="rounded-xl border px-4 py-2 text-sm font-semibold">Payslips</a></div>
  {% if scope.branch_id is none %}<div class="rounded-xl border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800">Please select a branch context before creating payroll run.</div>{% endif %}
  <form method="post" action="/employees/payroll/runs" class="grid gap-3 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm md:grid-cols-5">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}"><input name="pay_year" type="number" min="2020" max="2100" value="{{ now().year if now is defined else 2026 }}" required class="rounded-xl border px-3 py-2 text-sm"><input name="pay_month" type="number" min="1" max="12" required placeholder="Month" class="rounded-xl border px-3 py-2 text-sm"><input name="notes" placeholder="Notes" class="rounded-xl border px-3 py-2 text-sm md:col-span-2"><button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white">Create Run</button>
  </form>
  <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm"><table class="min-w-full divide-y divide-slate-200 text-sm"><thead class="bg-slate-50"><tr><th class="px-4 py-3 text-left">Period</th><th class="px-4 py-3 text-left">Status</th><th class="px-4 py-3 text-right">Employees</th><th class="px-4 py-3 text-right">Gross</th><th class="px-4 py-3 text-right">Deduction</th><th class="px-4 py-3 text-right">Net</th><th class="px-4 py-3 text-right">Actions</th></tr></thead><tbody class="divide-y divide-slate-100">
    {% for row in rows %}<tr><td class="px-4 py-3 font-medium">{{ '%02d' % row.pay_month }}/{{ row.pay_year }}</td><td class="px-4 py-3">{{ row.status.title() }}</td><td class="px-4 py-3 text-right">{{ row.total_employees }}</td><td class="px-4 py-3 text-right">{{ row.gross_amount }}</td><td class="px-4 py-3 text-right">{{ row.deduction_amount }}</td><td class="px-4 py-3 text-right font-semibold">{{ row.net_amount }}</td><td class="px-4 py-3"><div class="flex justify-end gap-2"><form method="post" action="/employees/payroll/runs/{{ row.id }}/generate"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><button class="rounded-lg border px-2 py-1 text-xs">Generate</button></form>{% if row.status == 'generated' %}<form method="post" action="/employees/payroll/runs/{{ row.id }}/approve"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><button class="rounded-lg bg-emerald-600 px-2 py-1 text-xs text-white">Approve</button></form>{% endif %}{% if row.status == 'approved' %}<form method="post" action="/employees/payroll/runs/{{ row.id }}/paid"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><button class="rounded-lg bg-indigo-600 px-2 py-1 text-xs text-white">Paid</button></form>{% endif %}<a href="/employees/payroll/payslips?payroll_run_id={{ row.id }}" class="rounded-lg border px-2 py-1 text-xs">View</a></div></td></tr>{% else %}<tr><td colspan="7" class="px-4 py-6 text-center text-slate-500">No payroll runs yet.</td></tr>{% endfor %}
  </tbody></table></div>
</div>
{% endblock %}