@{
    ViewBag.Title = "Learning";

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

}

@using NEducation.NEduService;
@using NEducation.Code;
@using NEducation.Content.Texts;
@using NEducation.Controllers;
@model NEducation.Models.VocabularyModel


<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 rel="stylesheet" href="~/Content/assets/css/learning-listening.css" />*@

@*<link href="~/Content/assets/css/learning-flashcard.css" rel="stylesheet" type="text/css" />*@

<link href="~/Content/assets/css/animate.css" rel="stylesheet" type="text/css" />

<input type='hidden' id='hidden-userid' value='477879' />
<input type='hidden' id='hidden-topicid' value='97' />
<input type='hidden' id='hidden-parent' value='95' />
<input type='hidden' id='hidden-parent-name' value='Voca' />
<input type='hidden' id='hidden-topic-name' value='TestingResult' />

<input type="hidden" id="back-link" value="/Voca/Lesson" msg="Bạn chắn chắn muốn thoát? Quá trình làm bài sẽ không được lưu." name="">

@{
    //var listCorrect = question.answerTrue.Split(',');
}

<script type="text/javascript">
    $(document).ready(function () {
        $('.button-review, .button-learning-continue, .button-learning-relearn').click(function () {
            var isReview = $(this).attr('is_review');
            if (isReview == undefined || isReview != 1) {
                if ($(this).hasClass('button-learning-relearn')) {
                    $('#learning-modal .learning-modal-btn a.learning-modal-btn-learning').text('@Lang.Relearn');
                    $('#learning-modal .learning-modal-btn a.learning-modal-btn-testing').html('@Lang.Retest');
                } else {
                    $('#learning-modal .learning-modal-btn a.learning-modal-btn-learning').text('Học tiếp');
                    $('#learning-modal .learning-modal-btn a.learning-modal-btn-testing').text('Kiểm tra');
                }
                if ($(this).hasClass('button-learning-continue')) {
                    var text = $(this).attr('text');
                    if (text != undefined) {
                        $('#learning-modal .learning-modal-btn a.learning-modal-btn-learning').text(text);
                    }
                }
                $('#learning-modal .learning-modal-btn a.learning-modal-btn-result').css('display', 'none');



            } else {
                $('#learning-modal .learning-modal-btn a.learning-modal-btn-result').css('display', 'block');
                var resultLink = $(this).attr('result_link');
                $('#learning-modal .learning-modal-btn a.learning-modal-btn-result').attr('href', resultLink);


                $('#learning-modal .learning-modal-btn a.learning-modal-btn-learning').text('@Lang.Relearn');
                $('#learning-modal .learning-modal-btn a.learning-modal-btn-testing').html('@Lang.Retest');
            }


            var isTesting = $(this).attr('is_testing');
            if (isTesting != undefined && isTesting == 1) {
                $('#learning-modal .learning-modal-btn a.learning-modal-btn-learning').css('display', 'none');
            } else {
                $('#learning-modal .learning-modal-btn a.learning-modal-btn-learning').css('display', 'block');
            }
            var isUnknow = $(this).attr('is_unknow');
            var isFinish = $(this).attr('is_finish');
            var topic = $(this).attr('topic');
            var parent = $(this).attr('parent');
            $('#learning-modal-info').attr('is_unknow', isUnknow);
            $('#learning-modal-info').attr('is_finish', isFinish);
            $('#learning-modal-info').attr('is_review', isReview);
            $('#learning-modal-info').attr('topic', topic);
            $('#learning-modal-info').attr('parent', parent);
            $('#learning-modal').modal();

            if (isFinish == 1 && isUnknow == 0) {

                $('.learning-modal-btn-unknow').css('display', 'none');
                $('#learning-modal-btn-unknow-content').css('display', 'none');
            } else {

                $('.learning-modal-btn-unknow').css('display', 'block');
                if (isFinish == 0) {
                    var unknowContent = $('#learning-modal-btn-unknow-content').attr('unfinish');
                } else {
                    var unknowContent = $('#learning-modal-btn-unknow-content').attr('unknow');
                }
                $('.learning-modal-btn-unknow').text(unknowContent);
            }

            //testing link
            //var testingLink = $('.learning-modal-btn-testing').attr('link');
            //$('.learning-modal-btn-testing').attr('href', testingLink + '/' + topic + '-' + parent);


        });


        $('.button-learning-now').click(function () {
            var isReview = 0;
            var isUnknow = $(this).attr('is_unknow');
            var isFinish = $(this).attr('is_finish');
            if (isFinish == undefined) {
                isFinish = 1;
            }
            var topic = $(this).attr('topic');
            var parent = $(this).attr('parent');
            $('#learning-modal-info').attr('is_unknow', isUnknow);
            $('#learning-modal-info').attr('is_finish', isFinish);
            $('#learning-modal-info').attr('is_review', isReview);
            $('#learning-modal-info').attr('topic', topic);
            $('#learning-modal-info').attr('parent', parent);


            if (isFinish == 1 && isUnknow == 0) {

                $('.learning-modal-btn-unknow').css('display', 'none');
                $('#learning-modal-btn-unknow-content').css('display', 'none');
            } else {

                $('.learning-modal-btn-unknow').css('display', 'block');
                if (isFinish == 1) {
                    var unknowContent = $('#learning-modal-btn-unknow-content').attr('unknow');
                } else {
                    var unknowContent = $('#learning-modal-btn-unknow-content').attr('unfinish');
                }
                $('.learning-modal-btn-unknow').text(unknowContent);

            }
            $('#learning-question-modal').modal();

        });


        $('.button-learning').click(function () {

            var topic = $(this).attr('topic');
            var parent = $(this).attr('parent');
            $('#learning-modal-info').attr('topic', topic);
            $('#learning-modal-info').attr('parent', parent);
            var isUnknow = $(this).attr('is_unknow');
            var isFinish = $(this).attr('is_finish');
            if (isUnknow != undefined) {
                $('#learning-modal-info').attr('is_unknow', isUnknow);

            } else {
                isUnknow = 0;
            }
            if (isFinish != undefined) {
                $('#learning-modal-info').attr('is_finish', isFinish);
            } else {
                isFinish = 1;
            }
            if (isFinish == 1 && isUnknow == 0) {

                $('.learning-modal-btn-unknow').css('display', 'none');
                $('#learning-modal-btn-unknow-content').css('display', 'none');
            } else {

                $('.learning-modal-btn-unknow').css('display', 'block');
                if (isFinish == 1) {
                    var unknowContent = $('#learning-modal-btn-unknow-content').attr('unknow');
                } else {
                    var unknowContent = $('#learning-modal-btn-unknow-content').attr('unfinish');
                }

                $('.learning-modal-btn-unknow').text(unknowContent);
            }
        });
    });

