Help me with the following for managerteamview.vue:
1. For directors which has role ==1, in the event they do not have subordinates who have role ==3, this means that their subordinates are all staff. If so, then just mimic the card display same as for managers with role ==2.
2. For directors which has role ==1 and has subordinates who are managers of role ==2, within the own manager team group, the staff are grouped up according to their positions, mimicking the view of managers with role ==2 the moment they expand the manager team group card.

Give me the entire code.
Code context:
<template>
  <div id="app">
    <Navbar />
    <div class="dashboard-container">
      <div class="main-section">
        <div class="calendar-container">
          <FullCalendar 
            :options="calendarOptions"
          />
          <div v-if="isLoading" class="loading-overlay">
            <div class="spinner"></div>
          </div>
        </div>
        <div class="right-container" :class="{'show': isRightContainerVisible }">
          <div v-if="selectedDateDetails" class="details-container">
            <div class="details-header">
              <h2>Details for {{ selectedDate }}</h2>
              <!-- Close button is only rendered for small screens -->
              <button 
                v-if="isSmallScreen" 
                class="close-button" 
                @click="isRightContainerVisible = false"
              >
                ×
              </button>
            </div>
            <div class="tabs" v-if="user.role === 3 || user.role === 1">
              <button 
                :class="['tab', activeTab === 'AM' ? 'active' : '']" 
                @click="activeTab = 'AM'"
              >
                AM
              </button>
              <button 
                :class="['tab', activeTab === 'PM' ? 'active' : '']" 
                @click="activeTab = 'PM'"
              >
                PM
              </button>
            </div>
            <div class="tab-content">
              <div v-if="activeTab === 'AM'">
                <div class="summary">
                  <div class="summary-item">
                    <span class="summary-label">In Office:</span>
                    <span class="summary-value">{{ selectedDateDetails.AM.inOffice }} / {{ selectedDateDetails.AM.total }}</span>
                  </div>
                  <div class="summary-item">
                    <span class="summary-label">WFH:</span>
                    <span class="summary-value">{{ selectedDateDetails.AM.wfh }} / {{ selectedDateDetails.AM.total }}</span>
                  </div>
                </div>
                <div class="teams">
                  <template v-if="isManagerView">
                    <!-- Role 3: Managers with direct role 2 staff -->
                    <div 
                      class="team card" 
                      v-for="(team, index) in groupedDetails.AM" 
                      :key="index"
                      @click="toggleTeam('AM', index)"
                    >
                      <div class="team-header">
                        <h3>{{ team.position }}</h3>
                        <div class="badge-container">
                          <span class="badge badge-office">
                            In Office: {{ team.inOffice }}/{{ team.total }}
                          </span>
                          <span class="badge badge-wfh">
                            WFH: {{ team.wfh }}/{{ team.total }}
                          </span>
                        </div>
                      </div>
                      <div class="staff-list" v-if="expandedTeams['AM-' + index]">
                        <div class="staff-card" v-for="staff in team.staff" :key="staff.staff_id">
                          <span :class="['status-indicator', staff.status === 'OFFICE' ? 'green' : 'yellow']"></span>
                          <span class="staff-name">{{ staff.name }}</span>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-else-if="isDirectorWithDirectStaff">
                    <!-- Role 1: Directors with direct role 2 staff -->
                    <div 
                      class="team card" 
                      v-for="(team, index) in groupedDetails.AM" 
                      :key="index"
                      @click="toggleTeam('AM', index)"
                    >
                      <div class="team-header">
                        <h3>{{ team.position }}</h3>
                        <div class="badge-container">
                          <span class="badge badge-office">
                            In Office: {{ team.inOffice }}/{{ team.total }}
                          </span>
                          <span class="badge badge-wfh">
                            WFH: {{ team.wfh }}/{{ team.total }}
                          </span>
                        </div>
                      </div>
                      <div class="staff-list" v-if="expandedTeams['AM-' + index]">
                        <div class="staff-card" v-for="staff in team.staff" :key="staff.staff_id">
                          <span :class="['status-indicator', staff.status === 'OFFICE' ? 'green' : 'yellow']"></span>
                          <span class="staff-name">{{ staff.name }}</span>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-else-if="isDirectorWithManagers">
                    <!-- Role 1: Directors with managers -->
                    <div 
                      class="manager-team card" 
                      v-for="(managerGroup, teamName) in groupedDetails.AM.managers" 
                      :key="teamName"
                      @click="toggleTeam('AM', teamName)"
                    >
                      <div class="team-header">
                        <h3>{{ teamName }}</h3>
                        <div class="badge-container">
                          <span class="badge badge-office">
                            In Office: {{ computeManagerInOffice('AM', managerGroup) }}/{{ computeTotalManagerStaff(managerGroup) }}
                          </span>
                          <span class="badge badge-wfh">
                            WFH: {{ computeManagerWFH('AM', managerGroup) }}/{{ computeTotalManagerStaff(managerGroup) }}
                          </span>
                        </div>
                      </div>
                      <div class="manager-sub-teams" v-if="expandedTeams['AM-' + teamName]">
                        <div 
                          class="sub-team card" 
                          v-for="(positionGroup, positionName) in managerGroup.positions" 
                          :key="positionName"
                          @click.stop="toggleSubTeam('AM', teamName, positionName)"
                        >
                          <div class="sub-team-header">
                            <h4>{{ positionName }}</h4>
                            <div class="badge-container">
                              <span class="badge badge-office">
                                In Office: {{ positionGroup.inOffice }}/{{ positionGroup.total }}
                              </span>
                              <span class="badge badge-wfh">
                                WFH: {{ positionGroup.wfh }}/{{ positionGroup.total }}
                              </span>
                            </div>
                          </div>
                          <div class="staff-list" v-if="expandedSubTeams['AM-' + teamName + '-' + positionName]">
                            <div class="staff-card" v-for="staff in positionGroup.staff" :key="staff.staff_id">
                              <span :class="['status-indicator', staff.status === 'OFFICE' ? 'green' : 'yellow']"></span>
                              <span class="staff-name">{{ staff.name }}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
              <div v-else-if="activeTab === 'PM'">
                <div class="summary">
                  <div class="summary-item">
                    <span class="summary-label">In Office:</span>
                    <span class="summary-value">{{ selectedDateDetails.PM.inOffice }} / {{ selectedDateDetails.PM.total }}</span>
                  </div>
                  <div class="summary-item">
                    <span class="summary-label">WFH:</span>
                    <span class="summary-value">{{ selectedDateDetails.PM.wfh }} / {{ selectedDateDetails.PM.total }}</span>
                  </div>
                </div>
                <div class="teams">
                  <template v-if="isManagerView">
                    <!-- Role 3: Managers with direct role 2 staff -->
                    <div 
                      class="team card" 
                      v-for="(team, index) in groupedDetails.PM" 
                      :key="index"
                      @click="toggleTeam('PM', index)"
                    >
                      <div class="team-header">
                        <h3>{{ team.position }}</h3>
                        <div class="badge-container">
                          <span class="badge badge-office">
                            In Office: {{ team.inOffice }}/{{ team.total }}
                          </span>
                          <span class="badge badge-wfh">
                            WFH: {{ team.wfh }}/{{ team.total }}
                          </span>
                        </div>
                      </div>
                      <div class="staff-list" v-if="expandedTeams['PM-' + index]">
                        <div class="staff-card" v-for="staff in team.staff" :key="staff.staff_id">
                          <span :class="['status-indicator', staff.status === 'OFFICE' ? 'green' : 'yellow']"></span>
                          <span class="staff-name">{{ staff.name }}</span>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-else-if="isDirectorWithDirectStaff">
                    <!-- Role 1: Directors with direct role 2 staff -->
                    <div 
                      class="team card" 
                      v-for="(team, index) in groupedDetails.PM" 
                      :key="index"
                      @click="toggleTeam('PM', index)"
                    >
                      <div class="team-header">
                        <h3>{{ team.position }}</h3>
                        <div class="badge-container">
                          <span class="badge badge-office">
                            In Office: {{ team.inOffice }}/{{ team.total }}
                          </span>
                          <span class="badge badge-wfh">
                            WFH: {{ team.wfh }}/{{ team.total }}
                          </span>
                        </div>
                      </div>
                      <div class="staff-list" v-if="expandedTeams['PM-' + index]">
                        <div class="staff-card" v-for="staff in team.staff" :key="staff.staff_id">
                          <span :class="['status-indicator', staff.status === 'OFFICE' ? 'green' : 'yellow']"></span>
                          <span class="staff-name">{{ staff.name }}</span>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-else-if="isDirectorWithManagers">
                    <!-- Role 1: Directors with managers -->
                    <div 
                      class="manager-team card" 
                      v-for="(managerGroup, teamName) in groupedDetails.PM.managers" 
                      :key="teamName"
                      @click="toggleTeam('PM', teamName)"
                    >
                      <div class="team-header">
                        <h3>{{ teamName }}</h3>
                        <div class="badge-container">
                          <span class="badge badge-office">
                            In Office: {{ computeManagerInOffice('PM', managerGroup) }}/{{ computeTotalManagerStaff(managerGroup) }}
                          </span>
                          <span class="badge badge-wfh">
                            WFH: {{ computeManagerWFH('PM', managerGroup) }}/{{ computeTotalManagerStaff(managerGroup) }}
                          </span>
                        </div>
                      </div>
                      <div class="manager-sub-teams" v-if="expandedTeams['PM-' + teamName]">
                        <div 
                          class="sub-team card" 
                          v-for="(positionGroup, positionName) in managerGroup.positions" 
                          :key="positionName"
                          @click.stop="toggleSubTeam('PM', teamName, positionName)"
                        >
                          <div class="sub-team-header">
                            <h4>{{ positionName }}</h4>
                            <div class="badge-container">
                              <span class="badge badge-office">
                                In Office: {{ positionGroup.inOffice }}/{{ positionGroup.total }}
                              </span>
                              <span class="badge badge-wfh">
                                WFH: {{ positionGroup.wfh }}/{{ positionGroup.total }}
                              </span>
                            </div>
                          </div>
                          <div class="staff-list" v-if="expandedSubTeams['PM-' + teamName + '-' + positionName]">
                            <div class="staff-card" v-for="staff in positionGroup.staff" :key="staff.staff_id">
                              <span :class="['status-indicator', staff.status === 'OFFICE' ? 'green' : 'yellow']"></span>
                              <span class="staff-name">{{ staff.name }}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="no-selection">
            <p>Select a date on the calendar to view details.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, onUnmounted } from 'vue';
