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

{% block title %}
    Runde {{ subsession.round_number }} von {{ Constants.num_rounds }}
{% endblock %}



{% block content %}
<br>

<table class="table">
    <tr>
        <b><h5>Für alle Runden gleich:</h5></b>
    </tr>
    <tr>
        <th>Ihre Rolle:</th>
        <td>Klient</td>
    </tr>
    <tr>
        <th>Ihre Typ:</th>
        <td>{% if player.customer_type == 'high' %}Typ B{% else %}Typ A{% endif %}</td>
    </tr>
    <tr>
        <th>Kosten für den Experten:</th>
        <td>hohe Qualität: {{ Constants.cost_hqt }} / niedrige Qualität: {{ Constants.cost_lqt }}</td>
    </tr>
</table>

<br>


<p>
    Der Experte hat den Preis für eine Behandlung mit <b>hoher Qualität</b> auf <b>{{ group.price_hqt }}</b> und der Preis
    für die Behandlung mit <b>niedriger Qualität</b> auf <b>{{ group.price_lqt }}</b> festgelegt.
</p>

<br><br><br>
<div class="form-group required">


            <label class="col-form-label" for="id_cir">Bitte legen Sie nun den von Ihnen gewünschten Versicherungsschutz fest:</label>
            <div class="controls  field-cir">
                <div class="input-group slider" data-slider>
    <input type="range" name="cir" value="None"
 step="10" min="0" max="100" required id="id_cir" class="form-control" />

    <div class="input-group-append">
        <span class="input-group-text" data-slider-value title="current value"></span>
        <span class="input-group-text" title="current value">%</span>
    </div>
</div>
<br>
Mit diesem Versicherungsschutz beträgt Ihre Versicherungsprämie <b><span id="result"></span> ECU</b>.
<br><br>
{% next_button %}
<br><br><br>
{% if subsession.round_number > 1 %}
<div>
    <button id="button" class="btn btn-primary btn-large"  type="button" onclick="showhide()">vorherige Runden ein-/ausblenden</button>
<br><br>
        <div id="newpost" style="display: none">

            <table class="table">
                <tr>
                    <th>Runde</th>
                    <th>Preise</th>
                    <th>Ihre Entscheidung</th>
                    <th>Ihre Auszahlung</th>
                </tr>
                {% for p in player.in_previous_rounds %}
                <tr>
                    <td>{{ p.round_number }}</td>
                    <td>{{ p.group.price_hqt }} / {{ p.group.price_lqt }}</td>
                    <td>{% if p.group.enter_market == "Yes" %}Behandlung{% else %}Keine Behandlung{% endif %}</td>
                    <td>{{ p.payoff }}</td>
                </tr>
                {% endfor %}
            </table>

        </div>
</div>
{% endif %}
{% endblock %}


{% block scripts %}

<script>
     function showhide()
     {
           var div = document.getElementById("newpost");
    if (div.style.display !== "none") {
        div.style.display = "none";

    }
    else {
        div.style.display = "block";
    }
     }
  </script>
<script>
       $("#result").text(36.25);

        $(".form-control").bind("keyup change", function () {

            var number_array = $(".form-control").map(
                function () {
                    return $(this).val()
                }).get();

            var cip = 0;
            number_array.forEach(function (num) {
                cip += parseInt(num) || 0;
            });

            $("#result").text(((cip/100)*(cip/100)*145).toFixed(2))

        });
</script>

{% endblock %}