@extends('layouts.guru')
@section('title', $kelas->nama)

@section('topbar')
<div class="gr-topbar-inner">
    <div>
        <div class="gr-page-back">
            <a href="{{ route('guru.kelas.index') }}">← Kelas Saya</a>
        </div>
        <div class="gr-greeting-name">{{ $kelas->nama }}</div>
        <div class="gr-greeting-sub">
            Kode bergabung:
            <span style="font-family:monospace; font-weight:700; background:#ede9fe; color:#7c3aed; padding:2px 8px; border-radius:6px; font-size:13px; letter-spacing:1px">{{ $kelas->kode_kelas }}</span>
            @if($kelas->kelasTingkat)
                &nbsp;·&nbsp;Kelas {{ $kelas->kelasTingkat->kelas }} — {{ $kelas->kelasTingkat->fase->nama }}
            @endif
        </div>
    </div>
    <div class="gr-topbar-right">
        <a href="{{ route('guru.tugas.create', $kelas) }}" class="btn btn-purple">+ Tugaskan Materi</a>
        <a href="{{ route('guru.evaluasi.index', $kelas) }}" class="btn btn-outline">Evaluasi Kelas</a>
    </div>
</div>
@endsection

@section('content')

<div style="display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px">

    {{-- Tugas --}}
    <div class="al-card" style="grid-column:1 / -1">
        <div class="al-card-head">
            <span class="al-card-title">Daftar Tugas</span>
            <a href="{{ route('guru.tugas.create', $kelas) }}" class="btn btn-purple btn-sm">+ Tugaskan Materi</a>
        </div>
        <div class="al-card-body" style="padding:0">
            @if($tugas->isEmpty())
                <div style="text-align:center; padding:36px 0; color:#9ca3af; font-size:13.5px">
                    Belum ada tugas di kelas ini.
                    <a href="{{ route('guru.tugas.create', $kelas) }}" style="margin-left:6px">Buat sekarang →</a>
                </div>
            @else
            <table style="width:100%; border-collapse:collapse; font-size:13.5px">
                <thead>
                    <tr>
                        <th class="al-th">Indikator</th>
                        <th class="al-th">Mode</th>
                        <th class="al-th" style="text-align:center">Status</th>
                        <th class="al-th">Dibuat</th>
                        <th class="al-th" style="text-align:center; width:130px">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                @foreach($tugas as $t)
                <tr>
                    <td class="al-td">
                        <a href="{{ route('guru.tugas.show', $t) }}" style="font-weight:600; color:#111827; text-decoration:none">
                            {{ $t->indikator->kode }}
                        </a>
                        <div style="font-size:12px; color:#6b7280; margin-top:2px">{{ $t->indikator->deskripsi }}</div>
                    </td>
                    <td class="al-td">
                        <span class="badge badge-abu">{{ $t->mode_soal }}</span>
                    </td>
                    <td class="al-td" style="text-align:center">
                        @if($t->status_generate === 'selesai')
                            <span class="badge badge-hijau">Siap</span>
                        @elseif($t->status_generate === 'pending')
                            <span class="badge badge-kuning">Proses…</span>
                        @else
                            <span class="badge badge-merah">Gagal</span>
                        @endif
                    </td>
                    <td class="al-td" style="color:#9ca3af; font-size:12.5px">{{ $t->created_at->format('d M Y') }}</td>
                    <td class="al-td" style="text-align:center">
                        <div style="display:flex; justify-content:center; gap:6px">
                            @if($t->status_generate === 'selesai')
                                <a href="{{ route('guru.hasil.index', $t) }}" class="btn btn-outline btn-sm">Hasil</a>
                            @endif
                            <a href="{{ route('guru.tugas.show', $t) }}" class="al-icon-btn" title="Detail tugas">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            </a>
                            <form method="POST" action="{{ route('guru.tugas.destroy', $t) }}"
                                  onsubmit="return confirm('Hapus tugas ini?')" style="display:inline">
                                @csrf @method('DELETE')
                                <button type="submit" class="al-icon-btn al-icon-btn--danger" title="Hapus">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
                </tbody>
            </table>
            @endif
        </div>
    </div>

</div>

{{-- Siswa --}}
<div class="al-card">
    <div class="al-card-head">
        <span class="al-card-title">Siswa Terdaftar</span>
        <span class="badge badge-abu">{{ $kelas->siswa->count() }} siswa</span>
    </div>
    <div class="al-card-body" style="padding:0">
        @if($kelas->siswa->isEmpty())
            <div style="text-align:center; padding:36px 0; color:#9ca3af; font-size:13.5px">
                Belum ada siswa bergabung. Bagikan kode
                <span style="font-family:monospace; font-weight:700; color:#7c3aed">{{ $kelas->kode_kelas }}</span>
                ke siswa.
            </div>
        @else
        <table style="width:100%; border-collapse:collapse; font-size:13.5px">
            <thead>
                <tr>
                    <th class="al-th">Nama</th>
                    <th class="al-th">Email</th>
                    <th class="al-th">Bergabung</th>
                    <th class="al-th" style="text-align:center; width:80px">Aksi</th>
                </tr>
            </thead>
            <tbody>
            @foreach($kelas->siswa as $s)
            <tr>
                <td class="al-td" style="font-weight:600; color:#111827">
                    <a href="{{ route('guru.evaluasi.siswa', [$kelas, $s]) }}" style="color:#111827; text-decoration:none">
                        {{ $s->name }}
                    </a>
                </td>
                <td class="al-td" style="color:#6b7280; font-size:12.5px">{{ $s->email }}</td>
                <td class="al-td" style="color:#9ca3af; font-size:12.5px">{{ \Carbon\Carbon::parse($s->pivot->joined_at)->format('d M Y') }}</td>
                <td class="al-td" style="text-align:center">
                    <a href="{{ route('guru.evaluasi.siswa', [$kelas, $s]) }}"
                       class="al-icon-btn" title="Evaluasi siswa">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
                    </a>
                </td>
            </tr>
            @endforeach
            </tbody>
        </table>
        @endif
    </div>
</div>

@endsection