{{ 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>
        {{ if player.is_alphaFirst == 1}}
        あなたはこの部屋にいる他の誰か（ただし、先ほどペアになった相手以外）とペアになっているとします。<br>
        あなたの選択にしたがい、あなたとペアの相手にお金が配分されます。なお、相手に拒否権はありません。<br>
        下表の5つの候補の中から、ひとつの状況だけが実現するとします。（どれが実現するかはランダムに決まります）<br><br>

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

        {{ else }}
        先ほどと同じ状況とルールですが、選択肢が異なります。同じ要領で回答してください。
        {{ endif }}
    </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 l in optL }}
            <tr>
                <td style="width: 50px;" align="center"><strong>{{ forloop.counter0 }}</strong></td>
                <td></td>
                <td></td>
                <td class="text-end">
                    あなたに{{ l }}円、相手に450円
                </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">
                    あなたに300円、相手に780円　　　
                </td>
            </tr>
            {{ endfor }}
        </tbody>
    </table>
    <input type="hidden" name="alpha_TakeL_UpTo" id="id_alpha_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 listlength = {{ optL | length }};
    const btnsAll = document.querySelectorAll('.BtnChoice');

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

            let tmpRow;
            for (var i = 0; i < listlength; i++) {
                tmpRow = 'mpl_' + i;
                if (i < alpha_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 alpha_TakeL_UpTo = clickedRowIndex;
            document.getElementById("id_alpha_TakeL_UpTo").value = alpha_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_alpha_TakeL_UpTo').value;
        const index_minus1 = document.getElementById('id_alpha_TakeL_UpTo').value - 1;
        let message = '';


        if (index >= 1 && index < optL.length) {
            message = '・A: <u>あなたに' + optL[index_minus1] + '円、相手に450円</u>と<br>　B: <u>あなたに300円、相手に780円</u>ならAが良い<br><br>・A: <u>あなたに' + optL[index] + '円、相手に450円</u> と<br>　B: <u>あなたに300円、相手に780円</u>ならBが良い'
        } else if (index == 0) {
            message = '・A: <u>あなたに450円、相手に450円</u>と<br>　B: <u>あなたに300円、相手に780円</u>ならBが良い'
        } else if (index == optL.length) {
            message = '・A: <u>あなたに0円、相手に450円</u>と<br>　B: <u>あなたに300円、相手に780円</u>ならAが良い'
        } else {
            message = 'OKボタンをクリックしてください'
        }

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

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