{{ block title }}
    Behavioral Economic Engineering and Responsible Management
{{ endblock }}

{{ block content }}
    <h2>Zusammenfassung</h2>
  <div style="display: flex; flex-direction: column; align-items: center; text-align: center;">
    <h4>Rollenzuweisung</h4>
    <br>
    <p>Auf dem projekteigenen Konto befindet sich ein Betrag von {{ player.amount }} Talern. Bitte erstatten Sie nun Ihrem Arbeitgeber Bericht über die Anzahl der erfolgreichen Perioden, indem Sie folgende Nachricht an ihn senden:</p>
    <p>(Beachten Sie: Sie können so oft Sie wollen den Button 'Anzahl Taler berechnen' klicken, mindestens aber ein Mal, damit der Button 'Nachricht senden und Betrag überweisen' erscheint. Erst durch das Klicken auf 'Nachricht senden und Betrag überweisen' wird die Nachricht an den Arbeitgeber übermittelt.)</p>

    <br>
</div>
<div style="display: flex; flex-direction: column; align-items: center; border: 2px solid #000; padding: 20px;">
    <p>"Das Projekt ist nun beendet.</p>
    <p> Wir waren  <input type="number" name="numberInput" id="numberInput" min="1" max="{{ player.total_correct }}" style="width: 100px" /> in Perioden erfolgreich.</p>
    <p>Somit entsprechen 50% des Gesamtbetrags     <p id="displaySection" style="display: none;"><span id="displayNumber">0</span> Talern</p>
    <br>
    <div style="display: flex; flex-direction: column; align-items: center;">

        <button id="calculateButton" type="button" class="btn btn-primary">Calculate</button>
    </div>
    <br>

</div>
 <div id="finishButtonDiv" style="display: none;">
       <button class="btn btn-primary">
            Weiter
       </button>
    </div>
<script>
        const numberInput = document.getElementById('numberInput');
        const calculateButton = document.getElementById('calculateButton');
        const finishButtonDiv = document.getElementById('finishButtonDiv'); // Get the div containing the finish button
        const displaySection = document.getElementById('displaySection');
        const displayNumber = document.getElementById('displayNumber');
        const maxAmount = {{ player.total_correct }};

        calculateButton.addEventListener('click', () => {
            const inputValue = parseFloat(numberInput.value) || 0;

            if (inputValue === 0) {
                alert("Value cannot be zero");
                return; // Exit the event listener
            }

            let calculatedAmount = 0;
            if (inputValue === 1) {
                calculatedAmount = 1000 / 2;
            } else if (inputValue === 2) {
                calculatedAmount = 2000 / 2;
            } else if (inputValue === 3) {
                calculatedAmount = 3000 / 2;
            }else if (inputValue === 4) {
                calculatedAmount = 4000 / 2;
            } else if (inputValue === 5) {
                calculatedAmount = 5000 / 2;
            }else if (inputValue === 6) {
                calculatedAmount = 6000 / 2;
            } else if (inputValue === 7) {
                calculatedAmount = 7000 / 2;
            }else if (inputValue === 8) {
                calculatedAmount = 8000 / 2;
            }

            if (inputValue > maxAmount) {
                alert("Value cannot be greater than " + maxAmount);
                numberInput.value = '';
                displayNumber.textContent = '';
            } else {
                displayNumber.textContent = calculatedAmount;
                displaySection.style.display = 'block';
                finishButtonDiv.style.display = 'flex'; // Show the div containing the finish button

            }
        });
    </script>
 {{ formfield_errors 'numberInput' }}
{{ endblock }}