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: setProfile, post, processing, errors } = useForm({ name: employerProfile?.name || 'Fatima Al Mansoori', company_name: employerProfile?.company_name || 'Household Sponsor Account', email: employerProfile?.email || 'fatima.sponsor@marketplace.ae', phone: employerProfile?.phone || '+971 50 111 2222', language: employerProfile?.language || 'English', nationality: employerProfile?.nationality || 'UAE National', family_size: employerProfile?.family_size || '4 Members', accommodation: employerProfile?.accommodation || 'Villa', district: employerProfile?.district || 'Dubai Marina', 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(); setSaved(true); toast.success("🛡️ Profile updated successfully", { description: "Household sponsor preferences and vetted credentials synchronized successfully." }); setTimeout(() => setSaved(false), 3000); }; const tabs = [ { id: 'personal', label: 'Personal & Household', icon: User }, { id: 'company', label: 'Verification & History', icon: ShieldCheck }, { 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 & Household details

Manage sponsor bio and residence style

setProfile({ ...profile, 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" />
setProfile({ ...profile, 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" />
setProfile({ ...profile, 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" />
setProfile({ ...profile, 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" />
)} {activeTab === 'company' && (
{/* Emirates ID Verification */}

Emirates ID Verification

Regulatory compliance credentials

Emirates ID Vetted Status

Reference: EID-9182-XJ

Your Emirates ID is active and fully validated under Ministry of Human Resources (MOHRE) guidelines. Direct hiring is legally enabled.

Verified on Jan 15, 2026
{/* Hiring History Logs */}

Sponsorship Hiring History Logs

{pastHires.map((hire) => (
{hire.name} ({hire.nationality})
{hire.category} • Hired: {hire.date}
{hire.status}
))}
)} {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.

)}
); }