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

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

        .debug-info {
            display: none;
        }

        .otree-body {
            height: 650px;
            width: 1153px;
        }

        .otree-body {
            max-width: 940px

        }

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

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

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

        .decisions {
            margin: auto;
            margin-top: 30px;
        }

        .decisions td {
            text-align: center;
            font-size: x-large;
            max-height: 40px;
            padding-right: 50px;
        }


        .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: 10px;
        }

        /* The container */
        .container1 {
            display: block;
            position: relative;
            height: 50px;
            width: 50px;
            cursor: pointer;
            margin-bottom: 0;
            font-size: 22px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Hide the browser's default checkbox */
        .container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }


        /* Create a custom checkbox */
        .checkmark {
            position: absolute;
            margin-top: 20px;
            top: 0;
            left: 0;
            height: 20px;
            width: 20px;
            background-color: lightgray;
        }

        /* When the checkbox is checked, add a orangered background */
        .container1 input:checked ~ .checkmark {
            background-color: orangered;
        }

        /* Create the checkmark/indicator (hidden when not checked) */
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        /* Show the checkmark when checked */
        .container input:checked ~ .checkmark:after {
            display: block;
        }

        /* Style the checkmark/indicator */
        .container .checkmark:after {
            display: none;
            left: 7px;
            top: 2px;
            width: 7px;
            height: 14px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        .portal{
            border: 2px solid black;
            border-radius: 30px;
            background: white;
            height: 650px;
            margin-top: 2vh;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="portal">
        <div class="row" style="text-align: center">
            {% for i in games %}
                <table class="games">
                    <tr>
                        <th class="empty"></th>
                        <th class="empty"></th>
                        <th colspan="2" style="font-size: x-large; font-weight: bold">{{ i.2 }}</th>

                    </tr>
                    <tbody data-id=0 class="game">
                    <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>
                        <td rowspan="2" style="border: none; width: 10px; padding-right: 10px"> Your Choice</td>
                        <td style="padding-right: 5px" height="40px">1</td>
                        <td class="payoffs choice-one {{ i.1 }}">{{ i.0.0 }}, {{ i.0.0 }}</td>
                        <td class="payoffs choice-one {{ i.1 }}">{{ i.0.1 }}, {{ i.0.2 }}</td>
                    </tr>
                    <tr class="row-two">
                        <td style="padding-right: 5px" height="40px">2</td>
                        <td class="payoffs choice-two {{ i.1 }}">{{ i.0.2 }}, {{ i.0.1 }}</td>
                        <td class="payoffs choice-two {{ i.1 }}">{{ i.0.3 }}, {{ i.0.3 }}</td>
                    </tr>
                    </tbody>
                </table>
            {% endfor %}
        </div>
        <div>
            <h3 style="margin-left: 300px;margin-top: 30px">Please Make a Decision</h3>
            <table id="decisions" class="decisions">
                <tbody>
                <tr>
                    <td></td>
                    <td><b>A</b></td>
                    <td><b>B</b></td>
                    <td><b>C</b></td>
                    <td><b>D</b></td>
                </tr>
                <tr data-id=0 data-id1="1" class="decision 1">
                    <td data-id1="1" style="max-width: 30px; padding-right: 0"><label
                            class="container1">
                        <input class="decision 1" id="input_1" data-id=0 data-id1="1" type="radio" name="radio">
                        <span id="1" class=" decision1 checkmark"></span>
                    </label>
                    </td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr data-id=0 data-id1="2" class="decision 2">
                    <td data-id1="2" style="max-width: 30px; padding-right: 0"><label
                            class="container1">
                        <input class="decision 2" id="input_2" data-id=0 data-id1="2" type="radio" name="radio">
                        <span id="2" class=" decision2 checkmark"></span>
                    </label>
                    </td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>2</td>
                </tr>

                <tr data-id=0 data-id1="3" class="decision 3">
                    <td data-id1="3" style="max-width: 30px; padding-right: 0"><label
                            class="container1">
                        <input class="decision 3" id="input_3" data-id=0 data-id1="3" type="radio" name="radio">
                        <span id="3" class=" decision3 checkmark"></span>
                    </label>
                    </td>
                    <td>1</td>
                    <td>1</td>
                    <td>2</td>
                    <td>2</td>
                </tr>

                <tr data-id=0 data-id1="4" class="decision 4">
                    <td data-id1="4" style="max-width: 30px; padding-right: 0"><label
                            class="container1">
                        <input class="decision 4" id="input_4" data-id=0 data-id1="4" type="radio" name="radio">
                        <span id="4" class=" decision4 checkmark"></span>
                    </label>
                    </td>
                    <td>1</td>
                    <td>2</td>
                    <td>2</td>
                    <td>2</td>
                </tr>

                <tr data-id=0 data-id1="5" class="decision 5">
                    <td data-id1="5" style="max-width: 30px; padding-right: 0"><label
                            class="container1">
                        <input class="decision 5" id="input_5" data-id=0 data-id1="5" type="radio" name="radio">
                        <span id="5" class=" decision5 checkmark"></span>
                    </label>
                    </td>
                    <td>2</td>
                    <td>2</td>
                    <td>2</td>
                    <td>2</td>
                </tr>

                </tbody>
            </table>
        </div>
        <div style="margin-top: 10px; display: flex; align-items: center; justify-content: center; width: 100%">
            <button id="confirm" class="b btn btn-primary btn-lg  button2" id='confirm'
                    style="align-self:center; width:200px;height:50px; border-radius:15px;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 %}
            <input id="decision" type="hidden" name="action" value=-1>
        </div>
    </div>
    <script>
        let click = 0;


        $('.decision').click(function () {

                let checked = $(this).attr('data-id');
                let check_which = $(this).attr('data-id1');
                if (checked == 0) {
                    click = 1;

                    highlight('click', check_which, 'na');

                    $('.checkmark').css('background-color', 'lightgray');
                    $('#' + check_which).css('background-color', 'orangered');

                    $('.decision').attr('data-id', 0);
                    $('.decision' + '.' + check_which).attr('data-id', 1);

                    $('#input_' + check_which).prop('checked', true);
                    set_values(check_which);
                    $('#confirm').css('display', 'block').prop('disabled', false);
                    console.log('test2')
                }
                if (checked == 1) {
                    console.log('test');
                    $('#' + check_which).css('background-color', 'lightgray');
                    $('#input_' + check_which).prop('checked', false);
                    $(this).prop('checked', false);
                    $('.decision' + '.' + check_which).attr('data-id', 0);
                    click = 0;
                    $('#confirm').css('display', 'none').prop('disabled', true)
                }
            }
        );

        set_values = function (decision) {
            $('#decision').attr('value', parseInt(decision));
            if (decision == 1) {
                $('.g1_action').attr('value', 1);
                $('.g2_action').attr('value', 1);
                $('.g3_action').attr('value', 1);
                $('.g4_action').attr('value', 1);
            }

            if (decision == 2) {
                $('.g1_action').attr('value', 1);
                $('.g2_action').attr('value', 1);
                $('.g3_action').attr('value', 1);
                $('.g4_action').attr('value', 0);
            }

            if (decision == 3) {
                $('.g1_action').attr('value', 1);
                $('.g2_action').attr('value', 1);
                $('.g3_action').attr('value', 0);
                $('.g4_action').attr('value', 0);
            }

            if (decision == 4) {
                $('.g1_action').attr('value', 1);
                $('.g2_action').attr('value', 0);
                $('.g3_action').attr('value', 0);
                $('.g4_action').attr('value', 0);
            }

            if (decision == 5) {
                $('.g1_action').attr('value', 0);
                $('.g2_action').attr('value', 0);
                $('.g3_action').attr('value', 0);
                $('.g4_action').attr('value', 0);
            }
        };


        $('.decision').hover(function () {
                let decision = $(this).attr('data-id1');
                $(this).css('color', 'orange');
                $(this).css('cursor', 'pointer');
                highlight('hover', decision, $(this).attr('data-id'));

            },
            function () {
                $(this).css('color', 'black');
                if (click == 0) {
                    $('td').css('background-color', 'white');
                    $('.checkmark').css('background-color', 'lightgray');
                }
                if (click == 1) {
                    let which = $(this).attr('data-id');
                    let decision = $(this).attr('data-id1');
                    if (which == 0) {
                        $('#' + decision).css('background-color', 'lightgray')
                    }
                }
            }
        );
        highlight = function (action, which, checked) {
            if (action == 'click') {
                $('td').css('background-color', 'white');
                if (which == 1) {
                    $('.g1_action.choice-one').css('background-color', 'cornflowerblue');
                    $('.g2_action.choice-one').css('background-color', 'cornflowerblue');
                    $('.g3_action.choice-one').css('background-color', 'cornflowerblue');
                    $('.g4_action.choice-one').css('background-color', 'cornflowerblue');
                }


                if (which == 2) {
                    $('.g1_action.choice-one').css('background-color', 'cornflowerblue');
                    $('.g2_action.choice-one').css('background-color', 'cornflowerblue');
                    $('.g3_action.choice-one').css('background-color', 'cornflowerblue');
                    $('.g4_action.choice-two').css('background-color', 'forestgreen');
                }


                if (which == 3) {
                    $('.g1_action.choice-one').css('background-color', 'cornflowerblue');
                    $('.g2_action.choice-one').css('background-color', 'cornflowerblue');
                    $('.g3_action.choice-two').css('background-color', 'forestgreen');
                    $('.g4_action.choice-two').css('background-color', 'forestgreen');
                }

                if (which == 4) {
                    $('.g1_action.choice-one').css('background-color', 'cornflowerblue');
                    $('.g2_action.choice-two').css('background-color', 'forestgreen');
                    $('.g3_action.choice-two').css('background-color', 'forestgreen');
                    $('.g4_action.choice-two').css('background-color', 'forestgreen');
                }

                if (which == 5) {
                    $('.g1_action.choice-two').css('background-color', 'forestgreen');
                    $('.g2_action.choice-two').css('background-color', 'forestgreen');
                    $('.g3_action.choice-two').css('background-color', 'forestgreen');
                    $('.g4_action.choice-two').css('background-color', 'forestgreen');
                }
            }
            if (action == 'hover') {
                if (which == 1) {
                    if (click == 0) {
                        $('.g1_action.choice-one').css('background-color', 'cornflowerblue');
                        $('.g2_action.choice-one').css('background-color', 'cornflowerblue');
                        $('.g3_action.choice-one').css('background-color', 'cornflowerblue');
                        $('.g4_action.choice-one').css('background-color', 'cornflowerblue');
                    }

                    if (checked == 0) {
                        $('#' + which).css('background-color', 'orange')
                    }

                }

                if (which == 2) {
                    if (click == 0) {
                        $('.g1_action.choice-one').css('background-color', 'cornflowerblue');
                        $('.g2_action.choice-one').css('background-color', 'cornflowerblue');
                        $('.g3_action.choice-one').css('background-color', 'cornflowerblue');
                        $('.g4_action.choice-two').css('background-color', 'forestgreen');
                    }

                    if (checked == 0) {
                        $('#' + which).css('background-color', 'orange')
                    }

                }

                if (which == 3) {
                    if (click == 0) {
                        $('.g1_action.choice-one').css('background-color', 'cornflowerblue');
                        $('.g2_action.choice-one').css('background-color', 'cornflowerblue');
                        $('.g3_action.choice-two').css('background-color', 'forestgreen');
                        $('.g4_action.choice-two').css('background-color', 'forestgreen');
                    }

                    if (checked == 0) {
                        $('#' + which).css('background-color', 'orange')
                    }

                }

                if (which == 4) {
                    if (click == 0) {
                        $('.g1_action.choice-one').css('background-color', 'cornflowerblue');
                        $('.g2_action.choice-two').css('background-color', 'forestgreen');
                        $('.g3_action.choice-two').css('background-color', 'forestgreen');
                        $('.g4_action.choice-two').css('background-color', 'forestgreen');
                    }

                    if (checked == 0) {
                        $('#' + which).css('background-color', 'orange')
                    }

                }

                if (which == 5) {
                    if (click == 0) {
                        $('.g1_action.choice-two').css('background-color', 'forestgreen');
                        $('.g2_action.choice-two').css('background-color', 'forestgreen');
                        $('.g3_action.choice-two').css('background-color', 'forestgreen');
                        $('.g4_action.choice-two').css('background-color', 'forestgreen');
                    }

                    if (checked == 0) {
                        $('#' + which).css('background-color', 'orange')
                    }

                }

            }
        }
        ;

        if ({{ push }}) {
            jQuery(function () {
                let seconds = Math.random() * {{ time }} * 1000;
                let rand_decision = Math.floor(Math.random() * 6) + 1;
                let handler = rand_decision.toString();
                setTimeout(function () {
                    $('.decision' + '.' + handler).trigger('click')
                }, seconds);


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


    </script>

{% endblock %}