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

{{ block title }}
<div align="center" style="font-size:80%;">説明をよく読んで次の質問に答えてください</div>
{{ endblock }}




{{ block styles }}
<style>
    input[type=radio] {
        transform: scale(1.8);
    }

    .custom-table tbody tr:hover {
        background-color: #bef1ff;
        /* 任意の背景色を指定 */
    }

    .modal-body,
    .modal-title {
        color: #333333;
        /* テキストの色を設定 */
    }
</style>
{{ endblock }}


{{ block content }}





<!-- MPL -->

<div class="container_wh">

    <p><strong>説明：</strong>選択肢Aのクジか選択肢Bのクジのどちらかを引かなくてはいけないとします。<br>
        下表の10個の候補の中から、ひとつの状況だけが実現するとします。（どれが実現するかはランダムに決まります）<br><br>

        各候補を上から順に見ていき、最初に「選択肢Aより選択肢Bが良い」と思った候補の右側のボタンを選択してください。<br>
        全ての候補で選択肢Aの方が良い場合、最後の候補の左側のボタンを選んでください。
    </p><br>





    <table class="table table-striped table-hover custom-table">
        <thead>
            <tr>
                <th style="width: 50px;" align="center">候補</th>
                <th></th>
                <th></th>
                <th class="text-end">選択肢A　　　　　</th>
                <th></th>
                <th></th>
                <th class="text-start">　　　　　選択肢B</th>
            </tr>
        </thead>
        <tbody>
            {{ for r, l in optLR.items() }}
            <tr>
                <td style="width: 50px;" align="center"><strong>{{ forloop.counter }}</strong></td>
                <td></td>
                <td></td>
                <td class="text-end">
                    {{ r }}%で20000円、{{ l }}%で16000円
                </td>
                <td>
                    　<input class="text-center BtnChoice BtnL" type="radio" name="mpl_{{ forloop.counter0 }}"
                        id="L_mpl_{{ forloop.counter0 }}" value="{{ forloop.counter0 }}">　
                </td>
                <td>
                    <span style="color:#898282f3; font-size: 90%;">or</span>　　　<input class="text-center BtnChoice BtnR"
                        type="radio" name="mpl_{{ forloop.counter0 }}" id="R_mpl_{{ forloop.counter0 }}"
                        value="{{ forloop.counter0 }}">
                </td>
                <td class="text-start">
                    {{ r }}%で38500円、{{ l }}%で1000円　　　
                </td>
            </tr>
            {{ endfor }}
        </tbody>
    </table>
    <input type="hidden" name="risk_TakeL_UpTo" id="id_risk_TakeL_UpTo" value="">
</div>

<br>
<div align="center">
    <button id="buttonA" type="button" class="btn btn-primary" data-bs-toggle="modal"
        data-bs-target="#exampleModal">次へ</button>
    <div class="popup-container">
        <button type="button" id="buttonB">次へ</button>
        <div class="popup">
            　選択すると「次へ」ボタン表示
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="exampleModalLabel">あなたの考えは以下で間違いないですか？</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <div id="displayElement"></div>



            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" name="contribution" value="0">　O　K　</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">やり直す</button>
            </div>
        </div>
    </div>
</div>

{{ endblock }}


{{ block scripts }}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const optL = {{ optL | safe
    }};
    const optR = optL.map(value => 100 - value);
    const listlength = {{ optL | length }};
    const btnsAll = document.querySelectorAll('.BtnChoice');

    btnsAll.forEach(el => {
        el.addEventListener('click', function () {
            let risk_TakeL_UpTo;
            const tmpCol = el.id.slice(0, 1);
            console.log(tmpCol);
            if (tmpCol == "L") {
                risk_TakeL_UpTo = parseInt(el.name.slice(4), 10) + 1;
            }
            else if (tmpCol == "R") {
                risk_TakeL_UpTo = parseInt(el.name.slice(4), 10);
            }
            document.getElementById("id_risk_TakeL_UpTo").value = risk_TakeL_UpTo;

            let tmpRow;
            for (var i = 0; i < listlength; i++) {
                tmpRow = 'mpl_' + i;
                if (i < risk_TakeL_UpTo) {
                    document.getElementsByName(tmpRow)[0].checked = true;
                    document.getElementsByName(tmpRow)[1].checked = false;
                } else {
                    document.getElementsByName(tmpRow)[0].checked = false;
                    document.getElementsByName(tmpRow)[1].checked = true;
                }
            }

            var buttonB = document.getElementById('buttonB');
            var buttonA = document.getElementById('buttonA');
            buttonA.style.display = 'block';
            buttonB.style.display = 'none';

            // メッセージを設定する
            setMessage();
        }, false);
    });

    var tableRows = document.querySelectorAll('.custom-table tbody tr');
    tableRows.forEach(function (row, index) {
        row.addEventListener('click', function (event) {
            if (event.target.classList.contains('BtnL') || event.target.classList.contains('BtnR')) {
                return;
            }

            var clickedRowIndex = index;
            var risk_TakeL_UpTo = clickedRowIndex;
            document.getElementById("id_risk_TakeL_UpTo").value = risk_TakeL_UpTo;

            var allRadioButtons = document.querySelectorAll('.BtnChoice');
            allRadioButtons.forEach(function (radioButton, radioButtonIndex) {
                var radioButtonRowIndex = parseInt(radioButton.name.split('_')[1]);
                var radioButtonType = radioButton.id.slice(0, 1);
                var shouldBeChecked = false;

                if (clickedRowIndex === radioButtonRowIndex) {
                    if (radioButtonType === 'L') {
                        shouldBeChecked = false;
                    } else if (radioButtonType === 'R') {
                        shouldBeChecked = true;
                    }
                } else if (clickedRowIndex < radioButtonRowIndex && radioButtonType === 'R') {
                    shouldBeChecked = true;
                } else if (clickedRowIndex > radioButtonRowIndex && radioButtonType === 'L') {
                    shouldBeChecked = true;
                }

                radioButton.checked = shouldBeChecked;
            });

            var buttonB = document.getElementById('buttonB');
            var buttonA = document.getElementById('buttonA');
            buttonA.style.display = 'block';
            buttonB.style.display = 'none';

            // メッセージを設定する
            setMessage();
        });
    });

    // メッセージを設定する関数
    function setMessage() {
        const index = document.getElementById('id_risk_TakeL_UpTo').value;
        const index_minus1 = document.getElementById('id_risk_TakeL_UpTo').value - 1;

        let message = '';

        if (index >= 1 && index < optL.length) {
            message = '・A: <u>' + optL[index_minus1] + '%で20000円、' + optR[index_minus1] + '%で16000円</u> と<br>　B: <u>' + optL[index_minus1] + '%で38500円、' + optR[index_minus1] + '%で1000円</u>ならAが良い <br><br>・A\': <u>' + optL[index] + '%で20000円、' + optR[index] + '%で16000円</u> と<br>　B\': <u>' + optL[index] + '%で38500円、' + optR[index] + '%で1000円</u>ならB\'が良い';
        } else if (index == 0) {
            message = '・A: <u>10%で20000円、90%で16000円</u> と<br>　B: <u>10%で38500円、90%で1000円</u>ならBが良い';
        } else if (index == optL.length) {
            message = '・A: <u>100%で20000円</u> と B: <u>100%で38500円</u>ならAが良い';
        } else {
            message = 'OKボタンをクリックしてください'
        }

        const displayElement = document.getElementById('displayElement');
        displayElement.innerHTML = message;
    }

    // 初回のメッセージ設定
    setMessage();
    
    });
</script>
{{ endblock }}