{% extends "base.html" %}
{% block content %}
<div class="welcome"><div><h1>Welcome Back{% if user.first_name %}, {{ user.first_name }}{% endif %}!</h1><p>Here’s what’s happening at {% if brand_company %}{{ brand_company.name }}{% else %}your organization{% endif %} today.</p></div><div class="date-chip">{{ today|date:"l, d F Y" }}</div></div>
<div class="metric-grid">
 <div class="card metric blue"><div class="metric-head"><span>Total Employees</span><span class="metric-icon">♙</span></div><div class="metric-value">{{ employee_count }}</div><div class="metric-note"><a href="{% url 'employees:list' %}">View employees →</a></div></div>
 <div class="card metric green"><div class="metric-head"><span>Present Today</span><span class="metric-icon">●</span></div><div class="metric-value">{{ present_today }}</div><div class="metric-note" style="color:var(--good)">{{ attendance_rate }}% attendance</div></div>
 <div class="card metric red"><div class="metric-head"><span>Absent Today</span><span class="metric-icon">◷</span></div><div class="metric-value">{{ absent_today }}</div><div class="metric-note" style="color:var(--bad)">{{ absent_rate }}%</div></div>
 <div class="card metric yellow"><div class="metric-head"><span>On Leave Today</span><span class="metric-icon">☂</span></div><div class="metric-value">{{ leave_today }}</div><div class="metric-note" style="color:#8a6200">Approved / attendance leave</div></div>
 <div class="card metric purple"><div class="metric-head"><span>Late Today</span><span class="metric-icon">▦</span></div><div class="metric-value">{{ late_today }}</div><div class="metric-note" style="color:var(--purple)">Attendance status</div></div>
</div>
<div class="lower">
 <div class="card"><div class="sectionhead"><h3>Employee by Department</h3><span>{{ employee_count }} employees in your scope</span></div>{% for d in department_summary %}<div class="deptrow"><span class="label">{{ d.department__name|default:"Unassigned" }}</span><span class="count">{{ d.count }}</span><div class="track"><div class="fill" style="width:{{ d.percent }}%"></div></div></div>{% empty %}<div class="empty">No department data yet.</div>{% endfor %}</div>
 <div class="card"><div class="sectionhead"><h3>Current Work Status</h3><span>Quick overview</span></div><div class="payrollbox"><div class="payrollitem"><span>Open Tasks</span><strong>{{ open_task_count }}</strong></div><div class="payrollitem"><span>Latest Payroll</span><strong>{% if latest_payroll %}{{ latest_payroll.year }}-{{ latest_payroll.month|stringformat:"02d" }} · {{ latest_payroll.get_status_display|default:latest_payroll.status }}{% else %}Not started{% endif %}</strong></div><div class="payrollitem"><span>Attendance Records Today</span><strong>{{ attendance_total_today }}</strong></div></div></div>
</div>
<div class="split">
 <div class="card"><div class="sectionhead"><h3>Recent Employees</h3><span><a href="{% url 'employees:list' %}">View all →</a></span></div><div class="tablewrap"><table><thead><tr><th>ID</th><th>Name</th><th>Department</th><th>Designation</th><th>Branch</th></tr></thead><tbody>{% for e in recent_employees %}<tr><td><a href="{% url 'employees:detail' e.pk %}">{{ e.employee_code }}</a></td><td class="name">{{ e.full_name }}</td><td>{{ e.department }}</td><td>{{ e.designation }}</td><td>{{ e.branch }}</td></tr>{% empty %}<tr><td colspan="5" class="empty">No employee data in your permitted scope.</td></tr>{% endfor %}</tbody></table></div></div>
 <div class="card"><div class="sectionhead"><h3>Today’s Attendance</h3><span><a href="{% url 'attendance:list' %}">Open Attendance →</a></span></div><div class="tablewrap"><table><thead><tr><th>ID</th><th>Name</th><th>Check In</th><th>Status</th></tr></thead><tbody>{% for a in today_attendance %}<tr><td>{{ a.employee.employee_code }}</td><td class="name">{{ a.employee.full_name }}</td><td>{% if a.check_in %}{{ a.check_in|date:"h:i A" }}{% else %}—{% endif %}</td><td><span class="pill {% if a.status == 'PRESENT' %}ok{% elif a.status == 'ABSENT' %}bad{% elif a.status == 'LATE' or a.status == 'LEAVE' %}warn{% endif %}">{{ a.get_status_display }}</span></td></tr>{% empty %}<tr><td colspan="4" class="empty">No attendance records for today yet.</td></tr>{% endfor %}</tbody></table></div></div>
</div>
{% endblock %}