import React, { useState, useEffect } from 'react'; import { Head, useForm } from '@inertiajs/react'; import EmployerLayout from '../../Layouts/EmployerLayout'; 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 [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( '💖 COMMUNITY CHARITY EVENT POSTED!', '🔔 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 */}
Dubai Community Support Drives

Free Medical Checks, Food Drives & Support Services

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" />
Post Charity Event Broadcast a support program, medical camp, or distribution drive to the worker community.
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="e.g. Free Dental checkup by Emirates Charity" />
{filteredAnnouncements.length === 0 ? (

No announcements

You haven't posted any announcements yet

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

{ann.title}

{ann.content}

{details && (
Provided Packages
{details.provided_items}
Event Timing
{details.event_date} • {details.event_time}
Event Location Address
{details.location_details}
{details.location_pin && ( View Map Location Pin )}
)}
); }) )}
); }