{t('Create Class Definition')}

{t('Name')} form.setData('name', e.target.value)} className="w-full rounded border p-2" />

Class # form.setData('class_number', e.target.value)} className="w-full rounded border p-2" />

{t('Description')}

form.setData('description', e.target.value)} className="w-full rounded border p-2" />
                    </div>
                    <div>
                        <label className="block text-sm font-medium">{t('Teacher')}</label>
                        <select 
                            value={form.data.teacher_id} 
                            onChange={(e) => form.setData('teacher_id', e.target.value)} 
                            className="w-full rounded border p-2"
                        >
                            <option value="">-- Select Teacher --</option>
                            {teachers.map((teacher) => (
                                <option key={teacher.id} value={teacher.id}>
                                    {teacher.last_name}, {teacher.first_name}
                                </option>
                            ))}
                        </select>
                    </div>
                    <div>
                        <label className="block text-sm font-medium">{t('Capacity')}</label>
                        <input type="number" value={form.data.capacity} onChange={(e) => form.setData('capacity', e.target.value)} className="w-full rounded border p-2" />
                    </div>
                    <div className="flex gap-2">
                        <div className="flex-1">
                            <label className="block text-sm font-medium">{t('Start Date')}</label>
                            <input type="date" value={form.data.start_date} onChange={(e) => form.setData('start_date', e.target.value)} className="w-full rounded border p-2" />
                        </div>
                        <div className="flex-1">
                            <label className="block text-sm font-medium">{t('End Date')}</label>
                            <input type="date" value={form.data.end_date} onChange={(e) => form.setData('end_date', e.target.value)} className="w-full rounded border p-2" />
                        </div>
                    </div>
                    <div>
                        <label className="block text-sm font-medium">{t('Location')}</label>
                        <input value={form.data.location} onChange={(e) => form.setData('location', e.target.value)} className="w-full rounded border p-2" />
                    </div>
                    <div>
                        <label className="block text-sm font-medium">{t('Fee')}</label>
                        <input type="number" step="0.01" value={form.data.fee} onChange={(e) => form.setData('fee', e.target.value)} className="w-full rounded border p-2" />
                    </div>
                    <div className="flex gap-2 justify-end">
                        <Link href="/admin/school/class-definitions">
                            <Button type="button" variant="outline">{t('Cancel')}</Button>
                        </Link>
                        <Button type="submit" disabled={form.processing}>{t('Create Class')}</Button>
                    </div>
                </form>
            </div>
        </AppLayout>
    );
}