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

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


{% block content %}
    Search Value: <span class="scoreOutput">0</span>
    <br>
    Current Payoff: <span class="payoff">0.0</span>
    <br>
    Max Location: <span class="maxLocation"></span> &emsp; Max Sugar: <span class="maxSugar"></span>  &emsp;
    Max Lemon: <span class="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>
<p>Once you have finished practicing, you may hit the "next" button below to indicate you are ready to start the experiment.
Once all of your group members have indicated their willingness to start, you may proceed with the rest of the experiment.</p>
<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%">{% next_button %}</td>
            </tr>
    </table>



{% endblock %}

{% block scripts %}

    <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':  5.5,
            'penalty': 5
          },
          'lemon': {
            'value':  3.4,
            'penalty': 5
          },
          'maxProfit': 100
        },
        'Central': {
          'sugar': {
            'value':  4.4,
            'penalty': 6
          },
          'lemon': {
            'value': 7.5,
            'penalty': 6
          },
          'maxProfit': 200
        },
        'South': {
          'sugar': {
            'value':  6.7,
            'penalty': 0.5
          },
          'lemon': {
            'value':  1.2,
            'penalty': 0.5
          },
          'maxProfit': 50
        },

      };

      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(startingMoney).toFixed(1) < parseFloat(payoff.textContent) ?
                                    maxLocation.textContent : document.getElementById('id_dimension_1').value);
      maxSugar.textContent = (parseFloat(startingMoney).toFixed(1) < parseFloat(payoff.textContent) ?
                                    maxSugar.textContent : document.getElementById('id_dimension_2').value);
      maxLemon.textContent = (parseFloat(startingMoney).toFixed(1) < parseFloat(payoff.textContent) ?
                                    maxLemon.textContent : document.getElementById('id_dimension_3').value);


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


    }
    </script>

{% endblock %}