@page
@model IndexModel
@{
    ViewData["Title"] = "Quizzer";
}
<div class="container-fluid">
    @if (Model.ucnData.theRole == "teacher" || Model.ucnData.theRole == "developer")
    {
        <div class="col-lg-12" style="background-color:cornflowerblue">
            <h1>@Model.myFullName: Teacher</h1>
        </div>
    }
    @if (Model.ucnData.theRole == "student" || Model.ucnData.theRole == "developer")
    {
        // STUDENT PATH
        @if (Model.StudentState == "QuizzSelect")
        {
            <div class="row">
                <div class="col-xxl-12" style="background-color: cornflowerblue">
                    <h1 style="text-align:center">Quizz Management</h1>
                </div>
                <div class="col-xxl-12" style="background-color: cornflowerblue">
                    @Model.myFullName, @Model.ucnData.theClass.FirstOrDefault()
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <table class="table  table-striped table-bordered">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Description</th>
                                <th>Your Score</th>
                                <th>Max Score</th>
                                <th>Reset</th>
                            </tr>
                        </thead>
                        @foreach (var item in Model.PageTests)
                        {
                            <tr>
                                <td>
                                    <div class="form-group">
                                        <form asp-page="" method="post">
                                            <input type="hidden" name="email" value="@item.Journal.PID" />
                                            <input type="hidden" name="value" value="@item.Journal.QuizzID" />
                                            @if (item.Journal.IsOpen == 1)
                                            {
                                                <input type="hidden" name="action" value="startTest" />
                                                <button type="button" class="btn btn-outline-primary" onclick="javascript:this.form.submit()">Take Quizz</button>
                                            }
                                            else
                                            {
                                                <input type="hidden" name="action" value="reviewTest" />
                                                <button type="button" class="btn btn-outline-primary" onclick="javascript:this.form.submit()">Review</button>
                                            }
                                        </form>
                                    </div>
                                </td>
                                <td>
                                    @item.Text
                                </td>
                                <td>
                                    @item.Journal.Score
                                </td>
                                <td>
                                    @item.Journal.ScoreAcc
                                </td>
                                <td>
                                    @if (item.Journal.Anonymous)
                                    {
                                        <form asp-page="" method="post">
                                            <input type="hidden" name="email" value="@item.Journal.PID" />
                                            <input type="hidden" name="target" value="@item.Journal.QuizzID" />
                                            <input type="hidden" name="action" value="deleteMyTest" />
                                            <button type="button" class="btn btn-warning" onclick="javascript:this.form.submit()">Reset Test</button>
                                        </form>
                                    }
                                </td>
                            </tr>
                        }
                    </table>
                </div>
            </div>
            // if review has been selected then show it
            @if (Model.PageMCQuestionReview != null)
            {
                <div class="row">
                    <div class="col-lg-12">
                        <h2>Review</h2>
                    </div>
                </div>
                @for (int qindex = 0; qindex < Model.PageMCQuestionReview.Count; qindex++)
                {
                    <div class="row" style="background-color:white; opacity: 0.8">
                        <div class="col-lg-12">
                            <table class="table  table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th style="width: 10%"></th>
                                        <th>@Model.PageMCQuestionReview[qindex].QuestionText</th>
                                    </tr>
                                </thead>
                                @for (int aindex = 0; aindex < Model.PageMCResponseReview[qindex].Count; aindex++)
                                {
                                    <tr>
                                        <td>
                                            @if (Model.PageMCResponseReview[qindex][aindex])
                                            {
                                                <i class="bi bi-caret-right-fill" />
                                            }
                                        </td>
                                        @if (Model.PageMCQuestionReview[qindex].AList[aindex].Aok)
                                        {
                                            <td style="background-color:lightgreen">
                                                @Model.PageMCQuestionReview[qindex].AList[aindex].Atxt
                                            </td>
                                        }
                                        else
                                        {
                                            <td>
                                                @Model.PageMCQuestionReview[qindex].AList[aindex].Atxt
                                            </td>
                                        }
                                    </tr>
                                }
                            </table>
                        </div>
                    </div>
                }
            }
        }
        @if (Model.StudentState == "QuizzRunning")
        {
            // We are doing a Quizz
            <div class="row" style="background-color:white; opacity: 0.8">
                <div class="col-lg-12">
                    <h2 style="text-align:center">@Model.PageMCQuestion.QuestionText</h2>
                </div>
                <form method="post">
                    <input type="hidden" name="action" value="registerAnswer" />
                    <input type="hidden" name="quizzInProgress" value="@Model.PageQuizzID" />
                    <table class="table">
                        @for (int indx = 0; indx < @Model.PageMCQuestion.AList.Count(); indx++)
                        {
                            <tr>
                                <td><input asp-for="@Model.PageMCQuestion.AList[@Model.PageMCRandomized[@indx]].Aok" /></td>
                                <td>@Model.PageMCQuestion.AList[@Model.PageMCRandomized[@indx]].Atxt</td>
                            </tr>
                        }
                    </table>
                    <button type="submit" class="btn btn-success" name="action" value="create"><i class="bi bi-forward"></i></button>
                </form>
            </div>
        }
    }
    @if (Model.PageChartConnectors != null)
    {
        @if (Model.PageChartConnectors.Count > 2)
        {
            <div class="row">
                <div class="col-xxl-12">
                    <h2>Visual</h2><br />
                    <canvas id="myChart" width="400" height="400"></canvas>
                </div>
            </div>
        }
    }
</div>
@section scripts {
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        var chartdata = @Html.Raw(Json.Serialize(Model.PageChartConnectors));
        var theLabels = [];
        var theDatas = [];
        var theBackgrounds = [];
        var theBorders = [];
        $.each(chartdata, function (index, value) {
            theLabels.push(value.chartLabel);
            theDatas.push(value.chartData);
            theBackgrounds.push(value.chartBackground.toString())
            theBorders.push(value.chartBorder.toString())
        });
        var ctx = document.getElementById('myChart').getContext('2d');
        var theOptions = {
            responsive: false,
            maintainAspectRatio: true,
            scale: {
                ticks: {
                    min: 0,
                    max: 100
                }
            }
        };
        var chart = new Chart(ctx, {
            type: 'polarArea',
            options: theOptions,
            data: {
                labels: theLabels,
                datasets: [{
                    label: 'demo',
                    backgroundColor: theBackgrounds,
                    borderColor: theBorders,
                    data: theDatas
                }]
            }
        });
    </script>
}