import React, { useState } from 'react'; import { Head, useForm } from '@inertiajs/react'; import EmployerLayout from '../../Layouts/EmployerLayout'; 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 { 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("🛡️ Profile updated successfully", { description: "Household sponsor preferences and vetted credentials synchronized successfully." }); setTimeout(() => setSaved(false), 3000); }, onError: (errs) => { toast.error("Failed to update profile", { description: Object.values(errs)[0] || "Please check the form fields." }); } }); }; const tabs = [ { id: 'personal', label: 'Personal', icon: User }, { id: 'security', label: 'Security & Password', icon: Lock }, { id: 'billing', label: 'Billing & Receipts', icon: CreditCard }, { id: 'notifications', label: 'Notifications Hub', icon: Bell }, ]; const pastHires = [ { id: 1, name: 'Rhea Joy', category: 'Childcare / Nanny', nationality: 'Philippines', date: 'Jan 15, 2025', status: 'Active Contract' }, { id: 2, name: 'Priya Sharma', category: 'Housekeeper', nationality: 'India', date: 'Jul 10, 2024', status: 'Completed / Expiry' } ]; return (
{/* Left Side: Navigation Tabs */} {/* Right Side: Content Area */}
{/* Header Info Card */}
{profile.name?.charAt(0)}

{profile.name}

{profile.company_name}

Emirates ID Vetted Direct Sponsor Portal
{/* Tab Specific Content */}
{activeTab === 'personal' && (

Personal details

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 */}

Emirates ID Verification

Regulatory compliance credentials

{employerProfile?.verification_status === 'approved' && employerProfile?.emirates_id_front && employerProfile?.emirates_id_back ? (

Emirates ID Verified

Vetted under MOHRE Guidelines

Your Emirates ID has been verified successfully. Your account is active for direct hiring.

) : employerProfile?.verification_status === 'pending' && (employerProfile?.emirates_id_front || employerProfile?.emirates_id_back) ? (

Verification Pending Audit

Audit Queue

Your Emirates ID document uploads are currently under review. Audits are typically completed within 24 hours.

) : (

Emirates ID Verification Required

Action Needed

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) && (

Uploaded Credentials Scans

{employerProfile?.emirates_id_front && (
ID
Emirates ID (Front)
{employerProfile.emirates_id_front.split('/').pop()}
View Scan
)} {employerProfile?.emirates_id_back && (
ID
Emirates ID (Back)
{employerProfile.emirates_id_back.split('/').pop()}
View Scan
)}
)}
)} {activeTab === 'security' && (

Security & Password

Keep your sponsor account secure

setProfile({ ...profile, 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" />
setProfile({ ...profile, 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" />
setProfile({ ...profile, 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' && (

Billing & Receipts

Manage active sponsorship access

{/* Current Plan Card */}
Current Plan

Premium Employer

Active
Next Payment
Jun 15, 2026
199 AED/mo
{/* Transaction History */}

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((t, i) => ( ))}
Date Description Amount Receipt
{t.date} {t.desc} {t.amount}
)} {activeTab === 'notifications' && (

Notification Settings Hub

Choose how you want to receive alerts

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

Some updates may require Emirates ID re-verification.

)}
); }