{% 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 (You)</td><td>3</td>
    </tr>
    <tr>
        <th>Votes:</th> <td>5</td>
        <td style="background-color:yellow">5</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 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.IR_A_pr label="A:" %}</td> <td>{% formfield player.IR_B_pr label="B:" %}</td>
        <td>{% formfield player.IR_C_pr label="C:" %}</td> <td>{% formfield player.IR_D_pr label="D:" %}</td>
    </tr>
</table>
<br>
<button type="button" onclick="calculateScore(); return false;" name="test_button" class="btn btn-primary btn-large">Test</button>
<br>
<br>
<div id="Error_message">Error: each ranking of the above alternatives must be unique</div>
<br>
<br>
<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        The chart above summarizes the series of runoffs and votes for each alternative. Each group of columns represents each runoff.
        Remember, once an alternative reaches a majority of votes there are no further rounds of voting.
    </p>
</figure>
<br>
<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 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>

        document.getElementById("Error_message").style.visibility="hidden";
    </script>

    <script>
        function calculateScore() {
          document.getElementById("Error_message").style.visibility="hidden";
          var voteA = document.getElementById('id_IR_A_pr');
          var voteB = document.getElementById('id_IR_B_pr');
          var voteC = document.getElementById('id_IR_C_pr');
          var voteD = document.getElementById('id_IR_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 voteAContent = voteA.value;
          var voteBContent = voteB.value;
          var voteCContent = voteC.value;
          var voteDContent = voteD.value;

          var run1A = 0
          var run2A = 0
          var run3A = 0


          var run1B = 0
          var run2B = 0
          var run3B = 0


          var run1C = 0
          var run2C = 0
          var run3C = 0


          var run1D = 0
          var run2D = 0
          var run3D = 0


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

          if (voteAContent == voteBContent || voteAContent == voteCContent || voteAContent == voteDContent) {
            document.getElementById("Error_message").style.visibility="visible";
            scoreOutput.textContent = "--"
            winnerOutput.textContent = "--"
            return false;
          }
            if (voteBContent == voteAContent || voteBContent == voteCContent || voteBContent == voteDContent) {
            document.getElementById("Error_message").style.visibility="visible";
            scoreOutput.textContent = "--"
            winnerOutput.textContent = "--"
            return false;
          }
            if (voteCContent == voteBContent || voteCContent == voteAContent || voteCContent == voteDContent) {
            document.getElementById("Error_message").style.visibility="visible";
            scoreOutput.textContent = "--"
            winnerOutput.textContent = "--"
            return false;
          }
            if (voteDContent == voteBContent || voteDContent == voteCContent || voteDContent == voteAContent) {
            document.getElementById("Error_message").style.visibility="visible";
            scoreOutput.textContent = "--"
            winnerOutput.textContent = "--"
            return false;
          }

         if (voteAContent == 1){
            aVotesValue += 8
            cVotesValue += 5
            run1A = 5
            run2A = 5
            run3A = 8
            run1D = 5
            run2D = 5
            run3D = 5
            run1C = 3
            run2C = 3
            run3C = 0
         }

         if (voteBContent == 1){
            bVotesValue += 5
            cVotesValue += 8
            run1B = 5
            run2B = 5
            run3B = 5
            run1D = 5
            run2D = 5
            run3D = 8
            run1C = 3
            run2C = 3
            run3C = 0
         }

         if (voteCContent == 1) {
            cVotesValue += 10
            dVotesValue += 3
            run1C = 10
            run1D = 3
         }

         if (voteDContent == 1) {
            cVotesValue += 5
            dVotesValue += 8
            run1C = 5
            run1D = 8
         }


         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: 'Alternative Votes'
            },
            xAxis: {
                categories: [
                    'Runoff 1',
                    'Runoff 2',
                    'Runoff 3'
                ],
                crosshair: true
            },
             yAxis: {
                    allowDecimals: false,
                    min: 0,
                    title: {
                        text: 'Votes'
                    },
                        plotLines: [{
                        value: 6.5,
                        color: 'green',
                        dashStyle: 'shortdash',
                        width: 2,
                        label: {
                            text: 'Majority threshold'
                        }
                    }]
                },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Alternative A',
                data: [run1A, run2A, run3A]

            }, {
                name: 'Alternative B',
                data: [run1B, run2B, run3B]

            }, {
                name: 'Alternative C',
                data: [run1C, run2C, run3C]

            }, {
                name: 'Alternative D',
                data: [run1D, run2D, run3D]

            }]
        })

        };


    </script>

<script>
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Alternative Votes'
    },
    xAxis: {
        categories: [
            'Runoff 1',
            'Runoff 2',
            'Runoff 3'
        ],
        crosshair: true
    },
     yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Votes'
            },
                plotLines: [{
                value: 6.5,
                color: 'green',
                dashStyle: 'shortdash',
                width: 2,
                label: {
                    text: 'Majority threshold'
                }
            }]
        },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Alternative A',
        data: [0, 0, 0]

    }, {
        name: 'Alternative B',
        data: [0, 0, 0]

    }, {
        name: 'Alternative C',
        data: [0, 0, 0]

    }, {
        name: 'Alternative D',
        data: [0, 0, 0]

    }]
})
</script>

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

{% endblock %}