import React, { useState } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import EmployerLayout from '../../Layouts/EmployerLayout'; import { useTranslation } from '../../lib/LanguageContext'; import { User, ShieldCheck, Mail, Phone, Globe, MapPin, Home, Edit3, Calendar, Briefcase, Building, FileText, MessageSquare, AlertCircle, CheckCircle2, Lock, ExternalLink, Compass, FileSpreadsheet, Eye, Bell, Camera, Save, XCircle } from 'lucide-react'; import { toast } from 'sonner'; import { compressImage } from '../../lib/utils'; export default function Profile({ employerProfile }) { const { t } = useTranslation(); const [showConfirmPopup, setShowConfirmPopup] = useState(false); const handleEditClick = () => { setShowConfirmPopup(true); }; const handleConfirmEdit = () => { setShowConfirmPopup(false); router.get('/employer/profile/edit'); }; const handleCancelEdit = () => { setShowConfirmPopup(false); }; const [showRenewModal, setShowRenewModal] = useState(false); const [frontFile, setFrontFile] = useState(null); const [backFile, setBackFile] = useState(null); const [frontPreview, setFrontPreview] = useState(null); const [backPreview, setBackPreview] = useState(null); const [isSubmitting, setIsSubmitting] = useState(false); const expiryDateStr = employerProfile?.emirates_id?.expiry_date; const isExpired = expiryDateStr ? new Date(expiryDateStr) <= new Date() : false; const handleRenewalSubmit = (e) => { e.preventDefault(); if (!frontFile || !backFile) { toast.error(t('upload_both_sides', 'Please upload both front and back sides of your Emirates ID.')); return; } setIsSubmitting(true); router.post('/employer/profile/update', { name: employerProfile.name, email: employerProfile.email, phone: employerProfile.phone, emirates_id_front: frontFile, emirates_id_back: backFile, }, { forceFormData: true, onSuccess: () => { toast.success(t('document_renewed', 'Emirates ID renewed successfully!')); setShowRenewModal(false); setFrontFile(null); setBackFile(null); setFrontPreview(null); setBackPreview(null); setIsSubmitting(false); }, onError: (errs) => { toast.error(Object.values(errs)[0] || t('renewal_failed', 'Failed to renew Emirates ID.')); setIsSubmitting(false); } }); }; const toggleNotification = (type, currentVal) => { router.post('/employer/profile/update', { name: employerProfile.name, email: employerProfile.email, phone: employerProfile.phone, email_notifications: type === 'email' ? !currentVal : employerProfile.email_notifications, push_notifications: type === 'push' ? !currentVal : employerProfile.push_notifications, }, { preserveScroll: true, onSuccess: () => { toast.success(t('preferences_updated', 'Preferences updated successfully')); } }); }; const profilePhoto = employerProfile?.profile_photo_url; return (
{isExpired && (

Emirates ID Expired

Your Emirates ID card expired on {employerProfile?.emirates_id?.expiry_date}. Please upload a renewed document to maintain compliance and system access.

)} {/* Premium Banner & Cover Section */}
{/* Artistic Enterprise Gradient Header Cover */}
{/* Profile Header Details Row */}
{/* Profile Image with Glow Ring */}
{profilePhoto ? ( {employerProfile?.name} ) : (
{employerProfile?.name?.charAt(0)}
)}

{employerProfile?.name}

{employerProfile?.email}

{/* Edit Button */}
{/* Grid Layout: Left Details Column & Right Digital Card Column */}
{/* Left Column: General & Invoicing Info (7/12 width) */}
{/* Account & Contact Settings */}

{t('account_contact_info', 'Account & Contact Information')}

{t('manage_contact_desc', 'Contact and notification channels')}

{t('full_name', 'Full Name')}
{employerProfile?.name}
{t('email', 'Email Address')}
{employerProfile?.email}
{t('phone', 'Phone Number')}
{employerProfile?.phone}
{t('property_type', 'Property Type')}
{employerProfile?.property_type || t('not_specified', 'Not Specified')}
{t('address', 'Address')}
{employerProfile?.address || t('not_specified', 'Not Specified')}
{/* Notification Preferences & Integration Card */}

{t('notification_preferences', 'Notification Preferences')}

{/* Preferences Toggles */}
{/* Email Alerts Row */}

{t('email_alerts', 'Email Alerts')}

{t('email_alerts_sub', 'Invoices, updates & announcements')}

{/* Push Notification Alerts Row */}

{t('push_alerts', 'Push Notifications')}

{t('push_alerts_sub', 'Live updates & mobile alerts')}

{/* Right Column: Digital Emirates ID & Card Visual (5/12 width) */}
{/* Interactive Digital Emirates ID Widget */}

{t('identity_card', 'Emirates ID Details')}

{t('vetted_details_badge', 'Vetted MOHRE identity credentials')}

{/* Digital Emirates ID Visual */}
{/* Sparkle Background Art */}
{isExpired && (
Expired
)} {/* Top Header */}
United Arab Emirates
Resident Identity Card
{/* Card Number & Name */}
{employerProfile?.emirates_id?.emirates_id_number}
Name
{employerProfile?.emirates_id?.name}
{/* Bottom Info Row */}
Nationality {employerProfile?.emirates_id?.nationality}
Expiry Date {employerProfile?.emirates_id?.expiry_date}
Occupation {employerProfile?.emirates_id?.occupation}
{/* Renew Button below ID Card if expired */} {isExpired && ( )} {/* Detailed Metadata Fields */}
{t('issue_place', 'Issue Place')} {employerProfile?.emirates_id?.issue_place}
{t('issue_date', 'Issue Date')} {employerProfile?.emirates_id?.issue_date}
{t('date_of_birth', 'Date of Birth')} {employerProfile?.emirates_id?.date_of_birth}
{t('employer_agency', 'Sponsor')} {employerProfile?.emirates_id?.employer}
{/* Confirmation Dialog Popup Modal */} {showConfirmPopup && (

{t('edit_profile_confirm_title', 'Edit Profile')}

{t('edit_profile_confirm_body', 'Are you sure you want to edit your profile details?')}

)} {/* Renew Emirates ID Modal */} {showRenewModal && (
{/* Modal Header */}

Renew Emirates ID

Upload both sides of your new document

{/* Modal Form */}
{/* Front Side Upload */}
{frontPreview ? ( <> Front ID Preview
Change Photo
) : (
Upload Front Side
)} { const file = e.target.files[0]; if (file) { try { const compressed = await compressImage(file); setFrontFile(compressed); setFrontPreview(URL.createObjectURL(compressed)); } catch (err) { setFrontFile(file); setFrontPreview(URL.createObjectURL(file)); } } }} className="absolute inset-0 opacity-0 cursor-pointer" required />
{/* Back Side Upload */}
{backPreview ? ( <> Back ID Preview
Change Photo
) : (
Upload Back Side
)} { const file = e.target.files[0]; if (file) { try { const compressed = await compressImage(file); setBackFile(compressed); setBackPreview(URL.createObjectURL(compressed)); } catch (err) { setBackFile(file); setBackPreview(URL.createObjectURL(file)); } } }} className="absolute inset-0 opacity-0 cursor-pointer" required />
{/* Actions */}
)} ); }