<%# Page where answer explanation is displayed, after finishing question %>
<%# ARGUMENTS: correct - correct/wrong bool, userRating - new user rating, oldUserRating - old user rating, oldQuestionRating - old question rating %>
<%#      cont: userAnswer - what the user answered, subject - subject of question, units - units of question, user - current user object, newQues - question object %>

<%- include("../../partials/header") -%>
<%- include("../../partials/navigationPrivate") -%>

<script>

    window.onload = function () {

        // render pass/fail chart

        Chart.pluginService.register({
            beforeDraw: function (chart) {

                if(chart.config.options.passratePlugin) {

                    var width = chart.chart.width;
                    var height = chart.chart.height;
                    var ctx = chart.chart.ctx;

                    ctx.restore();

                    var fontSize = "1";
                    ctx.font = fontSize + "em sans-serif";

                    ctx.fillStyle = "#8d0f0f";
                    var text = "Fail rate: <%= Math.round(100*(newQues.stats.fail)/(newQues.stats.pass+newQues.stats.fail)) %>%";
                    var textX = Math.round((width - ctx.measureText(text).width) / 2);
                    var textY = (height/2) + 20;
                    ctx.fillText(text, textX, textY);

                    ctx.fillStyle = "#208d0f";
                    text = "Pass rate: <%= Math.round(100*(newQues.stats.pass)/(newQues.stats.pass+newQues.stats.fail)) %>%";
                    textX = Math.round((width - ctx.measureText(text).width) / 2);
                    textY -= 20;
                    ctx.fillText(text, textX, textY);

                    ctx.save();
                }
            }
        });

        var ctxPassrate = document.getElementById("passRateChart");

        var style = ctxPassrate.style;
        style.marginLeft = "auto";
        style.marginRight = "auto";

        var myChart = new Chart(ctxPassrate, {
            type: "pie",
            data: {
                labels: ["Pass", "Fail"],
                datasets: [{
                    label: "Problem Pass/Fail Rates",
                    data: [$("#passcount").val(), $("#failcount").val()],
                    backgroundColor: [
                        "rgba(80, 185, 20, 1)",
                        "rgba(215, 80, 80, 1)"
                    ],
                    hoverBackgroundColor: [
                        "rgba(80, 185, 20, 1)",
                        "rgba(215, 80, 80, 1)"
                    ],
                    borderColor: [
                        "rgba(255, 255, 255, 0.5)",
                        "rgba(255, 255, 255, 0.5)"
                    ],
                    borderWidth: 2
                }]
            },
            options: {
                passratePlugin: true,
                title: {
                    display: true,
                    text: "Question Pass/Fail Rates"
                },
                legend: {
                    display: false
                },
                cutoutPercentage: 60,
                responsive: true
            }
        });

        // render rating tracker chart

        var ctxTracker = document.getElementById("ratingTrackerChart");

        var style = ctxTracker.style;
        style.marginLeft = "auto";
        style.marginRight = "auto";

        var tracker = $("#ratingTrackerArray").val().split('@');
        if(tracker.length < 2) {
            tracker.unshift(tracker[0]);
        }
        var labels = [];
        for(var i = tracker.length; i > 0; i--) {
            labels.push(i + " Ago");
        }
        labels.push("");
        var myChart = new Chart(ctxTracker, {
            type: "line",
            data: {
                labels: labels,
                datasets: [{
                    label: "Rating History",
                    data: tracker,
                    backgroundColor: "rgba(100, 200, 230, 1)",
                    borderColor: "rgba(100, 200, 230, 1)",
                    fill: false,
                    borderWidth: 5
                }]
            },
            options: {
                title: {
                    display: true,
                    text: "My " + "<%= subject %>" + " Rating Tracker"
                },
                legend: {
                    display: false
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            min: Math.round((Math.min.apply(null, tracker)-50)/50)*50,
                            max: Math.round((Math.max.apply(null, tracker)+50)/50)*50,
                            stepSize: 50
                        }
                    }],
                    xAxes: [{
                        ticks: {
                            display: false
                        }
                    }]
                },
                responsive: true
            }
        });
    }

    $(document).ready(function() {
        
        // focus on next button if correct
        if( correct ) {
            setTimeout(() => {
                $([document.documentElement, document.body]).animate({
                    scrollTop: $("#tryanother").offset().top
                }, 1000);
                $("#tryanother").focus();
            }, 1000);
        }
    });

</script>

<div class="container mt-5">
    <%- include("../../partials/components/experienceBar") -%>
</div>

