{{ extends "global/Page.html" }}

{{ block scripts }}

    <!-- Make round function -->
    <script>
        // Rounds half up
        function round(num, decimalPlaces = 0) {
            num = Math.round(num + "e" + decimalPlaces);
            return Number(num + "e" + - decimalPlaces);
        }
    </script>

    <!-- Control numbers -->
    <script>
        let e1 = document.forms[0].elements["id_iTokenAddSuggestion_1"].value;
        let e2 = document.forms[0].elements["id_iTokenAddSuggestion_2"].value;
        let e3 = document.forms[0].elements["id_iTokenAddSuggestion_3"].value;
        let e4 = document.forms[0].elements["id_iTokenAddSuggestion_4"].value;
        let e5 = document.forms[0].elements["id_iTokenAddSuggestion_5"].value;

        console.log("All entries at the beginning (must be empty): ", e1 + "/" + e2 + "/" + e3 + "/" + e4 + "/" + e5);

        function OpenClose() {
            if (e1 + e2 + e3 + e4 + e5 === {{ C.TOKEN_ADD_TOTAL | json }}) {
                // console.log("Default -> Verteilung wurde eingegeben");
                document.getElementById("DistributionIn").style.display = "none";
                document.getElementById("DistributionOut").style.display = "initial";
                document.getElementById("Justification").style.visibility = "visible";
            } else {
                // console.log("Verteilung wurde noch nicht eingegeben");
                document.getElementById("DistributionIn").style.display = "initial";
                document.getElementById("DistributionOut").style.display = "none";
                document.getElementById("Justification").style.visibility = "hidden";
            }
        }
        OpenClose();

        // Replace commas with dots since people could use a German system
        function clickfunction() {
            e1 = parseFloat(document.forms[0].elements["id_iTokenAddSuggestion_1"].value.replace(/,/g, "."));
            e2 = parseFloat(document.forms[0].elements["id_iTokenAddSuggestion_2"].value.replace(/,/g, "."));
            e3 = parseFloat(document.forms[0].elements["id_iTokenAddSuggestion_3"].value.replace(/,/g, "."));
            e4 = parseFloat(document.forms[0].elements["id_iTokenAddSuggestion_4"].value.replace(/,/g, "."));
            e5 = parseFloat(document.forms[0].elements["id_iTokenAddSuggestion_5"].value.replace(/,/g, "."));


            console.log("All entries at the klick: ", e1 + "/" + e2 + "/" + e3 + "/" + e4 + "/" + e5);


            if (!isNaN(e1) && !isNaN(e2) && !isNaN(e3) && !isNaN(e4) && !isNaN(e5)) {


                    // Check if there are no negative numbers
                    if (e1 < 0 || e2 < 0 || e3 < 0 || e4 < 0 || e5 < 0) {
                        console.log("Negative Numbers!");
                        $(function () {
                            $("#negativeAlert").dialog("open");
                        });
                        event.preventDefault();
                        return;
                    }

                    // Check decimals (some numbers have array lenght 1 or 2, thats why we use e1array.length as subsetter)
                    let e1array =  e1.toString().split(".");
                    let e2array =  e2.toString().split(".");
                    let e3array =  e3.toString().split(".");
                    let e4array =  e4.toString().split(".");
                    let e5array =  e5.toString().split(".");

                    if (e1array[e1array.length-1].length > 2 ||
                        e2array[e2array.length-1].length > 2 ||
                        e3array[e3array.length-1].length > 2 ||
                        e4array[e4array.length-1].length > 2 ||
                        e5array[e5array.length-1].length > 2 ) {
                                $(function () {
                                    $("#decimalAlert").dialog("open");
                                });
                                return;
                            }

                    // Check if sum is correct
                    if (e1 + e2 + e3 + e4 + e5 === {{ C.TOKEN_ADD_TOTAL | json }}) {
                        OpenClose();

                        // Put sum in output box
                        console.log("Language: ", {{ languageDE }});
                        if ({{ languageDE }} == 0) {
                            document.getElementById("e1").innerHTML = round(e1, 2).toString();
                            document.getElementById("e2").innerHTML = round(e2, 2).toString();
                            document.getElementById("e3").innerHTML = round(e3, 2).toString();
                            document.getElementById("e4").innerHTML = round(e4, 2).toString();
                            document.getElementById("e5").innerHTML = round(e5, 2).toString();
                        } else {
                            // Important: Make commas again to not confuse the Germans
                            document.getElementById("e1").innerHTML = e1.toString().replace("." , ",");
                            document.getElementById("e2").innerHTML = e2.toString().replace("." , ",");
                            document.getElementById("e3").innerHTML = e3.toString().replace("." , ",");
                            document.getElementById("e4").innerHTML = e4.toString().replace("." , ",");
                            document.getElementById("e5").innerHTML = e5.toString().replace("." , ",");
                        }
                    } else {
                        $(function () {
                            $("#alert30").dialog("open");
                        });
                    }

            } else {
                $(function () {
                    console.log("Empty fields");
                    $("#entersomething").dialog("open");
                });
            }
            console.log(e1 + "/" + e2 + "/" + e3 + "/" + e4 + "/" + e5);
        }
    </script>

    <!-- Count characters in open text box -->
    <script id="countCharacters">
        // Info about argument length
        document.getElementById('id_Rej_Arg').onkeyup = function () {
            //document.getElementById('infoarg').innerHTML = "Verwendete Zeichen: " + (this.value.length)+"/" +{{ C.ARG_MAX_LENGHT|json }};
            document.getElementById('infoarg').innerHTML = (this.value.length);

            if (this.value.length < {{ C.ARG_MIN_LENGHT|json }}) {
                document.getElementById('infoarg').style.color = "red";
            } else {
                document.getElementById('infoarg').style.color = "black";
            }
        };

    </script>
    <script id="autoSubmitRej">
        let autoSubmitted = false;
        let timer = $(".otree-timer");
        let timeLeftCounter = $('.otree-timer__time-left');
        let secondsTimerIsShown = {{ secondsTimerIsShown | json }};  // How many seconds is the timer shown?

        timeLeftCounter.on('update.countdown', function (event) {

            let remainingSeconds = event.offset.totalSeconds;

            if (remainingSeconds <= secondsTimerIsShown) {
                timer.show();
                $('.page-header').hide();

            } else {
                timer.hide();
            }
            if (remainingSeconds === secondsTimerIsShown) {
                 $(".ui-dialog-content").dialog("close");
                 $("#alert-one-minute-left").dialog("open");
            } else if (remainingSeconds === 1) {
                autoSubmitted = true;  // Wird im folgenden Script benutzt, damit die Popups nicht aufgehen.
            }
        });
    </script>
    <script id="userSubmitRej">
        $(document).ready(function () {
            $("form").on("submit", function (event) {
                console.log("autoSubmitted prior script? ", autoSubmitted);
                argument = document.forms[0].elements["id_Rej_Arg"].value.length;
                if (!autoSubmitted && argument == 0) {
                    // Case: No Argument given
                    $("#alertArg").dialog("open");
                    event.preventDefault();
                    event.stopPropagation();
                } else if (!autoSubmitted && argument < {{ C.ARG_MIN_LENGHT|json }} ) {
                    // Case: Argument too short
                    $("#alertLongArg").dialog("open");
                    event.preventDefault();
                    event.stopPropagation();
                }
            });
        });
    </script>


