@extends('layouts.app')
@section('title', 'Staff Reports')
@section('content')
<div class="card">
    <h2 style="font-size:17px;color:#0b4f2c;margin-bottom:16px;">Staff Report</h2>
    <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:20px;">
        <div class="card" style="margin:0;"><div style="font-size:11px;color:#777;">Active Staff</div><div style="font-size:22px;font-weight:bold;color:#0b4f2c;">{{ $total_active }}</div></div>
        <div class="card" style="margin:0;"><div style="font-size:11px;color:#777;">On Leave</div><div style="font-size:22px;font-weight:bold;color:#a67c00;">{{ $on_leave }}</div></div>
    </div>
    <h3 style="font-size:14px;color:#0b4f2c;margin-bottom:8px;">By Department</h3>
    <table style="width:100%;border-collapse:collapse;font-size:13px;">
        @forelse($byDepartment as $dept => $count)
            <tr style="border-bottom:1px solid #eee;"><td style="padding:6px;">{{ $dept }}</td><td style="padding:6px;">{{ $count }}</td></tr>
        @empty
            <tr><td style="padding:6px;color:#999;">No staff yet.</td></tr>
        @endforelse
    </table>
</div>
@endsection