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, Plus } 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'),
});
const defaultValues = {
country: '',
status: 1,
};
export default function Create() {
const { errors, countries } = usePage().props;
// Transform countries object to options array
const countryOptions = countries
? Object.entries(countries).map(([code, data]: [string, any]) => ({
label: `${data.flag} ${data.name}`,
value: code,
}))
: [];
const handleSubmit = (formData: any) => {
console.log('🚀 ~ handleSubmit ~ formData:', formData);
// Handle file upload - extract first file from array if it exists
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
console.log('🚀 ~ Final payload to submit:', payload);
router.post(route('language.store'), payload, {
forceFormData: true,
onSuccess: () => {
console.log('✅ Language created successfully');
},
onError: (errors) => {
console.error('❌ Form submission errors:', errors);
},
});
};
return (
<>