@{
    ViewBag.Title = "Course";
}

<link rel="stylesheet" href="~/Content/assets/css/library.css" />
<link rel="stylesheet" href="~/Content/assets/css/home-voca.css" />
@*@using NEducation.NEduService;*@
@using NEducation.Code;
@using NEducation.Content.Texts;
@using NEducation.Controllers;



@model NEducation.Models.CourseModel

@section navMenu{
    @{
        if (Model.courseType == UtilsController.Constant.VN_LISTEN || Model.courseType == UtilsController.Constant.LAO_LISTEN)
        {
            <a href="/Home/" class="nav-link">@Lang.Home</a>
            <a href="/Home/EnglishIndex/" class="nav-link">@Lang.english</a>
            <a href="/Home/VietnameseIndex/" class="nav-link">@Lang.vietnamese</a>
            <a href="/Home/LaosIndex/" class="nav-link">@Lang.laos</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>*@
        }
        else
        {
            <a href="/Home/" class="nav-link">@Lang.Home</a>
            <a href="/Common/Course?courseType=@UtilsController.Constant.EN_VOCABULARY" class="nav-link">@Lang.Vocabulary</a>
            <a href="/Common/Course?courseType=@UtilsController.Constant.EN_GRAMMAR" class="nav-link">@Lang.Grammar</a>
            <a href="/Common/Course?courseType=@UtilsController.Constant.EN_LISTEN" class="nav-link">@Lang.Listening</a>
            <a href="/MiniGame" class="nav-link ">@Lang.MiniGame</a>
        }
    }
}

@section menu{
    @{
        if (Model.courseType == UtilsController.Constant.VN_LISTEN || Model.courseType == UtilsController.Constant.LAO_LISTEN)
        {
            <a href="/Home/" class="header-menu-link ">@Lang.Home</a>
            <a href="/Home/EnglishIndex/" class="header-menu-link ">@Lang.english</a>
            <a href="/Home/VietnameseIndex/" class="header-menu-link ">@Lang.vietnamese</a>
            <a href="/Home/LaosIndex/" class="header-menu-link ">@Lang.laos</a>
            @*<a href="/Ebook/" class="header-menu-link ">
                    @Lang.Ebook
                    <img src="~/Content/assets/imgs/giphy.gif" style=" width: 50px;" />
                </a>*@
            @*<li class="menu-item-has-children header-menu-link ">
                <a href="#" class="">
                    E-Library
                    <img src="~/Content/assets/imgs/giphy.gif" style=" width: 50px;" />
                </a>
                <ul class="" style=" margin-left: 20px;">
                    <li><a href="/Ebook/">@Lang.Ebook</a></li>
                    <li><a href="/Ebook/Video">Children's Video</a></li>
                </ul>
            </li>*@

        }
        else
        {
            <a href="/Home/" class="header-menu-link ">@Lang.Home</a>
            <a href="/Common/Course?courseType=@UtilsController.Constant.EN_VOCABULARY" class="header-menu-link ">@Lang.Vocabulary</a>
            <a href="/Common/Course?courseType=@UtilsController.Constant.EN_GRAMMAR" class="header-menu-link ">@Lang.Grammar</a>
            <a href="/Common/Course?courseType=@UtilsController.Constant.EN_LISTEN" class="header-menu-link ">@Lang.Listening</a>
            <a href="/MiniGame" class="header-menu-link ">@Lang.MiniGame</a>
            @*<li class="menu-item-has-children header-menu-link ">
                <a href="#" class="">
                    E-Library
                    <img src="~/Content/assets/imgs/giphy.gif" style=" width: 50px;" />
                </a>
                <ul class="" style=" margin-left: 20px;">
                    <li><a href="/Ebook/">@Lang.Ebook</a></li>
                    <li><a href="/Ebook/Video">Children's Video</a></li>
                </ul>
            </li>*@
        }
    }
}

