@extends('simaju.layouts.main')
@section('title', 'Detail Kelas')
@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="font-heading font-bold text-xl">{{ $kelas->nama_kelas }}</h2>
                <p class="text-gray-600 mt-1">
                    <span class="font-medium">Kelas / Komp. Keahlian:</span> {{ $kelas->getKelasKompetensiDisplay() }}
                </p>
                <div class="flex items-center gap-3 mt-2">
                    <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm font-medium">Fase {{ $kelas->fase }}</span>
                    <span class="text-gray-500">•</span>
                    <span class="text-gray-600">{{ $kelas->tahun_ajaran }}</span>
                    @if($kelas->waliKelas)
                    <span class="text-gray-500">•</span>
                    <span class="text-gray-600">Wali: {{ $kelas->waliKelas->nama }}</span>
                    @endif
                </div>
            </div>
            <a href="{{ route('simaju.kelas.index') }}" class="px-4 py-2 border rounded-lg hover:bg-gray-50">Kembali</a>
        </div>
    </div>
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <h3 class="font-heading font-semibold mb-4 pb-2 border-b">Siswa ({{ $kelas->siswas ? $kelas->siswas->count() : 0 }})</h3>
        @if($kelas->siswas && $kelas->siswas->count() > 0)
        <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
            @foreach($kelas->siswas as $s)
            <div class="p-3 bg-gray-50 rounded-lg"><p class="font-medium text-gray-800">{{ $s->nama }}</p><p class="text-xs text-gray-500">{{ $s->nis }}</p></div>
            @endforeach
        </div>
        @else <p class="text-center text-gray-500 py-8">Belum ada siswa</p> @endif
    </div>
</div>
@endsection