{{ block content }}
  <style>

      .left-cell.left-color {
        background-color: orange; /* Change to your desired color */
      }

      .right-cell.right-color {
        background-color: orange; /* Change to your desired color */
      }
      .hidden-radio {
        display: none;
      }

      table {
        width: 50%;
        border-collapse: separate;
        padding: 1px;
        border-spacing: 0 10px; /* Increase the gap between rows (adjust the value as needed) */
      }
        td:first-child,
        td:last-child {
          width: 9%;
          background-color: lightgray;
        }
        tr:first-child{
          width: 9%;
          background-color: white;
        }


        th:nth-child(2),
        td:nth-child(2){
          width: 2%;
        }
        th:nth-child(3),
        td:nth-child(3){
          width: 0.001%;
        }
        th, td {
            border: 1px solid black;
        }
        th:nth-child(2),
        td:nth-child(2) {
            border-right: none;
            border-bottom: none;
            border-top: none;
        }

        th:nth-child(3),
        td:nth-child(3) {
            border-left: none;
            border-bottom: none;
            border-top: none;
        }
        /*tr:nth-child(even) {*/
        /*    background-color: white;*/
        /*}*/

        /*tr:nth-child(odd) {*/
        /*    background-color: white;*/
        /*}*/


    </style>


  <table class="table table">


    <tr>
      <td style="font-size: 40px; padding: 20px; background-color: white" align="right"><b>Option A</b></td>
      <td></td>
      <td></td>
      <td style="font-size: 40px; padding: 20px; background-color: white" align="left"><b>Option B</b></td>
    </tr>
    {% for amount in player.right_side_amounts %}
    <tr>
      <td style="font-size: 26px; padding: 1px" align="right"  onclick="checkRadio(this, 'left')">
        <label for="radio{{ amount|json }}_left">10 in this month</label>
      </td>
      <td  style="font-size: 26px; padding: 1px"; align="middle">
        OR
      </td>
      <td align="middle">
        <input type="radio"  class="hidden-radio" value="left" name="radioGroup{{ amount|json }}" id="radio{{ amount|json }}_left" required>&nbsp;&nbsp;
        <input type="radio"  class="hidden-radio" name="radioGroup{{ amount|json }}" value="right" id="radio{{ amount|json }}_right" data-amount="{{ amount|json }}" required>
      </td>
      <td style="font-size: 26px; padding: 1px" align="left" onclick="checkRadio(this, 'right')">
        <label for="radio{{ amount|json }}_right">{{ amount }} in the next month</label>
      </td>
    </tr>
    {% endfor %}
  </table>

  {{ formfield_errors 'switching_point' }}
  <input type="hidden" name="switching_point" id="id_switching_point" value="9999">

  {{ next_button }}

{{ endblock }}

{{ block scripts }}
  <script>
    $(document).ready(function () {
      // Function to update the radio button selection and color
      function updateSelection(clickedRowIndex) {
        var allRows = $('table.table tbody tr');

        allRows.each(function (index) {
          var row = $(this);
          var clickedRadio = row.find('input[type=radio]:checked').val();
          var leftCell = row.find('td:first-child');
          var rightCell = row.find('td:last-child');

          if (index ==0){
          }else if (index < clickedRowIndex) {
            $(this).find('input[type=radio][value="left"]').prop('checked', true);
            leftCell.addClass('left-cell left-color').removeClass('right-cell right-color');
            rightCell.removeClass('left-cell left-color right-cell right-color');
          } else if (index === clickedRowIndex) {
            if (clickedRadio === 'left') {
              leftCell.addClass('left-cell left-color').removeClass('right-cell right-color');
              rightCell.removeClass('left-cell left-color right-cell right-color');
            } else {
              leftCell.removeClass('left-cell left-color right-cell right-color');
              rightCell.addClass('right-cell right-color').removeClass('left-cell left-color');
            }
          } else {
            $(this).find('input[type=radio][value="right"]').prop('checked', true);
            leftCell.removeClass('left-cell left-color right-cell right-color');
            rightCell.addClass('right-cell right-color').removeClass('left-cell left-color');
          }
        });
      }

      $('input[type=radio]').click(function () {
        var clickedRowIndex = $(this).closest('tr').index();
        updateSelection(clickedRowIndex);
      });

      $('.otree-btn-next').click(function () {
        var radios = document.querySelectorAll('input[type=radio]');
        for (i = 0; i < radios.length; ++i) {
          var radio = radios[i];
          if (radio.value === 'right' && radio.checked) {
            $('#id_switching_point').val(radio.dataset.amount);
            break;
          } else {
            $('#id_switching_point').val(9999);
          }
        }
      });
    });
    function checkRadio(cell) {
      const row = cell.parentNode;
      const leftRadioButton = row.querySelector('input[value="left"]');
      const rightRadioButton = row.querySelector('input[value="right"]');

      if (cell.classList.contains('left-color')) {
        leftRadioButton.checked = true;
      } else if (cell.classList.contains('right-color')) {
        rightRadioButton.checked = true;
      }
    }
    $(document).ready(function () {
      $('table.table thead td').removeClass('left-cell left-color right-cell right-color');
    });

  </script>
{{ endblock }}