<div class="library-main-container">
    @*<a href="https://pronunciation.voca.vn" target="_blank">
            <img style="width: 100%;" alt="voca promotion" src="~/Content/assets/imgs/ra-mat-voca-pro.jpg" />
        </a>*@
    <!-- HEADER -->
    <div class="library-header">
        <div class="library-cover">

            <div class="cover-center">

                @*<div class="row">
                    <div class="col-xs-12 col-sm-5">*@
                <div>
                    <div>
                        @if (Model.courseType == "1")
                        {
                            <h1 class="library-title">
                                MEDU VOCABULARY
                                @*BIBLIOTHÈQUE DE VOCABULAIRE DE NEDU*@
                            </h1>
                            <h2 class="library-description">

                                @Lang.Common_des_2
                                @*Common_des_2*@
                                @*Hơn 100 khóa Apprendre l'anglais Vocabulaire theo chủ đề dành cho mọi đối tượng.*@
                                @*Plus de 100 cours de vocabulaire anglais classifié selon des sujets pour vous*@
                            </h2>
                        }
                        else if (Model.courseType == "2")
                        {
                    <h1 class="library-title">
                        MEDU GRAMMAR
                        @*NEDU COURS DE GRAMMAIR*@
                    </h1>
                            <h2 class="library-description">
                                @*Thư viện khóa học ngữ pháp dành cho mọi đối tượng.*@
                                @Lang.GrammarSystem
                                @*Biblothèque de cours de grammaire pour tous*@
                            </h2>
                        }
                        else if (Model.courseType == "3")
                        {
                    <h1 class="library-title">
                        MEDU LISTENING
                        @*Listening Courses*@
                    </h1>
                            <h2 class="library-description">
                                @Lang.SpeakingSystem
                                @*Bao gồm các khóa học nghe tốt nhất cho bạn.*@
                            </h2>
                        }
                        else if (Model.courseType == "10")
                        {
                    <span>@Lang.MiniGame</span>
                        }
                    </div>

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

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

            <!-- List product -->
            <div class="library-list-product">

                @{
                    if (Model.category.listCourse != null)
                    {
                        foreach (Course course in Model.category.listCourse)
                        {
                            <!--if (Model.courseType == "10")
                            {
                                    <div class="title">MINIGAME</div>
                                    <div class="countdown">
                                        <div>
                                            <span id="days">28</span>
                                            DAYS
                                        </div>
                                        <div>
                                            <span id="hours">22</span>
                                            HOURS
                                        </div>
                                        <div>
                                            <span id="minutes">36</span>
                                            MINUTES
                                        </div>
                                    </div>
                                    <div class="tabs">
                                        <button class="tab-button active" onclick="showTab('ranking')">Ranking</button>
                                        <button class="tab-button" onclick="showTab('howToPlay')">How To Play</button>
                                    </div>
                                    <div id="ranking" class="tab-content active">
                                        <p>1. The minigame starts at 10:00 AM every Sunday.</p>
                                        <p>2. You have 15 seconds to think and give your answer.</p>-->
                                        <!-- Thêm các mục khác -->
                                    <!--</div>
                                    <div id="howToPlay" class="tab-content">
                                        <p>Hướng dẫn chơi game...</p>
                                    </div>

                                    <script>
                                        function showTab(tabId) {
                                            document.querySelectorAll('.tab-content').forEach(tab => {
                                                tab.classList.remove('active');
                                            });
                                            document.querySelectorAll('.tab-button').forEach(button => {
                                                button.classList.remove('active');
                                            });
                                            document.getElementById(tabId).classList.add('active');
                                            document.querySelector(`.tab-button[onclick="showTab('${tabId}')"]`).classList.add('active');
                                        }
                                    </script>
                            }
                            else
                            {-->
                                <div class="library-product">
                                    <a href="@Url.Action("Lesson", "Common", new { courseId = course.id, courseType=Model.courseType })" class="library-product-cover">
                                        <img class="product-image" alt="product" src="@course.iconPath" />
                                        <p class="product-name">@course.name</p>
                                        <p class="product-description">@course.description</p>
                                    </a>
                                </div>
                            //}

                        }
                    }
                }

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


<script src="~/Content/assets/js/library.js" type="text/javascript"></script>