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

{% block title %}
Teil 1: Entscheidung {{player.round_number}}/6
{% endblock %}

{% block content %}

<style>
    .div1 {
        width: 1000px;
        padding: 20px;
        background-color: aliceblue;
        background-color: #eefbf4;

    }

    body {
    font: normal 1.25em Candara, sans-serif;
    }

    .div2 {
        width: 1000px;
        padding: 20px;
        height: 25px;
    }

    h1 {
        font-size: 150%;
        margin-bottom: 20px
    }

    .tab { margin-left: 50px; }

    .inline {
   display:inline-block;
   width:500px;
   margin-right:200px;
   margin-bottom: 20px
}

    .otree-btn-next {

        display: none;
        float: right;
    }

</style>
<p> Nehmen Sie an, dass Ihre beiden Gruppenmitglieder für den Wettbewerb ausgelost wurden. </p>
<p> Spieler 1 hat den Wettbewerb gewonnen und erhält dafür ein <b>hohes Preisgeld von <span id="p1_initial_wealth"></span> €</b>. Spieler 2 erhält als Verlierer ein <b>niedriges Preisgeld von <span id="p2_initial_wealth"></span> €</b>.</p>

<p> Im Folgenden können Sie nun die Gesamtsumme von <b><span id="additional_sum"></span> €</b> als <b>weiteres Einkommen</b> auf die beiden Teilnehmenden aufteilen. Wie Sie wussten die beiden Gruppenmitglieder vor dem Bearbeiten der Aufgaben nicht von diesem weiteren Einkommen. </p>

