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


{% block title %}
    Teil 1 - Entscheidung Verkäufer
{% endblock %}


{% block content %}
    <div class="card card-body bg-light instructions">
        <p align="justify" class="card-text">
            <strong>Bitte wählen Sie zunächst die Produktart und dann den Preis, den Sie dafür verlangen möchten:
            </strong>
        </p>
    </div>

    <br>

    <div class="text-center">
        <div class="btn-group btn-group-lg" role="group" aria-label="Basic radio toggle button group" onclick="ad()">
            <label class="btn btn-outline-primary" for="ad1">
                <input type="radio" id="ad1" name="T1_product" class="btn btn-lg" autocomplete="off" value="1">
                <div class="tooltip1">
                    Produkt <i>X</i>
                    <span class="tooltiptext1" style="font-size: medium">Verlust für Teilnehmer C: -60 Punkte</span>
                </div>
            </label>
            <label class="btn btn-outline-primary" for="ad2">
                <input type="radio" id="ad2" name="T1_product" class="btn btn-lg" autocomplete="off" value="0">
                <div class="tooltip1">
                    Produkt <i>Y</i>
                    <span class="tooltiptext2" style="font-size: medium">Kein Verlust für Teilnehmer C</span>
                </div>
            </label>
        </div>
    </div>

    <br><br>

    <div id="1" style="display: none">Welchen Preis würden Sie für das <strong>Produkt <i>X</i></strong> verlangen?</div>
    <div id="2" style="display: none">Welchen Preis würden Sie für das <strong>Produkt <i>Y</i></strong> verlangen?</div>
    <div id="12" style="display: none">
        {% formfield player.T1_price %}
    </div>

    <p></p>
    <p></p>
    <div align="right">{% next_button %} </div>

    <hr>

    <details>
        <summary>
            <b>Instruktionen Teil 1 (gesamt):</b> Klicken Sie hier, um die Instruktionen zu Teil 1 noch einmal zu lesen.
        </summary>
        <p> {{ include 'sellers2/ZZZ_T1_Ausrolloptionen.html' }}</p>
    </details>

    {% endblock %}

    {% block styles %}
<style>
/* Tooltip container */
.tooltip1 {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip1 .tooltiptext1 {
  visibility: hidden;
  width: 300px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip1 .tooltiptext1::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: grey transparent transparent transparent;
}

.tooltip1:hover .tooltiptext1 {
  visibility: visible;
}

.tooltip1 .tooltiptext2 {
  visibility: hidden;
  width: 260px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip1 .tooltiptext2::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 24%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: grey transparent transparent transparent;
}

.tooltip1:hover .tooltiptext2 {
  visibility: visible;
}
</style>
    {% endblock %}


{% block scripts %}
    <script>
        function ad() {
            var val1 = document.getElementById("ad1");
            var val2 = document.getElementById("ad2");
            var x = document.getElementById("12");
            var y = document.getElementById("1");
            var z = document.getElementById("2");
            x.style.display = "block";
            if (val1.checked === true) {
                y.style.display = "block";
                z.style.display = "none";
            }
            else {
                z.style.display = "block";
                y.style.display = "none";
            }
        }

            $(document).ready(function() {
            document.title = 'Teil 1 - Entscheidung Verkäufer';
        });
    </script>
{% endblock %}