Embed

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kyra's Cleaning Schedule </title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f0f2f5;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.calendar-container {
  width: 800px;
  margin: 0 auto;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}

.calendar-header {
  background: #059669;
  color: white;
  padding: 15px 20px;
  border-radius: 10px 10px 0 0;
  text-align: center;
}

.calendar-header h2 {
  font-size: 18px;
  margin: 0;
}

.calendar-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: #047857;
  color: white;
  border-bottom: 1px solid #e5e7eb;
}

.calendar-controls button {
  background: rgba(255,255,255,0.2);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: #e5e7eb;
  flex: 1;
}

.day-header {
  background: #374151;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  padding: 8px 4px;
}

.calendar-day {
  background: white;
  padding: 4px;
  min-height: 100px;
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
}

.calendar-day.other-month {
  background: #f9fafb;
  color: #9ca3af;
}

.day-number {
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 4px;
  text-align: right;
}

.events-container {
  flex: 1;
  overflow-y: auto;
}

.event-item {
  background: #059669;
  color: white;
  padding: 2px 4px;
  margin: 1px 0;
  border-radius: 2px;
  font-size: 9px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-item:hover {
  background: #047857;
}

.event-time {
  font-size: 8px;
  opacity: 0.9;
}

.status-bar {
  padding: 8px 20px;
  background: #f3f4f6;
  border-top: 1px solid #e5e7eb;
  font-size: 11px;
  color: #6b7280;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0 0 10px 10px;
}

.refresh-btn {
  background: #dc2626;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
}

.loading, .error {
  text-align: center;
  padding: 40px;
  font-size: 16px;
  grid-column: 1 / -1;
}

.error {
  color: #e74c3c;
  background: #fadbd8;
}

.event-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.event-modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 400px;
  width: 90%;
}

.time-debug {
  background: #fef3c7;
  color: #92400e;
  padding: 4px;
  border-radius: 2px;
  font-size: 10px;
  margin-top: 2px;
}
</style>
</head>
<body>

<div class="calendar-container">
  <div class="calendar-header">
    <h2>Kyra's Cleaning Schedule</h2>
  </div>
  
  <div class="calendar-controls">
    <button onclick="changeMonth(-1)">← Previous</button>
    <span id="current-month" style="font-size: 14px; font-weight: bold;">November 2025</span>
    <button onclick="changeMonth(1)">Next →</button>
  </div>

  <div class="calendar-grid" id="calendar-grid">
    <div class="loading">Loading calendar events...</div>
  </div>
  
  <div class="status-bar">
    <span>Last updated: <span id="last-updated">Never</span></span>
    <button class="refresh-btn" onclick="loadCalendarData()">Refresh Now</button>
  </div>
</div>

<div class="event-modal" id="eventModal">
  <div class="event-modal-content">
    <h3 id="modal-title" style="margin: 0 0 15px 0; font-size: 16px;">Event Details</h3>
    <div id="modal-content"></div>
    <button onclick="closeModal()" style="background: #059669; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; margin-top: 15px; font-size: 12px;">Close</button>
  </div>
</div>

<script>
const WORKER_URL = 'https://kyracalendar.kirkseycleaning.workers.dev/api/calendar/support';

let currentDate = new Date(2025, 10, 1); // November 2025
let calendarEvents = [];

async function loadCalendarData() {
  try {
    document.getElementById('calendar-grid').innerHTML = '<div class="loading">Loading calendar events...</div>';
    
    console.log('Fetching data from API...');
    const response = await fetch(WORKER_URL);
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    console.log('RAW API RESPONSE:', data);
    
    if (data.error) {
      throw new Error(data.error);
    }
    
    if (!data.events || !Array.isArray(data.events)) {
      throw new Error('Invalid response format: no events array');
    }
    
    calendarEvents = data.events.map((event, index) => {
      console.log(`Processing event ${index}:`, event);
      
      // Parse dates properly - handle timezone issues
      let startDate, endDate;
      
      if (event.start) {
        // If it's already a proper ISO string with time
        if (event.start.includes('T') && event.start.includes(':')) {
          startDate = new Date(event.start);
        } else {
          // If it's just a date, add a default time
          startDate = new Date(event.start + 'T09:00:00');
        }
      }
      
      if (event.end) {
        if (event.end.includes('T') && event.end.includes(':')) {
          endDate = new Date(event.end);
        } else {
          endDate = new Date(event.end + 'T10:00:00');
        }
      } else {
        // Default to 1 hour after start
        endDate = new Date(startDate.getTime() + 60 * 60 * 1000);
      }
      
      // Validate dates
      if (isNaN(startDate.getTime())) {
        console.error('Invalid start date for event:', event.title, event.start);
        // Fallback to reasonable date
        const fallbackDate = new Date(2025, 10, 3 + index, 9, 0);
        startDate = fallbackDate;
        endDate = new Date(fallbackDate.getTime() + 60 * 60 * 1000);
      }
      
      const processedEvent = {
        id: `event-${index}`,
        title: event.title,
        description: event.description,
        location: event.location,
        start: startDate.toISOString(),
        end: endDate.toISOString(),
        startDate: startDate,
        endDate: endDate
      };
      
      console.log(`Event "${event.title}":`, {
        originalStart: event.start,
        parsedStart: processedEvent.start,
        displayTime: startDate.toLocaleTimeString(),
        displayDate: startDate.toLocaleDateString()
      });
      
      return processedEvent;
    });
    
    console.log('FINAL PROCESSED EVENTS:', calendarEvents);
    
    generateCalendar();
    document.getElementById('last-updated').textContent = new Date().toLocaleTimeString();
    
  } catch (error) {
    console.error('Error loading calendar data:', error);
    document.getElementById('calendar-grid').innerHTML = `
      <div class="error">
        Failed to load calendar events.<br><br>
        Error: ${error.message}<br>
        Check browser console for details.
      </div>
    `;
    document.getElementById('last-updated').textContent = 'Error loading data';
  }
}

