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

{% block title %}
Instructions Task
{% endblock %}

{% block content %}
    <div class="info_box">
        <div class="header">
            <p class="formatting_header">

            </p>
        </div>
        <div class="content">
            <p class="formatting_content">
                In the second part of this study, you will decide how to allocate 20 balls between two buckets.
                Your task is to place each of the balls, one-by-one, into one of the two buckets: the blue
                bucket or the yellow bucket. The balls will appear in the center of your screen, and you
                can allocate each ball by clicking and dragging it to the bucket of your choice. For each
                ball you put in the blue bucket, you will receive 0.05€, and for each ball you put in the
                yellow bucket, you will receive 0.10€.
            </p>
            <p style="text-align: center; margin: 40px">
                <b> The rule of the experiment is to put the balls into the blue bucket. </b>
            </p>
            <p class="formatting_content">
                <b>Your payment</b> from this task will be based on your decisions, and
                it is the sum of payments from the blue and yellow buckets. Once you have completed
                the task, a "Next" button will be displayed at the bottom of the page.

            </p>
        </div>
    </div>

    <div class="task_box">
        <div style="text-align: center; font-size:25px; margin-top: 10px">
           Remaining balls: <span id = "Value"> 20 </span>
        </div>
        <div style="margin-top: 25px; overflow: auto;">
            <div id="pos_money_bucket" style="width: 50%;">
                <div style="text-align: center; font-size:30px">
                    <p><b><span>&#8364;</span>0.10 </b></p>
                </div>
                <div>
                    <div class = "money_bucket_border">
                        <div class="bucket_background">
                            <div class="money_bucket_background">
                                <div id="money_ball_1" class="ball" style="display: none; position:absolute; bottom: 0px; left: 0px;"></div>
                                <div id="money_ball_2" class="ball" style="display: none; position:absolute; bottom: 0px; left: 50px;"></div>
                                <div id="money_ball_3" class="ball" style="display: none; position:absolute; bottom: 0px; left: 100px;"></div>
                                <div id="money_ball_4" class="ball" style="display: none; position:absolute; bottom: 0px; left: 150px;"></div>
                                <div id="money_ball_5" class="ball" style="display: none; position:absolute; bottom: 0px; left: 200px;"></div>
                                <div id="money_ball_6" class="ball" style="display: none; position:absolute; bottom: 50px; left: 0px;"></div>
                                <div id="money_ball_7" class="ball" style="display: none; position:absolute; bottom: 50px; left: 50px;"></div>
                                <div id="money_ball_8" class="ball" style="display: none; position:absolute; bottom: 50px; left: 100px;"></div>
                                <div id="money_ball_9" class="ball" style="display: none; position:absolute; bottom: 50px; left: 150px;"></div>
                                <div id="money_ball_10" class="ball" style="display: none; position:absolute; bottom: 50px; left: 200px;"></div>
                                <div id="money_ball_11" class="ball" style="display: none; position:absolute; bottom: 100px; left: 0px;"></div>
                                <div id="money_ball_12" class="ball" style="display: none; position:absolute; bottom: 100px; left: 50px;"></div>
                                <div id="money_ball_13" class="ball" style="display: none; position:absolute; bottom: 100px; left: 100px;"></div>
                                <div id="money_ball_14" class="ball" style="display: none; position:absolute; bottom: 100px; left: 150px;"></div>
                                <div id="money_ball_15" class="ball" style="display: none; position:absolute; bottom: 100px; left: 200px;"></div>
                                <div id="money_ball_16" class="ball" style="display: none; position:absolute; bottom: 150px; left: 0px;"></div>
                                <div id="money_ball_17" class="ball" style="display: none; position:absolute; bottom: 150px; left: 50px;"></div>
                                <div id="money_ball_18" class="ball" style="display: none; position:absolute; bottom: 150px; left: 100px;"></div>
                                <div id="money_ball_19" class="ball" style="display: none; position:absolute; bottom: 150px; left: 150px;"></div>
                                <div id="money_ball_20" class="ball" style="display: none; position:absolute; bottom: 150px; left: 200px;"></div>
                                <div id="money_bucket" class="bucket" ondrop="drag_drop(event)" ondragover="return false"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="pos_norm_bucket" style="width: 50%;">
                <div style="text-align: center; font-size:30px">
                    <p><b><span>&#8364;</span>0.05 </b></p>
                </div>
                <div>
                    <div class = "norm_bucket_border">
                        <div class="bucket_background">
                            <div class="norm_bucket_background">
                                <div id="norm_ball_1" class="ball" style="display: none; position:absolute; bottom: 0px; left: 0px;"></div>
                                <div id="norm_ball_2" class="ball" style="display: none; position:absolute; bottom: 0px; left: 50px;"></div>
                                <div id="norm_ball_3" class="ball" style="display: none; position:absolute; bottom: 0px; left: 100px;"></div>
                                <div id="norm_ball_4" class="ball" style="display: none; position:absolute; bottom: 0px; left: 150px;"></div>
                                <div id="norm_ball_5" class="ball" style="display: none; position:absolute; bottom: 0px; left: 200px;"></div>
                                <div id="norm_ball_6" class="ball" style="display: none; position:absolute; bottom: 50px; left: 0px;"></div>
                                <div id="norm_ball_7" class="ball" style="display: none; position:absolute; bottom: 50px; left: 50px;"></div>
                                <div id="norm_ball_8" class="ball" style="display: none; position:absolute; bottom: 50px; left: 100px;"></div>
                                <div id="norm_ball_9" class="ball" style="display: none; position:absolute; bottom: 50px; left: 150px;"></div>
                                <div id="norm_ball_10" class="ball" style="display: none; position:absolute; bottom: 50px; left: 200px;"></div>
                                <div id="norm_ball_11" class="ball" style="display: none; position:absolute; bottom: 100px; left: 0px;"></div>
                                <div id="norm_ball_12" class="ball" style="display: none; position:absolute; bottom: 100px; left: 50px;"></div>
                                <div id="norm_ball_13" class="ball" style="display: none; position:absolute; bottom: 100px; left: 100px;"></div>
                                <div id="norm_ball_14" class="ball" style="display: none; position:absolute; bottom: 100px; left: 150px;"></div>
                                <div id="norm_ball_15" class="ball" style="display: none; position:absolute; bottom: 100px; left: 200px;"></div>
                                <div id="norm_ball_16" class="ball" style="display: none; position:absolute; bottom: 150px; left: 0;"></div>
                                <div id="norm_ball_17" class="ball" style="display: none; position:absolute; bottom: 150px; left: 50px;"></div>
                                <div id="norm_ball_18" class="ball" style="display: none; position:absolute; bottom: 150px; left: 100px;"></div>
                                <div id="norm_ball_19" class="ball" style="display: none; position:absolute; bottom: 150px; left: 150px;"></div>
                                <div id="norm_ball_20" class="ball" style="display: none; position:absolute; bottom: 150px; left: 200px;"></div>
                                <div id="norm_bucket" class="bucket" ondrop="drag_drop(event)" ondragover="return false"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="ball_container">
                <div id="ball" class="ball" style="margin-top: 20px" draggable="true" ondragstart="drag_start(event)"></div>
            </div>
        </div>
     </div>

    <div id="leave_stage_box" class="button_box" style="display: none">
        <br>
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        <input class="btn btn-primary" type="submit" value="Next"/>
        <br><br>
    </div>

    <div style ="display:none;">
        <input type="number" name="RFT_balls_in_yellow" id="otree_RFT_balls_in_yellow" class="form-control">
        <input type="number" name="RFT_balls_in_blue" id="otree_RFT_balls_in_blue" class="form-control">
    </div>
{% endblock %}

