{/* Header */}

{t('Create Event')}

{t('Add a new event to a calendar')}

{/* Basic Information */} {t('Basic Information')} {t('General details about the event')}

Calendar * {errors.calendar_id &&

{errors.calendar_id}

}

Event Title * setData('title', e.target.value)} className={errors.title ? 'border-red-500' : ''} placeholder={t('Enter event title...')} /> {errors.title &&

{errors.title}

}

{t('Description')}

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

{/* Date and Time */}
                    <Card>
                        <CardHeader>
                            <CardTitle className="flex items-center gap-2">
                                <Clock className="h-5 w-5" />
                                {t('Date and Time')}
                            </CardTitle>
                            <CardDescription>
                                {t('When the event takes place')}
                            </CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-4">
                            <div className="flex items-center space-x-2">
                                <Checkbox
                                    id="all_day"
                                    checked={data.all_day}
                                    onCheckedChange={handleAllDayChange}
                                />
                                <Label htmlFor="all_day">{t('All Day Event')}</Label>
                            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <Label htmlFor="start_date">Start Date *</Label>
                                    <Input
                                        id="start_date"
                                        type="date"
                                        value={data.start_date}
                                        onChange={(e) => setData('start_date', e.target.value)}
                                        className={errors.start_date ? 'border-red-500' : ''}
                                    />
                                    {errors.start_date && <p className="text-sm text-red-600 mt-1">{errors.start_date}</p>}
                                </div>

{!data.all_day && (
                                    <div>
                                        <Label htmlFor="start_time">{t('Start Time')}</Label>
                                        <Input
                                            id="start_time"
                                            type="time"
                                            value={data.start_time}
                                            onChange={(e) => setData('start_time', e.target.value)}
                                            className={errors.start_time ? 'border-red-500' : ''}
                                        />
                                        {errors.start_time && <p className="text-sm text-red-600 mt-1">{errors.start_time}</p>}
                                    </div>
                                )}

<div>
                                    <Label htmlFor="end_date">{t('End Date')}</Label>
                                    <Input
                                        id="end_date"
                                        type="date"
                                        value={data.end_date}
                                        onChange={(e) => setData('end_date', e.target.value)}
                                        className={errors.end_date ? 'border-red-500' : ''}
                                    />
                                    {errors.end_date && <p className="text-sm text-red-600 mt-1">{errors.end_date}</p>}
                                </div>

{!data.all_day && (
                                    <div>
                                        <Label htmlFor="end_time">{t('End Time')}</Label>
                                        <Input
                                            id="end_time"
                                            type="time"
                                            value={data.end_time}
                                            onChange={(e) => setData('end_time', e.target.value)}
                                            className={errors.end_time ? 'border-red-500' : ''}
                                        />
                                        {errors.end_time && <p className="text-sm text-red-600 mt-1">{errors.end_time}</p>}
                                    </div>
                                )}
                            </div>
                        </CardContent>
                    </Card>

{/* Additional Details */}
                    <Card>
                        <CardHeader>
                            <CardTitle className="flex items-center gap-2">
                                <MapPin className="h-5 w-5" />
                                {t('Additional Details')}
                            </CardTitle>
                            <CardDescription>
                                {t('Location and visibility settings')}
                            </CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-4">
                            <div>
                                <Label htmlFor="location">{t('Location')}</Label>
                                <Input
                                    id="location"
                                    type="text"
                                    value={data.location}
                                    onChange={(e) => setData('location', e.target.value)}
                                    className={errors.location ? 'border-red-500' : ''}
                                    placeholder={t('Event location or address...')}
                                />
                                {errors.location && <p className="text-sm text-red-600 mt-1">{errors.location}</p>}
                            </div>

<div className="flex items-center space-x-2">
                                <Checkbox
                                    id="members_only"
                                    checked={data.members_only}
                                    onCheckedChange={(checked) => setData('members_only', checked as boolean)}
                                />
                                <Label htmlFor="members_only" className="flex items-center gap-2">
                                    <Users className="h-4 w-4" />
                                    {t('Members Only Event')}
                                </Label>
                            </div>
                            <p className="text-sm text-gray-600">
                                {t('Members only events require authentication to view')}
                            </p>
                        </CardContent>
                    </Card>

{/* Actions */}
                    <div className="flex items-center justify-end space-x-4">
                        <Button
                            type="button"
                            variant="outline"
                            onClick={() => router.get('/admin/events')}
                        >
                            {t('Cancel')}
                        </Button>
                        <Button type="submit" disabled={processing}>
                            {processing ? 'Creating...' : 'Create Event'}
                        </Button>
                    </div>
                </form>
            </div>
        </AppLayout>
    );
}