<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>シンプルなプルダウンリスト</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        form {
            max-width: 300px; /* フォーム全体の最大幅 */
            margin: auto;
            padding: 1em;
            border: 1px solid #ccc;
            border-radius: 1em;
        }
        div + div {
            margin-top: 1em;
        }
        label {
            display: block;
            margin-bottom: 0.5em;
        }
        select, input[type="submit"], input[type="date"], input[type="time"], input[type="text"], input[type="number"], button {
            width: 100%; /* 各入力欄を最大幅に設定 */
            padding: 0.5em;
            margin-top: 0.5em;
            box-sizing: border-box;
        }
    </style>
</head>
<body>

<form id="simpleDropdownForm">
    <div>
        <label for="date">日付を選択:</label>
        <input type="date" id="date" name="date">
    </div>
    <div>
        <label for="departureTime">出発時刻:</label>
        <select id="departureTime" name="departureTime"></select>
    </div>
    <div>
        <label for="returnTime">帰着時刻:</label>
        <select id="returnTime" name="returnTime"></select>
    </div>
    <div>
        <label for="vehicle">車両を選択:</label>
        <select id="vehicle" name="vehicle">
            <option value="">-- 選択してください --</option>
            <option value="car1">車両 1</option>
            <option value="car2">車両 2</option>
            <option value="car3">車両 3</option>
        </select>
    </div>
    <div>
        <label for="destination">目的地:</label>
        <input type="text" id="destination" name="destination" list="destinationOptions">
        <datalist id="destinationOptions"></datalist>
    </div>
    <div>
        <label for="startOdometer">開始時オドメーターkm:</label>
        <input type="number" id="startOdometer" name="startOdometer" min="0" step="1">
    </div>
    <div>
        <label for="endOdometer">終了時オドメーターkm:</label>
        <input type="number" id="endOdometer" name="endOdometer" min="0" step="1">
    </div>
    <div>
        <label for="fuelAmount">給油量L:</label>
        <input type="number" id="fuelAmount" name="fuelAmount" min="0" step="0.1" value="0">
    </div>
    <div>
        <label for="category">メンバーを選択:</label>
        <select id="category" name="category">
            <option value="">-- 選択してください --</option>
        </select>
    </div>
    <div>
        <label for="otherCategory">その他メンバー:</label>
        <input type="text" id="otherCategory" name="otherCategory" list="otherOptions">
        <datalist id="otherOptions">
            <option value="シイタケ">
            <option value="シメジ">
        </datalist>
        <button type="button" onclick="clearOtherCategory()">クリア</button>
    </div>
    <div>
        <label for="item">ドライバーを選択:</label>
        <select id="item" name="item">
            <option value="">-- 選択してください --</option>
        </select>
    </div>
    <div>
        <input type="submit" value="送信">
    </div>
