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

{% block title %}
    Verhandlungsergebnis
{% endblock %}

{% block content %}
    <p>Bitte geben Sie nun ihr Verhandlungsergebnis in das freie Feld rechts neben dem Wort „Lohn“ ein. Schreiben Sie also z.B. die Zahl „4000“ in das Feld rechts neben dem Wort „Lohn“ wenn Sie sich auf einen Lohn von 4000€ brutto geeinigt haben.</p>
    <p>Wenn Sie sich auf kein Ergebnis geeinigt haben, klicken Sie auf „Wir konnten uns nicht einigen“.</p>
    <p>Sie können nur auf „Weiter“ klicken, wenn Ihr Mitarbeiter das gleiche Ergebnis eingegeben hat wie Sie oder auch angibt, dass Sie sich nicht einigen konnten.</p>
    <center>
    <div class="card"  id="hide" style="width: 30%;">
          <div class="card-body">
            <div class="input-group flex-nowrap" style="margin-left:0.7rem;">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="addon-wrapping">€</span>
                  </div>
                  <input type="number" step="0.01" min=3000 max=4500 id="inputbox" class="form-control" placeholder="Lohn" aria-label="Lohn" aria-describedby="addon-wrapping">
                <button type="button" id="sendbutton" class="btn btn-primary">Senden</button>
            </div>
          </div>
        <div class="card-footer text-muted"><input type="checkbox" id="checkbox" onclick="notAgreed()" aria-label="Checkbox for following text input" style="margin-right:1rem">Wir konnten uns nicht einigen.</div>
    </div>
    <div id="messages" style="margin:1rem"></div>
    </center>

{% endblock %}

{% block scripts %}
    <script>

        let messages = document.getElementById('messages');
        let inputbox = document.getElementById('inputbox');
        let sendbutton = document.getElementById('sendbutton');
        let next = document.getElementById('hide');

        window.onload = function() {
            liveSend(1);
        }

        sendbutton.onclick = function() {
            let input = inputbox.value;
            if (input) {
                if (input < 3000) {
                    messages.innerHTML = "<div class=\"alert alert-danger\" role=\"alert\">Ihre Eingabe darf nicht kleiner als 3000 sein.</div>";
                }
                else if (input > 4500) {
                    messages.innerHTML = "<div class=\"alert alert-danger\" role=\"alert\">Ihre Eingabe darf nicht größer als 4500 sein.</div>";
                }
                else {
                    liveSend(parseFloat(inputbox.value));
                }
                inputbox.value = "";
            }
        };

        function liveRecv(data) {
            let msg = data.msg;
            let flag = data.flag;

            messages.innerHTML = `<div class='alert alert-${flag}' role='alert'>${msg}</div>`;

            if (flag === 'success') {
                next.innerHTML = "<button class='btn btn-primary'>Weiter</button>";
            }
        }

        function notAgreed() {
            if (confirm("Sind Sie sicher, dass Sie sich nicht einigen konnten?")) {
                liveSend(-1);
            } else {
                document.getElementById("checkbox").checked = false;
            }
        }

    </script>
{% endblock %}

{% block styles %}
    <style>
        #hide {
            margin: 1rem;
        }

        #sendbutton {
            margin-left: 1rem;
        }

        .card {
            margin: 3rem;
        }
    </style>
{% endblock %}