import Form from '@admin/components/form/Form'; import FormField from '@admin/components/form/FormField'; import { Button } from '@admin/components/ui/button'; import { Card } from '@admin/components/ui/card'; import AppLayout from '@admin/layouts/app-layout'; import SettingsLayout from '@admin/layouts/settings/layout'; import { yupResolver } from '@hookform/resolvers/yup'; import { Head, router, usePage } from '@inertiajs/react'; import { ArrowLeft, ChevronRight, Save } from 'lucide-react'; import * as yup from 'yup'; // Validation schema const schema = yup.object({ country: yup.string().required('Country is required'), status: yup.number().oneOf([1, 0], 'Invalid status').required('Status is required'), }); interface Props { language: { id: number; name: string; code: string; icon: string | null; status: number; created_at: string; updated_at: string; }; } export default function Edit({ language }: Props) { const { errors, countries } = usePage().props; console.log(countries) console.log('🔍 Language data:', language); console.log('🔍 Countries:', countries); // Transform countries object to options array const countryOptions = countries ? Object.entries(countries).map(([code, data]: [string, any]) => ({ label: `${data.flag} ${data.name}`, value: code, })) : []; console.log('🔍 Country Options:', countryOptions); const defaultValues = { country: language.code || '', // Use existing language code as default country status: language.status, }; console.log('🔍 Default Values:', defaultValues); const handleSubmit = (formData: any) => { console.log('🚀 ~ Edit handleSubmit ~ formData:', formData); const payload: any = { ...formData }; // Extract country code, name, and flag from selection if (payload.country && countries) { const selectedCountry = countries[payload.country]; payload.name = selectedCountry.name; // Country name becomes language name payload.code = payload.country; // Country code becomes language code payload.icon = selectedCountry.flag; // Flag emoji becomes icon delete payload.country; // Remove temporary country field } // Icon is now just the flag emoji string, no need for file handling // Add _method for Laravel to recognize this as PUT payload._method = 'PUT'; console.log('🚀 ~ Final payload to submit:', payload); router.post(route('language.update', language.id), payload, { forceFormData: true, onSuccess: () => { console.log('✅ Language updated successfully'); }, onError: (errors) => { console.error('❌ Form submission errors:', errors); }, }); }; return ( <>
{/* Header Section */}

Edit Language

Update language information: {language.name}

Language Edit
{/* Main content */}
); } Edit.layout = (page: React.ReactNode) => ( {page} );