@{
    ViewBag.Title = "Learning";
    Layout = "~/Views/Shared/_LayoutLearning.cshtml";
}

@using NEducation.NEduService;
@using NEducation.Content.Texts;
@using NEducation.Controllers

@model NEducation.Models.GrammarModel

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


<script src="~/Content/assets/js/learning-theory.js" type="text/javascript"></script>


<input type="hidden" id="learning-theory-data" name="" value="#">
<input type="hidden" id="learning-theory-complete" name="" value="/Grammar/LearningFinish?lessonId=@Model.lessonId">
<input type="hidden" id="learning-theory-more-sample" name="" value="#">


<!-- Process -->
<div class="theory-process">

    <div class="process-cover">
        <span class="theory-process-bar" style="width: 0%"></span>
    </div>

</div>

<!-- Body -->
<div class="theory-body">
    <div class="body-cover">

        <style>
            .show-example {
                display: block;
            }

            .hide-example {
                display: none;
            }
        </style>

        <!-- Main -->
        <div class="theory-data-list" total="@Model.grammars.Count">

            @for (int i = 0; i < Model.grammars.Count; i++)
            {
                var grammar = Model.grammars[i];
                <div class="theory-data-item  @(@i == 0? " item-current" : "")" index="@i" typeData="@grammar.picture">

                    <div class="row">
                        <div class="col-sm-3 col-xs-12 col-sm-offset-1">
                            <div class="theory-data-img">
                                <div class="data-img-cover">
                                    <img alt="img" src="@grammar.picture" />
                                    <span class="data-flag"></span>
                                </div>

                            </div>
                        </div>

                        <div class="col-sm-7 col-xs-12">
                            <div class="theory-data-content">
                                <p class="data-title">@grammar.name</p>
                                <p class="data-detail show-tooltip" datatooltip="">
                                    @Html.Raw(grammar.introduction)
                                </p>
                                <div class="data-line"></div>

                                @if (grammar.listGrammarExample != null)
                                {
                                    for (int j = 0; j < grammar.listGrammarExample.Count; j++)
                                    {
                                        <div class="grammar-example @(@j==0? "show-example":"hide-example")" index="@(j)">
                                            <p class="data-example">
                                                EXEMPLES:
                                                @if (grammar.listGrammarExample[j].contentType == UtilsController.GetContentType.AUDIO_FILE ||
                                                    grammar.listGrammarExample[j].contentType == UtilsController.GetContentType.AUDIO_LINK)
                                                {
                                                    <a class="icon-sound main-sound-play" href="javascript:void(0)" sound_url="@grammar.listGrammarExample[j].content ">
                                                    </a>
                                                }
                                            </p>
                                            @{ if (grammar.listGrammarExample[j].contentType == NEducation.Controllers.UtilsController.GetContentType.VIDEO_LINK)
                                                {
                                                    <iframe class="iframe-testing-video" width="100%" height="77%" src="@grammar.listGrammarExample[j].content" autoplay=false frameborder="0" allowfullscreen style="border-radius:10px;"></iframe>
                                                }
                                                else if (grammar.listGrammarExample[j].contentType == NEducation.Controllers.UtilsController.GetContentType.VIDEO_FILE)
                                                {
                                                    <video class="iframe-testing-video" width="100%" height="77%" src="@grammar.listGrammarExample[j].content" controls>
                                                    </video>
                                                }
                                                else if (grammar.listGrammarExample[j].contentType == UtilsController.GetContentType.TEXT_TYPE)
                                                {
                                                    <p class="data-sentence-en">@grammar.listGrammarExample[j].content</p>
                                                }
                                                else if (grammar.listGrammarExample[j].contentType == UtilsController.GetContentType.PICTURE_FILE)
                                                {
                                                    <img style="width:100%;height:75%;padding:0 30% 0 30%" src="@grammar.listGrammarExample[j].content" />
                                                }
                                            }
                                            <p class="data-sentence-en">@Html.Raw(grammar.listGrammarExample[j].description)</p>

                                            <p class="data-sentence-vi">@Html.Raw(grammar.listGrammarExample[j].introduction)</p>

                                            <a href="javascript:void(0)" id="btn-previous" class="data-button-more @(@j==0? "show-example":"hide-example")" index="@j" style="display:@(@j==0? "none":"inline-block")">@Lang.PreviousExample</a>
                                            <a href="javascript:void(0)" id="btn-next" class="data-button-more " index="@j" style="display:inline-block">@Lang.AnotherExample</a>
                                        </div>
                                    }
                                }
                            </div>
                        </div>
                        <script>
                            $(document).on('click', '#btn-next', function () {
                                var audio = document.getElementById('learning-main-audio');
                                //Pause
                                audio.pause();

                                //console.log("btn-next click")

                                //var divCurrent = $(".grammar-example");
                                var divCurrent = $(this).parents('.grammar-example');

                                var indexCur = parseInt($(divCurrent).attr('index'));
                                //console.log("indexCur: ", indexCur)

                                var divNext = $(".grammar-example[index='" + (indexCur + 1) + "']");
                                //console.log("divNext.length: ", divNext.length)

                                if (divNext.length > 0) {
                                    $(divCurrent).removeClass('show-example');
                                    $(divCurrent).addClass('hide-example');
                                    $(divNext).removeClass('hide-example');
                                    $(divNext).addClass('show-example');

                                    //setTimeout(function () {
                                    //    $(divCurrent).css('display', 'none');
                                    //}, 500);
                                }
                            });
                            $(document).on('click', '#btn-previous', function () {
                                var audio = document.getElementById('learning-main-audio');
                                //Pause
                                audio.pause();

                                //console.log("btn-previous click")

                                //var divCurrent = $(".grammar-example");
                                var divCurrent = $(this).parents('.grammar-example');

                                var indexCur = parseInt($(divCurrent).attr('index'));
                                //console.log("indexCur: ", indexCur)

                                var divNext = $(".grammar-example[index='" + (indexCur - 1) + "']");
                                //console.log("divNext.length: ", divNext.length)

                                if (divNext.length >= 0) {
                                    $(divCurrent).removeClass('show-example');
                                    $(divCurrent).addClass('hide-example');
                                    $(divNext).removeClass('hide-example');
                                    $(divNext).addClass('show-example');

                                    //setTimeout(function () {
                                    //    $(divCurrent).css('display', 'none');
                                    //}, 500);
                                }
                            });
                        </script>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

<!-- Bottom -->
<div class="theory-bottom">
    <div class="bottom-cover">
        <a href="javascript:void(0)" class="button button-prev">@Lang.GoBack</a>
        <div class="theory-list-button">

        </div>
        <a href="javascript:void(0)" class="button button-next">@Lang.Continue</a>
    </div>
</div>

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


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

<script type="text/javascript">
    $(document).on('mouseenter', '.theory-data-item.item-current .show-tooltip[datatooltip]', function () {
        $('.learning-tooltip-container .learning-tooltip-content').html($(this).attr('datatooltip'));

        var topE = $(this).offset().top;
        var leftE = $(this).offset().left;
        var widthE = $(this).innerWidth();
        var heightE = $(this).innerHeight();

        $('.learning-tooltip-container').css({
            top: topE + heightE + 15,
            left: leftE,
            width: widthE,
            bottom: 'auto'
        });

        var heightWindow = window.innerHeight;
        var heightT = $('.learning-tooltip-container').innerHeight();

        if (topE + heightE + 15 + heightT > heightWindow) {
            $('.learning-tooltip-container').css({
                top: 'auto',
                bottom: 0
            });
        }

        setTimeout(function () {
            $('.learning-tooltip-container').stop();
            $('.learning-tooltip-container').fadeIn(200);
        }, 20);
    })

    var checkHoverTooltip = 0;
    $(document).on('mouseenter', '.learning-tooltip-container', function () {
        checkHoverTooltip = 1;
    })
    $(document).on('mouseleave', '.learning-tooltip-container', function () {
        checkHoverTooltip = 0;
        $('.learning-tooltip-container').stop();
        $('.learning-tooltip-container').fadeOut(200);
    })

    $(document).on('mouseleave', '.theory-data-item.item-current .show-tooltip[datatooltip]', function () {
        setTimeout(function () {
            if (checkHoverTooltip == 0) {
                $('.learning-tooltip-container').stop();
                $('.learning-tooltip-container').fadeOut(200);
            }
        }, 10);


    })
</script>