import { Head, Link, useForm } from '@inertiajs/react'; import type { FormEvent } from 'react'; type Category = { id: number; parent_id: number | null; name: string; slug: string; system_type: string | null; description: string | null; seo_title: string | null; meta_description: string | null; is_active: boolean }; type Option = { id: number; name: string }; export default function CategoryForm({ category, categories }: { category: Category | null; categories: Option[] }) { const { data, setData, transform, post, put, processing, errors } = useForm({ parent_id: category?.parent_id ?? '', name: category?.name ?? '', slug: category?.slug ?? '', system_type: category?.system_type ?? '', description: category?.description ?? '', seo_title: category?.seo_title ?? '', meta_description: category?.meta_description ?? '', is_active: category?.is_active ?? true, }); function submit(event: FormEvent) { event.preventDefault(); transform((values) => ({ ...values, parent_id: values.parent_id || null })); category ? put(`/admin/categories/${category.id}`) : post('/admin/categories'); } return ( <>

{category ? 'Edit category' : 'Create category'}

setData('name', event.target.value)} /> setData('slug', event.target.value)} /> setData('system_type', event.target.value)} /> setData('seo_title', event.target.value)} />

setData('meta_description', event.target.value)} /></Field>
                        <Field label="Description" error={errors.description}><textarea className="input min-h-24" value={data.description} onChange={(event) => setData('description', event.target.value)} /></Field>
                        <label className="flex items-center gap-2 text-sm font-medium"><input type="checkbox" checked={data.is_active} onChange={(event) => setData('is_active', event.target.checked)} /> Active</label>
                    </div>
                    <div className="mt-6 flex justify-end gap-2"><Link href="/admin/categories" className="rounded-md border border-slate-300 px-4 py-2 text-sm font-semibold">Cancel</Link><button disabled={processing} className="rounded-md bg-cyan-700 px-4 py-2 text-sm font-semibold text-white disabled:opacity-60">Save</button></div>
                </form>
            </main>
        </>
    );
}

function Field({ label, error, children }: { label: string; error?: string; children: React.ReactNode }) {
    return <label className="grid gap-1 text-sm font-medium text-slate-700"><span>{label}</span>{children}{error ? <span className="text-xs text-red-600">{error}</span> : null}</label>;
}