function generateCalendar() {
  const grid = document.getElementById('calendar-grid');
  grid.innerHTML = '';
  
  // Add day headers
  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  days.forEach(day => {
    const dayEl = document.createElement('div');
    dayEl.className = 'day-header';
    dayEl.textContent = day;
    grid.appendChild(dayEl);
  });
  
  // Update month display
  const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 
                     'July', 'August', 'September', 'October', 'November', 'December'];
  document.getElementById('current-month').textContent = 
    `${monthNames[currentDate.getMonth()]} ${currentDate.getFullYear()}`;
  
  // Calculate calendar dates
  const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
  const lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
  const startDay = firstDay.getDay();
  const daysInMonth = lastDay.getDate();
  
  // Add previous month days
  const prevMonthLastDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0).getDate();
  for (let i = startDay - 1; i >= 0; i--) {
    const dayNumber = prevMonthLastDay - i;
    const dayDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, dayNumber);
    grid.appendChild(createDayElement(dayNumber, dayDate, true));
  }
  
  // Add current month days
  for (let i = 1; i <= daysInMonth; i++) {
    const dayDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), i);
    grid.appendChild(createDayElement(i, dayDate, false));
  }
  
  // Add next month days to complete 6 weeks
  const totalCells = 42;
  const cellsUsed = startDay + daysInMonth;
  const nextMonthDays = totalCells - cellsUsed;
  for (let i = 1; i <= nextMonthDays; i++) {
    const dayDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, i);
    grid.appendChild(createDayElement(i, dayDate, true));
  }
}

function createDayElement(dayNumber, dayDate, isOtherMonth) {
  const dayElement = document.createElement('div');
  dayElement.className = 'calendar-day';
  if (isOtherMonth) dayElement.classList.add('other-month');
  
  const dateString = dayDate.toISOString().split('T')[0];
  
  // Find events for this specific date
  const dayEvents = calendarEvents.filter(event => {
    if (!event.startDate) return false;
    
    const eventDateString = event.startDate.toISOString().split('T')[0];
    return eventDateString === dateString;
  });
  
  let eventsHTML = '';
  dayEvents.forEach((event, index) => {
    const timeStr = event.startDate.toLocaleTimeString('en-US', { 
      hour: 'numeric', 
      minute: '2-digit', 
      hour12: true 
    });
    
    eventsHTML += `
      <div class="event-item" onclick="showEventDetails('${event.id}')">
        <strong>${event.title}</strong>
        <div class="event-time">${timeStr}</div>
      </div>
    `;
  });
  
  dayElement.innerHTML = `
    <div class="day-number">${dayNumber}</div>
    <div class="events-container">${eventsHTML}</div>
  `;
  
  return dayElement;
}

function showEventDetails(eventId) {
  const event = calendarEvents.find(e => e.id === eventId);
  if (!event) return;
  
  const startTime = event.startDate;
  const endTime = event.endDate;
  
  document.getElementById('modal-title').textContent = event.title;
  
  let modalContent = `
    <div style="margin: 8px 0; padding: 8px; background: #f8f9fa; border-radius: 4px;">
      <strong>Date:</strong> ${startTime.toLocaleDateString('en-US', { 
        weekday: 'long', 
        year: 'numeric', 
        month: 'long', 
        day: 'numeric' 
      })}
    </div>
    <div style="margin: 8px 0; padding: 8px; background: #f8f9fa; border-radius: 4px;">
      <strong>Time:</strong> ${startTime.toLocaleTimeString('en-US', { 
        hour: 'numeric', 
        minute: '2-digit', 
        hour12: true 
      })} - ${endTime.toLocaleTimeString('en-US', { 
        hour: 'numeric', 
        minute: '2-digit', 
        hour12: true 
      })}
    </div>
    <div class="time-debug">
      Raw: ${event.start} → ${event.end}
    </div>
  `;
  
  if (event.location) {
    modalContent += `<div style="margin: 8px 0; padding: 8px; background: #f8f9fa; border-radius: 4px;"><strong>Location:</strong> ${event.location}</div>`;
  }
  
  if (event.description) {
    modalContent += `<div style="margin: 8px 0; padding: 8px; background: #f8f9fa; border-radius: 4px;"><strong>Description:</strong> ${event.description}</div>`;
  }
  
  document.getElementById('modal-content').innerHTML = modalContent;
  document.getElementById('eventModal').style.display = 'flex';
}

function closeModal() {
  document.getElementById('eventModal').style.display = 'none';
}

function changeMonth(direction) {
  currentDate.setMonth(currentDate.getMonth() + direction);
  loadCalendarData();
}

// Auto-refresh every 2 minutes
setInterval(loadCalendarData, 2 * 60 * 1000);

// Load immediately when page loads
document.addEventListener('DOMContentLoaded', function() {
  loadCalendarData();
});

// Close modal when clicking outside
document.getElementById('eventModal').addEventListener('click', function(e) {
  if (e.target === this) closeModal();
});
</script>
</body>
</html>