@{
    ViewBag.Title = "Learning";

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

}


@using NEducation.Content.Texts;

@*@using NEducation.NEduService;
    @model NEducation.Models.VocabularyModel*@

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


<!-- Body -->
<div class="main-body">
    <div class="main-body-container completed-container">
        <div class="completed-body">
            <div class="body-cover">

                <p class="completed-title">@Lang.CourseComplete</p>
                <p class="completed-topic-name">@ViewBag.lessonName</p>

                <div class="completed-icon">
                    <img src="~/Content/assets/imgs/welcome.png" alt="completed image" />

                </div>

                <p class="completed-detail">@Lang.Congratulation</p>

            </div>
        </div>
        <div class="completed-bottom">
            <div class="completed-bottom-cover">
                <a href="@Url.Action("Learning",  "Grammar", new {lessonId = @ViewBag.lessonId })" class="completed-button button-relearn button-learning-now">
                    @Lang.Relearn
                </a>
                <a href="@Url.Action("Testing",  "Grammar", new {lessonId = @ViewBag.lessonId })" class="completed-button button-test">
                    @Lang.Evaluation
                </a>
                @*<a href="javascript:void(0)" topic="96" is_unknow="1" is_finish="0" parent="95" class="completed-button button-relearn button-learning-now">@NEducation.Content.Texts.Lang.Relearn</a>*@
                @*<a href="https://www.voca.vn/test/96-95" class="completed-button button-test">Kiểm tra</a>*@
            </div>
        </div>
    </div>
</div>



<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('@Lang.ContinueLearning');
                    $('#learning-modal .learning-modal-btn a.learning-modal-btn-testing').text('@Lang.Check');
                }
                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" />

<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="/Grammar/Learning?lessonId=@ViewBag.lessonId">@Lang.Relearn</a>
                    <a class="learning-modal-btn-testing" link="" href="/Grammar/Testing?lessonId=@ViewBag.lessonId">@Lang.Retest</a>
                    @*<a class="learning-modal-btn-result" href="">Xem kết quả</a>*@
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<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>


@*<div class="modal fade" id="learning-question-modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <span class="modal-button-close" data-dismiss="modal"></span>

                <div class="learning-question-modal-content">
                    <p class="learning-question-modal-title">Bạn hãy chọn một hình thức học</p>
                    <div class="learning-question-modal-btn">
                        <a class="learning-modal-btn-flashcard" data-toggle="modal" data-target="#learning-type-modal" data-dismiss="modal" href="javascript:void()" link="https://www.voca.vn/learning-flashcard">Flashcard 2 mặt</a>
                        <a class="learning-modal-btn-flashcard-dark" data-toggle="modal" data-target="#learning-type-modal" data-dismiss="modal" href="javascript:void()" link="https://www.voca.vn/learning">Flashcard 3 mặt</a>
                        <a class="learning-modal-btn-writing" data-toggle="modal" data-target="#learning-type-modal" data-dismiss="modal" href="javascript:void()" link="https://www.voca.vn/learning-writing">Gõ từ</a>
                        <a class="learning-modal-btn-sentence" data-toggle="modal" data-target="#learning-type-modal"  data-dismiss="modal" href="javascript:void()" link="https://www.voca.vn/learning-context">Ngữ cảnh</a>
                        <a class="learning-modal-btn-pronounciation" data-toggle="modal" data-target="#learning-type-modal" data-dismiss="modal" href="javascript:void()" link="https://www.voca.vn/learning-speaking">Phát âm</a>
                    </div>
                </div>
            </div>
        </div>
    </div>*@


<style type="text/css">
    #learning-type-modal .modal-dialog {
        width: 100%;
        max-width: 330px;
        margin-top: 70px;
    }

    #learning-type-modal .modal-content {
        border-radius: 6px;
    }

    #learning-type-modal .learning-type-modal-content {
        padding: 25px;
    }

    #learning-type-modal .learning-type-modal-title {
        text-align: center;
        font-size: 16px;
        color: #000000;
        margin-bottom: 20px;
    }

    #learning-type-modal .learning-type-modal-btn a {
        width: 100%;
        display: block;
        max-width: 200px;
        height: 45px;
        background: var(--color-main-red);
        color: #fff;
        text-align: center;
        font-size: 13px;
        line-height: 45px;
        font-family: opensanssemibold;
        margin: 10px auto 10px;
        border-radius: 22px;
    }

        #learning-type-modal .learning-type-modal-btn a.learnin-modal-btn-unknow {
            background: var(--color-main-red);
        }

        #learning-type-modal .learning-type-modal-btn a.learning-modal-btn-all {
            background: var(--color-main-orange);
        }

        #learning-type-modal .learning-type-modal-btn a.learning-modal-btn-choosing {
            background: var(--color-main-blue-light);
        }
</style>
<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>
<input type="hidden" id="learning-modal-btn-unknow-content" unknow="Học từ chưa biết" unfinish="Học từ chưa thuộc" name="">
<div class="modal fade" id="learning-type-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <span class="modal-button-close" data-dismiss="modal"></span>

            <div class="learning-type-modal-content">
                <p class="learning-type-modal-title">Bạn hãy chọn một hình thức học</p>
                <div class="learning-type-modal-btn">
                    <a class="learning-modal-btn-choosing" href="javascript:void(0)">Chọn từ muốn học</a>
                    <a class="learning-modal-btn-unknow" href="">Học từ chưa thuộc</a>
                    <a class="learning-modal-btn-all" href="">Học tất cả</a>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<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>
<!-- MODAL -->
<div id="modal-choose-word" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <a class="modal-button-close" href="javascript:void(0)" data-dismiss="modal"></a>

            <form id="learning-modal-form" action="" method="post">
                <p class="choose-word-title">Chọn từ muốn học<span class="number">00</span><span class="choose-all">Chọn tất cả <span class="choose-word-check"><span class="icon-all"></span></span></span></p>

                <div class="choose-word-content">
                    <div class="choose-word-content-cover"></div>
                </div>
                <button type="submit" class="choose-word-button">Bắt đầu học</button>
            </form>
        </div>
    </div>
</div>


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