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

{% block style %}
    <style>
        #my_table td {
           text-align: center;
        }

        #my_table td.choice_cell:hover {
            background: #a0cff8;
        }

        .selected {
            background: #a0cff8 !important;
        }

        #my_table th {
           text-align: center;
        }
        #my_table th {
            background: #0671ce;
        }
        tr:nth-child(even) {background-color: #f2f2f2;}
    </style>
{% endblock %}



{% block title %}
    Part II (1/3)
{% endblock %}

{% block content %}
    <p>
        For each of the rows below, please <span style="text-decoration: underline;">click</span> on the lottery you prefer (A or B).
        <br><br>
        You will only be able to go to the next page once a lottery has been clicked for <span style="text-decoration: underline;"><strong>each row</strong></span>.
        <br><br>
        On the next page, one of your choices will be randomly picked and played.
        <br><br><br>
        <strong>Example of how to read the lotteries:</strong> In row #1, if you choose Lottery A, and the dice number is 1, your payment will be E$ 600. However, if the dice number is anything from 2 to 10, your payment will be, instead E$ 400.
        <br><br>
    </p>

    <table class="table table-bordered" id="my_table">
        <thead>
        <tr>
             <th>{{ 'Row #' }}</th>   <th>{{ 'Lottery A' }}</th>   <th >{{ 'Lottery B' }}</th>
        </tr>
        </thead>
        <tr>
            <td>{{ '1' }}</td> <td id="L1" class="choice_cell">{{ L1 }}</td>   <td id="R1" class="choice_cell">{{ R1 }}</td>
        </tr>
        <tr>
            <td>{{ '2' }}</td> <td id="L2" class="choice_cell">{{ L2 }}</td>   <td id="R2" class="choice_cell">{{ R2 }}</td>
        </tr>
        <tr>
            <td>{{ '3' }}</td> <td id="L3" class="choice_cell">{{ L3 }}</td>   <td id="R3" class="choice_cell">{{ R3 }}</td>
        </tr>
        <tr>
            <td>{{ '4' }}</td> <td id="L4" class="choice_cell">{{ L4 }}</td>   <td id="R4" class="choice_cell">{{ R4 }}</td>
        </tr>
        <tr>
            <td>{{ '5' }}</td> <td id="L5" class="choice_cell">{{ L5 }}</td>   <td id="R5" class="choice_cell">{{ R5 }}</td>
        </tr>
        <tr>
            <td>{{ '6' }}</td> <td id="L6" class="choice_cell">{{ L6 }}</td>   <td id="R6" class="choice_cell">{{ R6 }}</td>
        </tr>
        <tr>
            <td>{{ '7' }}</td> <td id="L7" class="choice_cell">{{ L7 }}</td>   <td id="R7" class="choice_cell">{{ R7 }}</td>
        </tr>
        <tr>
            <td>{{ '8' }}</td> <td id="L8" class="choice_cell">{{ L8 }}</td>   <td id="R8" class="choice_cell">{{ R8 }}</td>
        </tr>
        <tr>
            <td>{{ '9' }}</td> <td id="L9" class="choice_cell">{{ L9 }}</td>   <td id="R9" class="choice_cell">{{ R9 }}</td>
        </tr>
        <tr>
            <td>{{ '10' }}</td> <td id="L10" class="choice_cell">{{ L10 }}</td>   <td id="R10" class="choice_cell">{{ R10 }}</td>
        </tr>
    </table>

    <input type="hidden" name="response" id="response" />

    <button id="submit" class="otree-btn-next btn btn-primary" disabled>Submit</button>


{% endblock %}

{% block script %}
    <script>
        let num_rows = {{ num_rows }};
        let response = new Array(num_rows);
        let i;
        for (i=0; i < num_rows; i++)
        {
           response[i] = -999;
        }

        $(document).ready(function() {

            $(".choice_cell").on("click", function () {
                let id = $(this).attr('id');
                let row = id.replace(/\D/g, "")
                let side = id.replace(/[^LR]/g, "")

                if (side == "L") {
                    response[row-1] = 0
                    $('#R' + row).removeClass('selected');
                } else {
                    response[row-1] = 1
                    $('#L' + row).removeClass('selected');
                }
                $("#response").val(JSON.stringify(response));
                $(this).addClass( "selected" );

                if (response.includes(-999)) {
                    $('#submit').prop('disabled', true);
                } else {
                    $('#submit').prop('disabled', false);
                }
                console.log(response)
            });

        });

    </script>

{% endblock %}