@extends('layouts.wali')

@section('title', $murid->name.' — ZAXARA Wali')

@section('content')
<div style="margin-bottom:16px;">
    <a href="{{ route('wali.dashboard') }}" style="font-size:13px;">&larr; Anak Saya</a>
</div>

<div style="display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;">

    <div style="width:280px;flex-shrink:0;">
        <div class="card" style="text-align:center;">
            <div style="width:56px;height:56px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
                display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;margin:0 auto 8px;">
                {{ strtoupper(substr($murid->name, 0, 1)) }}
            </div>
            <div style="font-weight:800;font-size:16px;">{{ $murid->name }}</div>
            <div style="font-size:12px;color:var(--ink-faint);">{{ $murid->username }}</div>
        </div>
    </div>

    <div style="flex:1;display:flex;flex-direction:column;gap:16px;min-width:0;">

        <div class="card">
            <div class="label" style="margin-bottom:8px;">Tabel Penguasaan</div>
            <table>
                <thead>
                    <tr><th>Unit</th><th>Level</th><th>Terakhir Diuji</th><th>Jadwal Ulang</th></tr>
                </thead>
                <tbody>
                    @forelse ($penguasaan as $p)
                        <tr>
                            <td>{{ $p->unit->materi->judul }} — {{ $p->unit->judul }}</td>
                            <td>
                                <span class="chip chip-{{ $p->level === 'lancar' ? 'green' : ($p->level === 'cukup' ? 'green' : ($p->level === 'lemah' ? 'amber' : 'red')) }}">
                                    {{ ucfirst($p->level) }}
                                </span>
                            </td>
                            <td>{{ $p->terakhir_diuji_at?->diffForHumans() ?? '—' }}</td>
                            <td>{{ $p->jadwal_ulang_at?->toDateString() ?? '—' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="4">Belum ada data penguasaan.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="card">
            <div class="label" style="margin-bottom:8px;">Riwayat Sesi</div>
            <table>
                <thead>
                    <tr><th>Tanggal</th><th>Unit</th><th>Durasi</th><th>Status</th></tr>
                </thead>
                <tbody>
                    @forelse ($riwayatSesi as $s)
                        <tr>
                            <td>{{ $s->selesai_at?->diffForHumans() }}</td>
                            <td>{{ $s->unit->judul }}</td>
                            <td>{{ intdiv($s->durasi_detik, 60) }} menit</td>
                            <td>
                                <span class="chip chip-{{ $s->status_sah ? 'green' : 'red' }}">
                                    {{ $s->status_sah ? 'Sah' : 'Tidak sah' }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="4">Belum ada riwayat sesi.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <p style="font-size:12px;color:var(--ink-faint);">
            Tampilan ini hanya untuk memantau — pencatatan hasil simak langsung tetap dilakukan oleh guru.
        </p>

    </div>
</div>
@endsection