import InputError from '@/components/input-error'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import AuthenticatedLayout from '@/layouts/AuthenticatedLayout'; import { PageProps } from '@/types'; import { Head, useForm } from '@inertiajs/react'; import { PlusCircle, Trash2 } from 'lucide-react'; import { useState } from 'react'; interface ServicePhoto { id: number; serviceId: number; image: string; created_at: string; updated_at: string; } interface Service { id: number; title: string; slug: string; description: string; image: string; status: string; category_id: number; } export default function ServicePhotosIndex({ auth, service, servicePhotos }: PageProps<{ service: Service; servicePhotos: ServicePhoto[] }>) { const { data, setData, post, processing, errors, reset } = useForm({ images: [] as File[], }); const [imagePreviewUrls, setImagePreviewUrls] = useState([]); const handleImageChange = (e: React.ChangeEvent) => { const files = Array.from(e.target.files || []); setData('images', files); if (files.length > 0) { const urls: string[] = []; files.forEach((file) => { const reader = new FileReader(); reader.onloadend = () => { urls.push(reader.result as string); if (urls.length === files.length) { setImagePreviewUrls(urls); } }; reader.readAsDataURL(file); }); } else { setImagePreviewUrls([]); } }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); post(route('admin.services.photos.store', service.id), { onSuccess: () => { reset(); setImagePreviewUrls([]); }, }); }; const handleDelete = (photoId: number) => { if (confirm('Are you sure you want to delete this photo?')) { router.delete(route('admin.services.photos.destroy', { service: service.id, photo: photoId })); } }; return ( Photos for Service: {service.title}} >

Upload New Photo

Existing Photos

{servicePhotos.length > 0 ? (

{servicePhotos.map((photo) => (

))}

) : (

No photos found for this service.

)}

); }