{{ extends "global/Page.html" }}
{{ block title }}
  {{ if player.id_in_group == 1}}
    <div align = "center">あなたの役割はAです</div>
  {{ else }}
    <div align = "center">あなたの役割はBです</div>
  {{ endif }}
{{ endblock }}

{{ block styles }}
<style>
      .custom-card {
        background-color: #fafafa;
        padding: 35px;
        border-radius: 20px; /* 角を丸くする */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 100%; /* 横幅を広くする */
        margin: 20px auto; /* 上下に適度なマージンを入れ、中央揃えにする */
      }

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

</style>
{{ endblock }}






{{ block content }}


  {{ if group.is_MoneyFirst == 1}}
    {{ include "two_dimensional_dictator_game/DictatorMoney.html" }}
  {{ else }}
    {{ include "two_dimensional_dictator_game/DictatorTask.html" }}
  {{ endif }}

  {{ if group.treatment != 5}}

  <br>
  <hr style="border: 1px solid #FFFFFF;">

  <br>


  {{ if group.is_MoneyFirst == 1}}
    {{ include "two_dimensional_dictator_game/DictatorTask.html" }}
  {{ else }}
    {{ include "two_dimensional_dictator_game/DictatorMoney.html" }}
  {{ endif }}

{{ endif }}


<br>

<div align = "center">
<!-- {{ next_button }} -->
  <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">
        <h5 class="modal-title" id="exampleModalLabel">確　認</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {{ if group.treatment != 3 }}
          {{ if group.treatment == 4 and player.id_in_group == 2}}
            <!-- 何も表示しない -->
          {{ elif group.treatment == 1 and group.is_MoneyFirst == 0}}
            <h6>作業：</h6>
            <p><span class="red">あなたが<span id="ConfirmTaskSelf"></span>セット、相手が<span id="ConfirmTaskOther"></span>セット</span>で良いですか？</p>
          {{ else}}
            <h6>金額：</h6>
            <p><span class="red">あなたが<span id="ConfirmMoneySelf"></span>円、相手が<span id="ConfirmMoneyOther"></span>円</span>で良いですか？</p>
            <br>
          {{ endif }}
        {{ endif }}
        
        {{ if group.treatment != 2 and group.treatment != 5}}
          {{ if group.treatment == 4 and player.id_in_group == 1}}
            <!-- 何も表示しない -->
          {{ elif group.treatment == 1 and group.is_MoneyFirst == 0}}
            <h6>金額：</h6>
            <p><span class="red">あなたが<span id="ConfirmMoneySelf"></span>円、相手が<span id="ConfirmMoneyOther"></span>円</span>で良いですか？</p>
            <br>
          {{ else}}
          <h6>作業：</h6>
          <p><span class="red">あなたが<span id="ConfirmTaskSelf"></span>セット、相手が<span id="ConfirmTaskOther"></span>セット</span>で良いですか？</p>
          {{ endif }}
        {{ endif }}
        

      </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>
      window.addEventListener('DOMContentLoaded', (event) => {
        // ページ読み込み時に全てのラジオボタンのチェックを外す
        let radioButtons = document.querySelectorAll('input[type="radio"]');
        radioButtons.forEach((radio) => {
            radio.checked = false;
        });
    });


    // MoneyAllocationの選択値が変更されたときに実行される関数
    function handleMoneyRadioChange(event) {
      const selectedValue = event.target.value;
      const selectedValueElement = document.getElementById('selectedMoney'); // メッセージを表示する要素を取得
      console.log("Selected value:", selectedValue);
      selectedValueElement.innerHTML = `<span class='red'><u>あなたが ${selectedValue} 円</u></span>、相手が ${1000 - selectedValue} 円で良いですか？`; // メッセージを表示
      document.getElementById('ConfirmMoneySelf').textContent = selectedValue;
      document.getElementById('ConfirmMoneyOther').textContent = 1000 - selectedValue;

      toggleButtonVisibility();
    }

    // MoneyAllocationとTaskAllocationの選択値が変更されたときにそれぞれの関数を呼び出す
    document.querySelectorAll('input[name="MoneyAllocation"]').forEach(function(radio) {
      radio.addEventListener('change', handleMoneyRadioChange);
    });

  // TaskAllocationの選択値が変更されたときに実行される関数
  function handleTaskRadioChange(event) {
    const selectedValue = event.target.value;
    const selectedValueElement = document.getElementById('selectedTask'); // メッセージを表示する要素を取得
    selectedValueElement.innerHTML = `<span class='red'><u>あなたが ${selectedValue} セット</u></span>、相手が ${10 - selectedValue} セットで良いですか？`; // メッセージを表示
    document.getElementById('ConfirmTaskSelf').textContent = selectedValue;
    document.getElementById('ConfirmTaskOther').textContent = 10 - selectedValue;

    toggleButtonVisibility();
  }



  document.querySelectorAll('input[name="TaskAllocation"]').forEach(function(radio) {
    radio.addEventListener('change', handleTaskRadioChange);
  });

  // ボタンの表示を切り替える関数
  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 === allRadioButtons.length/11) {
                    buttonB.style.display = 'none';
                    buttonA.style.display = 'block';
                } else {
                    buttonB.style.display = 'block';
                    buttonA.style.display = 'none';
                }
            });
        });
    });

  // ページ読み込み時にもボタンを切り替える
  toggleButtonVisibility();

</script>
{{ endblock }}