<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <style>
    body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        .container {
            display: flex;
            height: 100%;
            flex-direction: column; /* Change to column layout */
        }

        .top {
            flex: 2; /* 2 parts of the top section */
            display: flex;
            flex-direction: row;
            height:500px; /* Align items in a row */
        }

        .top .left {
            flex: 1.5; /* 2 parts out of 10 */
            border: 1px solid #000;
            padding: 10px;
            box-sizing: border-box;
            overflow: auto; /* Add this to enable scrolling if content is too large */
        }

        .top .center {
            flex: 4; /* 3 parts out of 10 */
            border: 1px solid #000;
            padding: 10px;
            box-sizing: border-box;
            overflow: scroll; /* Add this to enable scrolling if content is too large */
        }

        .top .right {
            flex: 1.5; /* 5 parts out of 10 */
            border: 1px solid #000;
            padding: 10px;
            box-sizing: border-box;
            overflow-y: auto; /* Add this to enable scrolling if content is too large */
        }

        .bottom {
            flex: 2; /* 8 parts out of 10 for the bottom section */
            display: flex;
            flex-direction: row; 
            height:500px;
            /* Align items in a row */
        }

        .bottom .left {
            flex: 4; /* 4 parts out of 8 for the bottom-left section */
            border: 1px solid #000;
            padding: 10px;
            box-sizing: border-box;
            overflow: auto; /* Add this to enable scrolling if content is too large */
        }
        .bottom .right {
            flex: 4; /* 4 parts out of 8 for the bottom-right section */
            border: 1px solid #000;
            padding: 10px;
            box-sizing: border-box;
            overflow: auto; /* Add this to enable scrolling if content is too large */
        }


        .delete-button {
            margin-left: 10px;
            cursor: pointer;
            color: red;
        }



        table {
            border-collapse: collapse;
          }
      
          table, th, td {
            border: 1px solid black;
          }


        .selected {
            background-color: #a5d6a7;
        }

        #totalHours {
            margin-top: 20px;
        }



        #calendar {
            width: 90%;

            margin: 0 auto;
        }
        button {
            margin: 5px;
        }
        .fc-event.selected {
            background-color: #c4e3f3 !important;
            border-color: #a8c8d8 !important;
            color: #16527a !important;
        }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" />
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <!-- Moment.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  <!-- FullCalendar JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>
  <title>入力画面</title>
</head>
<body>
  <div class="container">
    <div class="top">
      <!-- 左上 -->
      <!-- 左上 -->
      <!-- 左上 -->
      <!-- 左上 -->
      <!-- 左上 -->
      <div class="left">
        <div id="dashboard">
          <h2>個人情報</h2>
          <p><strong>ユーザーID:</strong> {{ user_info.username }}</p>
          <p><strong>名前:</strong> {{ user_info.name }}</p> 
          <a href="{{ url_for('logout') }}">ログアウト</a> </div>
      </div>
      <!-- 右上 -->
      <!-- 右上 -->
      <!-- 右上 -->
      <!-- 右上 -->
      <!-- 右上 -->
      <div class="center">
        <h2>週間空き時間チェッカー</h2> <label for="timeIncrement">刻み時間:</label> <select id="timeIncrement" onchange="changeTimeIncrement()">
                        <option value="60">60分</option>
                        <option value="30">30分</option>
                        <option value="15">15分</option>
                    </select>
        <table id="scheduleTable">
          <thead>
            <tr>
              <th></th>
              <th>日曜日</th>
              <th>月曜日</th>
              <th>火曜日</th>
              <th>水曜日</th>
              <th>木曜日</th>
              <th>金曜日</th>
              <th>土曜日</th>
            </tr>
          </thead>
          <tbody>
            <!-- 時間帯はJavaScriptで生成 -->
          </tbody>
        </table>
      </div>
      <!-- 右上 -->
      <!-- 右上 -->
      <!-- 右上 -->
      <!-- 右上 -->
      <!-- 右上 -->
      <div class="right">
        <div id="totalHours"></div> <button id="saveTotalHoursBtn" onclick="updateAndSaveTotalHours()">合計時間を保存</button> </div>
    </div>
  </div>
  <!-- 左下 -->
  <!-- 左下 -->
  <!-- 左下 -->
  <!-- 左下 -->
  <!-- 左下 -->
  <div class="bottom">
    <div class="left">
      <!-- カレンダー表示 -->
      <div id="calendar"></div>
      <!-- ボタンをクリックしてCSVで予定書き込み --><button id="writeToCSVBtn">書き込み</button> <button id="loadFromCSVBtn">読み込み</button>
      <!-- 日付ジャンプ用のinput --><input type="date" id="jumpToDateInput" />
      <!-- ボタンをクリックしてイベント追加 --><button id="addEventBtn">予定追加</button>
      <!-- ボタンをクリックして選択されたイベント削除 --><button id="deleteEventBtn">予定削除</button>
      <!-- ボタンをクリックしてイベント名変更 --><button id="changeEventNameBtn">名前変更</button> </div>
    <!-- 右下 -->
    <!-- 右下 -->
    <!-- 右下 -->
    <!-- 右下 -->
    <!-- 右下 -->
    <div class="right">
      <!-- Content for the bottom-right section -->
      <p><a href="{{ url_for('rikai_page1') }}">小中理解度チェック1へ</a></p>
      <p><a href="{{ url_for('rikai_page2') }}">高校理解度チェックへ</a></p>
      <p><a href="{{ url_for('main_page') }}">メインページへ</a></p>
      <p><a href="{{ url_for('graph_page') }}">グラフへ</a></p>
      <!-- Add your content here -->
    </div>
  </div>
  </div>
