@extends('simaju.layouts.main')
@section('title', 'Kelola Siswa')
@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">{{ $kelas->nama_kelas }}</h2><p class="text-gray-500 text-sm">{{ $siswaDiKelas->count() }}/{{ $kelas->kapasitas }} siswa</p></div>
            <a href="{{ route('simaju.kelas.show', $kelas->id) }}" class="px-4 py-2 border rounded-lg hover:bg-gray-50">Kembali</a>
        </div>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <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 di Kelas</h3>
            @forelse($siswaDiKelas as $s)
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg mb-2">
                <div><p class="font-medium">{{ $s->nama }}</p><p class="text-xs text-gray-500">{{ $s->nis }}</p></div>
                <form action="{{ route('simaju.kelas.remove-siswa', $s->id) }}" method="POST">@csrf<button type="submit" class="p-2 text-red-600 hover:bg-red-50 rounded">X</button></form>
                <form action="{{ route('simaju.kelas.remove-siswa', $s->id) }}" method="POST">
                @csrf
                @method('DELETE')
            
                <button type="submit" class="p-2 text-red-600 hover:bg-red-50 rounded">
                    X
                </button>
            </form>
            </div>
            @empty <p class="text-center text-gray-500 py-4">Kosong</p> @endforelse
        </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">Tambah Siswa</h3>
            <form action="{{ route('simaju.kelas.add-siswa', $kelas->id) }}" method="POST">
                @csrf
                <select name="siswa_id" required class="w-full px-4 py-2 border rounded-lg mb-3">
                    <option value="">Pilih Siswa</option>
                    @foreach($siswaLainnya as $s)<option value="{{ $s->id }}">{{ $s->nama }} ({{ $s->nis }})</option>@endforeach
                </select>
                <button type="submit" class="w-full px-4 py-2 bg-primary text-white rounded-lg">Tambah ke Kelas</button>
            </form>
        </div>
    </div>
</div>
@endsection