{{ endblock }}

{{ block content }}

<style>
    .otree-form-errors {
        display: none;
    }
    .row {
        margin: 15px;
        padding: 15px;
    }

</style>
<style id="alert">
    .alert-warning{
        background-color:white;
        border-color:white;
    }
    .otree-timer__time-left{
        color: red;
        font-weight: normal;
    }
</style>

<div id = "all">

    <!-- Instructions -->
    <h1>
        Welche Verteilung der {{ C.TOKEN_ADD_TOTAL| to0 }}&nbsp;Token aus dem gemeinsamen Topf
        würden Sie bevorzugen?
    </h1>

    <div style="text-align: center;">
        <br>
        Geben Sie an, wie Sie die {{ C.TOKEN_ADD_TOTAL| to0 }}&nbsp;Token unter den
        Gruppenmitgliedern verteilen würden und nennen Sie anschließend ein Argument als Begründung dieser
        Verteilung.
        <br>Zur Erinnerung: Konsumquote: 90%, Sparquote: 10%, Mindestkonsum: {{ C.NEEDS| to0 }}&nbsp;Token
        - pro Runde und Person.<br>
        Sie haben hierfür maximal {{ C.ARG_TIME |json }} Minuten Zeit. <br>

    </div>

    <!-- Input -->
    <div class="row">
        <div class="col-4" id="DistributionIn">
            <div style="max-width: 60%;">
                <b>Bitte geben Sie an, wie viel die jeweiligen Player erhalten sollen:</b><br>
                <span class="starttokeninfo_indiscontainer">(In den Klammern sehen Sie das Startkapital der Player
                    {{ if group.REDIS == 1 }} nach Abzug ihrer Beiträge) {{ else }}){{ endif }}</span>
                <br><br>
            </div>
            {{ for p in group.get_players }}
                {{ if p.GroupRank == player.GroupRank }}
                    <!-- Assignment to oneself -->
                    <div>
                        Sie, Player {{ p.GroupRank|to0 }}&nbsp;<span
                            class="starttokeninfo_indiscontainer">({{ p.StartToken|to0 }}&nbsp;Token): </span>
                        {{ if p.GroupRank == 1 }}
                            {{ formfield player.iTokenAddSuggestion_1 label="" }}
                        {{ elif p.GroupRank == 2 }}
                            {{ formfield player.iTokenAddSuggestion_2 label="" }}
                        {{ elif p.GroupRank == 3 }}
                            {{ formfield player.iTokenAddSuggestion_3 label="" }}
                        {{ elif p.GroupRank == 4 }}
                            {{ formfield player.iTokenAddSuggestion_4 label="" }}
                        {{ elif p.GroupRank == 5 }}
                            {{ formfield player.iTokenAddSuggestion_5 label="" }}
                        {{ endif }}
                    </div>
                {{ else }}
                     <!-- Assignment to other players -->
                    <div>
                        Player {{ p.GroupRank|to0 }}&nbsp;<span
                            class="starttokeninfo_indiscontainer">({{ p.StartToken|to0 }}&nbsp;Token): </span>
                        {{ if p.GroupRank == 1 }}
                            {{ formfield player.iTokenAddSuggestion_1 label="" }}
                        {{ elif p.GroupRank == 2 }}
                            {{ formfield player.iTokenAddSuggestion_2 label="" }}
                        {{ elif p.GroupRank == 3 }}
                            {{ formfield player.iTokenAddSuggestion_3 label="" }}
                        {{ elif p.GroupRank == 4 }}
                            {{ formfield player.iTokenAddSuggestion_4 label="" }}
                        {{ elif p.GroupRank == 5 }}
                            {{ formfield player.iTokenAddSuggestion_5 label="" }}
                        {{ endif }}
                    </div>
                {{ endif }}

            {{ endfor }}
            <button type="button" onclick="clickfunction()">OK</button>
        </div>
        <div class="col-4" id="DistributionOut">
            <div style="max-width: 60%;">
                <b>Bitte geben Sie an, wie viel die jeweiligen Player erhalten sollen:</b><br>
                <span class="starttokeninfo_indiscontainer">(In den Klammern sehen Sie das Startkapital der Player
                    {{ if group.REDIS == 1 }} nach Abzug ihrer Beiträge) {{ else }}){{ endif }}</span>
                <br><br>
            </div>
            {{ for p in group.get_players }}
                {{ if p.GroupRank == player.GroupRank }}Sie, {{ endif }}
                Player {{ p.GroupRank|to0 }}&nbsp;
                <span class="starttokeninfo_indiscontainer">({{ p.StartToken|to0 }}&nbsp;Token):</span>
                <br>
                {{ if p.GroupRank == 1 }}
                    <p id="e1"></p><br>
                {{ elif p.GroupRank == 2 }}
                    <p id="e2"></p><br>
                {{ elif p.GroupRank == 3 }}
                    <p id="e3"></p><br>
                {{ elif p.GroupRank == 4 }}
                    <p id="e4"></p><br>
                {{ elif p.GroupRank == 5 }}
                    <p id="e5"></p><br>
                {{ endif }}

            {{ endfor }}
        </div>
        <div class="col-8" id="Justification">
            <br>
            <b>Geben Sie Ihre Begründung ein:</b><br>
            <small>
            Im Anschluss werden alle Argumente von den Gruppenmitgliedern bewertet <br>
            und das beste Argument gewählt.
            </small>

            <br>
            <textarea rows="4" cols="50" id="id_Rej_Arg" name="Rej_Arg" maxlength="250"></textarea><br><br>
            <!-- Info about argument length -->

            <div class="arg" style="margin-top: 4px; font-size:small">Verwendete Zeichen: <span id="infoarg"
                                                                                                style="color: red;">0</span>/{{ C.ARG_MAX_LENGHT }}
            </div>
            <br><br>


            <button type="submit" class="btn btn-primary">Weiter</button>
        </div>
    </div>

    <!-- Alertboxes  -->
    <div id="entersomething" style="display:none;">Bitte geben Sie in jedes Feld eine Zahl ein!</div>
    <div id="alert30" style="display:none;">Die Summe der von Ihnen gewählten Verteilung beträgt
        nicht {{ C.TOKEN_ADD_TOTAL | json }}&nbsp;Token!
    </div>

    <!-- Popups -->
    <div id="negativeAlert" style="display:none;">Bitte geben Sie keine negativen Werte ein!</div>
    <div id="decimalAlert" style="display:none;">Bitte geben Sie maximal zwei Nachkommastellen ein!</div>
    <div id="alertArg" style="display:none;">Bitte geben Sie ein Argument ein!</div>
    <div id="alertLongArg" style="display:none;">Bitte geben Sie mindestens {{ C.ARG_MIN_LENGHT|json }}
        Zeichen ein!
    </div>
    <div id="alert-one-minute-left" style="display:none;">
        Bitte geben Sie innerhalb der nächsten Minute Ihre Antwort ein!<br>
        Läuft die Zeit ab, bevor Sie ein Argument eingegeben haben, wird der Inhalt
        des Antwortfeldes als Argument genutzt.
    </div>
</div>
{{ endblock }}