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


{% block title %}
    {% if player.t_order == 1 %}
        Teil 1 - Entscheidung Käufer (2/2)
    {% else %}
        Teil 1 - Entscheidung Käufer (1/2)
    {% endif %}
{% endblock %}


{% block content %}
    <div class="card card-body bg-light instructions">
        <p align="justify" class="card-text">
            <strong>Bitte entscheiden Sie für folgende Preise für Produkt <i>Y</i>, welches keinen Verlust für
                Teilnehmer C verursacht, ob Sie das Produkt kaufen würden oder nicht.</strong>
        </p>
    </div>

    <br><br>

    <input type="hidden" name="switching_point_Y">
    {{ formfield_errors 'switching_point_Y' }}

    <table class="table table-striped" id="Y-table">
        <colgroup>
            <col width="20%">
            <col width="20%">
            <col width="20%">
            <col width="20%">
            <col width="20%">
        </colgroup>
        <tr  align="center">
            <td><b>Szenario</b></td>
            <td><b>Wert für Käufer</b></td>
            <td><b>Preis</b></td>
            <td><b>Kaufen</b></td>
            <td><b>Nicht kaufen</b></td>
        </tr>
        {{ for amount in prices }}
        <tr align="center">
            <td>50</td>
            <td>{{ amount }}</td>
            <td>
                <input type="radio"
                   value="left"
                   name="{{ amount }}"
                   required>
            </td>
            <td>
                <input type="radio"
                   name="{{ amount }}"
                   value="right" data-amount="{{ amount }}"
                   required>
            </td>
        {{ endfor }}
        </tr>
    </table>

    <p></p>
    <p></p>
    <div align="right"><button align="right" type="button" class="btn btn-primary" onclick="submitForm()">Weiter</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>
    <br>
    <div class="card bg-light">
<div class="card card-body bg-light instructions">


   <p class="card-text">
       Ihre Auszahlung in Teil 1 wird zunächst in Punkten berechnet und erst am Ende der Studie mittels des
       folgenden Wechselkurses in Euro umgerechnet:
    <br>
        <p align="center"><b>10 Punkte = 2 Euro</b></p>

        <p align="justify"> Teil 1 besteht aus <strong>einer Runde</strong>. Für diese Runde erhalten der Käufer und der Teilnehmer C
            jeweils eine <strong>Anfangsausstattung von 80 Punkten</strong>.</p>
