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

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


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


{% block content %}
    Search Value: <span class="scoreOutput">0</span>
    <br>
    Current Payoff: <span class="payoff">{{ player.current_payoff }}</span>
    <br>
    Max Location: <span class="maxLocation">{{ player.maxLocation }}</span> &emsp; Max Sugar: <span class="maxSugar"> {{ player.maxSugar }}</span>  &emsp;
    Max Lemon: <span class="maxLemon">{{ player.maxLemon }}</span>
    <table class="table" width = "1000">
            <tr>
                <td width="20%">{% formfield player.dimension_1 label="Choose location:" %}</td>
                <td width="20%">{% formfield player.dimension_2 label="Choose sugar content:" %}</td>
                <td width="20%">{% formfield player.dimension_3 label="Choose lemon content:" %}</td>
            </tr>
    </table>
    <br>
    <br>
    <table class="table" width = "1000">
            <tr>
                <td width="20%"><button type="button" onclick="calculateScore(); return false;" name="search_button" class="btn btn-primary btn-large">Search!</button></td>
                <td width="20%"><button type="button" onclick="sendMax(); return false;" name="send_button" class="btn btn-primary btn-large">Send Max</button></td>
            </tr>
    </table>
    <br>
    <br>
    <br>
    {% for config in player.leader_chat %}
        <h4>{{config.label}}</h4>
        {% chat nickname=player.chat_nickname channel=config.channel %}
    {% endfor %}
<br>
<br>
<br>
    {% next_button %}
<p>{% formfield player.numberOfClicks label=""%}</p>
<p>{% formfield player.current_payoff label=""%}</p>
<p>{% formfield player.maxLocation label=""%}</p>
<p>{% formfield player.maxSugar label=""%}</p>
<p>{% formfield player.maxLemon label=""%}</p>


<p>{% formfield player.subPeriod label=""%}</p>

{% endblock %}

{% block scripts %}

    <script>
        document.getElementById("id_numberOfClicks").style.visibility="hidden";
        document.getElementById("id_current_payoff").style.visibility="hidden";
        document.getElementById("id_maxLocation").style.visibility="hidden";
        document.getElementById("id_maxSugar").style.visibility="hidden";
        document.getElementById("id_maxLemon").style.visibility="hidden";
        document.getElementById("id_subPeriod").style.visibility="hidden";
    </script>

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

    <script>
    function sendMax() {
        var maxLocation = document.querySelector('.maxLocation');
        var maxSugar = document.querySelector('.maxSugar');
        var maxLemon = document.querySelector('.maxLemon');
        var value = document.querySelector('.payoff');

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

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

    <script>




    function calculateScore() {

      var selectLocation = document.getElementById('id_dimension_1');
      var inputSugar = document.getElementById('id_dimension_2');
      var inputLemon = document.getElementById('id_dimension_3');
      var scoreOutput = document.querySelector('.scoreOutput');
      var maxLocation = document.querySelector('.maxLocation');
      var maxSugar = document.querySelector('.maxSugar');
      var maxLemon = document.querySelector('.maxLemon');
      var payoff = document.querySelector('.payoff');

      var locationValue = selectLocation.value;
      var sugarValue = inputSugar.value;
      var lemonValue = inputLemon.value;


      console.log(locationValue, sugarValue, lemonValue);

      if (!locationValue || !sugarValue || !lemonValue) {
       return false;
      }

      sugarValue = parseFloat(sugarValue).toFixed(1);
      lemonValue = parseFloat(lemonValue).toFixed(1);
      console.log(sugarValue, lemonValue);

      var baselines = {

        'North': {
          'sugar': {
            'value':  {{ group.optimum1_2 }},
            'penalty': {{ group.punishment1 }}/10
          },
          'lemon': {
            'value':  {{ group.optimum1_3 }},
            'penalty': {{ group.punishment1 }}/10
          },
          'maxProfit': {{ group.optimum1_1 }}
        },
        'Central': {
          'sugar': {
            'value':  {{ group.optimum2_2 }},
            'penalty': {{ group.punishment2 }}/10
          },
          'lemon': {
            'value': {{ group.optimum2_3 }},
            'penalty': {{ group.punishment2 }}/10
          },
          'maxProfit': {{ group.optimum2_1 }}
        },
        'South': {
          'sugar': {
            'value':  {{ group.optimum3_2 }},
            'penalty': {{ group.punishment3 }}/10
          },
          'lemon': {
            'value':  {{ group.optimum3_3 }},
            'penalty': {{ group.punishment3 }}/10
          },
          'maxProfit': {{ group.optimum3_1 }}
        },

      };

      var startingMoney = baselines[locationValue].maxProfit;

      //calc payoffs
      startingMoney -= (Math.abs(sugarValue - baselines[locationValue].sugar.value) / .1 ) * baselines[locationValue].sugar.penalty.toFixed(1);
      console.log((Math.abs(sugarValue - baselines[locationValue].sugar.value) / .1 ) * baselines[locationValue].sugar.penalty.toFixed(1));
      startingMoney -= (Math.abs(lemonValue - baselines[locationValue].lemon.value) / .1 ) * baselines[locationValue].lemon.penalty.toFixed(1);
      console.log(startingMoney);

      scoreOutput.textContent = parseFloat(startingMoney).toFixed(1) < 0 ? 0 : parseFloat(startingMoney).toFixed(1);

      maxLocation.textContent = parseFloat(scoreOutput.textContent) == 0 ? selectLocation.value : maxLocation.textContent
      maxSugar.textContent = parseFloat(scoreOutput.textContent) == 0 ? inputSugar.value : maxSugar.textContent
      maxLemon.textContent = parseFloat(scoreOutput.textContent) == 0 ? inputLemon.value : maxLemon.textContent

      document.getElementById("id_current_payoff").value = (parseFloat(startingMoney).toFixed(1) < parseFloat(document.getElementById("id_current_payoff").value) ?
                                    parseFloat(document.getElementById("id_current_payoff").value) : parseFloat(startingMoney).toFixed(1));

      payoff.textContent = document.getElementById("id_current_payoff").value;

      maxLocation.textContent = (parseFloat(startingMoney).toFixed(1) < parseFloat(document.getElementById("id_current_payoff").value) ?
                                    maxLocation.textContent : document.getElementById('id_dimension_1').value);
      maxSugar.textContent = (parseFloat(startingMoney).toFixed(1) < parseFloat(document.getElementById("id_current_payoff").value) ?
                                    maxSugar.textContent : document.getElementById('id_dimension_2').value);
      maxLemon.textContent = (parseFloat(startingMoney).toFixed(1) < parseFloat(document.getElementById("id_current_payoff").value) ?
                                    maxLemon.textContent : document.getElementById('id_dimension_3').value);

      document.getElementById("id_maxLocation").value = maxLocation.textContent
      document.getElementById("id_maxSugar").value = maxSugar.textContent
      document.getElementById("id_maxLemon").value = maxLemon.textContent
      //update number of clicks

      document.getElementById("id_numberOfClicks").value++;


    }
    </script>

{% endblock %}