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

{{ block scripts }}

    <script id="timer-chat_dis">
        //Create Variables
            var duration = {{ C.CHAT_TIME_DISTRIBUTION | json }} * 60 * 1000;
            var start =  {{ player.Rej1_ChatStart|json }}*1000;
            var end = start + duration + 3000;
            var difference = (end-(new Date()).getTime()) / 1000 | 0;   //  "| 0; steht für keine kommazahlen"

        //Measure Time
            window.onload = function () {
                measureTime(difference, end, duration);
            }

    </script>
    <script id="checkthenumbers">
            jQuery(document).ready( function () {
                    let e1 = document.forms[0].elements["id_iTokenAddVoteFor_1"];
                    let e2 = document.forms[0].elements["id_iTokenAddVoteFor_2"];
                    let e3 = document.forms[0].elements["id_iTokenAddVoteFor_3"];
                    let e4 = document.forms[0].elements["id_iTokenAddVoteFor_4"];
                    let e5 = document.forms[0].elements["id_iTokenAddVoteFor_5"];

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

                    $( "form" ).on( "submit", function( event ) {
                            // Replace commas by dots
                            e1 = parseFloat(document.forms[0].elements["id_iTokenAddVoteFor_1"].value.replace(/,/g, "."));
                            e2 = parseFloat(document.forms[0].elements["id_iTokenAddVoteFor_2"].value.replace(/,/g, "."));
                            e3 = parseFloat(document.forms[0].elements["id_iTokenAddVoteFor_3"].value.replace(/,/g, "."));
                            e4 = parseFloat(document.forms[0].elements["id_iTokenAddVoteFor_4"].value.replace(/,/g, "."));
                            e5 = parseFloat(document.forms[0].elements["id_iTokenAddVoteFor_5"].value.replace(/,/g, "."));

                            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 ) {
                                            console.log("Too many digits!");
                                            $(function () {
                                                $("#decimalAlert").dialog("open");
                                            });
                                            event.preventDefault();
                                            return;
                                }

                                // Check sum
                                if (e1+e2+e3+e4+e5 == {{ C.TOKEN_ADD_TOTAL | json }}) {
                                    // Everything is alright, submit values
                                } else {
                                    $(function() {
                                        $( "#alert30" ).dialog( "open" );
                                     });
                                     event.preventDefault();
                                     return;
                                }

                            } else {
                                $(function() {
                                    console.log("Empty fields");
                                    $( "#entersomething" ).dialog( "open" );
                                 });
                                 event.preventDefault();
                            }
                            console.log(e1 +"/" +e2 +"/" +e3+"/" +e4+"/" +e5);
                    });
            });
    </script>
    <script id = changeNickColor>
      $(document).ready(function () {
           console.log($("span.otree-chat__nickname"));
           colors = ["darkorange", "red", "green", "brown", "dimgray"];
           random = {{ participant.vars.randomnicknamecolors|json }};
           $('.otree-chat__messages').bind("DOMSubtreeModified", function () {
                    $("span.otree-chat__nickname:contains('1')").css("color", colors[random[0]]);
                    $("span.otree-chat__nickname:contains('2')").css("color", colors[random[1]]);
                    $("span.otree-chat__nickname:contains('3')").css("color", colors[random[2]]);
                    $("span.otree-chat__nickname:contains('4')").css("color", colors[random[3]]);
                    $("span.otree-chat__nickname:contains('5')").css("color", colors[random[4]]);
                    $("span.otree-chat__nickname:contains({{ player.GroupRank|json }})").css("color", "blue");
           });
      });
    </script>

{{ endblock }}