</div>

    <div class="card card-body bg-light instructions">
    <p><strong>Rolle: KÄUFER</strong>
        <br><br>
            Der Käufer kann eine Kaufentscheidung über zwei Arten von Produkten treffen:
        <br>
    </p>
        <ul>
            <li>
                <strong>Produkt <i>X</i>, welches einen Verlust von 60 Punkten für Teilnehmer 2 verursacht</strong>
            </li>
            <li>
                <strong>Produkt <i>Y</i>, welches keinen Verlust für Teilnehmer 2 verursacht</strong>
            </li>
        </ul>
        <p>
        <strong>Die Preise der Produkte können zwischen 0 und 50 Punkten liegen.</strong>
        <br><br>
        Produkt <i>X</i> und Produkt <i>Y</i> haben <strong>unterschiedliche Produktionskosten</strong>:
        <ul>
            <li>
                Produktionskosten Produkt <i>X</i>: <strong>0 Punkte</strong>
            </li>
            <li>
                Produktionskosten Produkt <i>Y</i>: <strong>20 Punkte</strong>
            </li>
        </ul>
        <p align="justify">
        <strong>Die Produktionskosten fallen nur an, wenn das Produkt <i>X</i> oder <i>Y</i> auch gekauft wird.
        Ebenso fällt der Verlust für Teilnehmer 2 nur an, wenn das Produkt <i>X</i> gekauft wird</strong>.
        </p>

        <p align="justify" class="card-text">
            Der Kauf des Produktes <i>X</i> oder des Produktes <i>Y</i> führt zu einer zusätzlichen Auszahlung von 50 Punkten
            für den Käufer. Allerdings muss der Käufer natürlich noch den Preis für das Produkt zahlen.
            <strong>Der Kauf des Produkts <i>X</i> oder <i>Y</i> erhöht seine Auszahlung daher um 50 Punkte abzüglich
            des Produktpreises</strong>.
        <br><br>
            Der Käufer wird darum gebeten, anzugeben, <strong>wie viel er für das Produkt <i>X</i> und für
            das Produkt <i>Y</i> jeweils maximal zu zahlen bereit ist</strong>.
            Anschließend wird zufällig eine Produktart sowie ein Preis für dieses Produkt ausgewählt. Ein Kauf kommt nur dann zustande,
            wenn der Betrag, den er für dieses Produkt bereit ist zu zahlen, höher als oder gleich hoch wie der Angebotspreis ist.
            Gezahlt werden muss dann der Angebotspreis. Der Käufer erfährt erst am Ende des gesamten Experiments, welches Produkt zu welchem
            Preis zufällig gewählt wurde und ob ein Kauf zustande kam.
        <br><br>
        <strong>Zusammenfassend:</strong>
        <ul align="justify">
            <li>
                <i>Wenn der Käufer bereit ist, einen Betrag für das Produkt zu zahlen, der <U>kleiner</U> ist als der Angebotspreis,
                    <U>findet der Kauf nicht statt</U>. Der Käufer behält seine Anfangsausstattung in Höhe von 80 Punkten.</i>
            </li>
            <li>
                <i>Wenn der Käufer bereit ist, einen Betrag für das Produkt zu zahlen, der <U>höher</U> als oder <U>gleich hoch</U>
                    wie der Angebotspreis ist, <U>findet der Kauf statt</U>. Der Käufer zahlt den Angebotspreis.</i>
            </li>
        </ul>
        <p>
            Die Kaufentscheidung des Käufers hat folgende Auswirkungen für Teilnehmer 2:
        </p>
        <ul>
            <li>
                <strong>Wenn der Käufer das Produkt <i>X</i> kauft, entsteht ein Verlust von 60 Punkten
                für Teilnehmer 2</strong>.
            </li>
            <li>
                <strong>Wenn der Käufer das Produkt <i>Y</i> oder gar kein Produkt kauft,
                entsteht kein Verlust für Teilnehmer 2</strong>.
            </li>
        </ul>
            <p>Somit legt der Käufer durch die Kaufentscheidung nicht nur seine eigene Auszahlung fest,
                sondern auch die Auszahlung für den Teilnehmer 2.</p>

        <br>
        <p align="justify" class="card-text">
            <strong>Rolle: TEILNEHMER 2</strong></p>
            <p>In Teil 1 <strong>kann Teilnehmer 2 keine Entscheidung treffen</strong>.
        </p>
        <br>
        <p align="justify"> <strong>Wichtiger Hinweis:</strong> Als Gedankenstütze können Sie die Eigenschaften der beiden
            Produkte jederzeit nachlesen, in dem Sie den Mauszeiger über das jeweilige Wort („Produkt <i>X</i>“,
            „Produkt <i>Y</i>“) bewegen.
        </p>
        </div>
            <div class="card card-body bg-light instructions">
        <p><strong>Die Auszahlung in Teil 1 setzt sich wie folgt zusammen:</strong></p>

        <p align="justify" class="card-text">

        <strong>KÄUFER:</strong>
        </p>
        <ul>
            <li>
                Wenn der Käufer ein Produkt <i>X</i> oder <i>Y</i> kauft:
                <strong> 80 + 50 - Preis </strong>
            </li>
            <li>
                Wenn der Käufer kein Produkt kauft: <strong> 80 </strong>
            </li>
        </ul>

        <p align="justify" class="card-text">

        <strong>TEILNEHMER 2:</strong>
              </p>
        <ul>
            <li>
                Wenn der Käufer ein Produkt <i>X</i> kauft: <strong> 80 - 60 = 20</strong>
            </li>
            <li>
                Wenn der Käufer ein Produkt <i>Y</i> oder gar kein Produkt kauft: <strong> 80 </strong>
            </li>
        </ul>
            </div>

                <div class="card card-body bg-light instructions">

        <p align="justify" class="card-text">
            Ihre Auszahlung hängt entweder von Teil 1 oder Teil 2 ab.
            Einer der beiden Teile wird am Ende der Studie zufällig ausgewählt.
            <br><br>
            <strong>Alle Teilnehmer werden über das Ergebnis von Teil 1 erst am Ende der gesamten Studie informiert</strong>.
            <br><br>
            Dies impliziert Folgendes: </p>
        <ul>
            <li>
                Der Käufer erfährt erst am Ende der gesamten Studie, ob er in Teil 1 ein Produkt gekauft hat oder nicht.
            </li>
            <li>
                Der Teilnehmer 2 erfährt erst am Ende der gesamten Studie, ob in Teil 1 ein Verlust von 60 Punkten für ihn
                entstanden ist oder nicht.
            </li>
        </ul>
    <p align="justify">Bitte beachten Sie zudem, dass Sie <strong>Ihre Rolle als Käufer oder Teilnehmer 2
        für die Gesamtdauer der Studie behalten</strong>.</p>
    </div>

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


{{ block scripts }}
<script>
    let allRadios = document.querySelectorAll('input[type=radio]')
    function submitForm() {
        let form = document.getElementById('form');
        if (form.reportValidity()) {
            let allChoicesAreOnLeft = true;
            for (let radio of allRadios) {
                if (radio.value === 'right' && radio.checked) {
                    forminputs.switching_point_Y.value = radio.dataset.amount;
                    allChoicesAreOnLeft = false;
                    break;
                }
            }
            if (allChoicesAreOnLeft) {
                // '9999' represents the valueInput if the user didn't click the right side for any choice
                // it means their switching point is off the scale. you can change 9999 to some other valueInput
                // that is larger than any right-hand-side choice.
                forminputs.switching_point_Y.value = '9999';
            }
            form.submit();
        }
    }

    function onRadioClick(evt) {
        let clickedRadio = evt.target;
        let afterClickedRadio = false;
        let clickedRightRadio = clickedRadio.value === 'right';

        for (let aRadio of allRadios) {
            if (aRadio === clickedRadio) {
                afterClickedRadio = true;
                continue;
            }
            if (clickedRightRadio && afterClickedRadio && aRadio.value === 'right') {
                aRadio.checked = true;
            }
            if (!clickedRightRadio && !afterClickedRadio && aRadio.value === 'left') {
                aRadio.checked = true;
            }
        }
    }

    document.addEventListener("DOMContentLoaded", function (event) {
        for (let radio of document.querySelectorAll('input[type=radio]')) {
            radio.onchange = onRadioClick;
        }
    });

    document.addEventListener("DOMContentLoaded", function() {
    const table = document.getElementById("Y-table");
    const rows = table.getElementsByTagName("tr");

    for (let i = 1; i < rows.length; i++) {
        const cell = document.createElement("td");
        cell.textContent = i;
        cell.style.fontWeight = "bold"; // Set font weight to bold
        rows[i].insertBefore(cell, rows[i].getElementsByTagName("td")[0]);
    }
    });




</script>
{{ endblock }}