
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>會議室預約</title>
  <style>
    body { font-family: sans-serif; padding: 1em; margin: 0; }
    h1 { text-align: center; }
    .controls { text-align: center; margin-bottom: 1em; }
    .calendar-container { display: flex; flex-wrap: wrap; gap: 1em; justify-content: center; }
    .calendar-frame { flex: 1 1 450px; max-width: 450px; border: 1px solid #ccc; border-radius: 8px; overflow: hidden; }
    iframe { width: 100%; height: 600px; border: none; }
    label { margin: 0 1em; }
    button { margin: 0 0.5em; }
    @media (max-width: 768px) {
      .calendar-frame { flex-basis: 100%; max-width: 100%; }
    }
  </style>
</head>
<body>
  <h1>
	會議室預約
	<a href="mr-booking.pdf" target="_blank"
     style="font-size: 0.6em; margin-left: 1em; text-decoration: none; color: #555;"
     title="操作說明">
    📄
    </a>
  </h1>
  <div class="controls">
    <label><input type="checkbox" id="csoToggle" checked> 中山辦公室</label>
    <label><input type="checkbox" id="hpoToggle" checked> 和平辦公室</label>
    <div style="display:none">
      <button onclick="changeMonth(-1)">上個月</button>
      <button onclick="changeMonth(0)">回到本月</button>
      <button onclick="changeMonth(1)">下個月</button>
    </div>
  </div>
  <div class="calendar-container" id="calendarContainer"></div>

  <script>
    const calendars = [
      { id: "c_1881qi00td46aj16iuhslqeongfeg@resource.calendar.google.com", title: "中山4樓會議室-A (6人, 視訊)", office: "CSO" },
      { id: "c_1885t5fbgldb8jo6jqe925p9unv50@resource.calendar.google.com", title: "中山4樓會議室-B (8人, 視訊)", office: "CSO" },
      { id: "c_188bt1lurl3v0higl8ufugseg1r7o@resource.calendar.google.com", title: "中山4樓會議室-C (8人, 視訊)", office: "CSO" },
      { id: "c_1883ghjqnlr36itikid3lbqjarbm8@resource.calendar.google.com", title: "中山5樓會議室 (6人, 視訊)", office: "CSO" },
      { id: "c_1886tdhriiv2mjisndp2ckc8bccfi@resource.calendar.google.com", title: "中山6樓會議室-A (6人)", office: "CSO" },
      { id: "c_18892h3dq7sregecn4h21fnj4if9o@resource.calendar.google.com", title: "中山6樓會議室-B (30人)", office: "CSO" },
      { id: "c_188djr7noi1n2hmtgbq9skfv3ik1e@resource.calendar.google.com", title: "和平4樓會議室 (6人, 視訊)", office: "HPO" },
      { id: "c_1883bo5u29mvqijkmkgj5qt1hjaa4@resource.calendar.google.com", title: "和平7樓會議室-A (10人, 視訊)", office: "HPO" },
      { id: "c_1885uaf2g4q2ajbdkcqrb1idu8qme@resource.calendar.google.com", title: "和平7樓會議室-B (4人)", office: "HPO" },
      { id: "c_1889su191c91cg4tkot9j0rh13006@resource.calendar.google.com", title: "和平9樓會議室-A (10人, 視訊)", office: "HPO" },
      { id: "c_18883e8pcd484hvrj7dn64eb9di2s@resource.calendar.google.com", title: "和平9樓會議室-B (4人)", office: "HPO" },
      { id: "c_188fkq8k7ngleigkhgepe72it155c@resource.calendar.google.com", title: "和平10樓會議室-A (12人, 視訊)", office: "HPO" },
      { id: "c_188b3bviv2ppaintguba374ig08d4@resource.calendar.google.com", title: "和平10樓會議室-B (8人, 視訊)", office: "HPO" },
    ];

    let currentDate = new Date();

    function renderCalendars() {
      const container = document.getElementById('calendarContainer');
      container.innerHTML = '';
      const showCSO = document.getElementById('csoToggle').checked;
      const showHPO = document.getElementById('hpoToggle').checked;

      calendars.forEach(c => {
        if ((c.office === 'CSO' && showCSO) || (c.office === 'HPO' && showHPO)) {
          const calendarUrl = `https://calendar.google.com/calendar/embed?src=${encodeURIComponent(c.id)}&ctz=Asia/Taipei`;
          const calendarHTML = `
            <div class="calendar-frame">
              <div style="text-align:center; font-weight:bold; padding: 0.5em">
                <a href="${calendarUrl}" target="_blank">${c.title}</a>
              </div>
              <iframe src="${calendarUrl}"></iframe>
            </div>
          `;
          container.innerHTML += calendarHTML;
        }
      });

      updateHash();
    }

    function changeMonth(offset) {
      if (offset === 0) {
        currentDate = new Date();
      } else {
        currentDate.setMonth(currentDate.getMonth() + offset);
      }

      const year = currentDate.getFullYear();
      const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
      const start = `${year}${month}01`;
      const endDate = new Date(year, currentDate.getMonth() + 1, 0);
      const end = `${year}${month}${endDate.getDate().toString().padStart(2, '0')}`;

      const iframes = document.querySelectorAll('iframe');
      let index = 0;
      calendars.forEach(c => {
        const isVisible = ((c.office === 'CSO' && document.getElementById('csoToggle').checked) || (c.office === 'HPO' && document.getElementById('hpoToggle').checked));
        if (isVisible) {
          const newSrc = `https://calendar.google.com/calendar/embed?src=${encodeURIComponent(c.id)}&ctz=Asia/Taipei&dates=${start}/${end}`;
          iframes[index].src = newSrc;
          index++;
        }
      });
    }

    function handleHash() {
      const hash = window.location.hash.toLowerCase();
      const cso = document.getElementById('csoToggle');
      const hpo = document.getElementById('hpoToggle');

      if (hash === '#cso') {
        cso.checked = true; hpo.checked = false;
      } else if (hash === '#hpo') {
        cso.checked = false; hpo.checked = true;
      } else if (hash === '#all') {
        cso.checked = true; hpo.checked = true;
      }
      renderCalendars();
    }

    function updateHash() {
      const cso = document.getElementById('csoToggle').checked;
      const hpo = document.getElementById('hpoToggle').checked;
      if (cso && hpo) {
        window.location.hash = 'all';
      } else if (cso) {
        window.location.hash = 'cso';
      } else if (hpo) {
        window.location.hash = 'hpo';
      } else {
        window.location.hash = ''; // or keep as-is
      }
    }

    document.getElementById('csoToggle').addEventListener('change', renderCalendars);
    document.getElementById('hpoToggle').addEventListener('change', renderCalendars);

    window.addEventListener('hashchange', handleHash);
    window.addEventListener('load', () => {
      handleHash();
      renderCalendars();
    });
  </script>
</body>
</html>