import React, { useState } from 'react'; import { Head } 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 [profile, setProfile] = useState(employerProfile || { name: 'John Doe', company_name: 'Al Mansoor Household', email: 'employer@example.com', phone: '+971 50 123 4567', language: 'English', notifications: true }); const [activeTab, setActiveTab] = useState('personal'); const [saved, setSaved] = useState(false); const handleSave = (e) => { e.preventDefault(); 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" />
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" />
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" />
)} {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" />

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

)} {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.

)}
); }