import React, { useState, useEffect } from 'react'; import { Head, useForm } from '@inertiajs/react'; import EmployerLayout from '../../Layouts/EmployerLayout'; import { useTranslation } from '../../lib/LanguageContext'; import { Megaphone, Send, CheckCircle2, Users, Search, Calendar, Target, Filter, ChevronRight, MessageSquare, Info, Heart, MapPin, Clock, Sparkles, BellRing } from 'lucide-react'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from '@/components/ui/dialog'; export default function Announcements({ initialAnnouncements }) { const { t } = useTranslation(); const [isDialogOpen, setIsDialogOpen] = useState(false); const [searchTerm, setSearchTerm] = useState(''); const [toastMessage, setToastMessage] = useState(null); const [toastSub, setToastSub] = useState(null); const [announcements, setAnnouncements] = useState(initialAnnouncements || []); useEffect(() => { setAnnouncements(initialAnnouncements || []); }, [initialAnnouncements]); const { data: newAnnouncement, setData: setNewAnnouncement, post, processing, reset } = useForm({ title: '', content: '', audience: 'Charity', type: 'Charity', provided_items: '', event_date: '', event_time: '', location_details: '', location_pin: '' }); const showToast = (message, subMessage = null) => { setToastMessage(message); setToastSub(subMessage); setTimeout(() => { setToastMessage(null); setToastSub(null); }, 5000); }; const handleCreate = (e) => { e.preventDefault(); post('/employer/announcements/create', { preserveScroll: true, onSuccess: () => { reset(); setIsDialogOpen(false); showToast( t('community_charity_event_posted', 'COMMUNITY CHARITY EVENT POSTED!'), t('community_charity_event_posted_desc', 'Instant Push Notification sent to all workers in Dubai! Morning-of reminder notification scheduled successfully.') ); } }); }; const filteredAnnouncements = announcements.filter(ann => ann.title.toLowerCase().includes(searchTerm.toLowerCase()) || ann.content.toLowerCase().includes(searchTerm.toLowerCase()) ); return ( {toastMessage && (
{toastMessage}
{toastSub &&

{toastSub}

}
)}
{/* Community Drive & Charity Banner */}
{t('dubai_community_support_drives', 'Dubai Community Support Drives')}

{t('free_medical_checks_title', 'Free Medical Checks, Food Drives & Support Services')}

{t('free_medical_checks_desc', 'Organizing a support program? Share community campaigns directly. The platform will automatically push an instant pop-up notification to workers, followed by a morning-of event reminder to keep attendance strong.')}

setSearchTerm(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 outline-none" />
{t('post_charity_event', 'Post Charity Event')} {t('broadcast_support_program_desc', 'Broadcast a support program, medical camp, or distribution drive to the worker community.')}
{t('charity_drive_metadata', 'Charity Drive Metadata (Dubai Support)')}
setNewAnnouncement({ ...newAnnouncement, event_date: e.target.value })} className="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold focus:ring-2 focus:ring-rose-100 outline-none" />
setNewAnnouncement({ ...newAnnouncement, event_time: e.target.value })} className="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold focus:ring-2 focus:ring-rose-100 outline-none" />
setNewAnnouncement({ ...newAnnouncement, provided_items: e.target.value })} className="w-full px-3.5 py-2.5 bg-white border border-slate-200 rounded-xl text-xs font-bold focus:ring-2 focus:ring-rose-100 outline-none" />
setNewAnnouncement({ ...newAnnouncement, location_details: e.target.value })} className="w-full px-3.5 py-2.5 bg-white border border-slate-200 rounded-xl text-xs font-bold focus:ring-2 focus:ring-rose-100 outline-none mb-2" /> setNewAnnouncement({ ...newAnnouncement, location_pin: e.target.value })} className="w-full px-3.5 py-2.5 bg-white border border-slate-200 rounded-xl text-xs font-bold focus:ring-2 focus:ring-rose-100 outline-none" />
setNewAnnouncement({ ...newAnnouncement, title: e.target.value })} className="w-full px-5 py-3.5 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none" placeholder={t('title_placeholder', 'e.g. Free Dental checkup by Emirates Charity')} />
{filteredAnnouncements.length === 0 ? (

{t('no_announcements_title', 'No Announcements')}

{t('no_announcements_desc', "You haven't posted any announcements yet")}

) : ( filteredAnnouncements.map((ann) => { const details = ann.charityDetails; return (
{t('community_charity_drive', 'COMMUNITY CHARITY DRIVE')}
{ann.created_at}
{t('push_reminder_scheduled', 'Push & Reminder Scheduled')}

{ann.title}

{ann.content}

{details && (
{t('provided_packages', 'Provided Packages')}
{details.provided_items}
{t('event_timing', 'Event Timing')}
{details.event_date} • {details.event_time}
{t('event_location_address', 'Event Location Address')}
{details.location_details}
{details.location_pin && ( {t('view_map_location_pin', 'View Map Location Pin')} )}
)}
); }) )}
); }