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

{% block title %}
Choose the number of winning balls for period {{subsession.round_number}} of {{C.NUM_ROUNDS}}
{% endblock %}

{% block content %}

<p>
    How many winning balls do you want to buy?
    </p>

    {% formfield group.effort label=effort_label %}

    <p id="text_profit">The total amount of winning and losing balls will appear here after you made a decision.</p>

    <p id="text_cost">Your cost for the number of winning balls will appear here after you made a decision.</p>

    <p>
    {% next_button %}
    </p>



{% endblock %}

{% block scripts %}



       <script>  
       
       total_funds= parseInt({{C.EMPLOYEE_ENDOWMENT|json}})
       cost_per_rock = parseInt({{C.COST_PER_ROCK|json}}) 

       min_wining = parseInt({{C.PROBABILITY_MIN|json}})
       total_balls=parseInt({{C.PROBABILITY_TOTAL|json}})


        $('input:radio[name="effort"]').change(
    function(){
       selectedBalls=parseInt($(this).val())    
       winningBalls=selectedBalls+min_wining
       losingBalls=total_balls-winningBalls

       cost_effort=selectedBalls*cost_per_rock

       text_profit=`Based on the current selection, there will be ${winningBalls} winning balls and ${losingBalls} losing balls in the bag. The bag contains a total of ${total_balls} balls.`
       
       if(selectedBalls==1)
        text_cost=`You will spend ${cost_effort} out of your salary of ${total_funds} to buy ${selectedBalls} winning ball.`
        else
        text_cost=`You will spend ${cost_effort} out of your salary of ${total_funds} to buy ${selectedBalls} winning balls.`
       $('#text_profit').text(text_profit);
       $('#text_cost').text(text_cost);
    });

          $('.otree-timer').hide();
          $(function () {
          $('.otree-timer__time-left').on('update.countdown', function (event) {
            if (event.offset.totalSeconds === 30) {
                $('.otree-timer').show();
            }
        });
    });

        </script>



{% endblock %}