</script>


<input type="hidden" name="" id="learning-modal-info" is_unknow="0" is_finish="1" is_review="0" topic="0" parent="0" />


<script type="text/javascript">
    $(document).ready(function () {
        $('#learning-question-modal a').click(function () {
            var link = $(this).attr('link');
            var topic = $('#learning-modal-info').attr('topic');
            var parent = $('#learning-modal-info').attr('parent');
            var url = link + '/' + topic + '-' + parent;
            $('#learning-modal-form').attr('action', url);
            $('.learning-modal-btn-unknow').attr('href', (url + '-unknow'));
            $('.learning-modal-btn-all').attr('href', url);
        });
    });

</script>


<script type="text/javascript">
    $(document).ready(function () {
        $('.learning-modal-btn-choosing').click(function () {
            var topic = $('#learning-modal-info').attr('topic');
            var parent = $('#learning-modal-info').attr('parent');
            $.ajax({
                url: urlConfig("choose-learn-words"),
                data: {
                    topic: topic,
                    parent: parent
                },
                type: "POST"
            }).success(function (data) {
                if (data[0] != 0) {

                    $('#modal-choose-word .choose-word-content-cover').html(data);
                    $('#modal-choose-word').modal();
                }
            });
        });
    });
</script>

<script type="text/javascript">
    $(document).on('click', '.choose-word-title .choose-all .choose-word-check', function () {
        if ($(this).hasClass('word-checked')) {
            $(this).removeClass('word-checked');
            $('.choose-word-content .word-item .item-check input[type="checkbox"]').prop('checked', false);
        } else {
            $(this).addClass('word-checked');
            $('.choose-word-content .word-item .item-check input[type="checkbox"]').prop('checked', true);
        }

        $('.choose-word-content .word-item .item-check input[type="checkbox"]').trigger('change');
    });

    $(document).on('change', '.choose-word-content .word-item .item-check input[type="checkbox"]', function () {

        var total = $(".choose-word-content .word-item .item-check input[type='checkbox']").length;
        var totalCheck = $(".choose-word-content .word-item .item-check input[type='checkbox']:checked").length;

        if (total == totalCheck) {
            $(".choose-word-title .choose-all .choose-word-check").addClass('word-checked');
        } else {
            $(".choose-word-title .choose-all .choose-word-check").removeClass('word-checked');

        }

        $(".choose-word-title .number").text(totalCheck < 10 ? '0' + totalCheck : totalCheck);


    });

