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

    <style>
        html, body {
            margin: 0;
            height: 100%;
        }

        * {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        body {
            background-color: ghostwhite;
        }

        .debug-info {
            display: none;
        }

        .otree-body {
            background-color: white;
            height: 690px;
            width: 1153px;
            margin-top: 30px;
            border-radius: 30px;
            border: solid black;
        }

        .page-header {
            margin: 0;
            padding: 5px;
        }

        .btn-primary:hover {
            box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);

        }

        h1 {
            text-align: center;
        }

        .left {
            width: 550px;
        }

        .right {
            width: 500px;
        }

        .choice {
            margin-left: 30px
        }

        td {
            text-align: center;
            font-size: medium;
        }

        .payoffs {
            max-width: 20px;
            border: solid black;
        }

        .your_choice {
            border: none;
            min-width: 20px;
            font-weight: bold;
        }

        .empty {
            border: none;
        }

        .games {
            margin-left: 30px;
            margin-top: 5px;
        }

        .choice-one {
            cursor: pointer;
        }

        .choice-two {
            cursor: pointer;
        }


    </style>
{% endblock %}
{% block content %}
    <h4 style="text-align: center">Please Make Your Choices</h4>
    <div class="row" style="margin-left: 20px">
        {% for i in games %}
            <table class="games">
                <tbody data-id=0 class="game" id= {{ i.1 }}>
                <tr class="empty">
                    <td class="empty"></td>
                    <td class="empty"></td>
                    <td colspan="2">Other's Choice</td>
                </tr>
                <tr class="empty">
                    <td class="empty"></td>
                    <td class="empty"></td>
                    <td class="your_choice">1</td>
                    <td class="your_choice">2</td>
                </tr>
                <tr class="row-one debug" onclick="clickRow(this)" data-id=0>
                    <td rowspan="2" style="border: none; width: 10px"> Your Choice</td>
                    <td height="40px" class="your_choice highlight choice-one ">1</td>
                    <td class="payoffs highlight choice-one">{{ i.0.0 }}, {{ i.0.0 }}</td>
                    <td class="payoffs highlight choice-one">{{ i.0.1 }}, {{ i.0.2 }}</td>
                </tr>
                <tr class="row-two debug" onclick="clickRow(this)" data-id=0>
                    <td height="40px" class="your_choice choice-two">2</td>
                    <td class="payoffs highlight choice-two ">{{ i.0.2 }}, {{ i.0.1 }}</td>
                    <td class="payoffs highlight choice-two">{{ i.0.3 }}, {{ i.0.3 }}</td>
                </tr>
                </tbody>
            </table>
        {% endfor %}
        <div style="margin-top: 18px; display: flex; align-items: center; justify-content: center; width: 100%">
            <button id="confirm" class="b btn btn-primary btn-lg  button2"
                    style="align-self:center; width:200px;height:50px; border-radius:10px;margin-bottom:10px;display: none ;
                        background-color:orangered;font-size: xx-large;  line-height: 0" disabled=true>
                Confirm
            </button>
            {% for i in games %}
                <input type="hidden" class={{ i.1 }} name={{ i.1 }} value=-1>
            {% endfor %}
        </div>
    </div>



    <script>
        let choice_count = 0;

        $('.highlight').hover(function () {
                let parent = $(this).parent();
                let grandparent = $(parent).parent();
                if (grandparent.attr('data-id') == 0) {
                    if ($(parent).hasClass('row-one')) {
                        $($(parent).children('.payoffs')).css('background-color', 'cornflowerblue');
                    }
                    if ($(parent).hasClass('row-two')) {
                        $($(parent).children('.payoffs')).css('background-color', 'forestgreen');
                    }
                }
            }, function () {
                let parent = $(this).parent();
                let grandparent = $(parent).parent();
                if (grandparent.attr('data-id') == 0) {
                    $($(parent).children('.payoffs')).css('background-color', 'white');
                }
            }
        );

        function clickRow(row) {
            let other = $(row).siblings();
            let parent = $(row).parent();
            $(other).attr('data-id', 0);
            $($(other).children()).css('background-color', 'white');
            let game = $(parent).attr('id');

            if ($(row).hasClass('row-one')) {
                if ($(row).attr('data-id') == 0) {
                    $($(row).children('.payoffs')).css('background-color', 'cornflowerblue');
                    $(row).attr('data-id', 1);
                    if ($(parent).attr('data-id') == 0) {
                        choice_count += 1;
                    }
                    $('.' + game).attr('value', 1);
                    $(parent).attr('data-id', 1);
                } else {
                    $($(row).children('.payoffs')).css('background-color', 'white');
                    $(row).attr('data-id', 0);
                    $(parent).attr('data-id', 0);
                    choice_count -= 1;
                    $('.' + game).attr('value', -1);


                }
            }
            if ($(row).hasClass('row-two')) {
                if ($(row).attr('data-id') == 0) {
                    $($(row).children('.payoffs')).css('background-color', 'forestgreen');
                    $(row).attr('data-id', 1);
                    if ($(parent).attr('data-id') == 0) {
                        choice_count += 1;
                    }
                    $('.' + game).attr('value', 0);
                    $(parent).attr('data-id', 1);

                } else {
                    $($(row).children('.payoffs')).css('background-color', 'white');
                    $(row).attr('data-id', 0);
                    $(parent).attr('data-id', 0);
                    choice_count -= 1;
                    $('.' + game).attr('value', -1);
                }
            }
            $(row).siblings().css('background-color', 'white');
            if (choice_count == {{ num_games }}) {
                $('#confirm').css('display', 'inline');
                $('#confirm').prop('disabled', false);
            }
            if (choice_count < {{ num_games }}) {
                $('#confirm').css('display', 'none');
                $('#confirm').prop('disabled', true);
            }

        }

        if ({{ push }}) {

                let tables = document.getElementsByClassName('game');
                for (let i = 0; i <{{ num_games }}; i++) {
                    let rand = Math.floor(Math.random() * 2);
                    let seconds = Math.random() * {{ time }} * 1000;
                    let row = $($(tables[i]).children('.debug')).eq(rand);
                    setTimeout(function () {
                        $(row).trigger('click')
                    }, seconds);

                }
                setTimeout(function () {
                    $('#confirm').trigger('click')
                }, 1000);}


    </script>

{% endblock %}