import { useTranslation } from '@/hooks/use-translation'; import React, { useMemo } from 'react'; import { Head, Link, useForm } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Textarea } from '@/components/ui/textarea'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Checkbox } from '@/components/ui/checkbox'; import { ArrowLeft } from 'lucide-react'; import { BreadcrumbItem, Deed, Member, Gravesite } from '@/types'; interface Props { deed: Deed; members: Member[]; gravesites: Gravesite[]; } export default function DeedsEdit({ deed, members, gravesites }: Readonly) { const { t } = useTranslation(); const { data, setData, put, processing, errors } = useForm({ member_id: deed.member_id.toString(), deed_number: deed.deed_number, purchase_date: deed.purchase_date, purchase_price: deed.purchase_price || '', notes: deed.notes || '', is_active: deed.is_active, gravesite_ids: deed.gravesites?.map(g => g.id) || [] as number[], }); const breadcrumbs: BreadcrumbItem[] = useMemo(() => [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Cemetery', href: '/admin/deeds' }, { title: 'Deeds', href: '/admin/deeds' }, { title: deed.deed_number, href: `/admin/deeds/${deed.id}` }, { title: 'Edit', href: `/admin/deeds/${deed.id}/edit` }, ], [deed]); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); put(`/admin/deeds/${deed.id}`); }; return (

{t('Edit Deed')}

{t('Update cemetery plot deed')}

{t('Deed Information')}

Owner * {errors.member_id &&

{errors.member_id}

}

Deed Number * setData('deed_number', e.target.value)} required /> {errors.deed_number &&

{errors.deed_number}

}

Purchase Date * setData('purchase_date', e.target.value)} required />

{t('Purchase Price')} setData('purchase_price', e.target.value)} />

Associated Gravesites *

{gravesites.map((gravesite) => { const isAlreadyLinked = data.gravesite_ids.includes(gravesite.id); const isUnavailable = (gravesite.status === 'reserved' || gravesite.status === 'occupied') && !isAlreadyLinked; return (

{ if (checked) { setData('gravesite_ids', [...data.gravesite_ids, gravesite.id]); } else { setData('gravesite_ids', data.gravesite_ids.filter(id => id !== gravesite.id)); } }} />

Plot {gravesite.plot_number}

{gravesite.section && `Section ${gravesite.section}`} {gravesite.row && `, Row ${gravesite.row}`} {gravesite.cemetery_name && ` - ${gravesite.cemetery_name}`}

{gravesite.status}

);})}

Selected {data.gravesite_ids.length} gravesite{data.gravesite_ids.length !== 1 ? 's' : ''}

setData('is_active', !!checked)} /> {t('Active')}

{t('Notes')}