<div class="jumbotron container mt-3">

    <div class="row">

        <div class="col-12 col-lg-8">

            <%# Question and explanation %>
            <div class="mb-3">
                <h3>Question:</h3>
                <p><%- newQues.question %></p>
            </div>

            <% if(newQues.type == "mc") { %>
                <div class="mb-4">
                    <% var i = 1; %>
                    <% newQues.choices.forEach((choice) => { %>
                        <div class="form-check">
                            <% if(userAnswer == i) { %>
                                <input class="form-check-input" type="radio" name="answerChoice" id="<%= i %>" value="<%= i %>" disabled checked>
                            <% } else { %>
                                <input class="form-check-input" type="radio" name="answerChoice" id="<%= i %>" value="<%= i %>" disabled>
                            <% } %>
                            <% if(newQues.answer[0] == i) { %>
                                <label class="form-check-label" for="<%= i %>"><font color="green"><%= String.fromCharCode(64+i) %>. <%= choice %></font></label>
                            <% } else if(userAnswer == i) { %>
                                <label class="form-check-label" for="<%= i %>"><font color="red"><%= String.fromCharCode(64+i) %>. <%= choice %></font></label>
                            <% } else { %>
                                <label class="form-check-label" for="<%= i %>"><%= String.fromCharCode(64+i) %>. <%= choice %></label>
                            <% } %>
                            <% i++; %>
                        </div>
                    <% }) %>
                </div>
            <% } else if(newQues.type == "sa") { %>
                <div class="mb-4">
                    <% var i = 1; %>
                    <% newQues.choices.forEach((choice) => { %>
                        <div class="form-check my-1 me-sm-2">
                            <% if(userAnswer.includes(''+i)) { %>
                                <input type="checkbox" name="saChoice" class="form-check-input" id="<%= i %>" value="<%= i %>" disabled checked>
                            <% } else { %>
                                <input type="checkbox" name="saChoice" class="form-check-input" id="<%= i %>" value="<%= i %>" disabled>
                            <% } %>
                            <% if(newQues.answer.includes(i)) { %>
                                <label class="form-check-label" for="<%= i %>"><font color="green"><%= String.fromCharCode(64+i) %>. <%= choice %></font></label>
                            <% } else if(userAnswer.includes(''+i)) { %>
                                <label class="form-check-label" for="<%= i %>"><font color="red"><%= String.fromCharCode(64+i) %>. <%= choice %></font></label>
                            <% } else { %>
                                <label class="form-check-label" for="<%= i %>"><%= String.fromCharCode(64+i) %>. <%= choice %></label>
                            <% } %>
                            <% i++; %>
                        </div>
                    <% }) %>
                </div>
            <% } else if(newQues.type == "fr") { %>
                <div class="mb-4">
                    <h5>You answered: <%= userAnswer %></h5>
                    <h5>The correct answer is: <%= newQues.answer %></h5>
                </div>
            <% } %>

            <div>
                <h3>Answer Explanation:</h3>
                <p><%- newQues.answer_ex %></p>
            </div>

            <% if(newQues.source_statement) { %>
                <hr>
                <p class="text-center"><%= newQues.source_statement %></p>
            <% } %>

        </div>

        <%# Question data %>
        <div class="col-12 col-lg-4">

            <div class="mb-4">
                <% if(correct) { %>
                    <h3 class="mb-4"><font color="green">Your answer is correct!</font></h3>
                <% } else { %>
                    <h3 class="mb-4"><font color="red">Your answer is incorrect.</font></h3>
                <% } %>
            </div>

            <div class="my-4">
                <h5>New <%= subject.toLowerCase() %> rating: <%= userRating %> (<%= (userRating-oldUserRating >= 0) ? "+"+(userRating-oldUserRating) : (userRating-oldUserRating) %>)</h5>
                <h5>Question rating: <%= oldQ %></h5>
            </div>

            <% if(newQues.ext_source != "original") { %>
                <div>
                    <h5>Question Source: <%= newQues.ext_source %></h5>
                </div>
            <% } %>

            <div>
                <h5>Question Tags:</h5>
                <% newQues.tags.forEach((tag) => { %>
                    <button class="btn btn-info btn-sm my-1" disabled><%= tag %></button>
                <% }) %>
            </div>

            <%# Rating tracker chart %>
            <div class="canvas-container-center text-center">
                <canvas id="ratingTrackerChart" width="400" height="400" class="my-4"></canvas>
            </div>
            <input type="hidden" id="ratingTrackerArray" value="<%= user.stats.ratingTracker[subject.toLowerCase()].join('@') %>">

            <%# Pass rate chart %>
            <div class="canvas-container-center text-center">
                <canvas id="passRateChart" width="400" height="400" class="my-4"></canvas>
            </div>
            <input type="hidden" id="passcount" value="<%= newQues.stats.pass %>">
            <input type="hidden" id="failcount" value="<%= newQues.stats.fail %>">

        </div>

    </div>

</div>

<div class="container mb-5">
    <a href="/train"><button type="button" class="btn btn-secondary" id="exit">Exit</button></a>
    <a href="/train/<%= subject %>/displayQuestion?units=<%=units%>"><button type="button" class="btn btn-primary" id="tryanother">Try Another Question</button></a>
    <button type="button" class="btn btn-danger btn-small float-end" id="report" data-bs-toggle="modal" data-bs-target="#contact-modal">Contact us</button>
    <%- include ("../../partials/contact", { questionId: newQues._id, redirect: "/train/" + subject + "/displayQuestion?units=" + units }) -%>
</div>

<%- include("../../partials/footer") -%>
