import React, { useState } from 'react'; import { Head, useForm } from '@inertiajs/react'; import EmployerLayout from '../../Layouts/EmployerLayout'; import { useTranslation } from '../../lib/LanguageContext'; import { User, CheckCircle2, Save, Building2, Lock, Bell, ShieldCheck, Mail, Phone, Globe, CreditCard, ChevronRight, Camera, Home, Users, MapPin, History, Sparkles } from 'lucide-react'; import { toast } from 'sonner'; export default function Profile({ employerProfile }) { const { t } = useTranslation(); const { data: profile, setData, post, processing, errors } = useForm({ name: employerProfile?.name || '', company_name: employerProfile?.company_name || '', email: employerProfile?.email || '', phone: employerProfile?.phone || '', language: employerProfile?.language || 'English', nationality: employerProfile?.nationality || '', family_size: employerProfile?.family_size || '', accommodation: employerProfile?.accommodation || '', district: employerProfile?.district || '', notifications: employerProfile?.notifications ?? true, emirates_id_front: null, emirates_id_back: null, current_password: '', new_password: '', new_password_confirmation: '', }); const [activeTab, setActiveTab] = useState('personal'); const [saved, setSaved] = useState(false); const handleSave = (e) => { e.preventDefault(); post('/employer/profile/update', { preserveScroll: true, onSuccess: () => { setSaved(true); toast.success(`🛡️ ${t('profile_updated_successfully', 'Profile updated successfully')}`, { description: t('profile_updated_successfully_desc', 'Household sponsor preferences and vetted credentials synchronized successfully.') }); setTimeout(() => setSaved(false), 3000); }, 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.') }); } }); }; const tabs = [ { id: 'personal', label: t('tab_personal', 'Personal'), icon: User }, { id: 'security', label: t('tab_security', 'Security & Password'), icon: Lock }, { id: 'billing', label: t('tab_billing', 'Billing & Receipts'), icon: CreditCard }, { id: 'notifications', label: t('tab_notifications', 'Notifications Hub'), icon: Bell }, ]; return (
{/* Left Side: Navigation Tabs */} {/* Right Side: Content Area */}
{/* Header Info Card */}
{profile.name?.charAt(0)}

{profile.name}

{profile.company_name}

{t('emirates_id_vetted', 'Emirates ID Vetted')} {t('direct_sponsor_portal', 'Direct Sponsor Portal')}
{/* Tab Specific Content */}
{activeTab === 'personal' && (

{t('personal_details_header', 'Personal details')}

{t('personal_details_desc', 'Manage sponsor bio and credentials')}

setData('name', e.target.value)} className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none" />
setData('email', e.target.value)} className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none" />
setData('phone', e.target.value)} className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none" />
setData('district', e.target.value)} className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none" />
{/* Emirates ID Verification */}

{t('emirates_id_verification_header', 'Emirates ID Verification')}

{t('emirates_id_verification_desc', 'Regulatory compliance credentials')}

{employerProfile?.verification_status === 'approved' ? (

{t('emirates_id_verified_status', 'Emirates ID Verified')}

{t('mohre_guidelines', 'Vetted under MOHRE Guidelines')}

{t('emirates_id_verified_desc', 'Your Emirates ID has been verified successfully. Your account is active for direct hiring.')}

{/* Extracted Details */} {employerProfile?.emirates_id_number && (
{t('extracted_eid_number', 'Extracted Emirates ID Number')}
{employerProfile.emirates_id_number}
{t('extracted_eid_expiry', 'Extracted Expiry Date')}
{employerProfile.emirates_id_expiry}
)} {/* Security Purge Notice */}
{t('pdpl_purge_notice', 'Security Audit: Physical identity documents were purged from our databases immediately after verification to maintain PDPL compliance.')}
) : employerProfile?.verification_status === 'pending' && (employerProfile?.emirates_id_front || employerProfile?.emirates_id_back || employerProfile?.emirates_id_number) ? (

{t('verification_pending_status', 'Verification Pending Audit')}

{t('audit_queue', 'Audit Queue')}

{t('verification_pending_desc', 'Your Emirates ID document uploads are currently under review. Audits are typically completed within 24 hours.')}

) : (

{t('verification_required_status', 'Emirates ID Verification Required')}

{t('action_needed', 'Action Needed')}

{t('verification_required_desc', 'Please upload high-resolution color scans of your Emirates ID to verify your identity and activate full hiring features.')}

)} {/* File Upload Fields */}
setData('emirates_id_front', e.target.files[0])} className="w-full text-xs font-semibold text-slate-500 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-black file:bg-[#185FA5]/10 file:text-[#185FA5] hover:file:bg-[#185FA5]/20 cursor-pointer" /> {errors.emirates_id_front &&

{errors.emirates_id_front}

}
setData('emirates_id_back', e.target.files[0])} className="w-full text-xs font-semibold text-slate-500 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-black file:bg-[#185FA5]/10 file:text-[#185FA5] hover:file:bg-[#185FA5]/20 cursor-pointer" /> {errors.emirates_id_back &&

{errors.emirates_id_back}

}
{/* Uploaded Documents Details */} {(employerProfile?.emirates_id_front || employerProfile?.emirates_id_back || employerProfile?.emirates_id_number) && (

{t('uploaded_credentials_scans', 'Uploaded Credentials Status')}

SEC
{t('pdpl_secure_storage', 'PDPL Secure Storage')}
Physical image files purged from storage
Secured
)}
)} {activeTab === 'security' && (

{t('security_password_header', 'Security & Password')}

{t('security_password_desc', 'Keep your sponsor account secure')}

setData('current_password', e.target.value)} className="w-full px-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none" />
setData('new_password', e.target.value)} className="w-full px-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none" />
setData('new_password_confirmation', e.target.value)} className="w-full px-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none" />
)} {activeTab === 'billing' && (

{t('tab_billing', 'Billing & Receipts')}

{t('available_subscription_tiers_desc', 'Upgrade or cancel anytime. All contracts compliant with UAE Tadbeer MOHRE guides.')}

{/* Current Plan Card */}
{t('current_plan', 'Current Plan')}

Premium Employer

{t('active_status', 'Active')}
{t('next_payment', 'Next Payment')}
Jun 15, 2026
199 AED/mo
{/* Transaction History */}

{t('recent_transactions', 'Recent Transactions')}

{[ { date: 'May 01, 2026', desc: 'Premium Monthly Subscription', amount: '199 AED' }, { date: 'Apr 01, 2026', desc: 'Premium Monthly Subscription', amount: '199 AED' } ].map((transaction, i) => ( ))}
{t('date_header', 'Date')} {t('description_header', 'Description')} {t('amount_header', 'Amount')} {t('receipt_header', 'Receipt')}
{transaction.date} {transaction.desc} {transaction.amount}
)} {activeTab === 'notifications' && (

{t('notification_settings_hub', 'Notification Settings Hub')}

{t('notification_settings_desc', 'Choose how you want to receive alerts')}

{[ { title: t('email_alerts', 'Email Alerts'), desc: t('email_alerts_desc', 'Receive vetted worker recommendations and visa updates.') }, { title: t('sms_alerts', 'SMS Instant Receipts'), desc: t('sms_alerts_desc', 'Get SMS notifications for interview schedules.') }, { title: t('push_alerts', 'Push Notifications'), desc: t('push_alerts_desc', 'Get desktop sound alerts for new direct messages.') } ].map((n, i) => (
{n.title}
{n.desc}
))}
)}
{saved ? (
{t('changes_saved', 'Changes saved successfully')}
) : (

{t('emirates_id_reverification_notice', 'Some updates may require Emirates ID re-verification.')}

)}
); }