</form>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const today = new Date().toISOString().split('T')[0];
        document.getElementById('date').value = today;

        // 時刻のプルダウンリストを設定
        const times = [];
        for (let i = 0; i < 24 * 60; i += 30) {
            const hours = String(Math.floor(i / 60)).padStart(2, '0');
            const minutes = String(i % 60).padStart(2, '0');
            times.push(`${hours}:${minutes}`);
        }

        const departureTimeSelect = document.getElementById('departureTime');
        const returnTimeSelect = document.getElementById('returnTime');

        times.forEach(time => {
            departureTimeSelect.innerHTML += `<option value="${time}">${time}</option>`;
        });

        // 前回の入力値をローカルストレージから読み込む
        const previousDepartureTime = localStorage.getItem('previousDepartureTime');
        const previousReturnTime = localStorage.getItem('previousReturnTime');
        const previousStartOdometer = localStorage.getItem('previousStartOdometer');
        if (previousDepartureTime) {
            departureTimeSelect.value = previousDepartureTime;
        } else {
            // 現在時刻をデフォルトに設定
            const now = new Date();
            const currentTime = `${String(now.getHours()).padStart(2, '0')}:${String(Math.floor(now.getMinutes() / 30) * 30).padStart(2, '0')}`;
            departureTimeSelect.value = currentTime;
        }
        updateReturnTimeOptions();
        if (previousReturnTime) {
            returnTimeSelect.value = previousReturnTime;
        }

        if (previousStartOdometer) {
            document.getElementById('startOdometer').value = previousStartOdometer;
            document.getElementById('endOdometer').value = previousStartOdometer;
        }

        departureTimeSelect.addEventListener('change', updateReturnTimeOptions);

        function updateReturnTimeOptions() {
            const departureTime = departureTimeSelect.value;
            returnTimeSelect.innerHTML = ''; // クリア
            let startAdding = false;
            times.forEach(time => {
                if (time === departureTime) {
                    startAdding = true;
                }
                if (startAdding) {
                    returnTimeSelect.innerHTML += `<option value="${time}">${time}</option>`;
                }
            });
        }

        loadMemberOptions();
        loadDestinationOptions();
        
        // ローカルストレージからその他メンバーを読み込み
        const savedOtherCategory = localStorage.getItem('otherCategory');
        if (savedOtherCategory) {
            document.getElementById('otherCategory').value = savedOtherCategory;
            updateDriverOptions();
        }
    });

    document.getElementById('category').addEventListener('change', updateDriverOptions);
    document.getElementById('otherCategory').addEventListener('input', updateDriverOptions);

    function loadMemberOptions() {
        const categorySelect = document.getElementById('category');
        categorySelect.innerHTML = '<option value="">-- 選択してください --</option>';
        
        // ローカルストレージからメンバーリストを読み込み
        const savedMembers = JSON.parse(localStorage.getItem('memberList') || '[]');
        savedMembers.forEach(member => {
            categorySelect.innerHTML += `<option value="${member}">${member}</option>`;
        });
    }

    function loadDestinationOptions() {
        const destinationOptions = document.getElementById('destinationOptions');
        destinationOptions.innerHTML = '';
        
        // ローカルストレージから目的地リストを読み込み
        const savedDestinations = JSON.parse(localStorage.getItem('destinationList') || '["東京", "大阪", "京都", "名古屋", "福岡"]');
        savedDestinations.forEach(destination => {
            destinationOptions.innerHTML += `<option value="${destination}">${destination}</option>`;
        });
    }

    function updateDriverOptions() {
        const selectedCategory = document.getElementById('category').value;
        const otherCategory = document.getElementById('otherCategory').value;
        const itemSelect = document.getElementById('item');

        // ドライバーのオプションをクリア
        itemSelect.innerHTML = '<option value="">-- 選択してください --</option>';

        // メンバーに基づくオプションを追加
        if (selectedCategory) {
            const members = selectedCategory.split('、');
            members.forEach(member => {
                itemSelect.innerHTML += `<option value="${member.trim()}">${member.trim()}</option>`;
            });
        }

        // その他メンバーをオプションに追加
        if (otherCategory) {
            itemSelect.innerHTML += `<option value="${otherCategory.trim()}">${otherCategory.trim()}</option>`;
            localStorage.setItem('otherCategory', otherCategory); // ローカルストレージに保存
        }
    }

    function clearOtherCategory() {
        const otherCategoryInput = document.getElementById('otherCategory');
        otherCategoryInput.value = '';
        localStorage.removeItem('otherCategory'); // ローカルストレージから削除
        updateDriverOptions();
    }

    document.getElementById('simpleDropdownForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const selectedDate = document.getElementById('date').value;
        const departureTime = document.getElementById('departureTime').value;
        const returnTime = document.getElementById('returnTime').value;
        const selectedVehicle = document.getElementById('vehicle').value;
        const selectedDestination = document.getElementById('destination').value;
        const startOdometer = document.getElementById('startOdometer').value;
        const endOdometer = document.getElementById('endOdometer').value;
        const fuelAmount = document.getElementById('fuelAmount').value;
        const selectedCategory = document.getElementById('category').value;
        const selectedOtherCategory = document.getElementById('otherCategory').value;
        const selectedItem = document.getElementById('item').value;

        // 入力値をローカルストレージに保存
        localStorage.setItem('previousDepartureTime', departureTime);
        localStorage.setItem('previousReturnTime', returnTime);
        localStorage.setItem('previousStartOdometer', startOdometer);

        // 新しい目的地をローカルストレージに追加
        const destinationOptions = document.getElementById('destinationOptions');
        const savedDestinations = JSON.parse(localStorage.getItem('destinationList') || '[]');
        if (!savedDestinations.includes(selectedDestination)) {
            savedDestinations.push(selectedDestination);
            localStorage.setItem('destinationList', JSON.stringify(savedDestinations));
            destinationOptions.innerHTML += `<option value="${selectedDestination}">${selectedDestination}</option>`;
        }

        alert(
            '日付: ' + selectedDate + 
            '\n出発時刻: ' + departureTime + 
            '\n帰着時刻: ' + returnTime + 
            '\n車両: ' + selectedVehicle + 
            '\n目的地: ' + selectedDestination + 
            '\n開始時オドメーターkm: ' + startOdometer + 
            '\n終了時オドメーターkm: ' + endOdometer + 
            '\n給油量L: ' + fuelAmount +
            '\nメンバー: ' + selectedCategory + 
            '\nその他メンバー: ' + selectedOtherCategory + 
            '\nドライバー: ' + selectedItem
        );
    });
</script>

</body>
</html>
