{{ extends "global/Page.html" }}

{{ block title }}
    <div align = "center"><h3>次の質問に答えてください</h3></div>
{{ endblock }}


{{ block styles }}
<style>
        .white-container {
            background-color: #fafafa;
            padding: 20px; /* Adjust padding as needed */
            border-radius: 10px; /* Optional: Add rounded corners */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle box shadow */
        }
</style>
{{ endblock }}










{{ block content }}
<div align = "center"><h5>全ての質問の答えを選ぶと「次へ」ボタンが表示されます</h5></div><br>


    {{ for eachfield in form }}
        <div class="white-container" style="color: #333333;">
            <p>{{eachfield.label}}</p>
            <div class="radio-container" style="display: flex; justify-content: space-between; margin: 0 10px;">
                {{ for eachopt in eachfield }}
                    <div align="center">
                        {{ eachopt }} <br> <!-- ラジオボタン -->
                        <div style="font-size: 0.9em;">
                        {{ eachopt.label }}<!-- ラベル -->
                        </div>
                    </div>
                {{ endfor }}
            </div>
        </div>
        <br>
        <br>
    {{ endfor }}
    
    <div align = "center">
        <button id="buttonA">次へ</button>
            <div class="popup-container">
                <button type="button" id="buttonB">次へ</button>
                <div class="popup">
                　全選択で「次へ」ボタン表示
                </div>
            </div>
    </div>
{{ endblock }}











{{ block scripts }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var allRadioButtons = document.querySelectorAll('input[type="radio"]');
        var buttonB = document.getElementById('buttonB');
        var buttonA = document.getElementById('buttonA');
        
        allRadioButtons.forEach(function(radioButton) {
            radioButton.addEventListener('change', function() {
                var checkedCount = 0;
                allRadioButtons.forEach(function(radioButton) {
                    if (radioButton.checked) {
                        checkedCount++;
                    }
                });
                if (checkedCount === 3) {
                    buttonB.style.display = 'none';
                    buttonA.style.display = 'block';
                } else {
                    buttonB.style.display = 'block';
                    buttonA.style.display = 'none';
                }
            });
        });
    });
</script>
{{ endblock }}