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

    <style>
        .debug-info {
            display: none;
        }

        html, body {
            margin: 0;
        }

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

        body {
            background-color: ghostwhite;
        }

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


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

        .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;
        }

        .main {

            display: grid;
            grid-template-columns: 50% 50%;
        }

        .left {
            border-right: black solid 3px;
            height: 550px;
        }

        .right {
        }

        .choice {
            margin: auto;
        }

        td {
            text-align: center;
            font-size: xx-large;
        }

        .payoffs {
            min-width: 100px;
            border: solid black;
        }

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

        .empty {
            border: none;
        }

        .vertical-row {
            Float: left;
            height: 560px;
            width: 3px; /* edit this if you want */
            background-color: black
        }

        .choice-one {
            cursor: pointer;
        }

        .choice-two {
            cursor: pointer;
        }


    </style>
{% endblock %}
{% block content %}
    <h1 style="padding-top:5px">{% if match_number > 9 %}<i style="margin-left: -18px"></i>{% endif %}
        <i>Match: {{ current_match }} &nbsp;
            Round: {{ period_number }}</i></h1>

    <div class="main" style=" margin-left: 10px">

        <div class="left" style="border-top: solid black 3px;">
            {% include 'prisoners_dilemma/History.html' %}
        </div>
        <div class="right" style="border-top: solid black 3px;">
            <h1 style="text-align: center;margin-top: 15px;height: 47px">&nbsp;Please Make a Choice</h1>
            <table id="choice_matrix" class="choice">
                <tbody>
                <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" id="one">
                    <td rowspan="2" style="border: none; width: 50px;padding-right: 5px"> Your Choice</td>
                    <td height="100" class="your_choice choice-one debug">1</td>
                    <td class="payoffs choice-one">{{ cc }}, {{ cc }}</td>
                    <td class="payoffs choice-one">{{ cd }}, {{ dc }}</td>
                    <td style="width:102px "></td>
                </tr>
                <tr class="row-two" id="two">
                    <td height="100" class="your_choice choice-two">2</td>
                    <td class="payoffs choice-two debug">{{ dc }}, {{ cd }}</td>
                    <td class="payoffs choice-two">{{ dd }}, {{ dd }}</td>
                </tr>
                </tbody>
            </table>
            <div style="margin:auto;margin-top: 25px; font-size: x-large;width:350px; text-align: center">
                <div>Probability the match continues</div>
                <div style="margin-top: 5px">for another round: <b>{{ delta }}</b>%</div>
            </div>

            <div class="text-center" style="margin-top: 15px">
                <button id="confirm" class="b btn btn-primary btn-lg  button2" id='confirm'
                        style="margin-left: 35px; width:50%;height:60px; border-radius:15px;margin-bottom:10px; display:none;
                        background-color:orangered;font-size:xx-large; line-height: 0" disabled=true>
                    Confirm
                </button>
                <input type="hidden" id="action" name="action" value=-1>
            </div>
        </div>

    </div>


    <script>

        let choice_one_clicked = false;
        let choice_two_clicked = false;
        $('.choice-one').on('click', function () {
            if (!choice_one_clicked) {
                let id = $(this).attr('id');
                let action = 1;
                choice_one_clicked = true;
                choice_two_clicked = false;
                $('.choice-one.payoffs').css('background-color', 'cornflowerblue');
                $('.choice-two.payoffs').css('background-color', 'white');
                $('#confirm').css('display', 'inline');
                $('#confirm').prop('disabled', false);
                $('#action').attr('value', 1)
            } else {
                $('#confirm').css('display', 'none');
                $('#confirm').prop('disabled', true);
                choice_one_clicked = false;
                $('.choice-one').css('background-color', 'white');
            }

        })
            .hover(function () {
                    if (!choice_two_clicked) {
                        $('.choice-one.payoffs').css({"background-color": "cornflowerblue"});
                    }

                },
                function () {
                    if (!choice_one_clicked && !choice_two_clicked) {
                        $('.choice-one.payoffs').css({"background-color": "white"});
                    }
                });
        $('.choice-two').on('click', function () {
                if (!choice_two_clicked) {
                    let id = $(this).attr('id');
                    $('.choice-two.payoffs').css('background-color', 'forestgreen');
                    $('.choice-one.payoffs').css('background-color', 'white');
                    choice_two_clicked = true;
                    choice_one_clicked = false;
                    $('#confirm').css('display', 'inline');
                    $('#confirm').prop('disabled', false);
                    $('#action').attr('value', 0);
                } else {
                    $('#confirm').css('display', 'none');
                    $('#confirm').prop('disabled', true);
                    choice_two_clicked = false;
                    $('.choice-two.payoffs').css('background-color', 'white');
                }

            }
        )
            .hover(function () {
                    if (!choice_one_clicked) {
                        $('.choice-two.payoffs').css({"background-color": "forestgreen"});
                    }

                },
                function () {
                    if (!choice_one_clicked && !choice_two_clicked) {
                        $('.choice-two.payoffs').css({"background-color": "white"});
                    }
                });


        let seconds = Math.random() * {{ time }} * 1000;
        let confirm = seconds + Math.random() * 1000;
        let push = {{push}};
        let rand = Math.floor(Math.random() * 2);


        if (push) {

            setTimeout(function () {
                $('.debug').eq(rand).trigger('click')
            }, seconds);

            setTimeout(function () {
                document.getElementById('confirm').click()
            }, confirm)


        }
    </script>

{% endblock %}