</script>
<!--******** AUDIO MAIN ******** -->
<audio id="learning-main-audio">
    <source class="src" src="" type="audio/mpeg">
</audio>

<div class="testing-container">
    <!-- Process -->
    <div class="testing-process">
        <span class="testing-process-bar learning-main-process-value"></span>
    </div>
    <div class="testing-container-cover">
        <div class="testing-body">
            <div class="testing-body-cover" total="@Model.questions.Count">
                <div class="testing-countdown" id="testing-countdown">
                    <span class="testing-countdown-number">15</span>
                    <svg>
                        <circle class="circle-shadow" r="16" cx="17" cy="17"></circle>
                        <circle class="circle" r="16" cx="17" cy="17" stroke="url(#gradientPercent)" style="stroke-dashoffset: -101px;"></circle>
                        <linearGradient id="gradientPercent" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="34">
                            <stop offset="0" style="stop-color:#F88600"></stop>
                            <stop offset="0.5" style="stop-color:#FFB500"></stop>
                            <stop offset="1" style="stop-color:#FAD300"></stop>
                        </linearGradient>
                    </svg>
                </div><!--pronounce - sound => word -->
                @for (int i = 0; i < Model.questions.Count; i++)
                {
                    Question question = Model.questions[i];

                    // multi choice
                    var listCorrect = question.answerTrue.Split(',');

                    <div class="testing-exercise @(@i == 0 ? " exercise-current" : "")" index="@i" questionId="@question.id" typeQuestion="guessing"
                         correctAnswer="@question.answerTrue" time="15" type="4">

                        <div class="testing-exercise-flashcard">

                            <div class="flash-card-viewport">
                                <div class="flash-card-box" id="learning-theory-box-@i" index="@i">

                                    <figure class="slide jbs-current">
                                        <div class="testing-exercise-content">
                                            <p class="testing-exercise-title">
                                                @*@NEducation.Content.Texts.Lang.QuestionBegin*@
                                                @question.description
                                            </p>
                                            <div class="testing-exercise-quesiton">

                                                @{ if (question.contentType == NEducation.Controllers.UtilsController.GetContentType.AUDIO_FILE ||
                                                                                     question.contentType == NEducation.Controllers.UtilsController.GetContentType.AUDIO_LINK)
                                                    {
                                                        <div class="learning-theory-flashcard question-definition">
                                                            <a class="card-content-sound main-sound-play" href="javascript:void(0)"
                                                               sound_url="@(question.content)"></a>
                                                        </div>
                                                    }
                                                    else if (question.contentType == UtilsController.GetContentType.VIDEO_LINK)
                                                    {
                                                        <iframe class="iframe-testing-video" width="100%" height="77%" src="@question.content" autoplay=false frameborder="0" allowfullscreen style="border-radius:10px;"></iframe>
                                                        @*<video class="iframe-testing-video" src="https://www.youtube.com/embed/C6JyS88eUBA" style="width:100%; height:77%; border-radius:10px; padding:0 30% 0 30%" controls></video>*@
                                                        @*<iframe class="iframe-testing-video" width="100%" height="77%" src="@question.content" frameborder="0" allowfullscreen></iframe>*@
                                                        @*<div class="embed-responsive embed-responsive-4by3">
                    <video id="iframe-testing-video" src="@question.content" style="width:100%; height:29%; border-radius:10px;" controls></video>
                </div>*@
                                                        @*<video id="iframe-testing-video" width="100%" height="70%">
                    <source src="@question.content" type="video/mp4">
                </video>*@
                                                        @*<video class="iframe-testing-video" width="100%" height="77%" src="https://www.youtube.com/embed/C6JyS88eUBA" controls>
                    <source src="https://www.youtube.com/embed/C6JyS88eUBA" type="video/mp4">
                </video>*@
                                                    }
                                                    else if (question.contentType == UtilsController.GetContentType.VIDEO_FILE)
                                                    {
                                                        <video class="iframe-testing-video" width="100%" height="77%" src="@question.content" controls>
                                                            @*<source src="@question.content" type="video/mp4">*@
                                                        </video>
                                                        @*<iframe class="iframe-testing-video" width="100%" height="77%" src="@question.content" autoplay=false frameborder="0" allowfullscreen style="border-radius:10px;"></iframe>*@
                                                    }
                                                    else if (question.contentType == UtilsController.GetContentType.TEXT_TYPE)
                                                    {
                                                        <p class="question-definition">@question.content</p>
                                                    }
                                                    else if (question.contentType == UtilsController.GetContentType.PICTURE_FILE)
                                                    {
                                                        <img style="width:100%;height:75%;padding:0 30% 0 30%" src="@question.content" />
                                                    }
                                                }

                                            </div>
                                        </div>
                                    </figure>
                                    <figure class="slide jbs-current">
                                        <div class="testing-exercise-result" img_url="" synset="400518641" word="1103">
                                            <div class="testing-exercise-result-cover">
                                                <div class="result-img">
                                                    <img alt="img" src="@question.iconPath" />
                                                </div>
                                                <div class="result-content">
                                                    <p class="result-content-label">
                                                        @Lang.RightAnswer:
                                                        @*Đáp án:*@
                                                    </p>
                                                    @for (int j = 0; j < listCorrect.Length; j++)
                                                    {
                                                        var correctAnswer = listCorrect[j] == "1" ? question.answer1 :
                                                        listCorrect[j] == "2" ? question.answer2 :
                                                        listCorrect[j] == "3" ? question.answer3 : question.answer4;
                                                        <p class="result-content-text-main">
                                                            @correctAnswer <span class="result-content-type">n</span>
                                                        </p>
                                                    }
                                                    @*<p class="result-content-text-main">
                                                            @question.answer1 <span class="result-content-type">n</span>
                                                        </p>*@
                                                    @*<p class="result-content-phonetic">/əˈkaʊntnt/</p>
                                                        <p class="result-content-definition-vi">kế toán viên</p>
                                                        <a class="result-content-sound main-sound-play" href="javascript:void(0)"
                                                            sound_url="~/Content/assets/sounds/cg44dbx4srwzhlezrjskqaubkg25k2as3qjconqqk2q.mp3"></a>*@
                                                </div>
                                            </div>
                                        </div>
                                    </figure>
                                </div>
                            </div>

                        </div>
                        <div class="testing-exercise-answer ">
                            <div class="answer-cover">
                                <a class="answer-guessing" href="javascript:void(0)" val="1">
                                    <span class="guessing-text">@question.answer1</span>
                                </a>
                                <a class="answer-guessing" href="javascript:void(0)" val="2">
                                    <span class="guessing-text">@question.answer2</span>
                                </a>
                                <a class="answer-guessing" href="javascript:void(0)" val="3">
                                    <span class="guessing-text">@question.answer3</span>
                                </a>
                                <a class="answer-guessing" href="javascript:void(0)" val="4" hideanswer="@question.answer4">
                                    <span class="guessing-text">@question.answer4</span>
                                </a>
                            </div>
                        </div>
                        <input type='hidden' id='hidden-userid' value='477879' />
                    </div>
                }
            </div>
        </div>

        <style>
            @@media (max-width: 768px) {
                .testing-exercise-answer .answer-cover {
                    width: 100%;
                }
            }
        </style>

    </div>
</div>


<!--******** AUDIO MAIN ******** -->
<audio id="learning-main-audio">
    <source class="src" src="" type="audio/mpeg">
</audio>

<audio id="audio-answer-right">
    <source class="src" src="~/Content/assets/sounds/right_answer.mp3" type="audio/mpeg">
</audio>
<audio id="audio-answer-wrong">
    <source class="src" src="~/Content/assets/sounds/wrong_answer.mp3" type="audio/mpeg">
</audio>

<audio id="normal-time-sound">
    <source class="src" src="~/Content/assets/sounds/second_tick.mp3" type="audio/mpeg">
</audio>
<audio id="warning-time-sound">
    <source class="src" src="~/Content/assets/sounds/clock_tick.mp3" type="audio/mpeg">
</audio>

<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/learning-main.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>
<script>
    runCountdown();
    updateProcess();
</script>