{{ extends "global/Page.html" }}
{{ block title }}
<div align = "center">あなたの役割はAです</div>
{{ 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 }}
<h3>お金の配分</h3>
<div class="custom-card" style="color: #333333;">
  {{ if group.treatment == 3}}
    <p>このパートでは、あなたと相手がともに500円を受け取ります。</p>
  {{ elif group.treatment == 4 and player.id_in_group == 2}}
    <p>相手がお金の配分を決めます。</p>
  {{ else }}     
    <p>1000円のうち、<span class="red"><u>あなたの取り分</u></span>を選んでください。</p>
    <div class="radio-container" style="display: flex; justify-content: space-between; margin: 0 10px;">
      {{ for eachopt in form.MoneyAllocation }}
        <div align="center">
          {{ eachopt.label }}<br> {{ eachopt }}
        </div>
      {{ endfor }}
    
    </div><br>
    
    <span id="selectedMoney"></span><br>

  {{ endif }} 
</div>

{{ if group.treatment != 5}}
  <br>
  <hr style="border: 1px solid #FFFFFF;">
  <br>

  <h3>タスクの配分</h3>
  <div class="custom-card" style="color: #333333;">
    {{ if group.treatment == 2}}
        <p>このパートでは、あなたと相手がともに5セットの作業を担当します。</p>
    {{ elif group.treatment == 4 and player.id_in_group == 1 }}
        <p>相手が作業の配分を決めます。</p>
    {{ else }}  
      <p>10セットのうち、<span class="red"><u>あなたの担当分</u></span>を選んでください。</p>
      <div class="radio-container" style="display: flex; justify-content: space-between; margin: 0 10px;">
      {{ for eachopt in form.TaskAllocation }}
        <div align="center">
          {{ eachopt.label }}<br> {{ eachopt }}
        </div>
      {{ endfor }}
      </div><br>
          <span id="selectedTask"></span><br>

    {{ endif }}
  </div>

{{ 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}}
            <!-- 何も表示しない -->
          {{ 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}}
            <!-- 何も表示しない -->
          {{ 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>
    // 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 }}