{% 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. It calculates the forecast for a product by computing the 
    <b>average of the demand history of the last 10 periods</b>.
    <br>
    <hr>
    <!-- <b>Example:</b>-->
    <figure class="highcharts-figure">
        <div id="container"></div>
        <p class="highcharts-description">
        </p>
    </figure>
    <br>
    The algorithmic demand forecast for Period \(t=11\) is computed by:<br>
    <br>
    \[{300 + 400 + 700 + 500 + 300 + 400 + 700 + 800 + 500 + 400 \over {{ total_number_products }}} = 500\]
    <br>
    The demand forecast for Period \(t=11\) is: \(500\)
    <hr>
    <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 }}
    <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 type="hidden" name="{{ questionnaire_1 }}" id="id_questionnaire_1" /> -->
    <!-- <input type="hidden" name="{{ nn_table }}" id="id_nn_table" /> -->

    <!-- 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(){
            //document.getElementById('nn_table_placeholder').innerHTML = document.getElementById('id_nn_table').name

            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>

    <!-- HighCharts Libraries for the line chart -->
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/series-label.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>

    <!-- MathJax Libraries for math formulas -->
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async  
        src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">  </script>

    <script type="text/javascript"  language="javascript" >

    

    //When the window is loaded we assign the onclick functions
    // $(function(){
    //     $('#demand_table_placeholder').html(document.getElementById('id_demand_table').name);
    // });

    Highcharts.chart('container', {

        title: {
            text: 'Demand History for an Example Product'
        },

        credits: {
            enabled: false
        },

        yAxis: {
            min: 0,
            tickInterval: 100,
            title: {
                text: 'Units'
            }
        },

        xAxis: {
            title: {
                text: 'Periods'
            }
        },

        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true
                },
                label: {
                    connectorAllowed: false
                },
                pointStart: 1
            }
        },

        series: [{
            name : ' ',
            data: [300, 400, 700, 500, 300, 400, 700, 800, 500, 400]
        }],

  

        legend: {
            enabled: false
        },

        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }

        });

       
    </script>

{% endblock %}