{% extends "global/Page.html" %}
{% load otree %}

{% block content %}

{% formfield player.invested_before %}
{% formfield player.investing_experience %}

<p>What have you invested in before?'</p>

<label><input type="checkbox" class="inv" value="nothing"> Nothing</label><br>
<label><input type="checkbox" class="inv" value="stocks"> Stocks</label><br>
<label><input type="checkbox" class="inv" value="bonds"> Bonds</label><br>
<label><input type="checkbox" class="inv" value="mutual_funds"> Mutual funds / ETFs</label><br>
<label><input type="checkbox" class="inv" value="crypto"> Cryptocurrencies</label><br>
<label><input type="checkbox" class="inv" value="real_estate"> Real estate</label><br>
<label><input type="checkbox" class="inv" value="other" id="inv_other_chk"> Other</label><br><br>

<div id="other_box" style="display:none;">
    {% formfield player.invested_in_other %}
</div>

<!-- hidden input that will be saved into player.invested_in -->
<input type="hidden" name="invested_in" id="invested_in_hidden" value="">

<script>
  const boxes = document.querySelectorAll('.inv');
  const hidden = document.getElementById('invested_in_hidden');
  const otherChk = document.getElementById('inv_other_chk');
  const otherBox = document.getElementById('other_box');

  function updateHidden(){
    const selected = Array.from(boxes)
      .filter(b => b.checked)
      .map(b => b.value);
    hidden.value = selected.join(',');
    otherBox.style.display = otherChk.checked ? 'block' : 'none';
  }

  boxes.forEach(b => b.addEventListener('change', updateHidden));
  updateHidden();
</script>

{% next_button %}

{% endblock %}