<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>メインメニュー</title>
  <style>
    #box {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
            display: inline-block;
            margin-top: -10px;
            width:500px
        }

        body {
          display: flex;
          align-items: flex-start;
        }
        
        #calendar-container {
          width: 300px;
        }
        
        table {
          width: 100%;
          border-collapse: collapse;
          margin-top: 20px;
        }
        
        th, td {
          border: 1px solid #ddd;
          padding: 8px;
          text-align: center;
          cursor: pointer;
        }
        
        th {
          background-color: #f2f2f2;
        }
        
        button {
          margin: 10px;
          padding: 5px 10px;
          font-size: 16px;
        }
        
        #month-year-selector {
          margin-bottom: 20px;
        }
        
        #current-month {
          font-size: 18px;
          font-weight: bold;
        }
        
        #news-container {
          width: 30%;
          padding: 20px;
        }
        
        #iframe-container {
            width: 400px;
            height: 400px;
            border: 10px solid #ddd;
            padding: 10px;
            box-sizing: content-box;
          }
        
        #iframe {
            width: 90%;
            height: 90%;
          }
        
        /* 今日の日付をハイライトするためのクラス */
        .today {
          background-color: #ffcccb; /* ピンク色（適宜変更） */
        }

  </style>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>



<body>
<!-- 左側-->
<!-- 左側-->
<!-- 左側-->
<!-- 左側-->
<!-- 左側-->
  <div id="calendar-container">
    <h2></h2>
    <div id="month-year-selector">
        <span id="current-month"></span>
        <button onclick="previousMonth()">前月</button>
        <button onclick="nextMonth()">次月</button>
        <select id="month-selector" onchange="changeMonth()">
            <option value="0">1月</option>
            <option value="1">2月</option>
            <option value="2">3月</option>
            <option value="3">4月</option>
            <option value="4">5月</option>
            <option value="5">6月</option>
            <option value="6">7月</option>
            <option value="7">8月</option>
            <option value="8">9月</option>
            <option value="9">10月</option>
            <option value="10">11月</option>
            <option value="11">12月</option>
        </select>
        <select id="year-selector" onchange="changeYear()">
            <!-- 2020年から2050年までの範囲を指定 -->
        </select>
    </div>
    <table id="calendar">
        <thead>
            <tr>
                <th>日</th>
                <th>月</th>
                <th>火</th>
                <th>水</th>
                <th>木</th>
                <th>金</th>
                <th>土</th>
            </tr>
        </thead>
        <tbody id="calendar-body"></tbody>
    </table>
</div>

<div id="iframe-container">
  <iframe id="iframe" frameborder="0" src="{{ url_for('static', filename='days.html') }}"></iframe>
</div>
</body>

<!-- 右側-->
<!-- 右側-->
<!-- 右側-->
<!-- 右側-->
<!-- 右側-->
 
<body>
    <div id="box">
      <h1 id="header">{{ currentHeaderText }}</h1>
      <div class="form-group">
        <select class="form-control" id="subjectSelector" onchange="changeContent(this.value)">
          <option value="subject.html">未選択</option>
            <option value="subject/ME.html">小学校算数</option>
            <option value="subjects/MJ.html">中学校数学</option>
            <option value="subjects/MH.html">高校数学</option>
            <option value="subjects/SE.html">小学校理科</option>
            <option value="subjects/SJ.html">中学校理科</option>
            <option value="subjects/SH.html">高校理科</option>
            <option value="subjects/JE.html">小学校国語</option>
            <option value="subjects/JJ.html">中学校国語</option>
            <option value="subjects/JH.html">高校国語</option>
            <option value="subjects/GE.html">小学校社会</option>
            <option value="subjects/GJ.html">中学校社会</option>
            <option value="subjects/GH.html">高校社会</option>
            <option value="subjects/EE.html">小学校英語</option>
            <option value="subjects/EJ.html">中学校英語</option>
            <option value="subjects/EH.html">高校英語</option>
        </select>
    </div>

        <!-- 埋め込むHTMLを表示する領域 -->
        <div>
          <iframe id="embeddedFrame" width="100%" height="360" frameborder="0" scrolling="no" src="{{ url_for('static', filename=currentEmbed) }}"></iframe>
        </div>

        <hr>
        <font size="1">検索結果は灰色で表示される</font>
    </div>

