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

{{ block title }} Ihre Entscheidung (Runde {{ player.round_number }} von {{ Constants.num_rounds }}) {{ endblock }}

{{ block content }}


<style>
  .slider-container {
    position: relative;
    width: 900px; /* Breite des Sliders */
  }

  #selectedValue {
    position: absolute;
    top: -30px; /* Abstand zw. Slider und Text */
    left: 0;
    width: 100px;
    text-align: center;
  }

  .highlighted {
    background-color: lightgray;
  }
</style>

<div class="row justify-content-evenly mt-5">

<div class="col-8">
        <div class="card mt-3 mb-3 border-primary h-100">

            <h5 class="card-header bg-primary text-white" >Ihre Entscheidung</h5>

                    <div class="card-body">

                <p>Ich entscheide mich, der Gesellschaft aus der Liste der Produkte (a-k) das folgende Produkt vorzugeben.
                             {{ formfield player.Frage_1 label=""}}
        <hr>
        <div id="zusatzfragen" style="display:none">
        <p align="justify">Bei der Bestimmung des richtigen Produktes bin ich der Meinung, dass jede Person sich entscheiden soll, welche
                        Alternative für sie die besten Konsequenzen hat. Daher möchte ich die Wahl des Produktes für
                        Person 1 und Person 2 getrennt vornehmen.<br>
                        <em>Hinweis: Nur wenn Sie bei der vorherigen Frage die Wahl ablehnen, können Sie hier einen Wert einstellen.</em>
                        </p>
        <div class="row justify-content-evenly mt-3">
            <div class="col-4">
                        <strong>{{ formfield player.Sicht1 label="Aus Sicht von Person 1 würde ich wählen:"}}</strong>
            </div>
            <div class="col-4">
                <strong> {{ formfield player.Sicht2 label="Aus Sicht von Person 2 würde ich wählen:"}}</strong>
            </div>
            </div>
        </div>

                    </div>
        </div>
        </div>

    <div class="col-4">
        <div class="card mt-3 mb-3 border-gray">

        <h5 class="card-header bg-gray" >Anfangsausstattung</h5>

                    <div class="card-body">
                    <h6 class="card-title"><strong>Person 1</strong></h6><br>
                        <p class="card-text  text-center mb-4">
                        <span class="alert alert-primary" name="endowment">
                            <strong>{{ player.endowment | c }}</strong>
                        </span>
                        </p>

                    <h6 class="card-title"><strong>Person 2</strong></h6><br>
                        <p class="card-text  text-center mb-4">
                        <span class="alert alert-primary" name="endowment2">
                            <strong>{{ player.endowment2 | c }}</strong>
                        </span>
                        </p>
                    </div>
        </div>
        </div>
</div>

<br>

<div class="row justify-content-evenly">


    <div class="col-12">
        <div class="card mt-4 mb-3 border-gray">

<h5 class="card-header bg-gray" >Entscheidungshilfe</h5>

                    <div class="card-body">

<p>
    Mit dem Schieberegler können Sie verschiedene Schadenswahrscheinlichkeiten einstellen
    und sich so die dazugehörigen Auszahlungen für Person 1 und 2 anzeigen lassen.

<br><br>

<div class="slider-container" style="display: flex">
    <label for="0" class="pull-left">0% &nbsp;</label>
    <input id="Frage_1" type="range" class="slider form-range" min="0" max="100" step="10" value="0">
    <label for="100" class="pull-right">&nbsp;&nbsp; 100%</label>
<p id="selectedValue"></p>
</div>



<p><br>
    Bei Ihrer eingestellten Schadenswahrscheinlichkeit von <strong><span id=".input-group-text"></span> Prozent</strong>
    ergeben Sie die folgenden Auszahlungen: </p>

    <table>
  <thead>
    <tr>
      <th width="30%"></th>
      <th width="30%"></th>
    </tr>
  </thead>
  <tbody>
      <tr>
          <td>Zusätzliche Auszahlung für Person 1 </td>
          <td><strong><span id="result"></span> Punkte</strong></td>
      </tr>
      <tr>
          <td>Auszahlung insgesamt für Person 1 </td>
          <td><strong><span id="auszahlung"></span> Punkte</strong></td>
      </tr>
      <tr>
          <td>Erwartungswert der Auszahlung für Person 2 </td>
          <td><strong><span id="result1"></span> Punkte</strong></td>
      </tr>
    </tbody>
