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

{{ block scripts }}
    <script id="changetext">
        document.getElementById("Acc_Arg").style.display = "none";
        document.getElementById("Acc_Click").style.display = "initial";

        function OpenClose() {
            console.log("Open/Close");
            let Chosen1 = Number(document.forms[0].elements["id_Acc_DistributionChange_1"].checked);
            let Chosen2 = Number(document.forms[0].elements["id_Acc_DistributionChange_2"].checked);
            let Chosen3 = Number(document.forms[0].elements["id_Acc_DistributionChange_3"].checked);
            console.log("Schon gewählt?", Chosen1, Chosen2, Chosen3);


            if (Chosen1 === 0 && Chosen2 === 0 && Chosen3 === 0) {
                console.log("First question not yet answered");
                document.getElementById("Acc_Arg").style.display = "none";
                document.getElementById("Acc_Click").style.display = "initial";
                $(function () {
                    $("#alertEntry").dialog("open");
                });
            } else {
                console.log("One option was ticked");
                console.log("Chosen: ", Chosen1, Chosen2, Chosen3);
                if (Chosen1) {
                    document.getElementById("V1").innerHTML = "\"{{ C.TOKEN_ADD_1D_NAME }}\"";
                    document.getElementById("V2").innerHTML = "\"{{ C.TOKEN_ADD_2D_NAME }}\"";
                    document.getElementById("V3").innerHTML = "\"{{ C.TOKEN_ADD_3D_NAME }}\"";
                } else if (Chosen2) {
                    document.getElementById("V1").innerHTML = "\"{{ C.TOKEN_ADD_2D_NAME }}\"";
                    document.getElementById("V2").innerHTML = "\"{{ C.TOKEN_ADD_1D_NAME }}\"";
                    document.getElementById("V3").innerHTML = "\"{{ C.TOKEN_ADD_3D_NAME }}\"";
                } else if (Chosen3) {
                    document.getElementById("V1").innerHTML = "\"{{ C.TOKEN_ADD_3D_NAME }}\"";
                    document.getElementById("V2").innerHTML = "\"{{ C.TOKEN_ADD_1D_NAME }}\"";
                    document.getElementById("V3").innerHTML = "\"{{ C.TOKEN_ADD_2D_NAME }}\"";
                }
                document.getElementById("Acc_Arg").style.display = "initial";
                document.getElementById("Acc_Click").style.display = "none";
            }
        }
    </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="userSubmitAcc">
        $(document).ready(function () {
            $("form").on("submit", function (event) {
                console.log("autoSubmitted prior script? ", autoSubmitted);
                argument = document.forms[0].elements["id_Acc_Arg"].value.length;
                if (!autoSubmitted && argument  == 0 ) {
                    console.log("No argument given");
                    // 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>

    <script id="countCharacters">

        // Info about argument length
        document.getElementById('id_Acc_Arg').onkeyup = function () {
            document.getElementById('infoarg').innerHTML = (this.value.length);
            if (this.value.length < {{ C.ARG_MIN_LENGHT|json }}) {
                console.log("Not enough characters!");
                document.getElementById('infoarg').style.color = "red";
            } else {
                console.log("Enough characters!");
                document.getElementById('infoarg').style.color = "black";
            }
        };
    </script>


{{ endblock }}
{{ block content }}

    <style>
        .row {
            margin: 15px;
            padding: 15px;
        }
        .theoptionlabels{
            padding-left: 1em;
        }
    </style>
    <style id="alert">
        .otree-form-errors {
            display: none;
        }
        .alert-warning{
            background-color:white;
            border-color:white;
        }
        .otree-timer__time-left{
            color: red;
            font-weight: normal;
        }
    </style>
    <div id="all">
        <div align="center" style="margin: auto; text-aling: center;">
            <br><br>
            <div id="Acc_Click">
                <!-- Question -->

                <h2 style="width: 80%;">
                    Wenn Sie die Möglichkeit gehabt hätten,
                    eines der beiden anderen Verfahren zu wählen: <br>
                    Hätten Sie sich trotzdem für "{{ C.TOKEN_ADD_1D_NAME }}" entschieden, oder für eines der
                    beiden anderen Verfahren?
                </h2><br><br>

                <!-- Options -->

                <div class="controls  field-acceptance" style="margin-left: 30%; text-align: left; ">
                    <ul id="id_Acc_DistributionChange">
                        <li>
                            <input type="radio"
                                   name="Acc_DistributionChange"
                                   value="1"
                                   required id="id_Acc_DistributionChange_1"
                                   class="form-check-input"/>

                            <label for="id_Acc_DistributionChange" class = "theoptionlabels">
                                Ich hätte mich dennoch für "{{ C.TOKEN_ADD_1D_NAME }}" entschieden.
                            </label>

                        </li>
                        <li>
                            <input type="radio"
                                   name="Acc_DistributionChange"
                                   value="2"
                                   required id="id_Acc_DistributionChange_2"
                                   class="form-check-input"/>
                            <label for="id_Acc_DistributionChange" class = "theoptionlabels">
                                Ich hätte mich für das alternative Verfahren
                                "{{ C.TOKEN_ADD_2D_NAME }}" entschieden.
                            </label>
                        </li>
                        <li>
                            <input type="radio"
                                   name="Acc_DistributionChange"
                                   value="3"
                                   required id="id_Acc_DistributionChange_3"
                                   class="form-check-input"/>
                            <label for="id_Acc_DistributionChange" class = "theoptionlabels">
                                Ich hätte mich für das alternative Verfahren
                                "{{ C.TOKEN_ADD_3D_NAME }}" entschieden.
                            </label>
                        </li>
                    </ul>
                </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>
            <!-- Argument -->
            <div id="Acc_Arg" style="display: none;">
                <h2 style="width: 80%;"> Bitte geben Sie an, warum Sie das Verfahren <span id="V1"
                                                                                          style="white-space: nowrap;"></span>
                    den anderen Verfahren <span id="V2" style="white-space: nowrap;"></span> und
                    <span id="V3" style="white-space: nowrap;"></span>
                    vorziehen!
                </h2>
                <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_Acc_Arg" name="Acc_Arg" maxlength="250"></textarea><br><br>
                <br><br>
                <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>

                <!-- 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 {{ 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 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 }}