import AdminLayout from '@/Layouts/AdminLayout'; import { Head, useForm, Link } from '@inertiajs/react'; import { ArrowLeft, Save, Plus, X, Image as ImageIcon, LayoutGrid, File as FileIcon, Upload, FileText, FileArchive } from 'lucide-react'; import { FormEvent, useState, useEffect } from 'react'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/Components/ui/select'; import MediaPicker from '@/Components/MediaPicker'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/Components/ui/tabs'; const FileTypeIcon = ({ mime, className }: { mime: string, className?: string }) => { if (mime.startsWith('image/')) return ; if (mime.includes('pdf')) return ; if (mime.includes('zip') || mime.includes('compressed')) return ; return ; }; interface Product { id: number; name: string; description: string | null; price: number; currency: string; type: string; features: string[] | null; is_active: boolean; image_path: string | null; media_id: number | null; digital_file_path: string | null; download_limit: number; expiry_days: number; media?: { id: number, url: string, mime_type: string, file_name: string, file_size: number }; gallery?: Array<{ id: number, url: string, mime_type: string, file_name: string, file_size: number }>; modules?: any[]; } export default function Form({ product }: { product?: Product }) { const isEditing = !!product; const [pickerOpen, setPickerOpen] = useState(false); const [pickerType, setPickerType] = useState<'primary' | 'gallery'>('primary'); const [activeTab, setActiveTab] = useState('details'); const { data, setData, post, processing, errors } = useForm({ _method: isEditing ? 'PUT' : 'POST', name: product?.name || '', description: product?.description || '', price: product?.price || 0, currency: product?.currency || 'NGN', type: product?.type || 'Resource', features: product?.features || [], is_active: product?.is_active ?? true, media_id: product?.media_id || null, gallery: product?.gallery?.map(m => m.id) || [] as number[], digital_file_path: product?.digital_file_path || '', download_limit: product?.download_limit || 5, expiry_days: product?.expiry_days || 7, }); const [selectedMedia, setSelectedMedia] = useState(product?.media || null); const [selectedGallery, setSelectedGallery] = useState(product?.gallery || []); useEffect(() => { if (!isEditing && data.type === 'Course') { setData('is_active', false); } }, [data.type]); const addFeature = () => { setData('features', [...data.features, '']); }; const removeFeature = (index: number) => { const newFeatures = [...data.features]; newFeatures.splice(index, 1); setData('features', newFeatures); }; const updateFeature = (index: number, value: string) => { const newFeatures = [...data.features]; newFeatures[index] = value; setData('features', newFeatures); }; const handleSubmit = (e: FormEvent) => { e.preventDefault(); if (isEditing) { post(route('admin.products.update', product.id)); } else { post(route('admin.products.store')); } }; const isDigital = ['Resource', 'Course'].includes(data.type); return (
Back to products

{isEditing ? 'Edit Product' : 'New Product'}

{/* Main Content */}
{/* Digital Delivery */} {data.type === 'Resource' && (

Digital Assets & Fulfillment

Configure what the customer receives

{selectedGallery.map((item) => (
{item.mime_type.startsWith('image/') ? ( ) : ( )}

{item.file_name}

{item.mime_type.split('/')[1]} • {Math.round(item.file_size / 1024)} KB
))} {selectedGallery.length === 0 && (
{ setPickerType('gallery'); setPickerOpen(true); }} className="py-12 cursor-pointer text-center border-2 border-dashed border-primary/20 rounded-[2rem] bg-white hover:bg-primary/5 hover:border-primary/40 transition-all group" >

No deliverables attached yet

Click to upload or select the files you are selling

)}
setData('digital_file_path', e.target.value)} className="w-full rounded-xl border border-[#E8E6DF] bg-white px-5 py-3 text-[13px] text-ink outline-none focus:border-primary/50" placeholder="e.g. protected/products/playbook.pdf" />
setData('download_limit', parseInt(e.target.value))} className="w-full rounded-xl border border-[#E8E6DF] bg-white px-5 py-3 text-[13px] text-ink outline-none focus:border-primary/50" />
setData('expiry_days', parseInt(e.target.value))} className="w-full rounded-xl border border-[#E8E6DF] bg-white px-5 py-3 text-[13px] text-ink outline-none focus:border-primary/50" />
)} {/* Basic Info */}
setData('name', e.target.value)} className="w-full rounded-xl border border-[#E8E6DF] bg-white px-5 py-3.5 text-[15px] text-ink outline-none focus:border-primary/50 transition-all placeholder:text-[#C0BDBA]" placeholder="e.g. Digital Strategy Playbook" /> {errors.name &&

{errors.name}

}