</table>
    <p><br>

        Bei dem Erwartungswert handelt es sich um die erwartete Auszahlung für Person 2 gegeben der Schadenswahrscheinlichkeit.
        Je nachdem ob der Schaden eintritt, <strong>erhält Person 2 entweder {{ player.endowment2 | c }} (kein Schaden) oder
            {{ player.endowment2_schaden | c }} (Schaden tritt ein)</strong>.
        <br>
        <hr>



            <h5><strong>Auszahlungstabelle</strong></h5>
<br>
<table>
  <thead>
    <tr>
      <th width="12%" rowspan="2">Produkt</th>
      <th width="30%" rowspan="2">Schadenswahrscheinlichkeit</th>
      <th width="28%" rowspan="2">Auszahlung Person 1</th>
      <th width="35%" colspan="2" align="center">Auszahlung Person 2</th>
    </tr>
      <tr>
      <th>ohne Schaden</th>
      <th>mit Schaden</th>
    </tr>
  </thead>
  <tbody>
      <tr>
        <td class="cell">a</td>
        <td class="cell">0 %</td>
        <td class="cell">{{ auszahlung.0 }}</td>
        <td class="cell">{{ player.endowment2 | c }}</td>
        <td class="cell">{{ player.endowment2_schaden | c }}</td>
     </tr>
      <tr>
        <td class="cell">b</td>
        <td class="cell">10 %</td>
        <td class="cell">{{ auszahlung.1 }}</td>
        <td class="cell">{{ player.endowment2 | c }}</td>
        <td class="cell">{{ player.endowment2_schaden | c }}</td>
      </tr>
        <tr>
        <td class="cell">c</td>
        <td class="cell">20 %</td>
        <td class="cell">{{ auszahlung.2 }}</td>
        <td class="cell">{{ player.endowment2 | c }}</td>
        <td class="cell">{{ player.endowment2_schaden | c }}</td>
      </tr>
        <tr>
        <td class="cell">d</td>
        <td class="cell">30 %</td>
        <td class="cell">{{ auszahlung.3 }}</td>
        <td class="cell">{{ player.endowment2 | c }}</td>
        <td class="cell">{{ player.endowment2_schaden | c }}</td>
      </tr>
        <tr>
        <td class="cell">e</td>
        <td class="cell">40 %</td>
        <td class="cell">{{ auszahlung.4 }}</td>
        <td class="cell">{{ player.endowment2 | c }}</td>
        <td class="cell">{{ player.endowment2_schaden | c }}</td>
      </tr>
        <tr>
        <td class="cell">f</td>
        <td class="cell">50 %</td>
        <td class="cell">{{ auszahlung.5 }}</td>
        <td class="cell">{{ player.endowment2 | c }}</td>
        <td class="cell">{{ player.endowment2_schaden | c }}</td>
      </tr>
        <tr>
        <td class="cell">g</td>
        <td class="cell">60 %</td>
        <td class="cell">{{ auszahlung.6 }}</td>
        <td class="cell">{{ player.endowment2 | c }}</td>
        <td class="cell">{{ player.endowment2_schaden | c }}</td>
      </tr>
        <tr>
        <td class="cell">h</td>
        <td class="cell">70 %</td>
        <td class="cell">{{ auszahlung.7 }}</td>
        <td class="cell">{{ player.endowment2 | c }}</td>
        <td class="cell">{{ player.endowment2_schaden | c }}</td>
      </tr>
        <tr>
        <td class="cell">i</td>
        <td class="cell">80 %</td>
        <td class="cell">{{ auszahlung.8 }}</td>
        <td class="cell">{{ player.endowment2 | c }}</td>
        <td class="cell">{{ player.endowment2_schaden | c }}</td>
      </tr>
        <tr>
        <td class="cell">j</td>
        <td class="cell">90 %</td>
        <td class="cell">{{ auszahlung.9 }}</td>
        <td class="cell">{{ player.endowment2 | c }}</td>
        <td class="cell">{{ player.endowment2_schaden | c }}</td>
      </tr>
        <tr>
        <td class="cell">k</td>
        <td class="cell">100 %</td>
        <td class="cell">{{ auszahlung.10 }}</td>
        <td class="cell">{{ player.endowment2 | c }}</td>
        <td class="cell">{{ player.endowment2_schaden | c }}</td>
      </tr>
  </tbody>
