Edit Facility

Facility Details

{/* Title */}

Title *

{/* Slug */}

Slug * setData("slug", e.target.value)} placeholder="slug-value" />

{/* Category */}

Category *

{/* Order & Status */}

Display Order setData("order", parseInt(e.target.value))} />

setData("status", checked)} /> Active Status

{/* Description */}

Description

setData("description", e.target.value)}
                                    placeholder="Enter localized details..."
                                />
                                <InputError message={errors.description} />
                            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                {/* Image Upload */}
                                <div className="space-y-2">
                                    <Label htmlFor="image">Main Image</Label>
                                    {facility.image && (
                                        <div className="mb-2">
                                            <img src={facility.image} alt="Current" className="h-20 w-20 object-cover rounded" />
                                        </div>
                                    )}
                                    <Input
                                        id="image"
                                        type="file"
                                        accept="image/*"
                                        onChange={(e) => setData("image", e.target.files ? e.target.files[0] : null)}
                                    />
                                    <p className="text-xs text-muted-foreground">Upload to replace existing image.</p>
                                    <InputError message={errors.image} />
                                </div>

{/* Icon Upload */}
                                <div className="space-y-2">
                                    <Label htmlFor="icon">Icon (SVG or Image)</Label>
                                    {facility.icon && (
                                        <div className="mb-2 p-2 bg-gray-100 rounded w-max">
                                            <img src={facility.icon} alt="Icon" className="h-8 w-8 object-contain" />
                                        </div>
                                    )}
                                    <Input
                                        id="icon"
                                        type="file"
                                        accept=".svg,image/*"
                                        onChange={(e) => setData("icon", e.target.files ? e.target.files[0] : null)}
                                    />
                                    <p className="text-xs text-muted-foreground">Upload new icon/svg to replace.</p>
                                    <InputError message={errors.icon} />
                                </div>
                            </div>

{/* Dynamic Fields based on Category */}
                            {['Sports Item'].includes(categories.find(c => c.value === data.category)?.label || '') && (
                                <div className="p-4 bg-muted/50 rounded-lg border border-dashed">
                                    <h3 className="font-semibold mb-2">Detailed Specs</h3>
                                    <div className="space-y-2">
                                        <Label>Size / Specification</Label>
                                        <Input
                                            value={data.meta_data?.size || ''}
                                            placeholder="e.g. Full Size AstroTurf"
                                            onChange={(e) => setData('meta_data', { ...data.meta_data, size: e.target.value })}
                                        />
                                    </div>
                                </div>
                            )}

{['Overview Lifestyle'].includes(categories.find(c => c.value === data.category)?.label || '') && (
                                <div className="p-4 bg-muted/50 rounded-lg border border-dashed">
                                    <h3 className="font-semibold mb-2">Lifestyle Specs</h3>
                                    <div className="space-y-2">
                                        <Label>Sub-Category</Label>
                                        <Input
                                            value={data.meta_data?.sub_category || ''}
                                            placeholder="e.g. Athletics, Creative, Nutrition"
                                            onChange={(e) => setData('meta_data', { ...data.meta_data, sub_category: e.target.value })}
                                        />
                                    </div>
                                </div>
                            )}

<div className="flex justify-end pt-4">
                                <Button type="submit" disabled={processing} className="w-full md:w-auto">
                                    <Save className="mr-2 h-4 w-4" />
                                    Update Facility
                                </Button>
                            </div>

</form>
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    )
}