{/* Header */}

{t('Add Yahrzeit Record')}

{t('Create a new memorial observance record')}

{/* Deceased Information */} {t('Deceased Information')} {t('Information about the person being remembered')}

Deceased Name * setData('name', e.target.value)} className={errors.name ? 'border-red-500' : ''} placeholder={t('Full name of the deceased')} /> {errors.name &&

{errors.name}

}

{t('Hebrew Name')} setData('hebrew_name', e.target.value)} className={errors.hebrew_name ? 'border-red-500' : ''} placeholder={t('Hebrew name (optional)')} /> {errors.hebrew_name &&

{errors.hebrew_name}

}

{/* Date and Observance */} {t('Date and Observance Details')} {t('Date of death and observance preferences. Hebrew dates will be calculated automatically.')}

Date of Death * setData('date_of_death', e.target.value)} className={errors.date_of_death ? 'border-red-500' : ''} /> {errors.date_of_death &&

{errors.date_of_death}

}

{t('Hebrew calendar date will be calculated automatically. For Hebrew-only dates, use the CSV import.')}

Observance Type * {errors.observance_type &&

{errors.observance_type}

}

{t('Notes')}

setData('notes', e.target.value)}
                                    className={errors.notes ? 'border-red-500' : ''}
                                    placeholder={t('Additional notes or special instructions (optional)')}
                                    rows={3}
                                />
                                {errors.notes && <p className="text-sm text-red-600 mt-1">{errors.notes}</p>}
                            </div>
                        </CardContent>
                    </Card>

{/* Members Selection (Optional) */}
                    <Card>
                        <CardHeader>
                            <CardTitle className="flex items-center gap-2">
                                <User className="h-5 w-5" />
                                Family Members (Optional)
                            </CardTitle>
                            <CardDescription>
                                {t('Add congregation members who will observe this yahrzeit and their relationship to the deceased')}
                            </CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-4">
                            {data.members.length === 0 ? (
                                <Alert>
                                    <AlertDescription>
                                        {t('No family members added yet. Click the button below to add members who will observe this yahrzeit.')}
                                    </AlertDescription>
                                </Alert>
                            ) : (
                                data.members.map((memberData, index) => (
                                    <div key={index} className="border border-gray-200 rounded-lg p-4 space-y-4">
                                        <div className="flex items-center justify-between">
                                            <h4 className="font-medium">Family Member {index + 1}</h4>
                                            <Button
                                                type="button"
                                                variant="outline"
                                                size="sm"
                                                onClick={() => removeMember(index)}
                                                className="text-red-600 hover:text-red-800"
                                            >
                                                <X className="h-4 w-4" />
                                            </Button>
                                        </div>
                                        
                                        <div>
                                            <Label htmlFor={`member_id_${index}`}>Select Member *</Label>
                                            <MemberCombobox
                                                id={`member_id_${index}`}
                                                members={members}
                                                value={memberData.member_id}
                                                onChange={(value) => updateMember(index, 'member_id', value)}
                                                hasError={!!errors[`members.${index}.member_id`]}
                                            />
                                            {errors[`members.${index}.member_id`] && (
                                                <p className="text-sm text-red-600 mt-1">{errors[`members.${index}.member_id`]}</p>
                                            )}
                                        </div>

<div>
                                            <Label htmlFor={`relationship_${index}`}>Relationship to Deceased *</Label>
                                            <Select 
                                                value={memberData.relationship} 
                                                onValueChange={(value) => updateMember(index, 'relationship', value)}
                                            >
                                                <SelectTrigger className={errors[`members.${index}.relationship`] ? 'border-red-500' : ''}>
                                                    <SelectValue placeholder={t('Select relationship...')} />
                                                </SelectTrigger>
                                                <SelectContent>
                                                    {RELATIONSHIP_OPTIONS.map((relationship) => (
                                                        <SelectItem key={relationship} value={relationship}>
                                                            {relationship}
                                                        </SelectItem>
                                                    ))}
                                                </SelectContent>
                                            </Select>
                                            {errors[`members.${index}.relationship`] && (
                                                <p className="text-sm text-red-600 mt-1">{errors[`members.${index}.relationship`]}</p>
                                            )}
                                        </div>
                                    </div>
                                ))
                            )}
                            
                            <Button
                                type="button"
                                variant="outline"
                                onClick={addMember}
                                className="w-full"
                            >
                                <Plus className="h-4 w-4 me-2" />
                                {t('Add Family Member')}
                            </Button>
                        </CardContent>
                    </Card>

{/* Submit Actions */}
                    <div className="flex justify-between pt-6">
                        <Button
                            type="button"
                            variant="outline"
                            onClick={() => router.get('/admin/yahrzeits')}
                        >
                            {t('Cancel')}
                        </Button>
                        <Button type="submit" disabled={processing}>
                            {processing ? 'Creating...' : 'Create Yahrzeit Record'}
                        </Button>
                    </div>
                </form>
            </div>
        </AppLayout>
    );
}