@using NEducation.Code;
@model NEducation.Models.IndividualModel

@{
    ViewBag.Title = "Index";
    //Layout = "~/Views/Shared/_LayoutHome.cshtml";
}

@*<link type="text/css" rel="stylesheet" href="~/Content/assets/css/home/voca-application.css" />*@
@*<link type="text/css" rel="stylesheet" href="~/Content/assets/css/home/voca-main.css" />*@
<link type="text/css" rel="stylesheet" href="~/Content/assets/css/home/user-course.css" />
@using NEducation.Content.Texts
@section navMenu{
    <a href="/Home/" class="nav-link">@Lang.Home</a>
    <a href="/Voca/" class="nav-link">@Lang.Vocabulary</a>
    <a href="/Grammar/" class="nav-link">@Lang.Grammar</a>
    @*<a href="/Music/" class="nav-link">Music</a>*@
    <a href="/Listening/" class="nav-link">@Lang.Listening</a>
    @*<a href="/Ebook/" class="nav-link">
            @Lang.Ebook
            <img src="~/Content/assets/imgs/giphy.gif" style=" width: 50px;" />
        </a>*@

    <div class="dropdown nav-link">
        <button onclick="myFunction()" class="dropbtn">
            E-Library
            <img src="~/Content/assets/imgs/giphy.gif" style=" width: 50px;" />
        </button>
        <div id="myDropdown" class="dropdown-content">
            <a href="/Ebook/">@Lang.Ebook</a>
            <a href="/Ebook/Video">Children's Video</a>
        </div>
    </div>
}

@{
    var check = Model.history.listCourseHistory.Count == 0 ? false : true;
    var course = Session["individual_courseType"] as string;

}
<div class="main-wrapper">

    <div class="library-main-container">

        <!-- BODY -->
        <div class="library-body">
            <div class="body-cover">

                <div class="product-group">

                    <div class="header-banner">
                        <div id="ads-banner-zone-2"></div>

                    </div>
                    <h1>@Lang.Hi <strong>@Model.profileDetail.fullName</strong> @Lang.WelcomeBack</h1>

                    <h2>
                        @Lang.YourCourses
                        @*Các khoá bạn đang học*@
                    </h2>


                    <ul class="nav nav-tabs product-tab" role="tablist">
                        @*<li class="active"><a href="https://www.voca.vn/personal">Tất cả</a></li>*@
                        <li class=" @(@course == "1" ? " active" : "")"><a href="/Individual?courseType=1">@Lang.Vocabulary</a></li>
                        <li class=" @(@course == "2" ? " active" : "")"><a href="/Individual?courseType=2">@Lang.Grammar</a></li>
                        <li class=" @(@course == "3" ? " active" : "")"><a href="/Individual?courseType=3">@Lang.Listening</a></li>
                        <li class=" @(@course == "6" ? " active" : "")"><a href="/Individual?courseType=6">@Lang.vietnamese</a></li>
                        <li class=" @(@course == "9" ? " active" : "")"><a href="/Individual?courseType=9">@Lang.laos</a></li>

                        @*<span class="active-bar" style="width: 100px; left: 0px;"></span>*@
                    </ul>
                    <div class="tab-content product-tab-content">
                        <!--all tab-->
                        <div role="tabpanel" class="tab-pane fade active in" id="tab-all">

                            <div class="individual-home-product-list">
                                <div id="individual-home-product-slider">

                                    @{ if (check == true)
                                        {
                                            for (int i = 0; i < Model.history.listCourseHistory.Count; i++)
                                            {
                                                HistoryElement history = Model.history.listCourseHistory[i];
                                                <div class="home-library-product  @(i == 0 ? "product-active" : "") ">
                                                    <a class="home-library-product-cover" href="/Common/Lesson?courseType=@course&courseId=@history.id">

                                                        <div class="product-image-group">
                                                            <img src="@(NEducation.Controllers.UtilsController.GetContentPath.CourseContentPath + history.iconPath)" class="product-image lazy" alt="@history.name" data-src="https://www.voca.vn/assets/file_upload/images/1000sw1.png">
                                                        </div>
                                                        <div class="product-content">
                                                            <h3 class="product-name">@history.name</h3>
                                                            <p class="product-category"><span class="Vocabulary">@Lang.Vocabulary</span> @Lang.Speaking</p>
                                                            <p class="product-description">@history.description</p>
                                                        </div>

                                                        <div class="individual-product-bottom">
                                                            <div class="product-progress">
                                                                <span class="progress-full">
                                                                    @if (history.percent == "0" || history.percent == "" || history.percent == null)
                                                                    {
                                                                        <span class="progress-value" style="width: calc(0%);">0%</span>

                                                                    }
                                                                    else
                                                                    {
                                                                        <span class="progress-value" style="width: calc(@history.percent%);">@history.percent%</span>

                                                                    }
                                                                    @*<script type="text/javascript">
                                                                            if () {
                                                                                $('.progress-value').css('background', '#EBEBEB')
                                                                            }
                                                                        </script>*@
                                                                </span>
                                                            </div>
                                                            <span class="individual-learning-continue" style="display:inline-block">
                                                                @Lang.ContinueLearning
                                                            </span>
                                                            @{if (history.expDate != null && history.expDate != "")
                                                                {
                                                                    <span class="individual-learning-continue" style="display:inline-block">@Lang.End @history.expDate</span>
                                                                }
                                                            }
                                                        </div>
                                                        <div class="clearfix"></div>
                                                    </a>
                                                </div>
                                            }
                                        }
                                        else
                                        {
                                            <div class="product-empty">
                                                <h2>
                                                    @Lang.YouHaveNoCourse
                                                    @*BẠN CHƯA CÓ KHÓA HỌC NÀO*@
                                                </h2>
                                                <h3>
                                                    @Lang.ChooseACourseInLibrary
                                                    @*Hãy vào thư viện VOCA chọn một khóa học tiếng Anh để bắt đầu bạn nhé!*@
                                                </h3>
                                                <a href="https://www.voca.vn/library/">@Lang.EnteringLibrary</a>
                                            </div>
                                        }
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @*<script type="text/javascript" src="https://www.voca.vn/assets/js/lazyload.min.js?n=620"></script>*@
    @*<script type="text/javascript">
            var ll = new LazyLoad({
                elements_selector: ".lazy"
            });
        </script>*@

    <script type="text/javascript">
        /*$('#input-menu-search').unbind('keyup').keyup(function(event){
            var keyWord = $(this).val();
            if(event.keyCode == 13){
                if(keyWord.trim() != ""){
                    window.location.href = "https://www.voca.vn/search/vocabulary?q="+keyWord.trim().replace(/\s/g, "-")+'&t='+pTitle;
                }else{
                    return false;
                }
            }
        });
        $('#btn-menu-search').unbind('click').click(function(){
            var keyWord = $('#input-menu-search').val();
            if(keyWord.trim() != ""){
                window.location.href = "https://www.voca.vn/search/vocabulary?q="+keyWord.trim().replace(/\s/g, "-")+'&t='+pTitle;
            }else{
                return false;
            }
        });*/



        moveactivebar($('.product-tab li.active'));
        function moveactivebar(element) {
            if ($(element).position() != undefined) {
                var pos = $(element).position().left;
                var width = $(element).innerwidth();
                var bar = $('.product-tab .active-bar');

                $(bar).innerwidth(width);
                $(bar).css('left', pos);
            }

        }
    </script>

    <script>
        $('.menu-personal').addClass('menu-active');
    </script>
</div>


@*<div>
        @Html.ActionLink("Back to List", "Index")
    </div>*@