feat: implement Alpine.js modal for content details and migrate to SortableJS for kanban board functionality

resources/views/schedule/index.blade.php

@@ -104,6 +104,43 @@ document.addEventListener('DOMContentLoaded', function () {
             }
         },
 
+        dayCellDidMount(info) {
+            const holidays = @json($holidays ?? []);
+            const holidayMap = {};
+            holidays.forEach(h => holidayMap[h.date] = h.name);
+            
+            const year = info.date.getFullYear();
+            const month = String(info.date.getMonth() + 1).padStart(2, '0');
+            const day = String(info.date.getDate()).padStart(2, '0');
+            const dateStr = `${year}-${month}-${day}`;
+            
+            if (holidayMap[dateStr]) {
+                const frame = info.el.querySelector('.fc-daygrid-day-frame');
+                if (frame) {
+                    // Update background color for the highlighted box
+                    frame.style.backgroundColor = '#fff0f0'; // Light red highlighted box
+                    frame.style.position = 'relative'; // Required for absolute positioning of text
+
+                    // Add the holiday text to the top-left corner
+                    const holidayEl = document.createElement('div');
+                    holidayEl.textContent = holidayMap[dateStr];
+                    holidayEl.style.position = 'absolute';
+                    holidayEl.style.top = '4px';
+                    holidayEl.style.left = '4px';
+                    holidayEl.style.color = '#ef4444'; // Red text
+                    holidayEl.style.fontSize = '0.70rem'; // Small text
+                    holidayEl.style.fontWeight = '600';
+                    holidayEl.style.whiteSpace = 'nowrap';
+                    holidayEl.style.overflow = 'hidden';
+                    holidayEl.style.textOverflow = 'ellipsis';
+                    holidayEl.style.maxWidth = '75%'; // Prevent it from overlapping with the date number (usually on right)
+                    holidayEl.style.zIndex = '1';
+                    
+                    frame.appendChild(holidayEl);
+                }
+            }
+        },
+
         eventDrop(info) {
             fetch(`/schedule/${info.event.id}/dates`, {
                 method: 'PATCH',