{% 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 as 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 (You)</td><td>3</td>
    </tr>
    <tr>
        <th>Votes:</th> <td>5</td>
        <td style="background-color:yellow">4</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>
<br>
<br>
Suppose players 1 and 3 have selected to vote for
"B" and "D" respectively. 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>
{% formfield player.pl_vote_test label="" %}
<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">
    <p class="highcharts-description">
        The chart below summarizes the voting decisions for each player and how many votes each alternative received
    </p>
    <div id="container"></div>

</figure>
Chosen alternative: <span class="winnerOutput"></span>
<br>
Payoff: <span class="scoreOutput"></span>
<br>
<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 calculateScore() {

      var vote = document.getElementById('id_pl_vote_test');
      var scoreOutput = document.querySelector('.scoreOutput');
      var winnerOutput = document.querySelector('.winnerOutput');
      var aVotes = document.querySelector('.aVotes');
      var bVotes = document.querySelector('.bVotes');
      var cVotes = document.querySelector('.cVotes');
      var dVotes = document.querySelector('.dVotes');

      var aVotesValue = 0
      var bVotesValue = 5
      var cVotesValue = 0
      var dVotesValue = 3

      var p1voteA = 0
      var p1voteB = 0
      var p1voteC = 0
      var p1voteD = 0

      var voteContent = vote.value;


      if (!voteContent) {
       return false;
      }

      //calc payoffs

      if (voteContent == "A") {
            scoreOutput.textContent = 10
            winnerOutput.textContent = "B"
            aVotesValue += 4
            p1voteA = 4
        };
      if (voteContent == "B") {
            scoreOutput.textContent = 10
            winnerOutput.textContent = "B"
            bVotesValue += 4
            p1voteB = 4
        };
      if (voteContent == "C") {
            scoreOutput.textContent = 10
            winnerOutput.textContent = "B"
            cVotesValue += 4
            p1voteC = 4
        };
      if (voteContent == "D") {
            scoreOutput.textContent = 5
            winnerOutput.textContent = "D"
            dVotesValue += 4
            p1voteD = 4
        };
      Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Alternative Votes'
        },
        xAxis: {
            categories: ['A', 'B', 'C', 'D']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total votes'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: ( // theme
                        Highcharts.defaultOptions.title.style &&
                        Highcharts.defaultOptions.title.style.color
                    ) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor:
                Highcharts.defaultOptions.legend.backgroundColor || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true
                }
            }
        },
        series: [{
            name: 'Player 1',
            data: [0, 5, 0, 0]
        }, {
            name: 'Player 2',
            data: [p1voteA, p1voteB, p1voteC, p1voteD]
        }, {
            name: 'Player 3',
            data: [0, 0, 0, 3]
        }]
    });

    }
    </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>
    var p1voteA = 0
    var p1voteB = 0
    var p1voteC = 0
    var p1voteD = 0
    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Alternative Votes'
        },
        xAxis: {
            categories: ['A', 'B', 'C', 'D']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total votes'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: ( // theme
                        Highcharts.defaultOptions.title.style &&
                        Highcharts.defaultOptions.title.style.color
                    ) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor:
                Highcharts.defaultOptions.legend.backgroundColor || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true
                }
            }
        },
        series: [{
            name: 'Player 1',
            data: [0, 0, 0, 0]
        }, {
            name: 'Player 2',
            data: [p1voteA, p1voteB, p1voteC, p1voteD]
        }, {
            name: 'Player 3',
            data: [0, 0, 0, 0]
        }]
    });
    </script>
{% endblock %}