</table>
                        </p>
    </div>
 </div>
    </div>

</div>

<p>
    <details>
    <summary><b>Zum Lesen der Instruktionen bitte hier klicken</b></summary>
    <p>{{ include Constants.instructions_template }}</p>
    </details>
<br>
</p>

{{ next_button }}

<script>

    document.addEventListener('DOMContentLoaded', function() {
        var frage1 = document.getElementById('id_Frage_1');
        var zusatzfragen = document.getElementById('zusatzfragen');

        frage1.addEventListener('change', function() {
            if (frage1.value == '12') {
                zusatzfragen.style.display = 'block';
            } else {
                zusatzfragen.style.display = 'none';
            }
        });
    });

    var slider = document.getElementById("Frage_1");
    var sliderValueElement = document.getElementById(".input-group-text");
    var resultElement = document.getElementById("result");
    var result1Element = document.getElementById("result1");
    var auszahlungElement = document.getElementById("auszahlung");
    var selectedValue = document.getElementById("selectedValue");
    var cells = document.getElementsByClassName('cell');

    slider.addEventListener('input', function() {
    var sliderValue = parseInt(this.value);
    var cellIndexToHighlight = Math.floor(sliderValue / 10) * 5;

    for (var i = 0; i < cells.length; i++) {
      if (i === cellIndexToHighlight ||
        i === cellIndexToHighlight + 1 ||
        i === cellIndexToHighlight + 2 ||
        i === cellIndexToHighlight + 3 ||
        i === cellIndexToHighlight + 4
        ) {
        cells[i].classList.add('highlighted');
      } else {
        cells[i].classList.remove('highlighted');
      }
    }
  });

    function updateResult() {
    var sliderValue = slider.value;
    var endowmentElement = document.querySelector('span[name="endowment"]');
    var e = parseFloat(endowmentElement.innerText);
    var endowment2Element = document.querySelector('span[name="endowment2"]');
    var e2 = parseFloat(endowment2Element.innerText);
    sliderValueElement.innerText = sliderValue;
    var p = sliderValue;
    var c = 1.5 - 1.5 * Math.exp(-3 * (p / 100));
    var result = Math.round(80 - ( 60 * Math.exp(-3 * (p / 100))));
    var result1 = e2 - (p / 100) * 40;
    var auszahlung = result + e;
    resultElement.innerText = result; // Rundet das Ergebnis auf volle Beträge
    result1Element.innerText = result1.toFixed(0); // Rundet das Ergebnis auf volle Beträge
    auszahlungElement.innerText = auszahlung.toFixed(0); // Rundet das Ergebnis auf volle Beträge
}

    function updateSelectedValue() {
    var sliderWidth = slider.offsetWidth;
    var thumbWidth = 80;
    var thumbPosition = (slider.value / slider.max) * (sliderWidth - thumbWidth);

    selectedValue.style.left = thumbPosition + "px";
    selectedValue.innerHTML = slider.value + "%";
  }

    slider.addEventListener("input", updateSelectedValue);

    updateSelectedValue();

    slider.value = 0;
    updateResult();

    slider.addEventListener("input", updateResult);

    data.addEventListener("update", updateResult);
</script>


<script>
setTimeout(
function () {
    alert("Bitte treffen Sie Ihre Entscheidung innerhalb der nächsten 30 Sekunden!");
},
150*1000 // 60 seconds
);
</script>

{% endblock %}