</body>
<!-- 右上スクリプト -->
<!-- 右上スクリプト -->
<!-- 右上スクリプト -->
<!-- 右上スクリプト -->
<!-- 右上スクリプト -->
<!-- 右上スクリプト -->
<!-- 右上スクリプト -->
<script>
  let timeIncrement = 60; // デフォルトの刻み時間

    function generateTimeSlots() {
        const timeSlots = [];
        for (let hour = 0; hour < 24; hour++) {
            for (let minute = 0; minute < 60; minute += timeIncrement) {
                const time = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
                timeSlots.push(time);
            }
        }
        return timeSlots;
    }

    function generateTable() {
        const tableBody = document.querySelector('#scheduleTable tbody');
        const timeSlots = generateTimeSlots();

        // 表を生成する前に前のデータをクリア
        tableBody.innerHTML = '';

        timeSlots.forEach(time => {
            const row = document.createElement('tr');
            const timeCell = document.createElement('td');
            timeCell.textContent = time;
            row.appendChild(timeCell);

            for (let day = 0; day < 7; day++) {
                const cell = document.createElement('td');
                cell.classList.add('time-slot');
                row.appendChild(cell);
            }

            tableBody.appendChild(row);
        });
    }

    function toggleCellState(cell) {
        cell.classList.toggle('selected');
        updateTotalHours();
    }

    function changeTimeIncrement() {
        const newTimeIncrement = parseInt(document.getElementById('timeIncrement').value, 10);
        if (confirm(`刻み時間を変更します。変更すると選択されているデータがクリアされます。よろしいですか？`)) {
            timeIncrement = newTimeIncrement;
            generateTable();
            setupCellClickEvent();
            updateTotalHours();
        } else {
            document.getElementById('timeIncrement').value = timeIncrement;
        }
    }

    function setupCellClickEvent() {
        document.querySelectorAll('.time-slot').forEach(function(cell) {
            cell.addEventListener('click', function() {
                toggleCellState(cell);
            });
        });
    }

    function updateTotalHours() {
        const totalHoursElement = document.getElementById('totalHours');
        const daysOfWeek = ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'];
    
        totalHoursElement.innerHTML = '<p><strong>各曜日の合計時間:</strong></p>';
        
        daysOfWeek.forEach(day => {
            const selectedCells = document.querySelectorAll(`.time-slot.selected:nth-child(${daysOfWeek.indexOf(day) + 2})`);
            const totalMinutes = Array.from(selectedCells).reduce((total, cell) => {
                return total + (cell.classList.contains('selected') ? timeIncrement : 0);
            }, 0);
            const totalHours = totalMinutes / 60;
    
            // 数値として保持し、文字列に変換して挿入
            totalHoursElement.innerHTML += `<p>${day}: ${Number(totalHours).toFixed(2)} 時間</p>`;
        });
    }

    document.addEventListener('DOMContentLoaded', function() {
        generateTable();
        setupCellClickEvent();
        updateTotalHours();
    });

    function updateAndSaveTotalHours() {
        updateTotalHours(); // 既存の合計時間表示を行う関数
        saveTotalHoursToCSV(); // 新しく追加する関数
    }

    //合計時間をCSVに保存
    function saveTotalHoursToCSV() {
        const daysOfWeek = ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'];
        const totalHoursData = [];

        daysOfWeek.forEach(day => {
            const selectedCells = document.querySelectorAll(`.time-slot.selected:nth-child(${daysOfWeek.indexOf(day) + 2})`);
            const totalMinutes = Array.from(selectedCells).reduce((total, cell) => {
                return total + (cell.classList.contains('selected') ? timeIncrement : 0);
            }, 0);
            const totalHours = totalMinutes / 60;

            totalHoursData.push(totalHours);
        });

        // ユーザー名と合計時間データをサーバーサイドに送信
        const username = '{{ user_info.username }}';
        const totalHoursCSVData = `${username},${totalHoursData.join(',')}`;

        // ユーザー名が同じ行が存在するか確認
        $.ajax({
            type: 'GET',
            url: '/check_duplicate_username',
            data: { username: username },
            success: function(response) {
                if (response === 'true') {
                    if (confirm('同じユーザー名が既に存在します。前のデータを削除して上書きしてもよろしいですか？')) {
                        deleteAndSaveDataToServer(username, totalHoursCSVData);
                    } else {
                        console.log('データの上書きをキャンセルしました。');
                    }
                } else {
                    saveDataToServer(totalHoursCSVData);
                }
            },
            error: function(error) {
                console.error(error);
            }
        });
    }

    //データを削除してサーバーサイドにデータを保存
    function deleteAndSaveDataToServer(username, data) {
        $.ajax({
            type: 'POST',
            url: '/delete_and_save_total_hours',
            data: { username: username, total_hours_data: data },
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.error(error);
            }
        });
    }
    //サーバーサイドにデータを保存
    function saveDataToServer(data) {
        // Ajaxを使用してサーバーサイドにデータを送信
        $.ajax({
            type: 'POST',
            url: '/save_total_hours',
            data: { total_hours_data: data },
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.error(error);
            }
        });
    }
