{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-col gap-3 rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200 md:flex-row md:items-center md:justify-between">
    <div>
      <p class="text-sm font-medium text-slate-500">Employees / HRMS</p>
      <h1 class="text-2xl font-bold text-slate-900">HR Dashboard & Reports</h1>
      <p class="mt-1 text-sm text-slate-600">Live summary for the active audit firm{% if scope.branch_id %} and branch{% else %} across accessible branches{% endif %}.</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="/employees" class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-700">Employee Master</a>
      <a href="/employees/attendance" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Attendance</a>
      <a href="/employees/leave" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Leave</a>
      <a href="/employees/payroll/runs" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Payroll</a>
    </div>
  </div>

  <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
    <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200"><p class="text-sm text-slate-500">Total Employees</p><p class="mt-2 text-3xl font-bold text-slate-900">{{ stats.employees.total }}</p><p class="mt-1 text-xs text-slate-500">Active: {{ stats.employees.active }}</p></div>
    <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200"><p class="text-sm text-slate-500">Today Attendance</p><p class="mt-2 text-3xl font-bold text-slate-900">{{ stats.attendance.today_present }}</p><p class="mt-1 text-xs text-slate-500">Records: {{ stats.attendance.today_total }}, Pending: {{ stats.attendance.today_pending }}</p></div>
    <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200"><p class="text-sm text-slate-500">Pending Leave</p><p class="mt-2 text-3xl font-bold text-slate-900">{{ stats.leave.pending }}</p><p class="mt-1 text-xs text-slate-500">Approved: {{ stats.leave.approved }}</p></div>
    <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200"><p class="text-sm text-slate-500">Docs to Verify</p><p class="mt-2 text-3xl font-bold text-slate-900">{{ stats.documents.uploaded }}</p><p class="mt-1 text-xs text-slate-500">Verified: {{ stats.documents.verified }}</p></div>
    <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200"><p class="text-sm text-slate-500">Payroll Pending</p><p class="mt-2 text-3xl font-bold text-slate-900">{{ stats.payroll.runs_draft + stats.payroll.runs_generated + stats.payroll.runs_approved }}</p><p class="mt-1 text-xs text-slate-500">Paid runs: {{ stats.payroll.runs_paid }}</p></div>
  </div>

  <div class="grid gap-4 lg:grid-cols-3">
    <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
      <h2 class="text-lg font-semibold text-slate-900">Employee Status</h2>
      <div class="mt-4 space-y-3 text-sm">
        <div class="flex justify-between"><span>Active</span><strong>{{ stats.employees.active }}</strong></div>
        <div class="flex justify-between"><span>Inactive</span><strong>{{ stats.employees.inactive }}</strong></div>
        <div class="flex justify-between"><span>Relieved</span><strong>{{ stats.employees.relieved }}</strong></div>
        <div class="flex justify-between"><span>Pending registrations</span><strong>{{ stats.employees.pending_registrations }}</strong></div>
      </div>
    </div>

    <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
      <h2 class="text-lg font-semibold text-slate-900">Workflow Pending</h2>
      <div class="mt-4 space-y-3 text-sm">
        <div class="flex justify-between"><span>Attendance approvals</span><strong>{{ stats.attendance.today_pending }}</strong></div>
        <div class="flex justify-between"><span>Leave approvals</span><strong>{{ stats.leave.pending }}</strong></div>
        <div class="flex justify-between"><span>Onboarding tasks</span><strong>{{ stats.onboarding.pending }}</strong></div>
        <div class="flex justify-between"><span>Offboarding requests</span><strong>{{ stats.offboarding.pending }}</strong></div>
      </div>
    </div>

    <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
      <h2 class="text-lg font-semibold text-slate-900">Payroll Snapshot</h2>
      <div class="mt-4 space-y-3 text-sm">
        <div class="flex justify-between"><span>Active salary structures</span><strong>{{ stats.payroll.salary_structures_active }}</strong></div>
        <div class="flex justify-between"><span>Draft runs</span><strong>{{ stats.payroll.runs_draft }}</strong></div>
        <div class="flex justify-between"><span>Generated payslips</span><strong>{{ stats.payroll.payslips_generated }}</strong></div>
        <div class="flex justify-between"><span>Paid payslips</span><strong>{{ stats.payroll.payslips_paid }}</strong></div>
      </div>
    </div>
  </div>

  <div class="grid gap-4 xl:grid-cols-3">
    <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
      <div class="mb-4 flex items-center justify-between"><h2 class="text-lg font-semibold text-slate-900">Recent Employees</h2><a class="text-sm font-medium text-slate-600 hover:text-slate-900" href="/employees">View all</a></div>
      <div class="overflow-hidden rounded-xl border border-slate-200">
        <table class="min-w-full divide-y divide-slate-200 text-sm">
          <tbody class="divide-y divide-slate-100">
            {% for emp in stats.recent_employees %}
              <tr><td class="px-3 py-2"><a class="font-medium text-slate-900 hover:underline" href="/employees/{{ emp.id }}">{{ emp.full_name }}</a><div class="text-xs text-slate-500">{{ emp.employee_code }} · {{ emp.designation or '-' }}</div></td><td class="px-3 py-2 text-right"><span class="rounded-full bg-slate-100 px-2 py-1 text-xs">{{ emp.status }}</span></td></tr>
            {% else %}
              <tr><td class="px-3 py-4 text-slate-500">No employees found.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
      <div class="mb-4 flex items-center justify-between"><h2 class="text-lg font-semibold text-slate-900">Recent Leave</h2><a class="text-sm font-medium text-slate-600 hover:text-slate-900" href="/employees/leave">View all</a></div>
      <div class="space-y-3 text-sm">
        {% for item in stats.recent_leave_requests %}
          <div class="rounded-xl border border-slate-200 p-3"><div class="flex justify-between gap-3"><strong>{{ item.employee.full_name if item.employee else 'Employee' }}</strong><span class="text-xs text-slate-500">{{ item.status }}</span></div><div class="mt-1 text-xs text-slate-500">{{ item.leave_type.code if item.leave_type else '-' }} · {{ item.from_date }} to {{ item.to_date }}</div></div>
        {% else %}
          <p class="text-slate-500">No leave requests found.</p>
        {% endfor %}
      </div>
    </div>

    <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
      <div class="mb-4 flex items-center justify-between"><h2 class="text-lg font-semibold text-slate-900">Recent Offboarding</h2><a class="text-sm font-medium text-slate-600 hover:text-slate-900" href="/employees/offboarding">View all</a></div>
      <div class="space-y-3 text-sm">
        {% for item in stats.recent_offboarding_requests %}
          <div class="rounded-xl border border-slate-200 p-3"><div class="flex justify-between gap-3"><strong>{{ item.employee.full_name if item.employee else 'Employee' }}</strong><span class="text-xs text-slate-500">{{ item.status }}</span></div><div class="mt-1 text-xs text-slate-500">Requested relieving date: {{ item.requested_relieving_date or '-' }}</div></div>
        {% else %}
          <p class="text-slate-500">No offboarding requests found.</p>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endblock %}