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

{{ block scripts }}

    <script id="initial">
        let yes = Number(document.forms[0].elements["id_BVote_YesNo_1"].checked);
        let no =  Number(document.forms[0].elements["id_BVote_YesNo_2"].checked);
        console.log("yes", yes);

        let yestext = "Ich bin dafür, weil ... ";
        let notext = "Ich bin dagegen, weil ... ";
        let text = "";
        let regex = new RegExp("^" + text, "i");
        let verfahren = {{ C.TOKEN_ADD_1D_NAME | json }};
        let textlength = 0;


        // console.log("Am Anfang yes no:", yes, no);
        function initial() {
            if (no == null && yes == null) {
                // console.log("Am Anfang Teil 1 einblenden");
                document.getElementById("id_BVoteYesNoArg").style.display = "none";
                document.getElementById("id_BVoteYesNo").style.display = "initial";
            }
        }

        initial();
    </script>
    <script id="openclose2">
        function OpenClose() {
            // console.log("Open/Close");
            yes = Number(document.forms[0].elements["id_BVote_YesNo_1"].checked);
            no =  Number(document.forms[0].elements["id_BVote_YesNo_2"].checked);

            if (yes) {
                text = yestext;
                regex = new RegExp("^" + text, "i");
                document.getElementById("id_YesNoArg_BVote").innerHTML = text;
                textlength = text.length;
                document.getElementById("title_ind_argument").innerHTML = "Bitte geben Sie ein Argument als Begründung Ihrer Anerkennung von " + verfahren + " an!";
            } else if (no) {
                text = notext;
                regex = new RegExp("^" + text, "i");
                document.getElementById("id_YesNoArg_BVote").innerHTML = text;
                textlength = text.length;
                document.getElementById("title_ind_argument").innerHTML = "Bitte geben Sie ein Argument als Begründung Ihrer Ablehnung von " + verfahren + " an!";
            }

            $("#infoarg").text($("#id_YesNoArg_BVote"))

            document.getElementById('infoarg').innerHTML = document.getElementById('id_YesNoArg_BVote').innerHTML.length;

            //check if first question is answered
            if (!no && !yes) {
                document.getElementById("id_BVoteYesNoArg").style.display = "none";
                document.getElementById("id_BVoteYesNo").style.display = "initial";
                $(function () {
                    $("#alertEntry").dialog("open");
                });
            } else {
                document.getElementById("id_BVoteYesNoArg").style.display = "initial";
                document.getElementById("id_BVoteYesNo").style.display = "none";
            }
        }

    </script>
    <script id="dontchangetext">
        $('#id_YesNoArg_BVote').on("keyup paste", function (ev) {
            console.log("Don't let them change the initial text");
            var entry = $(this).val();

            if (!regex.test(entry)) {
                $(this).val(text);
            }
        });
    </script>
    <script id="countCharacters_MakeColors">
        // Info about argument length
        document.getElementById('id_YesNoArg_BVote').onkeyup = function () {
            document.getElementById('infoarg').innerHTML = (this.value.length);

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

    </script>
    <script id="autoSubmit">
        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="userSubmit">
        $(document).ready(function () {
            $("form").on("submit", function (event) {
                argument_l = document.forms[0].elements["id_YesNoArg_BVote"].value.length;
                    if (!autoSubmitted && argument_l == textlength) {
                        // Case: No Argument given
                        $("#alertArg").dialog("open");
                        event.preventDefault();
                    }
                    else if (!autoSubmitted && argument_l < {{ C.ARG_MIN_LENGHT|json }} + textlength) {
                        document.getElementById('mintextlength').innerHTML = textlength + {{ C.ARG_MIN_LENGHT | json }};
                        // Case: Argument too short
                        $("#alertLongArg").dialog("open");
                        event.preventDefault();
                    }
                console.log("test");

            });
        });
    </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;
        }
    </style>
    <div id="all">

        <div class="PrivYesNo" id="id_BVoteYesNo">
            <h1 align="center">
                Erkennen Sie {{ C.TokenAdd_1dArticle }} persönlich an oder nicht?
            </h1>
            <br><br>
            <div class="form-group required" style="margin-left: 35%; ">
                <div class="controls  field-acceptance">
                    <ul id="id_BVote_YesNo">
                        <li>
                            <label for="id_BVote_YesNo">
                                <input type="radio" name="BVote_YesNo" value="1"
                                       required id="id_BVote_YesNo_1" class="form-check-input"/>
                                &nbsp;&nbsp;Ich erkenne {{ C.TokenAdd_1dArticle }} an.
                            </label>
                        </li>
                        <li>
                            <label for="id_BVote_YesNo"><input type="radio" name="BVote_YesNo" value="2"
                                                               required id="id_BVote_YesNo_2" class="form-check-input"/>
                                &nbsp;&nbsp;Ich erkenne {{ C.TokenAdd_1dArticle }} nicht an.
                            </label>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- Button -->
            <!-- Make "buttonclassfixedposition" for lab experiments and "buttonclassonline" for online experiments -->
            <div class="buttonclassonline">
                <button class="otree-btn-next btn btn-primary" type="button" onclick="OpenClose()">Weiter</button>
            </div>
        </div>
        <div align="center">
            <div class="PrivYesNoArg" id="id_BVoteYesNoArg" style="display: none; ">
                <h1><span id="title_ind_argument"></span></h1>
                <br><br>
                Sie haben hierfür maximal {{ C.ARG_TIME|json }} Minuten Zeit. <br>
                Im Anschluss werden alle Argumente von den Gruppenmitgliedern bewertet und das beste Argument gewählt.
                <br><br>
                <textarea rows="4" cols="50" id="id_YesNoArg_BVote" name="YesNoArg_BVote"
                          maxlength="250"></textarea><br><br>
                <!-- Info about argument length -->
                <div class="col-12 arg" style="margin-top: 4px; font-size:small">Verwendete Zeichen:
                    <span id="infoarg" style="color: red;">0</span>/{{ C.ARG_MAX_LENGHT|json }}
                </div>

                <!-- Button -->
                <!-- Make "buttonclassfixedposition" for lab experiments and "buttonclassonline" for online experiments -->
                <div class="buttonclassonline">
                    <button type="submit" class="btn btn-primary">Weiter</button>
                </div>
            </div>
        </div>

        <!-- Alertboxes  -->
        <div id="alertEntry" style="display:none;">Bitte geben Sie Ihre Antwort 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 <span id="mintextlength"></span> Zeichen
            ein!
        </div>
        <div id="alert-one-minute-left" style="display:none;">
            Bitte geben Sie innerhalb der nächsten Minute Ihr Argument ein!<br>
            Läuft die Zeit ab, bevor Sie ein Argument eingegeben haben,
            wird der Inhalt des Antwortfeldes als Argument genutzt.
        </div>
    </div>


{{ endblock }}