{% 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>

    <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>


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

{% endblock %}

{% block scripts %}

    <script>
        document.getElementById("id_numberOfClicks").style.visibility="hidden";
        document.getElementById("id_current_payoff").style.visibility="hidden";
    </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);

      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);

      //update number of clicks

      document.getElementById("id_numberOfClicks").value++;
    }
    </script>

{% endblock %}