<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>週間空き時間チェッカー</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

        table {
            width: 80%;
            margin: 20px auto;
            border-collapse: collapse;
        }

        th, td {
            padding: 10px;
            border: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
        }

        td {
            cursor: pointer;
        }

        .selected {
            background-color: #a5d6a7;
        }

        #totalHours {
            margin-top: 20px;
        }
    </style>
</head>
<body>

<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 id="totalHours"></div>

<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();
        saveState();
    }

    function changeTimeIncrement() {
        const newTimeIncrement = parseInt(document.getElementById('timeIncrement').value, 10);
        if (confirm(`刻み時間を変更します。変更すると選択されているデータがクリアされます。よろしいですか？`)) {
            timeIncrement = newTimeIncrement;
            generateTable();
            setupCellClickEvent();
            updateTotalHours();
            saveState();
        } 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}: ${totalHours.toFixed(2)} 時間</p>`;
        });
    }

    function saveState() {
        const state = {};

        document.querySelectorAll('.time-slot').forEach((cell, index) => {
            state[index] = cell.classList.contains('selected');
        });

        localStorage.setItem('scheduleState', JSON.stringify(state));
    }

    function restoreState() {
        const savedState = localStorage.getItem('scheduleState');

        if (savedState) {
            const state = JSON.parse(savedState);

            document.querySelectorAll('.time-slot').forEach((cell, index) => {
                if (state[index]) {
                    cell.classList.add('selected');
                } else {
                    cell.classList.remove('selected');
                }
            });
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        generateTable();
        setupCellClickEvent();
        updateTotalHours();
        restoreState();
    });
</script>

</body>
</html>
