@{
    ViewBag.Title = "Testing Result";

    Layout = "~/Views/Shared/_LayoutLearning.cshtml";

}

@using NEducation.NEduService;
@using NEducation.Content.Texts;
@model NEducation.Models.TestingResult

<link href="~/Content/assets/css/learning-complete.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="~/Content/assets/css/animate.css" />
<link href="~/Content/assets/css/kontext.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/css/testing.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/css/testing-result.css" rel="stylesheet" type="text/css" />



<link href="~/Content/assets/css/testing-rule.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(window).scroll(function () {
        var pos = $(window).scrollTop();
        if (pos >= 2) {
            $('.learning-main-header').css('position', 'fixed');
            $('.learning-main-header').css('top', '0');

        } else {
            $('.learning-main-header').css('position', 'relative');
            $('.learning-main-header').css('top', '0');

        }
    });
</script>

<div class="modal fade" id="learning-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <span class="modal-button-close" data-dismiss="modal"></span>

            <div class="learning-modal-content">
                <p class="learning-modal-title">
                    @Lang.ContinueWithYourChoose
                    @*Veuillez continuer avec l'option suivante*@
                </p>
                <div class="learning-modal-btn">
                    <a class="learning-modal-btn-learning" href="/Voca/Learning?lessonId=@ViewBag.lessonId">@Lang.Relearn</a>
                    <a class="learning-modal-btn-testing" href="/Voca/Testing?lessonId=@ViewBag.lessonId">@Lang.Relearn</a>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="learning-main-body">
    <!-- Testing result header -->
    <div class="testing-result-header">
        <div class="header-cover">
            <div class="testing-result-header-left">
                <h1 class="testing-result-title">@Model.lessonName</h1>
                <h2 class="testing-result-description">@Model.courseName</h2>
            </div>
            <div class="testing-result-header-right">
                <a href="javascript:void(0)" class="testing-result-button button-learning-relearn" is_unknow="0" is_review="0"
                   is_finish="0" topic="96" parent="95">
                    @Lang.Improve
                    @*Améliorer*@
                </a>
                @*<a href="#" class="testing-result-button button-ranking">Bảng xếp hạng</a>*@
            </div>

            <!-- Nav tabs -->
            @*<ul class="nav nav-tabs testing-result-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#general" aria-controls="general" role="tab" data-toggle="tab">Tổng quan</a></li>
                    <li role="presentation"><a href="#detail" aria-controls="detail" role="tab" data-toggle="tab">Chi tiết</a></li>
                    <li role="presentation"><a href="#comment" aria-controls="comment" role="tab" data-toggle="tab">Thảo luận</a></li>
                    <span class="active-bar"></span>
                </ul>*@
        </div>
    </div>
    <!-- PIN BODY -->

    <div class="tab-content testing-result-tab-content">

        <div role="tabpanel" class="tab-pane fade in active" id="general">
            <div class="testing-result-body">
                <div class="body-cover">
                    <!-- Tab panes -->
                    <div class="row">
                        <div class="col-xs-12 col-md-12">
                            <div class="testing-result-general">
                                <p class="general-title" style="margin:10px 0;">
                                    @Lang.TestingResults
                                    @*Résultats de test*@
                                </p>
                                @*<p class="general-description">Lần thứ: <span class="des-number">1</span></p>*@
                                <div class="general-content">
                                    <div class="testing-result-percent">

                                        <svg class="testing-result-svg" width="215px" height="215px" viewBox="0 0 184 184">
                                            <circle class="svg-circle" cx="92" cy="92" r="88" fill="transparent" stroke="#BCBEC0" opacity="0.2" stroke-width="8px"></circle>
                                            <circle class="svg-process" cx="92" cy="92" r="88" fill="transparent" stroke="url(#gradientProcess)" stroke-width="8px" stroke-dashoffset="553px" stroke-dasharray="553px"></circle>
                                            <text text-anchor="middle" dominant-baseline="central" class="svg-percent" x="50%" y="50%"
                                                  fill="url(#gradientPercent)" font-family="'opensansbold'" font-size="45">@Model.percent%</text>
                                                <linearGradient id="gradientProcess" gradientUnits="userSpaceOnUse" x1="144" y1="148" x2="22" y2="18">
                                                    <stop offset="0" style="stop-color:#FAD300"></stop>
                                                    <stop offset="1" style="stop-color:#FFA300"></stop>
                                                </linearGradient>
                                                <linearGradient id="gradientPercent" gradientUnits="userSpaceOnUse" x1="62.5732" y1="60.9941" x2="62.5732" y2="105.6734">
                                                    <stop offset="0" style="stop-color:#FAD300" />
                                                    <stop offset="1" style="stop-color:#FFA300" />
                                                </linearGradient>

                                            </svg>

                                            <script>
                                                $(document).ready(function () {
                                                    var percent = parseInt($('.testing-result-svg .svg-percent').text());
                                                    var dasharray = parseInt($('.testing-result-svg .svg-process').attr('stroke-dasharray'));

                                                    var dashoffset = dasharray * (100 - percent) / 100;
                                                    $('.testing-result-svg .svg-process').attr('stroke-dashoffset', dashoffset + 'px');
                                                });
                                            </script>
                                        </div>
                                        <div class="general-detail">
                                            <p class="detail-item">
                                                <span class="detail-icon icon-1"></span>
                                                @Lang.Timer
                                                @*Le temps:*@
                                                <span class="detail-value">@Model.timeElapsed</span>s
                                            </p>
                                            <p class="detail-item">
                                                <span class="detail-icon icon-2"></span>
                                                @Lang.NumberOfRightAnswer:
                                                @*Nombre de mots qui appartiennent:*@
                                                <span class="detail-value">@Model.countCorrect</span>
                                            </p>
                                            <p class="detail-item">
                                                <span class="detail-icon icon-3"></span>
                                                @Lang.NumberOfWrongAnswer:
                                                @*Nombre de mots qui n'appartiennent pas:*@
                                                <span class="detail-value">@Model.countWrong</span>
                                            </p>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <style>
        @@media (max-width: 768px) {
            #learning-modal .modal-dialog {
                width: 95%;
                max-width: 95%;
            }
        }
    </style>

    <script type="text/javascript" src="~/Content/assets/js/voca/box-slider.jquery.js"></script>
    <script type="text/javascript" src="~/Content/assets/js/voca/box-slider-fx-scroll-3d.js"></script>
    <script type="text/javascript" src="~/Content/assets/js/voca/kontext.js"></script>
    <script type="text/javascript" src="~/Content/assets/js/voca/testing.js"></script>
    <!-- Modal -->
    <div class="modal fade" id="modal-pin-word" tabindex="-1"></div>