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

{% block title %}
<!--    Question {{ player.round_number }} of {{ Constants.num_rounds }}-->
{% endblock %}



{% block content %}

    {#  player questions #}
    Round {{ subsession.round_number }} of {{ Constants.num_rounds }}.
    <br><br>

    <span id="question">{{ player.question }}</span>
    <br>
    <input type="radio" id="rb_1" name="response" value="{{ player.choice1 }}"><label for="rb_1" id="lbl_1">{{ player.choice1 }}</label><br>
    <input type="radio" id="rb_2" name="response" value="{{ player.choice2 }}"><label for="rb_2" id="lbl_2">{{ player.choice2 }}</label><br>
    <input type="radio" id="rb_3" name="response" value="{{ player.choice3 }}"><label for="rb_3" id="lbl_3">{{ player.choice3 }}</label><br>
    <input type="radio" id="rb_4" name="response" value="{{ player.choice4 }}"><label for="rb_4" id="lbl_4">{{ player.choice4 }}</label><br>
    <input type="radio" id="rb_5" name="response" value="{{ player.choice5 }}"><label for="rb_5" id="lbl_5">{{ player.choice5 }}</label><br>
    <br>
    <button type="button" id="my_submit" class="btn btn-primary" disabled>Submit</button>
    <br><br>


{% endblock %}

{% block script %}
    <script>
        function liveRecv(data) {
            console.log(data)

            if (data['finished'] == true) {
                $('#question').text('FINISHED!');
            }
            else {
            // update question text
            $('#question').text(data['question']);

            // uncheck the radio buttons
            $('#rb_1').prop('checked', false);
            $('#rb_2').prop('checked', false);
            $('#rb_3').prop('checked', false);
            $('#rb_4').prop('checked', false);
            $('#rb_5').prop('checked', false);

            // update the radio button values
            $('#rb_1').val(data['choice1']);
            $('#rb_2').val(data['choice2']);
            $('#rb_3').val(data['choice3']);
            $('#rb_4').val(data['choice4']);
            $('#rb_5').val(data['choice5']);

            // update the radio button labels
            $('#lbl_1').text(data['choice1']);
            $('#lbl_2').text(data['choice2']);
            $('#lbl_3').text(data['choice3']);
            $('#lbl_4').text(data['choice4']);
            $('#lbl_5').text(data['choice5']);

            // disable submit button (should still be disabled from submission)
            $('#my_submit').prop('disabled', true);
            }
        }

        $(document).ready(function() {
            let response;

            $("input[type='radio']").click(function(){
                console.log('something was clicked');
                response = $("input[name='response']:checked").val();
                $('#my_submit').prop('disabled', false);
            });

            $("#my_submit").click(function(){
                $('#my_submit').prop('disabled', true);
                liveSend(response);
            });
        })


    </script>





{% endblock %}