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

{% block title %}
    Practice Page
{% endblock %}

{% block content %}

    This screen displays the tools and information below in a similar manner to when you are making decisions for payment.
    Decisions here will not be used for payment in this experiment.
<br>
<br>

The below table lists both your and your group members' payoffs for selecting the various alternatives, as well as how
many votes each has been allocated this round. Your player number, votes, and payoffs are highlighted in yellow:
<br>
<br>
<table class="table">
    <tr>
        <th>Player:</th>  <td>1</td> <td style="background-color:yellow">2</td><td>3</td>
    </tr>
    <tr>
        <th>Votes:</th> <td>5</td>
        <td style="background-color:yellow">5 (You)</td>
        <td>3</td>
    </tr>
    <tr>
        <th>Alternatives</th>
        <th colspan="3">Players' Payoffs</th>
    </tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr>
        <td>A</td>  <td>20</td> <td style="background-color:yellow">15</td> <td>5</td>
    </tr>
    <tr>
        <td>B</td>  <td>5</td> <td style="background-color:yellow">10</td> <td>10</td>
    </tr>
    <tr>
        <td>C</td>  <td>10</td> <td style="background-color:yellow">20</td> <td>20</td>
    </tr>
    <tr>
        <td>D</td>  <td>15</td> <td style="background-color:yellow">5</td> <td>15</td>
    </tr>
</table>
</table>
<br>
<br>
Suppose players 1 and 3 have selected to vote in the following manner:
<br>
<br>
Player 1: A = 3, B = 2, C = 1, D = 4
<br>
<br>
Player 3: A = 2, B = 4, C = 3, D = 1
<br>
<br>
Input your voting decision below and then press the "Test" button to see the outcome of the
group selection, including how many points you would have earned for your decision.
<br>
<br>
<table class="table">
    <tr>
        <td>{% formfield player.STAR_A_pr label="A:" %}</td> <td>{% formfield player.STAR_B_pr label="B:" %}</td>
        <td>{% formfield player.STAR_C_pr label="C:" %}</td> <td>{% formfield player.STAR_D_pr label="D:" %}</td>
    </tr>
</table>
<br>
<br>
<button type="button" onclick="calculateScore(); return false;" name="test_button" class="btn btn-primary btn-large">Test</button>
<br>
<br>
<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        The chart above summarizes the voting decisions for each player. The first column for every alternative is the total score
        for that alternative while the second is the total number of votes that alternative received in the runoff.
    </p>
</figure>

<br>
Chosen alternative: <span class="winnerOutput"></span>
<br>
Payoff: <span class="scoreOutput"></span>
<br>
<br>
When you are finished, press the "next" button below to proceed to the rest of the experiment.
<br>
<br>
    {% next_button %}

{% endblock %}

{% block scripts %}

<script>
function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i

    // swap elements array[i] and array[j]
    // we use "destructuring assignment" syntax to achieve that
    // you'll find more details about that syntax in later chapters
    // same can be written as:
    // let t = array[i]; array[i] = array[j]; array[j] = t
    [array[i], array[j]] = [array[j], array[i]];
  }
}
</script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<script>


