@extends('layouts.guru')

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

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

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

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

    <div style="width:280px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;">
        <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 class="card">
            <div class="label" style="margin-bottom:10px;">Catat Hasil Simak</div>
            <form method="POST" action="{{ route('guru.simakan.store') }}" style="display:flex;flex-direction:column;gap:10px;">
                @csrf
                <input type="hidden" name="murid_id" value="{{ $murid->id }}">

                <select name="unit_id" class="input" required>
                    <option value="">Pilih unit&hellip;</option>
                    @foreach ($penguasaan as $p)
                        <option value="{{ $p->unit_id }}">{{ $p->unit->materi->judul }} — {{ $p->unit->judul }}</option>
                    @endforeach
                </select>

                <div style="display:flex;flex-direction:column;gap:6px;">
                    <label style="font-size:13px;"><input type="radio" name="hasil" value="lancar" required> Lancar</label>
                    <label style="font-size:13px;"><input type="radio" name="hasil" value="tersendat"> Tersendat</label>
                    <label style="font-size:13px;"><input type="radio" name="hasil" value="mengulang"> Perlu mengulang</label>
                </div>

                <textarea name="catatan" class="input" rows="2" placeholder="Catatan (opsional)"></textarea>

                <button type="submit" class="btn btn-primary">Simpan</button>
            </form>
        </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>Wajah / Suara</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>{{ $s->wajah_terdeteksi_pct ?? '—' }}% / {{ $s->suara_terdeteksi_pct ?? '—' }}%</td>
                            <td>
                                <span class="chip chip-{{ $s->status_sah ? 'green' : 'red' }}">
                                    {{ $s->status_sah ? 'Sah' : 'Tidak sah' }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5">Belum ada riwayat sesi.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

    </div>
</div>
@endsection