Refactor EventForm into sections and add thank you message field

frontend/src/components/EventForm.tsx

@@ -12,6 +12,7 @@ import {
   styled,
   Checkbox,
   FormControlLabel,
+  Divider, // Added Divider for visual separation
 } from '@mui/material';
 import WallpaperIcon from '@mui/icons-material/Wallpaper';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -48,6 +49,7 @@ interface FormData {
   max_guests_per_rsvp: number;
   email_notifications_enabled: boolean;
   email_recipients: string;
+  thank_you_message: string; // Added thank you message field
 }
 
 const EventForm: React.FC = () => {
@@ -62,6 +64,7 @@ const EventForm: React.FC = () => {
     max_guests_per_rsvp: 0,
     email_notifications_enabled: false,
     email_recipients: '',
+    thank_you_message: '', // Added thank you message state
   });
   const [wallpaper, setWallpaper] = useState<File | null>(null);
   const [currentItem, setCurrentItem] = useState('');
@@ -123,6 +126,9 @@ const EventForm: React.FC = () => {
         }
       });
 
+      // Append thank you message
+      submitData.append('thank_you_message', formData.thank_you_message);
+
       // Append wallpaper if selected
       if (wallpaper) {
         submitData.append('wallpaper', wallpaper);
@@ -161,7 +167,13 @@ const EventForm: React.FC = () => {
           </Typography>
         )}
 
-        <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+        <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+          {/* Part 1: Basic Event Details */}
+          <Box>
+            <Typography variant="h6" gutterBottom sx={{ color: 'rgba(255, 255, 255, 0.9)' }}>
+              Basic Event Details
+            </Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
               <DarkTextField
                 fullWidth
                 label="Title"
@@ -181,6 +193,15 @@ const EventForm: React.FC = () => {
                 multiline
                 rows={4}
               />
+              <DarkTextField
+                fullWidth
+                label="Location"
+                name="location"
+                value={formData.location}
+                onChange={handleChange}
+                variant="outlined"
+                required
+              />
               <DarkTextField
                 fullWidth
                 label="Date and Time"
@@ -206,7 +227,6 @@ const EventForm: React.FC = () => {
                   shrink: true,
                 }}
               />
-          
               <DarkTextField
                 fullWidth
                 label="Maximum Additional Guests Per RSVP"
@@ -224,16 +244,17 @@ const EventForm: React.FC = () => {
                 helperText="Set to 0 for no additional guests, -1 for unlimited"
                 inputProps={{ min: -1 }}
               />
-          <DarkTextField
-            fullWidth
-            label="Location"
-            name="location"
-            value={formData.location}
-            onChange={handleChange}
-            variant="outlined"
-            required
-          />
+            </Box>
+          </Box>
 
+          <Divider sx={{ borderColor: 'rgba(255, 255, 255, 0.12)' }} />
+
+          {/* Part 2: Customization */}
+          <Box>
+            <Typography variant="h6" gutterBottom sx={{ color: 'rgba(255, 255, 255, 0.9)' }}>
+              Customization
+            </Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
               <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                 <Typography variant="subtitle1" gutterBottom sx={{ color: 'rgba(255, 255, 255, 0.7)' }}>
                   Event Wallpaper
@@ -337,13 +358,17 @@ const EventForm: React.FC = () => {
                   ))}
                 </Box>
               </Box>
+            </Box>
+          </Box>
 
-          <Box sx={{ mt: 4, mb: 3, borderTop: '1px solid rgba(255, 255, 255, 0.12)', pt: 3 }}>
-            <Typography variant="h6" sx={{ mb: 2, color: 'rgba(255, 255, 255, 0.9)' }}>
-              Email Notifications
+          <Divider sx={{ borderColor: 'rgba(255, 255, 255, 0.12)' }} />
+
+          {/* Part 3: Notifications and Messaging */}
+          <Box>
+            <Typography variant="h6" gutterBottom sx={{ color: 'rgba(255, 255, 255, 0.9)' }}>
+              Notifications and Messaging
             </Typography>
-            
-            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
               <FormControlLabel
                 control={
                   <Checkbox
@@ -367,7 +392,6 @@ const EventForm: React.FC = () => {
                   color: 'rgba(255, 255, 255, 0.9)',
                 }}
               />
-            </Box>
 
               {formData.email_notifications_enabled && (
                 <DarkTextField
@@ -379,9 +403,21 @@ const EventForm: React.FC = () => {
                   variant="outlined"
                   placeholder="email1@example.com, email2@example.com"
                   helperText="Enter email addresses separated by commas"
-                sx={{ mt: 2 }}
                 />
               )}
+
+              <DarkTextField
+                fullWidth
+                label="Thank You Message (for email notifications)"
+                name="thank_you_message"
+                value={formData.thank_you_message}
+                onChange={handleChange}
+                variant="outlined"
+                multiline
+                rows={4}
+                helperText="This message will be sent to attendees who opted for email notifications the day after the event."
+              />
+            </Box>
           </Box>
 
           <Button