<%# Page for displaying profile %>
<%# ARGUMENTS: question - the 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*(question.stats.fail)/(question.stats.pass+question.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*(question.stats.pass)/(question.stats.pass+question.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
            }
        });

    }

</script>

<div class="jumbotron container mt-3 pb-5">
    <div class="row">
        <div class="col-12 col-lg-8">
            <%# Question and explanation %>
            <div class="mb-3">
                <h3>Question Statement:</h3>
                <p><%- question.question %></p>
            </div>

            <% if(question.type == "mc") { %>
                <div class="mb-4">
                    <% var i = 1; %>
                    <% question.choices.forEach((choice) => { %>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="answerChoice" id="<%= i %>" value="<%= i %>" disabled>
                            <label class="form-check-label" for="<%= i %>"><%= String.fromCharCode(64+i) %>. <%= choice %></label>
                            <% i++; %>
                        </div>
                    <% }) %>
                </div>
            <% } else if(question.type == "sa") { %>
                <div class="mb-4">
                    <% var i = 1; %>
                    <% question.choices.forEach((choice) => { %>
                        <div class="form-check my-1 me-sm-2">
                            <input type="checkbox" name="saChoice" class="form-check-input" id="<%= i %>" value="<%= i %>" disabled>
                            <label class="form-check-label" for="<%= i %>"><%= String.fromCharCode(64+i) %>. <%= choice %></label>
                            <% i++; %>
                        </div>
                    <% }) %>
                </div>
            <% } else if(question.type == "fr") { %>
                <div class="mb-4">
                    <h5>[Free Response Question]</h5>
                </div>
            <% } %>

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

        <%# Question data %>
        <div class="col-12 col-lg-4">
            <div class="mb-4">
                <h5>Question rating: <%= question.rating %></h5>
            </div>

            <% if(question.ext_source != "original") { %>
                <div class="mb-4">
                    <h5>Question Source: <%= question.ext_source %></h5>
                </div>
            <% } %>

            <div class="mb-4">
                <h5>Relevant Units:</h5>
                <% question.units.forEach((unit) => { %>
                    <button class="btn btn-primary btn-sm my-1" disabled><%= unit.substring(unit.indexOf(' - ') + 3) %></button>
                <% }) %>
            </div>

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

            <%# 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="<%= question.stats.pass %>">
            <input type="hidden" id="failcount" value="<%= question.stats.fail %>">
        </div>
    </div>

    <%# Report question button %>
    <div class="mt-5 pb-2">
        <div id="initial-report-container">
            <a href="mailto:mutorials@mutorials.org?subject=<%= question._id %> - Question Report&body=Please explain what is wrong with this question (ambiguity, inaccuracy, bad formatting, etc.). We try to respond quickly :)" class="btn btn-danger btn-sm float-end" id="report">Report Question</a>
        </div>
    </div>

</div>


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