import { Card } from "@/components/ui/card"; import { Calendar as CalendarIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { useState } from "react"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { toast } from "sonner"; const PublicCalendar = () => { const [selectedSlot, setSelectedSlot] = useState<{ day: number; time: number; timeLabel: string; dayLabel: string } | null>(null); const [formData, setFormData] = useState({ name: "", email: "", phone: "", spots: "1", species: "", }); const currentMonth = new Date().getMonth(); const splitMonths = [3, 4, 5, 9, 10]; const isSplitMonth = splitMonths.includes(currentMonth); const maxCapacity = 6; const times = isSplitMonth ? ["Morning Trip (6:00 AM)", "Afternoon Trip (1:00 PM)"] : ["Full Day Trip (6:00 AM)"]; const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; const bookings = [ { day: 1, time: 0, spots: 2, isPrivate: false }, { day: 2, time: 1, spots: 6, isPrivate: true }, { day: 4, time: 0, spots: 4, isPrivate: false }, { day: 6, time: 0, spots: 1, isPrivate: false }, ]; const handleSlotClick = (dayIdx: number, timeIdx: number) => { const booking = bookings.find((b) => b.day === dayIdx && b.time === timeIdx); if (booking && (booking.isPrivate || booking.spots === maxCapacity)) { return; // Slot is full } setSelectedSlot({ day: dayIdx, time: timeIdx, timeLabel: times[timeIdx], dayLabel: days[dayIdx] }); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); toast.success("Booking request submitted! We'll contact you shortly to confirm."); setSelectedSlot(null); setFormData({ name: "", email: "", phone: "", spots: "1", species: "" }); }; return (

Available Fishing Charters

{/* Header */}
Time
{days.map((day) => (
{day}
))}
{/* Time slots */} {times.map((time, timeIdx) => (
{time}
{days.map((_, dayIdx) => { const booking = bookings.find((b) => b.day === dayIdx && b.time === timeIdx); const remainingSpots = booking ? maxCapacity - booking.spots : maxCapacity; const isFull = booking && (booking.isPrivate || booking.spots === maxCapacity); return (
handleSlotClick(dayIdx, timeIdx)} className={cn( "p-3 rounded-lg border transition-all min-h-[60px] flex items-center justify-center cursor-pointer", isFull ? "bg-gradient-to-br from-destructive/10 to-destructive/20 border-destructive/30 cursor-not-allowed" : booking ? "bg-gradient-to-br from-primary/10 to-secondary/10 border-primary/30 hover:border-primary/50 hover:shadow-lg" : "bg-muted/30 border-border/50 hover:bg-muted/50 hover:shadow-lg hover:border-primary/40" )} >
{isFull ? ( <>

Fully Booked

Not available

) : booking ? ( <>

{remainingSpots} spots left

Click to book

) : ( <>

Available

{maxCapacity} spots

)}
); })}
))}

Click any available slot to book your charter fishing trip

{/* Booking Dialog */} setSelectedSlot(null)}> Book Your Fishing Charter {selectedSlot && `${selectedSlot.dayLabel} - ${selectedSlot.timeLabel}`}
setFormData({ ...formData, name: e.target.value })} placeholder="John Smith" />
setFormData({ ...formData, email: e.target.value })} placeholder="john@example.com" />
setFormData({ ...formData, phone: e.target.value })} placeholder="(555) 123-4567" />
); }; export default PublicCalendar;
top of page
bottom of page