import Navbar from '@/components/Navbar.vue';
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import axios from 'axios';

// Reactive references
const user = ref({});
const selectedDate = ref('');
const events = ref([]);
const selectedDateDetails = ref(null);
const isRightContainerVisible = ref(false);
const isSmallScreen = ref(window.innerWidth < 768); // Reactive property for screen size
const isLoading = ref(false); // Loading indicator for summary loading
const activeTab = ref('AM'); // Active tab state
const expandedTeams = ref({}); // Tracks expanded state of team cards
const expandedSubTeams = ref({}); // Tracks expanded state of sub-team cards

// Handle window resize to update isSmallScreen
const handleResize = () => {
  isSmallScreen.value = window.innerWidth < 768;
};

onMounted(() => {
  const storedUser = localStorage.getItem('user');
  if (storedUser) {
    user.value = JSON.parse(storedUser);
    if (user.value.role === 3 || user.value.role === 1) {
      initiateChunkedSummaryLoading();
    }
  }
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

// Determine the type of view based on user role and subordinates
const isManagerView = computed(() => {
  return user.value.role === 3;
});

const isDirectorWithManagers = computed(() => {
  return user.value.role === 1 && selectedDateDetails.value && selectedDateDetails.value.AM.managers;
});

const isDirectorWithDirectStaff = computed(() => {
  return user.value.role === 1 && selectedDateDetails.value && !selectedDateDetails.value.AM.managers && selectedDateDetails.value.AM.teams && selectedDateDetails.value.AM.teams.length > 0;
});

// Compute minimum and maximum selectable dates
const computeMinDate = computed(() => {
  const date = new Date();
  date.setMonth(date.getMonth() - 2);
  return date;
});

const computeMaxDate = computed(() => {
  const date = new Date();
  date.setMonth(date.getMonth() + 3);
  return date;
});

// Determine color based on percentage
function getColorForPercentage(percentage) {
  percentage = parseFloat(percentage);
  if (percentage < 50) {
    return '#FF6B6B'; // Red
  } else if (percentage < 75) {
    return '#FFD93D'; // Yellow
  } else {
    return '#6BCB77'; // Green
  }
}

// Fetch summary data for a given date range
async function fetchManagerScheduleSummary(start, end) {
  try {
    const startDateStr = start.toISOString().split('T')[0];
    const endDateStr = end.toISOString().split('T')[0];

    const response = await axios.get(`${import.meta.env.VITE_API_URL}/api/manager-schedule-summary/${user.value.staff_id}`, {
      params: {
        start_date: startDateStr,
        end_date: endDateStr
      }
    });

    const data = response.data.dates;
    const newEvents = [];

    data.forEach(item => {
      const dateStr = item.date;
      const totalStaff = item.total_staff;
      const officeCountAm = item.office_count_am;
      const officeCountPm = item.office_count_pm;

      const percentageAm = ((officeCountAm / totalStaff) * 100).toFixed(2);
      const percentagePm = ((officeCountPm / totalStaff) * 100).toFixed(2);

      const colorAm = getColorForPercentage(percentageAm);
      const colorPm = getColorForPercentage(percentagePm);

      newEvents.push({
        title: `(AM) In Office: ${officeCountAm} / ${totalStaff}`,
        start: dateStr + 'T09:00:00',
        end: dateStr + 'T13:00:00',
        allDay: false,
        extendedProps: {
          timeOfDay: 'AM',
          officeCount: officeCountAm,
          totalStaff,
          percentage: percentageAm
        },
        backgroundColor: colorAm,
        borderColor: colorAm
      });

      newEvents.push({
        title: `(PM) In Office: ${officeCountPm} / ${totalStaff}`,
        start: dateStr + 'T14:00:00',
        end: dateStr + 'T18:00:00',
        allDay: false,
        extendedProps: {
          timeOfDay: 'PM',
          officeCount: officeCountPm,
          totalStaff,
          percentage: percentagePm
        },
        backgroundColor: colorPm,
        borderColor: colorPm
      });
    });

    events.value = [...events.value, ...newEvents];
  } catch (error) {
    console.error('Error fetching manager schedule summary:', error);
  }
}

// Format date to YYYY-MM-DD
function getDateStr(dateObj) {
  const year = dateObj.getFullYear();
  const month = ('0' + (dateObj.getMonth() + 1)).slice(-2);
  const day = ('0' + dateObj.getDate()).slice(-2);
  return `${year}-${month}-${day}`;
}

// Calendar options
const calendarOptions = computed(() => {
  let smallScreen = isSmallScreen.value;

  return {
    plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
    initialView: 'dayGridMonth',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay',
    },
    dateClick: handleDateClick,
    eventClick: handleEventClick,
    datesSet: handleDatesSet,
    selectable: true,
    validRange: {
      start: computeMinDate.value,
      end: computeMaxDate.value,
    },
    weekends: false,
    events: events.value,
    allDaySlot: false,
    eventContent: function(arg) {
      if (arg.event.extendedProps.timeOfDay) {
        const timeOfDay = arg.event.extendedProps.timeOfDay;
        const officeCount = arg.event.extendedProps.officeCount;
        const totalStaff = arg.event.extendedProps.totalStaff;
        const percentage = arg.event.extendedProps.percentage;

        const container = document.createElement('div');
        container.style.display = 'flex';
        container.style.flexDirection = 'column';
        container.style.justifyContent = 'center';
        container.style.alignItems = 'flex-start'; // Align badges beside text
        container.style.backgroundColor = arg.event.backgroundColor;

        // Assign a class based on background color
        if (arg.event.backgroundColor === '#FFD93D') { // Yellow
          container.classList.add('yellow-event');
        } else {
          container.classList.add('default-event');
        }

        container.style.borderRadius = '4px';
        container.style.margin = '1px 0';
        container.style.padding = '2px 4px';
        container.style.fontSize = '0.8em';
        container.style.width = '100%';
        container.style.height = '100%';

        // Create a wrapper for the label and badges
        const labelContainer = document.createElement('div');
        labelContainer.style.display = 'flex';
        labelContainer.style.alignItems = 'center';
        labelContainer.style.width = '100%';
        labelContainer.style.justifyContent = 'space-between';

        const label = document.createElement('span');
        label.textContent = `${timeOfDay}`;

        const badgesWrapper = document.createElement('div');
        badgesWrapper.style.display = 'flex';
        badgesWrapper.style.gap = '4px';

        // Create Office Badge
        const officeBadge = document.createElement('span');
        officeBadge.classList.add('badge', 'badge-office-calendar');
        officeBadge.textContent = `In Office: ${officeCount}`;

        badgesWrapper.appendChild(officeBadge);

        // Conditionally add WFH badge if not small screen
        if (!smallScreen) {
          const wfhBadge = document.createElement('span');
          wfhBadge.classList.add('badge', 'badge-wfh-calendar');
          wfhBadge.textContent = `WFH: ${totalStaff - officeCount}`;
          badgesWrapper.appendChild(wfhBadge);
        }

        labelContainer.appendChild(label);
        labelContainer.appendChild(badgesWrapper);

        container.appendChild(labelContainer);

        return { domNodes: [container] };
      }
      return null;
    },
    eventDidMount: function(info) {
      // Adjust text color based on background
      const bgColor = info.event.backgroundColor.toUpperCase();
      const yellowHex = '#FFD93D';

      if (bgColor === yellowHex) {
        // Set text color to black
        info.el.style.color = '#000000';

        // Ensure child elements inherit the color
        const elements = info.el.querySelectorAll('*');
        elements.forEach(el => {
          el.style.color = 'inherit';
        });
      } else {
        // Default text color
        info.el.style.color = '#ffffff';

        const elements = info.el.querySelectorAll('*');
        elements.forEach(el => {
          el.style.color = 'inherit';
        });
      }
    },
    eventClassNames: 'calendar-event',
    slotMinTime: '09:00:00',
    slotMaxTime: '19:00:00',
    businessHours: {
      startTime: '09:00',
      endTime: '18:00',
      daysOfWeek: [1, 2, 3, 4, 5],
    },
  };
});

// Handle date click on the calendar
async function handleDateClick(info) {
  if (info.view.type === 'dayGridMonth') {
    const clickedDate = new Date(info.dateStr);

    if (clickedDate < computeMinDate.value + 1) {
      alert('You cannot select a date before two months ago.');
    } else if (clickedDate > computeMaxDate.value) {
      alert('You cannot select a date beyond three months ahead.');
    } else {
      selectedDate.value = info.dateStr;
      activeTab.value = 'AM'; // Reset to AM tab on new selection
      if (user.value.role === 3 || user.value.role === 1) {
        await displayDateDetails(info.dateStr);
      }
    }
  }
}

// Handle event click on the calendar
async function handleEventClick(info) {
  if (user.value.role === 3 || user.value.role === 1) {
    const dateStr = getDateStr(info.event.start);
    const viewType = info.view.type;
    if (viewType === 'timeGridWeek' || viewType === 'timeGridDay') {
      selectedDate.value = dateStr;
      activeTab.value = 'AM'; // Reset to AM tab on new selection
      await displayDateDetails(dateStr);
    }
  }
}

// Handle when dates are set in the calendar view
async function handleDatesSet(info) {
  if (info.view.type === 'timeGridDay') {
    const dateStr = getDateStr(info.start);
    selectedDate.value = dateStr;
    activeTab.value = 'AM'; // Reset to AM tab on dates set
    if (user.value.role === 3 || user.value.role === 1) {
      const detailData = await fetchManagerScheduleDetail(dateStr);
      if (detailData) {
        let groupedData = {
          AM: {
            inOffice: 0,
            wfh: 0,
            total: 0,
            managers: {}
          },
          PM: {
            inOffice: 0,
            wfh: 0,
            total: 0,
            managers: {}
          }
        };

        if (user.value.role === 3) {
          // Role 3: Managers with direct role 2 staff
          groupedData.AM = groupStaffByPosition(detailData.staff, 'AM');
          groupedData.PM = groupStaffByPosition(detailData.staff, 'PM');
        } else if (user.value.role === 1) {
          // Role 1: Directors
          if (detailData.managers) {
            // Directors with managers
            groupedData.AM = {
              inOffice: 0,
              wfh: 0,
              total: 0,
              managers: {}
            };
            groupedData.PM = {
              inOffice: 0,
              wfh: 0,
              total: 0,
              managers: {}
            };

            Object.keys(detailData.managers).forEach(managerTeamName => {
              const managerGroup = detailData.managers[managerTeamName];
              const managerName = managerGroup.manager_name;
              const managerStaff = managerGroup.staff;

              // Group by position
              const positionGroups = {};
              managerStaff.forEach(staff => {
                const position = staff.position || 'Unknown';
                if (!positionGroups[position]) {
                  positionGroups[position] = { inOffice: 0, wfh: 0, total: 0, staff: [] };
                }
                positionGroups[position].total += 1;
                if (staff.status_am === 'OFFICE') {
                  positionGroups[position].inOffice += 1;
                  groupedData.AM.inOffice += 1;
                } else {
                  positionGroups[position].wfh += 1;
                  groupedData.AM.wfh += 1;
                }
                positionGroups[position].staff.push({ staff_id: staff.staff_id, name: staff.name, status: staff.status_am });

                if (staff.status_pm === 'OFFICE') {
                  positionGroups[position].inOffice += 1;
                  groupedData.PM.inOffice += 1;
                } else {
                  positionGroups[position].wfh += 1;
                  groupedData.PM.wfh += 1;
                }
                positionGroups[position].staff.push({ staff_id: staff.staff_id, name: staff.name, status: staff.status_pm });
              });

              groupedData.AM.managers[managerTeamName] = {
                manager_id: managerGroup.manager_id,
                manager_name: managerName,
                positions: positionGroups
              };

              groupedData.PM.managers[managerTeamName] = {
                manager_id: managerGroup.manager_id,
                manager_name: managerName,
                positions: positionGroups
              };

              groupedData.AM.total += managerStaff.length;
              groupedData.PM.total += managerStaff.length;
            });
          } else {
            // Directors with direct role 2 staff
            groupedData.AM = groupStaffByPosition(detailData.staff, 'AM');
            groupedData.PM = groupStaffByPosition(detailData.staff, 'PM');
          }
        }

        selectedDateDetails.value = groupedData;
        expandedTeams.value = {}; // Reset expanded teams
        expandedSubTeams.value = {}; // Reset expanded sub-teams

        // Only show the card on large screens when navigating dates
        if (!isSmallScreen.value) {
          isRightContainerVisible.value = true;
        }
        // On small screens, do not automatically show the card when navigating
      } else {
        alert('Error fetching details for the selected date.');
      }
    }
  }
}

// Display date details when a date is selected
async function displayDateDetails(dateStr) {
  const detailData = await fetchManagerScheduleDetail(dateStr);
  if (detailData) {
    let groupedData = {
      AM: {
        inOffice: 0,
        wfh: 0,
        total: 0,
        managers: {}
      },
      PM: {
        inOffice: 0,
        wfh: 0,
        total: 0,
        managers: {}
      }
    };

    if (user.value.role === 3) {
      // Role 3: Managers with direct role 2 staff
      groupedData.AM = groupStaffByPosition(detailData.staff, 'AM');
      groupedData.PM = groupStaffByPosition(detailData.staff, 'PM');
    } else if (user.value.role === 1) {
      // Role 1: Directors
      if (detailData.managers) {
        // Directors with managers
        groupedData.AM = {
          inOffice: 0,
          wfh: 0,
          total: 0,
          managers: {}
        };
        groupedData.PM = {
          inOffice: 0,
          wfh: 0,
          total: 0,
          managers: {}
        };

        Object.keys(detailData.managers).forEach(managerTeamName => {
          const managerGroup = detailData.managers[managerTeamName];
          const managerName = managerGroup.manager_name;
          const managerStaff = managerGroup.staff;

          // Group by position
          const positionGroups = {};
          managerStaff.forEach(staff => {
            const position = staff.position || 'Unknown';
            if (!positionGroups[position]) {
              positionGroups[position] = { inOffice: 0, wfh: 0, total: 0, staff: [] };
            }
            positionGroups[position].total += 1;
            if (staff.status_am === 'OFFICE') {
              positionGroups[position].inOffice += 1;
              groupedData.AM.inOffice += 1;
            } else {
              positionGroups[position].wfh += 1;
              groupedData.AM.wfh += 1;
            }
            positionGroups[position].staff.push({ staff_id: staff.staff_id, name: staff.name, status: staff.status_am });

            if (staff.status_pm === 'OFFICE') {
              positionGroups[position].inOffice += 1;
              groupedData.PM.inOffice += 1;
            } else {
              positionGroups[position].wfh += 1;
              groupedData.PM.wfh += 1;
            }
            positionGroups[position].staff.push({ staff_id: staff.staff_id, name: staff.name, status: staff.status_pm });
          });

          groupedData.AM.managers[managerTeamName] = {
            manager_id: managerGroup.manager_id,
            manager_name: managerName,
            positions: positionGroups
          };

          groupedData.PM.managers[managerTeamName] = {
            manager_id: managerGroup.manager_id,
            manager_name: managerName,
            positions: positionGroups
          };

          groupedData.AM.total += managerStaff.length;
          groupedData.PM.total += managerStaff.length;
        });
      } else {
        // Directors with direct role 2 staff
        groupedData.AM = groupStaffByPosition(detailData.staff, 'AM');
        groupedData.PM = groupStaffByPosition(detailData.staff, 'PM');
      }
    }

    selectedDateDetails.value = groupedData;
    expandedTeams.value = {}; // Reset expanded teams
    expandedSubTeams.value = {}; // Reset expanded sub-teams

    // Show the card
    isRightContainerVisible.value = true;
  } else {
    alert('Error fetching details for the selected date.');
  }
}

// Fetch manager schedule details for a specific date
async function fetchManagerScheduleDetail(dateStr) {
  try {
    const response = await axios.get(`${import.meta.env.VITE_API_URL}/api/manager-schedule-detail/${user.value.staff_id}/${dateStr}`);
    return response.data;
  } catch (error) {
    console.error('Error fetching manager schedule detail:', error);
    return null;
  }
}

// Initiate loading of summary data in chunks
async function initiateChunkedSummaryLoading() {
  isLoading.value = true;
  const today = new Date();

  // Define the date ranges for current month and surrounding months
  const ranges = [];

  // Current month
  const currentMonthStart = new Date(today.getFullYear(), today.getMonth(), 1);
  const currentMonthEnd = new Date(today.getFullYear(), today.getMonth() + 1, 0);
  ranges.push({ start: new Date(currentMonthStart), end: new Date(currentMonthEnd) });

  // Months before current month (2 months)
  for (let i = 1; i <= 2; i++) {
    const start = new Date(today.getFullYear(), today.getMonth() - i, 1);
    const end = new Date(today.getFullYear(), today.getMonth() - i + 1, 0);
    ranges.push({ start, end });
  }

  // Months after current month (3 months)
  for (let i = 1; i <= 3; i++) {
    const start = new Date(today.getFullYear(), today.getMonth() + i, 1);
    const end = new Date(today.getFullYear(), today.getMonth() + i + 1, 0);
    ranges.push({ start, end });
  }

  // Function to load each range sequentially
  for (let i = 0; i < ranges.length; i++) {
    // For the first range (current month), load immediately
    // For others, load in the background with a slight delay
    if (i === 0) {
      await fetchManagerScheduleSummary(ranges[i].start, ranges[i].end);
    } else {
      setTimeout(async () => {
        await fetchManagerScheduleSummary(ranges[i].start, ranges[i].end);
      }, i * 1000); // 1-second interval between requests
    }
  }

  isLoading.value = false;
}

// Toggle the expansion state of a team card
function toggleTeam(timeOfDay, teamName) {
  const key = `${timeOfDay}-${teamName}`;
  expandedTeams.value[key] = !expandedTeams.value[key];
}

// Toggle the expansion state of a sub-team card
function toggleSubTeam(timeOfDay, managerName, positionName) {
  const key = `${timeOfDay}-${managerName}-${positionName}`;
  expandedSubTeams.value[key] = !expandedSubTeams.value[key];
}

// Compute counts for directors with managers
function computeManagerInOffice(timeOfDay, managerGroup) {
  if (timeOfDay === 'AM') {
    return managerGroup.positions && managerGroup.positions ? Object.values(managerGroup.positions).reduce((acc, pos) => acc + pos.inOffice, 0) : 0;
  } else if (timeOfDay === 'PM') {
    return managerGroup.positions && managerGroup.positions ? Object.values(managerGroup.positions).reduce((acc, pos) => acc + pos.inOffice, 0) : 0;
  }
  return 0;
}

function computeManagerWFH(timeOfDay, managerGroup) {
  if (timeOfDay === 'AM') {
    return managerGroup.positions && managerGroup.positions ? Object.values(managerGroup.positions).reduce((acc, pos) => acc + pos.wfh, 0) : 0;
  } else if (timeOfDay === 'PM') {
    return managerGroup.positions && managerGroup.positions ? Object.values(managerGroup.positions).reduce((acc, pos) => acc + pos.wfh, 0) : 0;
  }
  return 0;
}

function computeTotalManagerStaff(managerGroup) {
  return managerGroup.positions && managerGroup.positions ? Object.values(managerGroup.positions).reduce((acc, pos) => acc + pos.total, 0) : 0;
}

// Utility function to group staff by position
function groupStaffByPosition(staffList, timeOfDay) {
  const grouped = {};
  let totalInOffice = 0;
  let totalWFH = 0;

  staffList.forEach(staff => {
    const position = staff.position || 'Unknown';
    if (!grouped[position]) {
      grouped[position] = { position, inOffice: 0, wfh: 0, total: 0, staff: [] };
    }
    grouped[position].total += 1;
    if (staff[`status_${timeOfDay.toLowerCase()}`] === 'OFFICE') {
      grouped[position].inOffice += 1;
      grouped[timeOfDay].inOffice += 1;
    } else {
      grouped[position].wfh += 1;
      grouped[timeOfDay].wfh += 1;
    }
    grouped[position].staff.push({ staff_id: staff.staff_id, name: staff.name, status: staff[`status_${timeOfDay.toLowerCase()}`] });
  });

  grouped[timeOfDay].total = Object.values(grouped).reduce((acc, pos) => acc + pos.total, 0);

  return grouped;
}
</script>

<style scoped>
.dashboard-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.main-section {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.calendar-container {
  width: 70%;
  padding: 1rem;
  flex: 1;
  min-width: 300px;
  overflow-y: auto;
  position: relative;
}

.right-container {
  width: 30%;
  padding: 1.5rem;
  background-color: #f4f6f8;
  border-left: 1px solid #dfe3e8;
  overflow-y: auto;
  flex: none;
  min-width: 300px;
  height: 100%;
  position: relative;
  transition: transform 0.3s ease-in-out;
}

.right-container.show {
  display: block;
}

.details-container {
  display: flex;
  flex-direction: column;
}

.details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.details-header h2 {
  margin: 0;
  font-size: 1.75rem;
  color: #2e3a59;
}

.close-button {
  background: none;
  border: none;
  font-size: 1.75rem;
  cursor: pointer;
  color: #888;
}

.tabs {
  display: flex;
  margin-bottom: 1rem;
}

.tab {
  flex: 1;
  padding: 0.75rem 1rem;
  background-color: #e0e7ff;
  border: none;
  cursor: pointer;
  font-weight: 600;
  color: #141b4d;
  transition: background-color 0.3s ease;
}

.tab:not(:last-child) {
  border-right: 1px solid #c7d2fe;
}

.tab.active {
  background-color: #141b4d;
  color: #ffffff;
}

.tab:hover {
  background-color: #c7d2fe;
}

.tab-content {
  flex: 1;
}

.summary {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.summary-item {
  display: flex;
  align-items: center;
}

.summary-label {
  font-weight: 600;
  margin-right: 0.5rem;
  color: #2e3a59;
}

.summary-value {
  font-weight: 500;
  color: #141b4d;
}

.teams {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.team,
.manager-team {
  background-color: #ffffff;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  cursor: pointer; /* Indicate that the card is clickable */
}

.manager-sub-teams {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.sub-team {
  background-color: #f9fafb;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  padding: 0.75rem;
  cursor: pointer;
}

.team-header,
.sub-team-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.team-header h3,
.sub-team-header h4 {
  margin: 0;
  font-size: 1rem;
  color: #2e3a59;
}

.badge-container {
  display: flex;
  gap: 0.5rem;
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.85em;
  color: #ffffff;
}

.badge-office {
  background-color: #6BCB77; /* Green */
}

.badge-wfh {
  background-color: #FFD93D; /* Yellow */
  color: #000000; /* Black text for better visibility */
}

.staff-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.staff-card {
  display: flex;
  align-items: center;
  border: 1px solid #dfe3e8;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  background-color: #f9fafb;
}

.status-indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 0.75rem;
}

.status-indicator.green {
  background-color: #6BCB77;
}

.status-indicator.yellow {
  background-color: #FFD93D;
}

.staff-name {
  font-weight: 500;
  color: #2e3a59;
  font-size: 0.8rem;
}

.no-selection {
  text-align: center;
  color: #888;
  margin-top: 2rem;
  font-size: 1.1rem;
}

.fc {
  width: 100%;
  height: 100%;
}

.fc-event-main {
  padding: 2px;
}

.fc-daygrid-event {
  white-space: normal !important;
}

.calendar-event {
  /* Additional styling if needed */
}

.fc-daygrid-event-harness {
  margin-bottom: 2px !important;
}

/* Adjust the calendar height */
.fc .fc-view-harness {
  min-height: 0;
}

/* Hide the scrollbar but allow scrolling */
.calendar-container::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.right-container::-webkit-scrollbar {
  width: 8px;
}

.right-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.right-container::-webkit-scrollbar-track {
  background-color: transparent;
}

/* Media query for responsive layout */
@media (max-width: 768px) {
  .calendar-container {
    width: 100%;
  }

  .right-container {
    position: fixed; /* Change to fixed for overlay */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.95); /* Semi-transparent background */
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
    overflow-y: auto;
    padding: 1.5rem;
  }

  .right-container.show {
    transform: translateX(0);
  }

  /* Ensure text within badges remains black on yellow backgrounds */
  .badge-wfh, .badge-wfh-calendar {
    color: #000000 !important;
  }
}

@media (max-width: 768px) {
  .main-section {
    flex-direction: column;
  }

  .right-container {
    width: 100%;
    min-width: unset;
    height: auto;
    position: fixed; /* Ensure it overlays */
    right: 0;
    top: 0;
    box-shadow: none;
    background-color: #ffffff;
  }

  .calendar-container {
    width: 100%;
    height: 100%;
  }

  .details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tabs {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* New Styles for Conditional Text Colors */
.yellow-event {
  color: #000000 !important;
}

.default-event {
  color: #ffffff !important;
}

.yellow-event .badge,
.default-event .badge {
  color: inherit !important;
}

/* Loading Overlay Styles */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.spinner {
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Indicate that team cards are clickable */
.team.card,
.manager-team.card,
.sub-team.card {
  transition: background-color 0.2s ease;
}

.team.card:hover,
.manager-team.card:hover,
.sub-team.card:hover {
  background-color: #f0f4ff;
}

/* Manager Group Styling */
.manager-group {
  margin-bottom: 1rem;
}

.manager-group h4 {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: #2e3a59;
}
</style>