{% extends "global/Page.html" %}
{% block title %}
{% endblock %}

{% block content %}

<style>

    .radio-container {
    display: flex;

    }

    .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; /* 上下に適度なマージンを入れ、中央揃えにする */
  }

    #buttonA, #buttonB {
    padding: 10px 20px;
    border-radius: 10px; /* 丸みを帯びた四角の枠 */
    width: 270px;
    }

    #buttonA {
    background-color: transparent; 
    color: #7376763a; /* 薄い色のフォント */
    border: 2px solid #7376763a; /* 薄い色の枠線 */
    cursor: default; /* カーソルを通常のポインタではなくnot-allowedに設定 */
    position: relative;
    }

    #buttonB {
    cursor: pointer; /* 全てのスライダーが50になったらクリック可能にするためのスタイル */
    background-color: #2680bc; /* クリック可能になったら通常の色に変更 */
    color: #FFFFFF; /* クリック可能になったら通常の色に変更 */
    border: 2px solid #2680bc; /* クリック可能になったら通常の色に変更 */
    display: none; /* initially hide the button */
    }

    #buttonB:hover {
    background-color: #0692ef;
    border: 2px solid #0692ef; /* クリック可能かつホバー時に同じ色を維持 */
    }

    .popup-container {
      position: relative;
      display: inline-block;
    }
    .popup {
      display: none;
      position: absolute;
      padding: 10px;
      z-index: 1;
    }
    .popup-container:hover .popup {
      display: block;
    }

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

</style>

<h2>お金の配分</h2>
<div class="custom-card" style="color: #333333;">
    <p>1000円のうち、<span class="red"><u>あなたの取り分</u></span>を選んでください。</p>
    <div class="radio-container" style="display: flex; justify-content: space-between; margin: 0 10px;">
      {{ form.MoneyAllocation }}
    </div><br>
        <span id="selectedMoney"></span>
        <br>
</div>

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

<h2>タスクの配分</h2>
<div class="custom-card" style="color: #333333;">
    <p>10セットのうち、<span class="red"><u>あなたの担当分</u></span>を選んでください。</p>
    <div class="radio-container" style="display: flex; justify-content: space-between; margin: 0 10px;">
    {{ form.TaskAllocation }}
    </div><br>
        <span id="selectedTask"></span>
        <br>
</div>

<br>

<div align = "center">
<!-- {{ next_button }} -->
  <button id="buttonB" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">確認</button>
  <div class="popup-container">
    <button type="button" id="buttonA">確認</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">
        <h6>金額：</h6>
        <p><span class="red">あなたが<span id="ConfirmMoneySelf"></span>円、相手が<span id="ConfirmMoneyOther"></span>円</span>で良いですか？</p>
        <br>
        <h6>作業：</h6>
        <p><span class="red">あなたが<span id="ConfirmTaskSelf"></span>セット、相手が<span id="ConfirmTaskOther"></span>セット</span>で良いですか？</p>

      </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>






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

}

// 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;
}

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

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

function toggleButtonVisibility() {
  var moneyValue = document.querySelector('input[name="MoneyAllocation"]:checked');
  var taskValue = document.querySelector('input[name="TaskAllocation"]:checked');

  if (moneyValue && taskValue) {
    document.getElementById('buttonA').style.display = 'none';
    document.getElementById('buttonB').style.display = 'block';
  } else {
    document.getElementById('buttonA').style.display = 'block';
    document.getElementById('buttonB').style.display = 'none';
  }
}

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

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

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

{% endblock %}