import { useTranslation } from '@/hooks/use-translation'; import { useMemo, useState } from 'react'; import { router, useForm, Head } from '@inertiajs/react'; import { ArrowLeft, Calendar, Users, Globe } from 'lucide-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 { Checkbox } from "@/components/ui/checkbox"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Alert, AlertDescription } from "@/components/ui/alert"; import { BreadcrumbItem } from '@/types'; interface Calendar { id: number; name: string; members_only: boolean; public: boolean; } interface CalendarEditProps { calendar: Calendar; } interface CalendarFormData { name: string; members_only: boolean; public: boolean; } export default function CalendarEdit({ calendar }: CalendarEditProps) { const { t } = useTranslation(); const breadcrumbs: BreadcrumbItem[] = useMemo(() => [ { title: 'Dashboard', href: '/dashboard', }, { title: 'Calendars', href: '/admin/calendars', }, { title: calendar.name, href: `/admin/calendars/${calendar.id}`, } ], [calendar.name, calendar.id]); const { data, setData, put, processing, errors } = useForm({ name: calendar.name, members_only: calendar.members_only, public: calendar.public, }); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); put(`/admin/calendars/${calendar.id}`); }; return (
{/* Header */}

{t('Edit Calendar')}

{t('Update calendar settings')}

{/* Basic Information */} {t('Calendar Information')} {t('Basic details about the calendar')}
setData('name', e.target.value)} className={errors.name ? 'border-red-500' : ''} placeholder={t('Enter calendar name...')} /> {errors.name &&

{errors.name}

}
{/* Visibility Settings */} {t('Visibility Settings')} {t('Control who can view events in this calendar')}
setData('public', checked as boolean)} />

{t('Public calendars can be viewed by anyone, including non-members')}

setData('members_only', checked as boolean)} />

{t('Members only calendars require authentication to view')}

{!data.public && !data.members_only && ( {t('This calendar will be private and only accessible to administrators.')} )} {data.public && data.members_only && ( {t('Note:')} This calendar will be visible to members only (members_only takes precedence over public). )} {/* Actions */}
); }