import { Head, useForm } from '@inertiajs/react'; import { Users } from 'lucide-react'; import AuthenticatedLayout from '@/layouts/AuthenticatedLayout'; interface Props { game: { id: number; title: string; subject?: { name: string } }; classes: Array<{ id: number; name: string; students_count: number; students: Array<{ id: number; full_name: string }> }>; } export default function Setup({ game, classes }: Props) { const { data, setData, post, processing, errors } = useForm({ synced_class_id: classes[0]?.id ?? '', team_count: 4, absent_student_ids: [] as number[], }); const selectedClass = classes.find((item) => item.id === Number(data.synced_class_id)); const activeStudentCount = selectedClass ? selectedClass.students_count - data.absent_student_ids.length : 0; const estimatedSize = activeStudentCount ? Math.ceil(activeStudentCount / data.team_count) : 0; const toggleAbsent = (studentId: number) => { setData('absent_student_ids', data.absent_student_ids.includes(studentId) ? data.absent_student_ids.filter((id) => id !== studentId) : [...data.absent_student_ids, studentId]); }; return (

{game.title} · {game.subject?.name}

{ event.preventDefault(); post(route('team-quest.host.sessions.store', game.id)); }} className="glass space-y-6 rounded-2xl border border-border/40 p-6" >

Kelas {errors.synced_class_id &&

{errors.synced_class_id}

}

Siswa tidak hadir {data.absent_student_ids.length} ditandai

{selectedClass?.students.map((student) => ( toggleAbsent(student.id)} className="rounded border-border text-rose-500" /> {student.full_name} ))}

Jumlah Kelompok

{[2, 3, 4, 5, 6, 7, 8].map((count) => ( ))}

{errors.team_count &&

{errors.team_count}

}

Perkiraan pembagian

{activeStudentCount} siswa aktif, sekitar {estimatedSize} siswa per kelompok. Kelompok di atas 5 siswa otomatis dibagi menjadi dua mini-squad.

); }