import { Form, Head, Link } from '@inertiajs/react'; import type { ChangeEvent } from 'react'; import { useState } from 'react'; import TransferRouteController from '@/actions/App/Http/Controllers/Admin/TransferRouteController'; import Heading from '@/components/heading'; import InputError from '@/components/input-error'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Spinner } from '@/components/ui/spinner'; import { dashboard } from '@/routes/admin'; import { index } from '@/routes/admin/routes'; type EditableRoute = { id: number; origin: string; destination: string; duration_minutes: number; distance_km: string; price: number; image: string | null; is_popular: boolean; is_high_demand: boolean; is_active: boolean; sort_order: number; }; function Toggle({ name, label, description, defaultChecked, }: { name: string; label: string; description: string; defaultChecked: boolean; }) { return ( ); } export default function RouteForm({ route }: { route: EditableRoute | null }) { const [preview, setPreview] = useState(route?.image ?? null); const action = route ? TransferRouteController.update.form(route.id) : TransferRouteController.store.form(); const handleImage = (event: ChangeEvent) => { const file = event.target.files?.[0]; setPreview(file ? URL.createObjectURL(file) : (route?.image ?? null)); }; return ( <>
{({ processing, errors }) => ( <>
{preview && ( )}

JPG, PNG or WebP, up to 4 MB. {route && ' Leave empty to keep the current image.'}

)}
); } RouteForm.layout = { breadcrumbs: [ { title: 'Admin', href: dashboard() }, { title: 'Routes', href: index() }, ], };