</body>

<!-- 左側スクリプト-->
<!-- 左側スクリプト-->
<!-- 左側スクリプト-->
<!-- 左側スクリプト-->
<!-- 左側スクリプト-->
  <script>
    let today = new Date();
    let currentMonth = new Date(today.getFullYear(), today.getMonth());
    let monthSelector = document.getElementById("month-selector");
    let yearSelector = document.getElementById("year-selector");
    let currentMonthDisplay = document.getElementById("current-month");
    let iframe = document.getElementById("iframe");
    let currentFilePathDisplay = document.getElementById("current-file-path");

    // 年の範囲を生成
    const startYear = 2020;
    const endYear = 2050;

    for (let year = startYear; year <= endYear; year++) {
        let option = document.createElement("option");
        option.value = year;
        option.textContent = year + "年";
        yearSelector.appendChild(option);
    }

    function displayCalendar() {
        const calendarBody = document.getElementById("calendar-body");
        calendarBody.innerHTML = "";

        const firstDayOfMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1);
        const lastDayOfMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 0);

        let date = new Date(firstDayOfMonth);

        for (let i = 0; i < firstDayOfMonth.getDay(); i++) {
            const cell = document.createElement("td");
            calendarBody.appendChild(cell);
        }

        while (date <= lastDayOfMonth) {
            const cell = document.createElement("td");
            cell.textContent = date.getDate();
            cell.setAttribute("data-date", formatDate(date));

            // 今日の日付と一致する場合はハイライトする
            if (date.toDateString() === today.toDateString()) {
                cell.classList.add("today");
            }

            cell.addEventListener("click", handleDateClick);
            calendarBody.appendChild(cell);

            if (date.getDay() === 6) {
                calendarBody.appendChild(document.createElement("tr"));
            }

            date.setDate(date.getDate() + 1);
        }

        // 現在の月と年を表示
        const options = { year: 'numeric', month: 'long' };
        currentMonthDisplay.textContent = currentMonth.toLocaleDateString('ja-JP', options);
    }

    function formatDate(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, "0");
        const day = String(date.getDate()).padStart(2, "0");
        return `${year}/${month}/${day}`;
    }

    function handleDateClick(event) {
            const clickedDate = event.currentTarget.getAttribute("data-date");

            // iframe の src を更新
            const filePath = "{{ url_for('static', filename='data/') }}" + clickedDate.replace(/\//g, '/') + ".html";

            iframe.src = filePath;

            // ファイルパスを表示
            currentFilePathDisplay.textContent = `表示しているファイル: ${filePath}`;

            // 絶対パスを表示（コンソールログ）
            const absolutePath = new URL(filePath, window.location.href).href;
            console.log(`絶対パス: ${absolutePath}`);

            // コンソールにログを出力
            console.log(`クリックされた日付: ${clickedDate}`);
            console.log(`予備のHTMLファイルのパス: ${filePath}`);
        }

    function previousMonth() {
        currentMonth.setMonth(currentMonth.getMonth() - 1);
        displayCalendar();
    }

    function nextMonth() {
        currentMonth.setMonth(currentMonth.getMonth() + 1);
        displayCalendar();
    }

    function changeMonth() {
        currentMonth.setMonth(parseInt(monthSelector.value));
        displayCalendar();
    }

    function changeYear() {
        currentMonth.setFullYear(parseInt(yearSelector.value));
        displayCalendar();
    }

    displayCalendar();
</script>

<!-- 右側スクリプト-->
<!-- 右側スクリプト-->
<!-- 右側スクリプト-->
<!-- 右側スクリプト-->
<!-- 右側スクリプト-->
<script>
  // ページ読み込み時にコンテンツを初期化
  window.onload = function() {
      const initialSelectedValue = "subject.html";
      changeContent(initialSelectedValue);
  };

  // プルダウンメニューの変更でコンテンツを切り替える関数
  function changeContent(selectedValue) {
      const subjectSelector = document.getElementById("subjectSelector");
      const currentHeaderText = subjectSelector.options[subjectSelector.selectedIndex].text;

      // ヘッダーを変更
      document.getElementById('header').innerText = currentHeaderText;

      // HTMLを変更
      document.getElementById('embeddedFrame').src = "{{ url_for('static', filename='') }}" + selectedValue;
  }
</script>






</body>
</html>