{% if player.treatment == "Absolute" %}
<div class="div1">
    <h1>Aufteilung des weiteren Einkommens</h1>
    <p> Bitte nutzen Sie die Slider, um die Gesamtsumme von <span id="additional_sum_2"></span> € nach Belieben aufzuteilen. </p>
    <p id="redist_choice_feedback"><br></p>
        <p> Spieler 1: <input type="range" class="inline "name="p1_slider_choice" value="0" step="0.001"  min="0" max="100" id="p1_slider_choice" class="form-control" list="tickmarks" width="500 px"></p>
        <p> Spieler 2: <input type="range" class="inline "name="p2_slider_choice" value="0" step="0.001"  min="0" max="100" id="p2_slider_choice" class="form-control" list="tickmarks" width="500 px"></p>
        <input type="hidden" name="slider_touched" value="0" id="id_slider_touched">
        {{ form.slider_touched.errors }}
      <p> Die Auszahlung von Spieler 1 steigt <span style="color:blue;">um <span id="p1_live_income"></span> €</span> von <span id="p1_initial_wealth_2"></span> € auf <span id="p1_live_final_wealth"></span> €.</p>
      <p> Die Auszahlung von Spieler 2 steigt <span style="color:blue;">um <span id="p2_live_income"></span> €</span> von <span id="p2_initial_wealth_2"></span> € auf <span id="p2_live_final_wealth"></span> €.</p>


     <canvas id="bar-chart" width="500" height="200"></canvas>



     </div> </div>


     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script>
         // ADD RESET BUTTON
         // ADD LABELS ON BOTH SIDES SAYING "Alles an Spieler 1/2"


         var p1_initial_wealth = {{ p1_initial_wealth }};
         var p2_initial_wealth = {{ p2_initial_wealth }};

         var slider_frame = {{ slider_frame }};

         var additional_sum = {{additional_sum}};


         var p1_income_no_redist = {{ p1_income_no_redist }};
         var p2_income_no_redist = {{ p2_income_no_redist }};

         var p1_final_wealth_no_redist = p1_initial_wealth;
         var p2_final_wealth_no_redist = p2_initial_wealth;


         var p1_live_income = 0;
         var p2_live_income = 0;



         Chart.defaults.font.size = 18;


         var myChart = new Chart(document.getElementById("bar-chart"), {
            type: 'bar',
            data: {
              labels: ["Spieler 1", "Spieler 2"],
              datasets: [
                {
                  label: "Weiteres Einkommen bei gewählter Änderung",
                  backgroundColor: ["#FFC20A", "#0C7BDC"],
                  data: [p1_live_income, p2_live_income]
                }
              ]
            },
            options: {

              scales : {
                        y : {
                            min: 0,
                            max: p1_income_no_redist + p2_income_no_redist,
                        },

                    },
              animation: {
                  duration: 0
              },
              legend: { display: false },
              events: [],
              title: {
                display: true,
              }
            }
        });



       $(document).ready(function () {


            document.getElementById("p1_live_final_wealth").innerHTML = p1_final_wealth_no_redist.toFixed(2);
            document.getElementById("p2_live_final_wealth").innerHTML = p2_final_wealth_no_redist.toFixed(2);




            document.getElementById("p1_initial_wealth").innerHTML = p1_initial_wealth.toFixed(2);
            document.getElementById("p2_initial_wealth").innerHTML = p2_initial_wealth.toFixed(2);
            document.getElementById("p1_initial_wealth_2").innerHTML = p1_initial_wealth.toFixed(2);
            document.getElementById("p2_initial_wealth_2").innerHTML = p2_initial_wealth.toFixed(2);



            document.getElementById("additional_sum").innerHTML = (p1_income_no_redist + p2_income_no_redist).toFixed(2);
            document.getElementById("additional_sum_2").innerHTML = (p1_income_no_redist + p2_income_no_redist).toFixed(2);


            document.getElementById("p1_live_income").innerHTML = p1_live_income.toFixed(2);
            document.getElementById("p2_live_income").innerHTML = p1_live_income.toFixed(2);



            document.getElementById("redist_choice_feedback").innerHTML = "<span style='color:red;'><b>Bitte berühren Sie die Slider, um eine Entscheidung zu treffen.</b></span>";



            $("input[name=p1_slider_choice]").on('input', function() {

                document.getElementById("redist_choice_feedback").innerHTML = "";

                document.getElementById('id_slider_touched').value = 1;

                p1_max_percentage = 100*((p1_initial_wealth + additional_sum)/p1_initial_wealth - 1);
                p1_min_percentage = 0;
                p2_max_percentage = 100*((p2_initial_wealth + additional_sum)/p2_initial_wealth - 1);
                p2_min_percentage = 0;

                p1_live_percentage = (1-$(this).val()/100)*p1_min_percentage + ($(this).val()/100)*p1_max_percentage;



                p1_live_income = (p1_live_percentage/100)*p1_initial_wealth;
                p2_live_income = additional_sum - p1_live_income

                p1_live_final_wealth = p1_initial_wealth + p1_live_income;
                p2_live_final_wealth = p2_initial_wealth + p2_live_income;

                p2_live_percentage = 100*(p2_live_final_wealth / p2_initial_wealth - 1);

                document.getElementById("p1_live_final_wealth").innerHTML = p1_live_final_wealth.toFixed(2);
                document.getElementById("p2_live_final_wealth").innerHTML = p2_live_final_wealth.toFixed(2);

                document.getElementById("p1_live_income").innerHTML = p1_live_income.toFixed(2);
                document.getElementById("p2_live_income").innerHTML = p2_live_income.toFixed(2);

                document.getElementById("p2_slider_choice").value = 100*(p2_live_percentage - p2_min_percentage)/(p2_max_percentage-p2_min_percentage)



                myChart.config.data = {
                  labels: ["Spieler 1", "Spieler 2"],
                  datasets: [
                    {
                      label: "Einkommen bei gewählter Änderung",
                      backgroundColor: ["#FFC20A", "#0C7BDC"],
                      data: [p1_live_income, p2_live_income]
                    }
                  ]
               };

               myChart.update()


              });


              $("input[name=p2_slider_choice]").on('input', function() {

                  document.getElementById('id_slider_touched').value = 1;
                  document.getElementById("redist_choice_feedback").innerHTML = "";

                  p1_max_percentage = 100*((p1_initial_wealth + additional_sum)/p1_initial_wealth - 1);
                  p1_min_percentage = 0;
                  p2_max_percentage = 100*((p2_initial_wealth + additional_sum)/p2_initial_wealth - 1);
                  p2_min_percentage = 0;

                  p2_live_percentage = (1-$(this).val()/100)*p2_min_percentage + ($(this).val()/100)*p2_max_percentage;



                  p2_live_income = (p2_live_percentage/100)*p2_initial_wealth;
                  p1_live_income = additional_sum - p2_live_income

                  p1_live_final_wealth = p1_initial_wealth + p1_live_income;
                  p2_live_final_wealth = p2_initial_wealth + p2_live_income;

                  p1_live_percentage = 100*(p1_live_final_wealth / p1_initial_wealth - 1);

                  document.getElementById("p1_live_final_wealth").innerHTML = p1_live_final_wealth.toFixed(2);
                  document.getElementById("p2_live_final_wealth").innerHTML = p2_live_final_wealth.toFixed(2);

                  document.getElementById("p1_live_income").innerHTML = p1_live_income.toFixed(2);
                  document.getElementById("p2_live_income").innerHTML = p2_live_income.toFixed(2);

                  document.getElementById("p1_slider_choice").value = 100*(p1_live_percentage - p1_min_percentage)/(p1_max_percentage-p1_min_percentage)



                  myChart.config.data = {
                    labels: ["Spieler 1", "Spieler 2"],
                    datasets: [
                      {
                        label: "Einkommen bei gewählter Änderung",
                        backgroundColor: ["#FFC20A", "#0C7BDC"],
                        data: [p1_live_income, p2_live_income]
                      }
                    ]
                 };

                 myChart.update()


                });
           });



     </script>
 {%endif%}

 {% if player.treatment == "Relative" %}
  <div class="div1">
      <h1>Aufteilung des weiteren Einkommens</h1>
      <p> Bitte nutzen Sie die Slider, um die Gesamtsumme von <span id="additional_sum_2"></span> € nach Belieben aufzuteilen. </p>
      <p id="redist_choice_feedback"><br></p>
          <p> Spieler 1: <input type="range" class="inline "name="p1_slider_choice" value="0" step="0.001"  min="0" max="100" id="p1_slider_choice" class="form-control" list="tickmarks" width="500 px"></p>
          <p> Spieler 2: <input type="range" class="inline "name="p2_slider_choice" value="0" step="0.001"  min="0" max="100" id="p2_slider_choice" class="form-control" list="tickmarks" width="500 px"></p>
          <input type="hidden" name="slider_touched" value="0" id="id_slider_touched">
          {{ form.slider_touched.errors }}


      <p> Die Auszahlung von Spieler 1 steigt <span style="color:blue;">um <span id="p1_live_percentage"></span> %</span> von <span id="p1_initial_wealth_2"></span> € auf <span id="p1_live_final_wealth"></span> €.</p>
      <p> Die Auszahlung von Spieler 2 steigt <span style="color:blue;">um <span id="p2_live_percentage"></span> %</span> von <span id="p2_initial_wealth_2"></span> € auf <span id="p2_live_final_wealth"></span> €.</p>

      <canvas id="bar-chart" width="500" height="200"></canvas>

  </div>


  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  <script>
      var p1_initial_wealth = {{ p1_initial_wealth }};
      var p2_initial_wealth = {{ p2_initial_wealth }};


      var p1_income_no_redist = {{ p1_income_no_redist }};
      var p2_income_no_redist = {{ p2_income_no_redist }};

      var slider_frame = {{ slider_frame }};

      var additional_sum = {{additional_sum}};

      var p1_final_wealth_no_redist = p1_initial_wealth + p1_income_no_redist;
      var p2_final_wealth_no_redist = p2_initial_wealth + p2_income_no_redist;


      var p1_live_income = p1_income_no_redist;
      var p2_live_income = p2_income_no_redist;

      var p1_live_percentage = (p1_final_wealth_no_redist / p1_initial_wealth - 1)*100;
      var p2_live_percentage = (p2_final_wealth_no_redist / p2_initial_wealth - 1)*100;


      var max_factor = 100*(Math.max((p1_initial_wealth + p1_income_no_redist + p2_income_no_redist)/p1_initial_wealth - 1,
                                (p2_initial_wealth + p1_income_no_redist + p2_income_no_redist)/p2_initial_wealth)-1)


      Chart.defaults.font.size = 18;


      var myChart = new Chart(document.getElementById("bar-chart"), {
         type: 'bar',
         data: {
           labels: ["Spieler 1", "Spieler 2"],
           datasets: [
             {
               label: "Prozentuale Zuwächse bei gewählter Änderung",
               backgroundColor: ["#FFC20A", "#0C7BDC"],
               data: [p1_live_percentage, p2_live_percentage]
             }
           ]
         },
         options: {

           scales : {
                     y : {
                         min: 0,
                         max: Math.ceil(max_factor/50)*50,
                     },

                 },
           animation: {
               duration: 0
           },
           legend: { display: false },
           events: [],
           title: {
             display: true,
           }
         }
     });






    $(document).ready(function () {


         document.getElementById("p1_live_final_wealth").innerHTML = p1_final_wealth_no_redist.toFixed(2);
         document.getElementById("p2_live_final_wealth").innerHTML = p2_final_wealth_no_redist.toFixed(2);

         document.getElementById("p1_live_percentage").innerHTML = p1_live_percentage.toFixed(0);
         document.getElementById("p2_live_percentage").innerHTML = p2_live_percentage.toFixed(0);


         document.getElementById("additional_sum_2").innerHTML = (p1_income_no_redist + p2_income_no_redist).toFixed(2);




         document.getElementById("additional_sum").innerHTML = (p1_income_no_redist + p2_income_no_redist).toFixed(2);





         document.getElementById("p1_initial_wealth").innerHTML = p1_initial_wealth.toFixed(2);
         document.getElementById("p2_initial_wealth").innerHTML = p2_initial_wealth.toFixed(2);
         document.getElementById("p1_initial_wealth_2").innerHTML = p1_initial_wealth.toFixed(2);
         document.getElementById("p2_initial_wealth_2").innerHTML = p2_initial_wealth.toFixed(2);

         document.getElementById("redist_choice_feedback").innerHTML = "<span style='color:red;'><b>Bitte berühren Sie die Slider, um eine Entscheidung zu treffen.</b></span>";


        $("input[name=p1_slider_choice]").on('input', function() {

            document.getElementById('id_slider_touched').value = 1;
            document.getElementById("redist_choice_feedback").innerHTML = "";

            p1_max_percentage = 100*((p1_initial_wealth + additional_sum)/p1_initial_wealth - 1);
            p1_min_percentage = 0;
            p2_max_percentage = 100*((p2_initial_wealth + additional_sum)/p2_initial_wealth - 1);
            p2_min_percentage = 0;

            p1_live_percentage = (1-$(this).val()/100)*p1_min_percentage + ($(this).val()/100)*p1_max_percentage;



            p1_live_income = (p1_live_percentage/100)*p1_initial_wealth;
            p2_live_income = additional_sum - p1_live_income

            p1_live_final_wealth = p1_initial_wealth + p1_live_income;
            p2_live_final_wealth = p2_initial_wealth + p2_live_income;

            p2_live_percentage = 100*(p2_live_final_wealth / p2_initial_wealth - 1);

            document.getElementById("p1_live_final_wealth").innerHTML = p1_live_final_wealth.toFixed(2);
            document.getElementById("p2_live_final_wealth").innerHTML = p2_live_final_wealth.toFixed(2);

            document.getElementById("p1_live_percentage").innerHTML = p1_live_percentage.toFixed(0);
            document.getElementById("p2_live_percentage").innerHTML = p2_live_percentage.toFixed(0);

            document.getElementById("p2_slider_choice").value = 100*(p2_live_percentage - p2_min_percentage)/(p2_max_percentage-p2_min_percentage)



             myChart.config.data = {
               labels: ["Spieler 1", "Spieler 2"],
               datasets: [
                 {
                   label: "Prozentuale Zuwächse bei gewählter Änderung",
                   backgroundColor: ["#FFC20A", "#0C7BDC"],
                   data: [p1_live_percentage, p2_live_percentage]
                 }
               ]
           };

           myChart.update()


          });


          $("input[name=p2_slider_choice]").on('input', function() {

              document.getElementById('id_slider_touched').value = 1;
              document.getElementById("redist_choice_feedback").innerHTML = "";

              p1_max_percentage = 100*((p1_initial_wealth + additional_sum)/p1_initial_wealth - 1);
              p1_min_percentage = 0;
              p2_max_percentage = 100*((p2_initial_wealth + additional_sum)/p2_initial_wealth - 1);
              p2_min_percentage = 0;

              p2_live_percentage = (1-$(this).val()/100)*p2_min_percentage + ($(this).val()/100)*p2_max_percentage;



              p2_live_income = (p2_live_percentage/100)*p2_initial_wealth;
              p1_live_income = additional_sum - p2_live_income

              p1_live_final_wealth = p1_initial_wealth + p1_live_income;
              p2_live_final_wealth = p2_initial_wealth + p2_live_income;

              p1_live_percentage = 100*(p1_live_final_wealth / p1_initial_wealth - 1);

              document.getElementById("p1_live_final_wealth").innerHTML = p1_live_final_wealth.toFixed(2);
              document.getElementById("p2_live_final_wealth").innerHTML = p2_live_final_wealth.toFixed(2);

              document.getElementById("p1_live_percentage").innerHTML = p1_live_percentage.toFixed(0);
              document.getElementById("p2_live_percentage").innerHTML = p2_live_percentage.toFixed(0);

              document.getElementById("p1_slider_choice").value = 100*(p1_live_percentage - p1_min_percentage)/(p1_max_percentage-p1_min_percentage)



               myChart.config.data = {
                 labels: ["Spieler 1", "Spieler 2"],
                 datasets: [
                   {
                     label: "Prozentuale Zuwächse bei gewählter Änderung",
                     backgroundColor: ["#FFC20A", "#0C7BDC"],
                     data: [p1_live_percentage, p2_live_percentage]
                   }
                 ]
             };

             myChart.update()


            });
       });

  </script>
  {%endif%}

  <script>


    setTimeout(function () {
        $('.otree-btn-next').delay(10000).show(0)
    }, 0);

</script>






<p></p>
<p> Die Weiter-Schaltfläche erscheint nach 10 Sekunden. </p>
 <p></p>
{% next_button %}

<p style="text-align: left; font-size: 16px"> Studienfortschritt: {{progress}}%. </p>


{% endblock %}