import React, { useState } from 'react'; import { Head, useForm, Link } from '@inertiajs/react'; import EmployerLayout from '../../Layouts/EmployerLayout'; import { useTranslation } from '../../lib/LanguageContext'; import { User, Mail, Phone, MapPin, Home, Camera, Save, XCircle, ArrowLeft, Compass } from 'lucide-react'; import { toast } from 'sonner'; export default function ProfileEdit({ employerProfile }) { const { t } = useTranslation(); const { data, setData, post, processing, errors } = useForm({ name: employerProfile?.name || '', email: employerProfile?.email || '', phone: employerProfile?.phone || '', address: employerProfile?.address || '', property_type: employerProfile?.property_type || '', profile_photo: null, }); const [photoPreview, setPhotoPreview] = useState(employerProfile?.profile_photo_url || null); const handlePhotoChange = (e) => { const file = e.target.files[0]; if (file) { setData('profile_photo', file); setPhotoPreview(URL.createObjectURL(file)); } }; const handleSubmit = (e) => { e.preventDefault(); post('/employer/profile/update', { preserveScroll: true, onSuccess: () => { toast.success(t('profile_updated_successfully', 'Profile updated successfully!')); }, onError: (errs) => { toast.error(t('profile_update_failed', 'Failed to update profile'), { description: Object.values(errs)[0] || t('check_form_fields', 'Please check the form fields.') }); } }); }; return (
{/* Back Link */}
{t('back_to_profile', 'Back to Profile')}
{/* Edit Form Card */}
{/* Header Banner Accent */}
{/* Profile Photo Floating Container */}
{photoPreview ? ( Preview ) : (
{data.name?.charAt(0) || 'U'}
)}

{t('profile_avatar', 'Profile Photo')}

{t('avatar_rules', 'Upload high-resolution avatar. Max 10MB.')}

{errors.profile_photo && (

{errors.profile_photo}

)}
{/* Fields Grid */}
{/* Full Name */}
setData('name', e.target.value)} className="w-full pl-12 pr-4 py-3 bg-slate-50 border border-slate-150 rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 focus:bg-white transition-all outline-none" required />
{errors.name &&

{errors.name}

}
{/* Email */}
setData('email', e.target.value)} className="w-full pl-12 pr-4 py-3 bg-slate-50 border border-slate-150 rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 focus:bg-white transition-all outline-none" required />
{errors.email &&

{errors.email}

}
{/* Phone */}
setData('phone', e.target.value)} className="w-full pl-12 pr-4 py-3 bg-slate-50 border border-slate-150 rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 focus:bg-white transition-all outline-none" required />
{errors.phone &&

{errors.phone}

}
{/* Property Type */}
{errors.property_type &&

{errors.property_type}

}
{/* Address */}
setData('address', e.target.value)} className="w-full pl-12 pr-4 py-3 bg-slate-50 border border-slate-150 rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 focus:bg-white transition-all outline-none" />
{errors.address &&

{errors.address}

}
{/* Form Action Controls */}
{t('cancel', 'Cancel')}
); }