@extends('layouts.app')
@section('title', 'Student Reports')
@section('content')
<div class="card">
    <h2 style="font-size:17px;color:#0b4f2c;margin-bottom:16px;">Student Reports</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 Students</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;">Graduated</div><div style="font-size:22px;font-weight:bold;">{{ $total_graduated }}</div></div>
    </div>
    <h3 style="font-size:14px;color:#0b4f2c;margin-bottom:8px;">By Gender</h3>
    <table style="width:100%;border-collapse:collapse;font-size:13px;margin-bottom:18px;">
        @foreach($byGender as $gender => $count)
            <tr style="border-bottom:1px solid #eee;"><td style="padding:6px;">{{ $gender }}</td><td style="padding:6px;">{{ $count }}</td></tr>
        @endforeach
    </table>
    <h3 style="font-size:14px;color:#0b4f2c;margin-bottom:8px;">By Class</h3>
    <table style="width:100%;border-collapse:collapse;font-size:13px;">
        @forelse($byClass as $class => $count)
            <tr style="border-bottom:1px solid #eee;"><td style="padding:6px;">{{ $class }}</td><td style="padding:6px;">{{ $count }}</td></tr>
        @empty
            <tr><td style="padding:6px;color:#999;">No data yet.</td></tr>
        @endforelse
    </table>
</div>
@endsection