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


{% block styles %}
    <style>
        .otree-timer {
            display: none;
        }
    </style>
{% endblock %}


{% block title %}
    Leader Search Task
{% endblock %}

{% block content %}

<p>The members of your group made the following decisions in the previous round:</p>
    <table class="table">
        <tr>
            <th>Player:</th>
            <th>Dimension 1:</th>
            <th>Dimension 2:</th>
            <th>Dimension 3:</th>
            <th>Payoff:</th>
            <th>Number of Clicks:</th>
        </tr>
        {% for p in others_in_group %}
        <tr>
            <td>{{p.id_in_group}} </td> <td>{{p.dimension_1}}</td> <td>{{p.dimension_2}}</td>
            <td>{{p.dimension_3}}</td>  <td>{{p.current_payoff}}</td><td>{{p.numberOfClicks}}</td>
        </tr>
        {% endfor %}
    </table>

<br>
<br>

<table class="table" width = "1000">
            <tr>
                <td width="20%">{% formfield player.dimension_1 label="Location:" %}</td>
                <td width="20%">{% formfield player.dimension_2 label="Sugar Content:" %}</td>
                <td width="20%">{% formfield player.dimension_3 label="Lemon Content:" %}</td>
                <td width="20%">{% formfield player.value label="Value:" %}</td>
            </tr>
</table>

<button type="button" onclick="sendLocation(); return false;" name="send_button" class="btn btn-primary btn-large">Send Location</button>
<br>
<br>
<br>
Chat with your group members below:

{% for config in player.chat_configs %}
    <h4>{{ config.label }}</h4>
    {% chat nickname=player.chat_nickname channel=config.channel %}
{% endfor %}

<br>
<br>
<br>
<br>
<br>
<br>
<br>
    {% next_button %}

{% endblock %}

{% block scripts %}

    <script>
    function sendLocation() {
        var maxLocation = document.getElementById('id_dimension_1');
        var maxSugar = document.getElementById('id_dimension_2');
        var maxLemon = document.getElementById('id_dimension_3');
        var value = document.getElementById('id_value');

        var coordinates = "Location:  " + maxLocation.value + "  Sugar:  " + maxSugar.value + "  Lemon:  " + maxLemon.value
                        + "  Value:  " + value.value

        var before = $('.otree-chat__input').val();
        $('.otree-chat__input').val(coordinates);
        $('.otree-chat__btn-send').click();
    }
    </script>

    <script>
        $(function () {
            $('.otree-timer__time-left').on('update.countdown', function (event) {
                if (event.offset.totalSeconds === 60) {
                    $('.otree-timer').show();
                }
            });
        });
    </script>

{% endblock %}