Title setData('title', e.target.value)} required />

Description

setData('description', e.target.value)}
                                    required
                                    rows={5}
                                />
                                <InputError message={errors.description} className="mt-2" />
                            </div>

<div>
                                <Label htmlFor="description">Project Details</Label>
                                <Tiptap onChange={(e) => setData('doc', e || '')} description={data.doc || ''} />
                                <InputError message={errors.description} className="mt-2" />
                            </div>

<div>
                                <Label htmlFor="image">Image</Label>
                                <Input
                                    id="image"
                                    type="file"
                                    name="image"
                                    className="mt-1 block w-full"
                                    onChange={handleImageChange}
                                    accept="image/*"
                                    required
                                />
                                <InputError message={errors.image} className="mt-2" />
                                {imagePreviewUrl && (
                                    <div className="mt-4">
                                        <img src={imagePreviewUrl} alt="Image Preview" className="h-auto max-w-xs rounded-md" />
                                    </div>
                                )}
                            </div>

<div>
                                <Label htmlFor="location">Location</Label>
                                <Input
                                    id="location"
                                    type="text"
                                    name="location"
                                    value={data.location}
                                    className="mt-1 block w-full"
                                    onChange={(e) => setData('location', e.target.value)}
                                />
                                <InputError message={errors.location} className="mt-2" />
                            </div>

<div>
                                <Label htmlFor="complete">Completion Status</Label>
                                <Select onValueChange={(value) => setData('complete', value)} value={data.complete}>
                                    <SelectTrigger className="w-full">
                                        <SelectValue placeholder="Select completion status" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="on-going">On-going</SelectItem>
                                        <SelectItem value="completed">Completed</SelectItem>
                                    </SelectContent>
                                </Select>
                                <InputError message={errors.complete} className="mt-2" />
                            </div>

<div>
                                <Label htmlFor="slug">Slug</Label>
                                <Input
                                    id="slug"
                                    type="text"
                                    name="slug"
                                    value={data.slug}
                                    className="mt-1 block w-full"
                                    onChange={(e) => setData('slug', e.target.value)}
                                    required
                                />
                                <InputError message={errors.slug} className="mt-2" />
                            </div>

<div className="flex items-center space-x-2">
                                <Switch id="status" checked={data.status} onCheckedChange={(checked) => setData('status', checked)} />
                                <Label htmlFor="status">Status (Active/Inactive)</Label>
                                <InputError message={errors.status} className="mt-2" />
                            </div>

<div>
                                <Label htmlFor="type">Type</Label>
                                <Select onValueChange={(value) => setData('type', value)} value={data.type}>
                                    <SelectTrigger className="w-full">
                                        <SelectValue placeholder="Select a type" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="project">Project</SelectItem>
                                        <SelectItem value="case_study">Case Study</SelectItem>
                                    </SelectContent>
                                </Select>
                                <InputError message={errors.type} className="mt-2" />
                            </div>

<div>
                                <Label htmlFor="category">Category</Label>
                                <Select onValueChange={(value) => setData('category', value)} value={data.category}>
                                    <SelectTrigger className="w-full">
                                        <SelectValue placeholder="Select a category" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {categories.map((category) => (
                                            <SelectItem key={category.id} value={String(category.id)}>
                                                {category.name}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                                <InputError message={errors.category} className="mt-2" />
                            </div>

<div>
                                <Label htmlFor="clientId">Client</Label>
                                <Select onValueChange={(value) => setData('clientId', value)} value={data.clientId}>
                                    <SelectTrigger className="w-full">
                                        <SelectValue placeholder="Select a client" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {clients.map((client) => (
                                            <SelectItem key={client.id} value={String(client.id)}>
                                                {client.name}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                                <InputError message={errors.clientId} className="mt-2" />
                            </div>

<div className="flex items-center gap-4">
                                <Button type="submit" disabled={processing}>
                                    {processing ? 'Creating...' : 'Create Project'}
                                </Button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}