</script>
<!-- 左下スクリプト -->
<!-- 左下スクリプト -->
<!-- 左下スクリプト -->
<!-- 左下スクリプト -->
<!-- 左下スクリプト -->
<!-- 左下スクリプト -->
<script>
  $(document).ready(function () {
        const calendar = $('#calendar');
        let selectedEventId;

        calendar.fullCalendar({
            editable: true,
            

            eventClick: function (calEvent) {
                // イベントクリック時の処理
                if (selectedEventId !== calEvent.id) {
                    clearSelectedEventHighlight();
                    selectedEventId = calEvent.id;
                    highlightSelectedEvent();
                    console.log('Selected Event:', calEvent);
                }
            },
            eventRender: function (event, element) {
                // イベントレンダリング時の処理
                if (event.id === selectedEventId) {
                    element.addClass('selected');
                }
            },
        });

        // イベント追加
        $('#addEventBtn').on('click', function () {
            const currentDate = calendar.fullCalendar('getDate');
            const newEvent = {
                id: 'event' + (calendar.fullCalendar('clientEvents').length + 1),
                title: '新しいイベント',
                start: currentDate.format('YYYY-MM-DD'),
                end: currentDate.format('YYYY-MM-DD'),
            };
            calendar.fullCalendar('renderEvent', newEvent, true);
        });

        // イベント削除
        $('#deleteEventBtn').on('click', function () {
            const selectedEvent = calendar.fullCalendar('clientEvents', function (event) {
                return event.id === selectedEventId;
            })[0];

            if (selectedEvent) {
                calendar.fullCalendar('removeEvents', selectedEvent.id);
                clearSelectedEventHighlight();
            }
        });

        // イベント名変更
        $('#changeEventNameBtn').on('click', function () {
            const selectedEvent = calendar.fullCalendar('clientEvents', function (event) {
                return event.id === selectedEventId;
            })[0];

            if (selectedEvent) {
                const newName = prompt('新しい名前を入力してください:', selectedEvent.title);
                if (newName !== null) {
                    selectedEvent.title = newName;
                    calendar.fullCalendar('updateEvent', selectedEvent);
                }
            }
        });

        // 日付ジャンプ
        $('#jumpToDateInput').on('change', function () {
            const jumpDate = $(this).val();
            if (jumpDate) {
                calendar.fullCalendar('gotoDate', jumpDate);
            }
        });

        // CSVで予定書き込み
        $('#writeToCSVBtn').on('click', function () {
            // 確認ダイアログを表示
            if (confirm('データを更新します。よろしいですか？')) {
                writeToCSV();
            }
        });

    //FullCalendarのイベントをCSVに書き込む
    function writeToCSV() {
        const events = $('#calendar').fullCalendar('clientEvents');
        const username = '{{ user_info.username }}';

        const csvData = convertEventsToCSV(events);

        // サーバーサイドにCSVデータを送信
        $.ajax({
            type: 'POST',
            url: '/write_fullcalendar_data',
            data: { username: username, csv_data: csvData },
            success: function (response) {
                console.log(response);
            },
            error: function (error) {
                console.error(error);
            }
        });
    }


    //ボタンクリックでFullCalendarのイベントをCSVから読み込み
    $('#loadFromCSVBtn').on('click', function () {
        loadFromCSV();
    });

    //FullCalendarのイベントをCSVから読み込む
    function loadFromCSV() {
        const username = '{{ user_info.username }}';

        // サーバーサイドからCSVデータを取得
        $.ajax({
            type: 'GET',
            url: '/read_fullcalendar_data',
            data: { username: username },
            success: function (csvData) {
                // CSVデータをFullCalendarに読み込む
                $('#calendar').fullCalendar('removeEvents');
                $('#calendar').fullCalendar('addEventSource', parseCSVtoEvents(csvData));
            },
            error: function (error) {
                console.error(error);
            }
        });
    }

    function parseCSVtoEvents(csvData) {
        const events = [];
    
        // CSVデータを行ごとに分割
        const rows = csvData.split('\n');
    
        // ヘッダー行を取得
        const headers = rows[0].split(',');
    
        // 各行を処理
        for (let i = 1; i < rows.length; i++) {
            const row = rows[i].split(',');
            const event = {};
    
            // 各列を処理
            for (let j = 0; j < headers.length; j++) {
                // ヘッダーと対応する列の値をセット
                event[headers[j]] = row[j];
            }
    
            // FullCalendarのイベントオブジェクトに変換し、配列に追加
            events.push({
                id: event['ID'],
                title: event['Title'],
                start: event['Start'],
                end: event['End'],
            });
        }
    
        return events;
    }


    //FullCalendarのイベントをCSV形式に変換
    function convertEventsToCSV(events) {
        const headers = ['ID', 'Title', 'Start', 'End'];
        const csvRows = [headers.join(',')];

        events.forEach(event => {
            const row = [
                event.id,
                event.title,
                moment(event.start).format('YYYY-MM-DD'),
                moment(event.end).format('YYYY-MM-DD'),
            ];
            csvRows.push(row.join(','));
        });

        return csvRows.join('\n');
    }
    

        // イベントを選択時にハイライト
        function highlightSelectedEvent() {
            calendar.find('.fc-event[data-id="' + selectedEventId + '"]').addClass('selected');
        }

        // 選択中のイベントのハイライトをクリア
        function clearSelectedEventHighlight() {
            calendar.find('.fc-event').removeClass('selected');
            selectedEventId = null;
        }

        // CSV変換関数
        function convertToCSV(events) {
            const headers = ['ID', 'Title', 'Start', 'End'];
            const csvRows = [];
            
            csvRows.push(headers.join(','));

            events.forEach(event => {
                const row = [
                    event.id,
                    event.title,
                    moment(event.start).format('YYYY-MM-DD'),
                    moment(event.end).format('YYYY-MM-DD'),
                ];
                csvRows.push(row.join(','));
            });

            return csvRows.join('\n');
        }
    });
</script>
</html>