{% block styles %}
    <style>

        /* Visualization Buckets */

        .money_bucket_border {
            margin: auto;
            width: 300px;
            height: 300px;
            background: #ffd724;
            border-radius: 0 0 15px 15px;
        }

        .norm_bucket_border {
            margin: auto;
            width: 300px;
            height: 300px;
            background: #5022ff;
            border-radius: 0 0 15px 15px;
        }

        .bucket_background {
            position: relative;
            margin: auto auto 0px auto;
            width:250px;
            height:280px;
            background: #ececec;
            border-radius: 0 0 15px 15px;
        }

        .money_bucket_background {
            background: rgba(255, 215, 36, 0.11);
        }

        .norm_bucket_background {
            background: rgba(18, 0, 219, 0.11);
        }

        .bucket {
            position: relative;
            width:250px;
            height:280px;
            border-radius: 0 0 15px 15px;
        }

        /*Visualization Balls*/

         .ball {
            background: #27001f;
            border-radius: 50%;
            height: 50px;
            width: 50px;
            margin: auto;
         }

         .ball_container {
            margin: 25px auto;
         }

    </style>
{% endblock %}

{% block scripts %}
    <script>

        /* Define Variables*/

        let balls_left = 20;
        let balls_in_norm_bucket = 0;
        let balls_in_money_bucket = 0;

        function onLoadFunctions() {
                document.getElementById('pos_money_bucket').style.float = 'left';
                document.getElementById('pos_norm_bucket').style.float = 'right';
            }

        window.onload = onLoadFunctions;

        /* Drag & Drop */

        function drag_start(event) {
            event.dataTransfer.setData('ball', event.target.getAttribute('id'));
        }

        function drag_drop(event) {
            let bucket_id = event.target.getAttribute('id');

            if (bucket_id === 'norm_bucket') {
                balls_in_norm_bucket += 1;
                document.getElementById('norm_ball_'.concat(balls_in_norm_bucket)).style.display = 'block';
            }

            if (bucket_id === 'money_bucket') {
                balls_in_money_bucket += 1;
                document.getElementById('money_ball_'.concat(balls_in_money_bucket)).style.display = 'block';
            }

            balls_left -= 1;


            document.getElementById('Value').innerHTML = balls_left;

            if (balls_left === 0) {
                document.getElementById('ball').parentNode.removeChild(document.getElementById('ball'));
                document.getElementById('leave_stage_box').style.display='block';
                document.getElementById('otree_RFT_balls_in_yellow').value = balls_in_money_bucket;
                document.getElementById('otree_RFT_balls_in_blue').value = balls_in_norm_bucket;
            }
        }
    </script>
{% endblock %}