function calculateScore() {

  var voteA = document.getElementById('id_STAR_A_pr');
  var voteB = document.getElementById('id_STAR_B_pr');
  var voteC = document.getElementById('id_STAR_C_pr');
  var voteD = document.getElementById('id_STAR_D_pr');
  var scoreOutput = document.querySelector('.scoreOutput');
  var winnerOutput = document.querySelector('.winnerOutput');

  var aVotesValue = 0
  var bVotesValue = 0
  var cVotesValue = 0
  var dVotesValue = 0

  var A1 = 0
  var B1 = 0
  var C1 = 0
  var D1 = 0

  var A2 = 0
  var B2 = 0
  var C2 = 0
  var D2 = 0


  var A3 = 0
  var B3 = 0
  var C3 = 0
  var D3 = 0


  var aScoreValue = 21
  var bScoreValue = 22
  var cScoreValue = 14
  var dScoreValue = 23


  var voteAContent = voteA.value;
  var voteBContent = voteB.value;
  var voteCContent = voteC.value;
  var voteDContent = voteD.value;


  if (!voteAContent || !voteBContent || !voteCContent || !voteDContent ) {
   return false;
  }

  //calc payoffs

  aScoreValue += voteAContent*5
  bScoreValue += voteBContent*5
  cScoreValue += voteCContent*5
  dScoreValue += voteDContent*5


  var scores = [aScoreValue, bScoreValue, cScoreValue, dScoreValue]
  var new_scores = [aScoreValue, bScoreValue, cScoreValue, dScoreValue]

  var score1 = [3, 2, 1, 4]
  var score2 = [voteAContent, voteBContent, voteCContent, voteDContent]
  var score3 = [2, 4, 3, 1]

  shuffle(new_scores)
  new_scores.sort()
  console.log(scores)

  new_scores.splice(0,2)
  runoff_cands = []

  for (s of scores) {
    if (new_scores.includes(s)){
       runoff_cands.push(scores.indexOf(s))
    }
  }
  candidates = ["A","B","C","D"]
  player_votes = []
  var player_2_vote = 0

  if (score1[runoff_cands[0]] > score1[runoff_cands[1]]){
    player_1_vote = candidates[runoff_cands[0]]
  }
  if (score1[runoff_cands[0]] < score1[runoff_cands[1]]){
    player_1_vote = candidates[runoff_cands[1]]
  }
    if (score2[runoff_cands[0]] > score2[runoff_cands[1]]){
     player_2_vote = candidates[runoff_cands[0]]
  }
    if (score2[runoff_cands[0]] < score2[runoff_cands[1]]){
     player_2_vote = candidates[runoff_cands[1]]
  }
  if (score3[runoff_cands[0]] > score3[runoff_cands[1]]){
      player_3_vote = candidates[runoff_cands[0]]
  }
  if (score3[runoff_cands[0]] < score3[runoff_cands[1]]){
      player_3_vote = candidates[runoff_cands[1]]
  }

  if (player_1_vote == "A"){
    aVotesValue += 5
    A1 = 5
  }
    if (player_1_vote == "B"){
    bVotesValue += 5
    B1 = 5
  }
    if (player_1_vote == "C"){
    cVotesValue += 5
    C1 = 5
  }
    if (player_1_vote == "D"){
    dVotesValue += 5
    D1 = 5
  }

    if (player_2_vote == "A"){
    aVotesValue += 5
    A2 = 5
  }
    if (player_2_vote == "B"){
    bVotesValue += 5
    B2 = 5
  }
    if (player_2_vote == "C"){
    cVotesValue += 5
    C2 = 5
  }
    if (player_2_vote == "D"){
    dVotesValue += 5
    D2 = 5
  }


  if (player_3_vote == "A"){
    aVotesValue += 3
    A3 = 3
  }
    if (player_3_vote == "B"){
    bVotesValue += 3
    B3 = 3
  }
    if (player_3_vote == "C"){
    cVotesValue += 3
    C3 = 3
  }
    if (player_3_vote == "D"){
    dVotesValue += 3
    D3 = 3
  }




  console.log(player_2_vote)

  var votes = [aVotesValue, bVotesValue, cVotesValue, dVotesValue]

  winner = votes.indexOf(Math.max.apply(null, votes))

  if (winner == 0) {
    scoreOutput.textContent = 15
    winnerOutput.textContent = "A"
  };
  if (winner == 1) {
    scoreOutput.textContent = 10
    winnerOutput.textContent = "B"
  };
  if (winner == 2) {
    scoreOutput.textContent = 20
    winnerOutput.textContent = "C"
  };
  if (winner == 3) {
    scoreOutput.textContent = 5
    winnerOutput.textContent = "D"
  };

   Highcharts.chart('container', {

    chart: {
        type: 'column'
    },

    title: {
        text: 'Total Alternative Score and Votes'
    },

    xAxis: {
        categories: ['A', 'B', 'C', 'D']
    },

    yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
            text: 'Score/Votes'
        },
    },

    tooltip: {
        formatter: function () {
            return '<b>' + this.x + '</b><br/>' +
                this.series.name + ': ' + this.y + '<br/>' +
                'Total: ' + this.point.stackTotal;
        }
    },

    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },

    series: [{
        name: 'Player 1 Score',
        data: [15, 10, 5, 20],
        stack: 'male'
    }, {
        name: 'Player 2 Score',
        data: [voteAContent*5, voteBContent*5, voteCContent*5, voteDContent*5],
        stack: 'male'
    }, {
        name: 'Player 3 Score',
        data: [6, 12, 9, 3],
        stack: 'male'
    }, {
        name: 'Player 1 Votes',
        data: [A1, B1, C1, D1],
        stack: 'female'
    },
    {
        name: 'Player 2 Votes',
        data: [A2, B2, C2, D2],
        stack: 'female'
    },
    {
        name: 'Player 3 Votes',
        data: [A3, B3, C3, D3],
        stack: 'female'
    },
    ]
});
}


</script>



<script>
    Highcharts.chart('container', {

    chart: {
        type: 'column'
    },

    title: {
        text: 'Total Alternative Score and Votes'
    },

    xAxis: {
        categories: ['A', 'B', 'C', 'D']
    },

    yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
            text: 'Score/Votes'
        },
    },

    tooltip: {
        formatter: function () {
            return '<b>' + this.x + '</b><br/>' +
                this.series.name + ': ' + this.y + '<br/>' +
                'Total: ' + this.point.stackTotal;
        }
    },

    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },

    series: [{
        name: 'Player 1 Score',
        data: [0, 0, 0, 0],
        stack: 'male'
    }, {
        name: 'Player 2 Score',
        data: [0, 0, 0, 0],
        stack: 'male'
    }, {
        name: 'Player 3 Score',
        data: [0, 0, 0, 0],
        stack: 'male'
    }, {
        name: 'Player 1 Votes',
        data: [0, 0, 0, 0],
        stack: 'female'
    },
    {
        name: 'Player 2 Votes',
        data: [0, 0, 0, 0],
        stack: 'female'
    },
    {
        name: 'Player 3 Votes',
        data: [0, 0, 0, 0],
        stack: 'female'
    },
    ]
});
</script>
{% endblock %}