@extends('layouts.guru')

@section('title', 'Dasbor Kelas — ZAXARA Guru')

@section('content')
<h1 style="font-size:20px;margin:0 0 20px;">Dasbor Kelas — {{ $kelas->nama }}</h1>

@if (session('status'))
    <div class="status-banner">{{ session('status') }}</div>
@endif

<div style="display:flex;gap:14px;margin-bottom:20px;">
    <div class="card" style="flex:1;">
        <div class="label">Total Murid</div>
        <div style="font-size:22px;font-weight:800;">{{ $ringkasan['total'] }}</div>
    </div>
    <div class="card" style="flex:1;">
        <div class="label">Sesuai Target</div>
        <div style="font-size:22px;font-weight:800;color:var(--green);">{{ $ringkasan['aktif'] }}</div>
    </div>
    <div class="card" style="flex:1;">
        <div class="label">Mulai Tertinggal</div>
        <div style="font-size:22px;font-weight:800;color:var(--amber);">{{ $ringkasan['tertinggal'] }}</div>
    </div>
    <div class="card" style="flex:1;">
        <div class="label">Tidak Aktif</div>
        <div style="font-size:22px;font-weight:800;color:var(--red);">{{ $ringkasan['tidak_aktif'] }}</div>
    </div>
</div>

<div class="card">
    <table>
        <thead>
            <tr><th>Nama Murid</th><th>Status</th><th>Terakhir Aktif</th><th></th></tr>
        </thead>
        <tbody>
            @forelse ($muridStatus as $murid)
                <tr>
                    <td>{{ $murid['nama'] }}</td>
                    <td>
                        <span class="chip chip-{{ $murid['status'] === 'aktif' ? 'green' : ($murid['status'] === 'tertinggal' ? 'amber' : 'red') }}">
                            {{ $murid['status_label'] }}
                        </span>
                    </td>
                    <td>{{ $murid['terakhir_aktif']?->diffForHumans() ?? '—' }}</td>
                    <td><a href="{{ route('guru.murid.show', $murid['id']) }}" class="btn">Lihat detail</a></td>
                </tr>
            @empty
                <tr><td colspan="4">Belum ada murid di kelas ini.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>

<p style="font-size:12px;color:var(--ink-faint);margin-top:16px;">
    Skeleton — tampilan penuh mengikuti Wireframe-ZAXARA.pdf halaman 07.
    Layar Kelola Materi &amp; Unit belum dibangun (lihat TODO di routes/web.php).
</p>
@endsection