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

{% block title %}
    Algorithm Support
{% endblock %}

{% block content %}
    An <b>algorithm has determined a demand forecast</b> for the {{ total_number_products }} products.
    <br>
    <br>
    In the following, <b>you will see the {{ total_number_products }} products again</b>. You will see your <b>initial forecast</b> and the <b>forecast of the algorithm</b>. If you wish, <b>you can update your final forecast</b> for the product.
    <br>
    <br> 
    <b>Your bonus reward will only depend on the final forecast.</b>
    <br>
    <br>
    <hr>
    Please tell us what you think about the algorithm:
    <br>
    {{ questionnaire_1 }}
    <!-- <button type="button" class="normal-button" onclick="saveSelection()">Test</button> -->
    <br>
    <br>
    <p id="message"><br></p>
    <br>
    <button class="otree-btn-next btn btn-primary next-button otree-next-button" id="Next_Button" style="float: right;">Next</button>
    <br>
    
    <br>
    <p style="text-align:right">Please <b>answer all questions to continue.</b></p>
    

    <!-- Input Tags to get Data from oTree -->

    <!-- Input Tags to record answers -->
    <input type="hidden" name="questions_aft_explain_answers" id="id_answers" />

    <!-- Debug Information -->
    {{ formfield_errors 'questions_aft_explain_answers' }}

    <script>
        // $('#questionnaire_placeholder').html(document.getElementById("id_questionnaire_1").name);
        
        //When the window is loaded we assign the onclick functions
        $(function(){
            checkIfAllQuestionsAnsweredAndSave();
            $(".answer").click(function(){
                checkIfAllQuestionsAnsweredAndSave();
            })
            
        });
    
        //Check if all questions are answered and try to save
        function checkIfAllQuestionsAnsweredAndSave(){
            var table = document.getElementById("likert_table");
            var rows = table.rows;
    
            var answers = [];
            console.log("Länge Rows ist " + rows.length);
            console.log("Schleife bis " + (rows.length - 2)/2);
            try{
                for(var i = 1; i <= (rows.length - 2)/2; i++){
                    console.log(i);
                    
                    var answer = document.querySelector('input[name=q_' + i.toString() + ']:checked').value;
                    answers.push(answer);
                }
                console.log(answers);
                document.getElementById("id_answers").value = answers;
                document.getElementById("Next_Button").disabled = false;
            }
            catch(err){
                document.getElementById("Next_Button").disabled = true;
                console.log(err);
            }  
        }
    
        </script>
{% endblock %}