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

{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
    <style type="text/css">
        .coin-container{
            background-color: #ffffff;
            width: 400px;
            padding: 50px;
            position: relative;
            border-radius: 10px;
            -webkit-perspective: 300px;
            perspective: 300px;
            overflow: visible;
        }

        .coin{
            height: 150px;
            width: 150px;
            position: relative;
            margin: 50px auto;
            -webkit-transform-style: preserve-3d;
                    transform-style: preserve-3d;
        }
        .coin img{
            width: 145px;
        }
        .heads,.tails{
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
                    backface-visibility: hidden;
        }
        .tails{
            transform: rotateX(180deg);
        }
        @keyframes spin-tails{
            0%{
                transform: rotateX(0);
            }
            100%{
                transform: rotateX(1980deg);
            }
        }
        @keyframes spin-heads{
            0%{
                transform: rotateX(0);
            }
            100%{
                transform: rotateX(2160deg);
            }
        }
        .buttons{
            display: flex;
            justify-content: center;
        }
        button{
            width: 120px;
            padding: 10px 0;
            border: 2.5px solid #424ae0;
            border-radius: 5px;
            cursor: pointer;
        }
        #flip-button{
            background-color: #424ae0;
            color: #ffffff;
        }
        #flip-button:disabled{
            background-color: #e1e0ee;
            border-color: #e1e0ee;
            color: #101020;
        }
    </style>
{% endblock %}

{% block title %}
    {% trans "Please answer the following questions" %}
{% endblock %}

{% block content %}
    <div class="coin-container">
        <div class="coin" id="coin">
            <div class="heads">
                <img src="https://svgshare.com/i/oNn.svg">
            </div>
            <div class="tails">
                <img src="https://svgshare.com/i/oN5.svg">
            </div>
        </div>
        <div class="buttons">
            <button id="flip-button" type="button">
                {% trans "Flip Coin" %}
            </button>
        </div>
    </div>
    {% blocktrans %}
        <p> Please make a prediction in your head then complete your coin toss (by clicking it) now,
            repeat this process 5 times in total. <br><br>
            Report your outcomes using the form below.  Depending on your outcome, you will receive:<br></p>
    {% endblocktrans %}

    {% formfield player.subjectReport %}
    <input type="hidden" name="subjectClickSeq" id="subjectClickSeq" />

    {% next_button %}

{% endblock %}
{# ****************************************************************************************************************** #}
{# *** SCRIPTS *** #}
{# ****************************************************************************************************************** #}
{% block scripts %}
    <script>
        let heads = 0;
        let tails = 0;
        let coin = document.querySelector(".coin");
        let flipBtn = document.querySelector("#flip-button");
        let clickNum = 0;
        let clickSeq = "";

        flipBtn.addEventListener("click", () => {
            let i = Math.floor(Math.random() * 2);
            coin.style.animation = "none";
            if(i){
                setTimeout(function(){
                    coin.style.animation = "spin-heads 3s forwards";
                }, 100);
                heads++;
                clickNum++;
                clickSeq = clickSeq.concat(clickNum,"1,");
                document.getElementById('subjectClickSeq').value = clickSeq;
            }
            else{
                setTimeout(function(){
                    coin.style.animation = "spin-tails 3s forwards";
                }, 100);
                tails++;
                clickNum++;
                clickSeq = clickSeq.concat(clickNum,"0,");
                document.getElementById('subjectClickSeq').value = clickSeq;
            }
            disableButton();
        });
        function disableButton(){
            flipBtn.disabled = true;
            setTimeout(function(){
                flipBtn.disabled = false;
            },3000);
        }

    </script>
{% endblock %}