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 } from 'lucide-react'; export default function Profile({ employerProfile }) { const { data: profile, setData: setProfile, post, processing, errors } = useForm({ name: employerProfile?.name || '', company_name: employerProfile?.company_name || '', email: employerProfile?.email || '', phone: employerProfile?.phone || '', language: employerProfile?.language || 'English', notifications: employerProfile?.notifications ?? true, 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); setTimeout(() => setSaved(false), 3000); } }); }; const tabs = [ { id: 'personal', label: 'Personal Information', icon: User }, { id: 'company', label: 'Company & Verification', icon: Building2 }, { id: 'security', label: 'Security & Password', icon: Lock }, { id: 'billing', label: 'Billing & History', icon: CreditCard }, { id: 'notifications', label: 'Notification Settings', icon: Bell }, ]; return (
{/* Left Side: Navigation Tabs */} {/* Right Side: Content Area */}
{/* Header Info Card */}
{profile.name?.charAt(0)}

{profile.name}

{profile.company_name}

Emirates ID Vetted Verified Employer
{/* Tab Specific Content */}
{activeTab === 'personal' && (

Personal Information

Manage your basic account details

setProfile({ ...profile, name: e.target.value })} className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 transition-all" />
{errors.name &&

{errors.name}

}
setProfile({ ...profile, email: e.target.value })} className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 transition-all" />
{errors.email &&

{errors.email}

}
setProfile({ ...profile, phone: e.target.value })} className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 transition-all" />
{errors.phone &&

{errors.phone}

}
{errors.language &&

{errors.language}

}
)} {activeTab === 'company' && (

Company & Verification

Manage your professional credentials

setProfile({ ...profile, company_name: e.target.value })} className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 transition-all" />
{errors.company_name &&

{errors.company_name}

}

Emirates ID Verification

Reference: EID-9182-XJ

Your Emirates ID has been successfully vetted and matched with our internal records. This allows you to initiate direct contact with all verified workers.

Verified on Jan 15, 2026
)} {activeTab === 'security' && (

Security & Password

Keep your account protected

setProfile({ ...profile, current_password: e.target.value })} className="w-full px-4 py-3 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 transition-all" /> {errors.current_password &&

{errors.current_password}

}
setProfile({ ...profile, new_password: e.target.value })} className="w-full px-4 py-3 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 transition-all" /> {errors.new_password &&

{errors.new_password}

}
setProfile({ ...profile, new_password_confirmation: e.target.value })} className="w-full px-4 py-3 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 transition-all" /> {errors.new_password_confirmation &&

{errors.new_password_confirmation}

}
)} {activeTab === 'billing' && (

Billing & History

Manage your subscriptions and payments

{/* Current Plan Card */}
Current Plan

Premium Employer

Active
Next Payment
Dec 15, 2026
499 AED/mo
{/* Transaction History */}

Recent Transactions

{[ { date: 'Nov 15, 2026', desc: 'Premium Monthly Subscription', amount: '499 AED' }, { date: 'Oct 15, 2026', desc: 'Premium Monthly Subscription', amount: '499 AED' } ].map((t, i) => ( ))}
Date Description Amount Receipt
{t.date} {t.desc} {t.amount}
)} {activeTab === 'notifications' && (

Notification Settings

Choose how you want to be notified

{[ { title: 'Email Notifications', desc: 'Receive daily updates and recruitment alerts via email.' }, { title: 'SMS Alerts', desc: 'Get instant text messages for direct message replies.' }, { title: 'Browser Notifications', desc: 'Real-time alerts while using the portal.' }, { title: 'Marketing Updates', desc: 'Receive news about new features and promotions.' } ].map((n, i) => (
{n.title}
{n.desc}
))}
)}
{saved ? (
Changes saved successfully
) : (

Some updates may require additional verification before taking effect.

)}
); }