{{ block content }}

    <style>

    /* oTree ELEMENTS */
        .otree-body {
            padding-top: 25px !important;
            margin: 10px;
        }
        .otree-form-errors {
            display: none;
        }
        .page-header {
            display: none;
        }
        .otree-timer {
            display: none;
        }
        .otree-chat__messages {
               height: {{ C.CHAT_HEIGHT|json }}px !important;
        }
    /*MY ELEMENTS*/
        .row {
                overflow: hidden;
                margin-right: 5px;
                margin-left: 5px;
                padding: 5px;
                border-style: solid;
        }
        .col-4 {
            height: 10%; /* Geht ja nicht */
            border-style: none;
            font-size: 0.8em;
        }
        .form-control {
            font-size: 1em; /* old: 0.7 rem*/
        }
        .ArgAndChat {
            min-height: {{ C.CHAT_HEIGHT|json }}px;
        }
        #ChatFenster1 {
            padding-right: 0px;
        }
        .playerinputinfo {
            margin: auto;  // center vertically
        }
        .thisbutton {
            margin: auto;   // center vertically
        }
    </style>

    <!-- Content -->
    <div id="all" class="ChatPageContainer" >

        <!-- Time -->
            <div class="Zeit">
            Verbleibende Zeit (in Sek.):
                <span id="minutes" style="color: red; "></span><span id="seconds" style="color: red; "></span>
                </div>

        <!-- Heading and explanation of site -->
            <h1>Abstimmung über eine neue Verteilung der {{ C.TOKEN_ADD_TOTAL|to0 }}&nbsp;Token</h1><br>
            <div id="allowed" align = "center">
                Da Sie sich gegen {{ C.TokenAdd_1dArticle }} entschieden haben,
                haben Sie nun die Möglichkeit, sich mit Ihrer Gruppe für eine andere Verteilung der {{ C.TOKEN_ADD_TOTAL|to0 }}&nbsp;Token aus dem gemeinsamen Topf zu entscheiden.
                <br><br>
                Sie haben nun {{ C.CHAT_TIME_DISTRIBUTION }} Minuten Zeit, sich über die Entscheidung zu beraten und sie spätestens nach Ablauf der Zeit unten einzutragen.
                <br><br>
                Zur Erinnerung: Konsumquote: 90%, Sparquote: 10%, Mindestkonsum: {{ C.NEEDS| to0 }}&nbsp;Token - pro Runde und Person.
                <br><br>
                Die Verteilung wird dann durchgeführt, wenn <b>mindestens 3 Personen</b> in Ihrer Gruppe die gleichen Beträge eingeben!
                <br><br>
            </div>

        <!-- Argumente und Chat -->
            <div class="row ArgAndChat">
                {{ if session.vars.do_arguments_rejection }}
                    <!-- Argumente der Player -->
                        <div class = "col-4 chatsideargs" style = "padding-top: 15px;">
                            {{ for p in group.get_players }}

                                    {{ if p.iTokenAddSuggestion_1 == -99 }}
                                        <b>Player {{ p.GroupRank }} </b>(-/-/-/-/-): {{ p.Rej_Arg }}<br><br>
                                    {{ else }}
                                        <b>Player {{ p.GroupRank }}</b>
                                        ({{ p.iTokenAddSuggestion_1|to2 }}/{{ p.iTokenAddSuggestion_2|to2 }}/{{ p.iTokenAddSuggestion_3|to2 }}/{{ p.iTokenAddSuggestion_4|to2 }}/{{ p.iTokenAddSuggestion_5|to2 }}):
                                        {{ p.Rej_Arg }}<br><br>
                                    {{ endif }}


                            {{ endfor }}
                        </div>
                    <!--Chat -->
                        <div class = "col-8" id="ChatFenster1"> <!-- Hier kein Padding, weil sonst das graue Feld auch nach unten verschoben wird! -->
                            {{ chat nickname=player.Nickname  channel=player.group.Channel_DisProcedure }}
                         </div>
                    <!--Ersatztext Chatfenster-->
                        <div class = "col-8" id="ChatFensterErsatz1" style="margin:auto; text-align: center;">
                            <b> Bitte geben Sie unten eine Verteilung der {{ C.TOKEN_ADD_TOTAL|to0 }}&nbsp;Token ein!</b>
                        </div>
                {{ else }}
                    <!--Chat -->
                        <div class = "col-12" id="ChatFenster2">
                            {{ chat nickname=player.Nickname  channel=player.group.Channel_DisProcedure }}
                         </div>
                    <!--Ersatztext Chatfenster-->
                        <div class = "col-12" id="ChatFensterErsatz2" style="margin:auto; text-align: center;">
                            <b> Bitte geben Sie unten eine Verteilung der {{ C.TOKEN_ADD_TOTAL|to0 }}&nbsp;Token ein!</b>
                        </div>
                {{ endif }}
            </div>

        <!-- Token assignment -->
            <div id="DIS_Container">
                        <!-- Container Token assignment heading-->
                            <div class="HeadingEnter">
                                <b>Bitte geben Sie an, wie viel die jeweiligen Player erhalten sollen:<br></b>
                                <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>
                            </div>
                            <!-- Container Token assignment-->
                                <div class="row">

                        <!-- Zuweisungen an Player-->
                                {{ for p in group.get_players }}
                                    <!-- Info on Player -->
                                    <div class = "col-1 playerinputinfo">
                                        Player {{ p.GroupRank|to0 }}<br>
                                        <span class = "starttokeninfo_indiscontainer">({{ p.StartToken|to0 }}&nbsp;Token)</span>
                                    </div>

                                    <!-- Assignment to Player -->
                                    <div class = "col-1">
                                        {{ if p.GroupRank == 1 }}
                                            {{ formfield player.iTokenAddVoteFor_1 label="" }}
                                        {{ elif p.GroupRank == 2 }}
                                            {{ formfield player.iTokenAddVoteFor_2 label="" }}
                                        {{ elif p.GroupRank == 3 }}
                                            {{ formfield player.iTokenAddVoteFor_3 label="" }}
                                        {{ elif p.GroupRank == 4 }}
                                            {{ formfield player.iTokenAddVoteFor_4 label="" }}
                                        {{ elif p.GroupRank == 5 }}
                                            {{ formfield player.iTokenAddVoteFor_5 label="" }}
                                        {{ endif }}
                                    </div>
                                {{ endfor }}

                        <!-- Button-->
                                <div class = "col-1 thisbutton">
                                    <button class = "button" type = "submit">
                                        OK
                                    </button>
                                </div>
                            </div>
                            </div>

    </div>

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

{{ endblock }}