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

<link rel="stylesheet" href="~/Content/assets/css/animate.css" />
<link rel="stylesheet" href="~/Content/assets/css/home-listening.css" />
<link rel="stylesheet" href="~/Content/assets/css/m-home-listen.css" />
@*<link rel="stylesheet" href="~/Content/assets/css/main-listening.css" />*@
<script src="~/Content/assets/js/wow.min.js" type="text/javascript"></script>
<script src="~/Content/assets/js/home-listening.js" type="text/javascript"></script>
<script src="~/Content/assets/js/m-home-listen.js" type="text/javascript"></script>

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


@{
    String isSub = Session["isSub"] as String;
    UserProfile profile = Session["profile"] as UserProfile;
}

@section navMenu{
    <a href="/Home/" class="nav-link">@Lang.Home</a>
    <a href="/Home/EnglishIndex/" class="navigation-all nav-link" typeLanguage="@UtilsController.Constant.ENGLISH">@Lang.english</a>
    <a href="/Home/VietnameseIndex/" class="navigation-all nav-link" typeLanguage="@UtilsController.Constant.VIETNAMESE">@Lang.vietnamese</a>
    <a href="/Home/LaosIndex/" class="navigation-all nav-link" typeLanguage="@UtilsController.Constant.LAOS">@Lang.laos</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>

}

@section menu{
    <a href="/Home/" class="header-menu-link ">@Lang.Home</a>
    <a href="/Home/EnglishIndex/" class="navigation-all header-menu-link" typeLanguage="@UtilsController.Constant.ENGLISH">@Lang.english</a>
    <a href="/Home/VietnameseIndex/" class="navigation-all header-menu-link" typeLanguage="@UtilsController.Constant.VIETNAMESE">@Lang.vietnamese</a>
    <a href="/Home/LaosIndex/" class="navigation-all header-menu-link" typeLanguage="@UtilsController.Constant.LAOS">@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>
}

<!-- Top -->
<div class="home-top">
    <div class="home-top-bg"></div>
    <div class="home-cover">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                @*<div class="top-left-logo"></div>*@
                <h1 class="top-left-header">
                    <img src="~/Content/assets/imgs/student.png" /><br />
                    <span id="title">USTUDY</span>
                </h1>
                <p class="top-left-text">
                    @Lang.OvercomingAnObstacleWithYouViet
                </p>
                <img class="top-left-image wow  bounceInLeft" data-wow-duration="3s" src="~/Content/assets/imgs/home_travel.png" alt="Avec vous, supprimez la barrière anglaise" />
            </div>

            <div class="col-xs-12 col-sm-6">
                <h1 class="top-right-title">@Lang.ListeningViet</h1>
                <h2 class="top-right-des">
                    @Lang.RegisterWithUnitelEduViet
                </h2>
                @{
                    if (isSub == "true")
                    {
                        <a href="/Common/course?courseType=@UtilsController.Constant.VN_LISTEN" class="top-right-button">
                            @NEducation.Content.Texts.Lang.TryForFree1
                        </a>
                    }
                    else if (profile != null)
                    {
                        <a class="top-right-button" href="#" onclick="registerAction(@UtilsController.Constant.VIETNAMESE); return 0;">
                            @NEducation.Content.Texts.Lang.Register
                        </a>
                    }
                    else
                    {
                        // show register
                        <a class="top-right-button" data-toggle="modal" data-target="#signup-dialog">
                            @NEducation.Content.Texts.Lang.Register
                        </a>
                    }
                }

            </div>
        </div>

    </div>
</div>


<!-- MODAL -->
<style type="text/css">
    #home-video {
        text-align: center;
    }

        #home-video .modal-dialog {
            display: inline-block;
            width: unset;
        }

        #home-video .modal-content {
            padding: 30px;
            border-radius: 10px;
        }

        #home-video .modal-video-close {
            position: absolute;
            right: -8px;
            top: -8px;
            background: #fff;
            border-radius: 50%;
            height: 21px;
            width: 20px;
            cursor: pointer;
            z-index: 2;
        }

            #home-video .modal-video-close i {
                font-size: 25px;
                color: #2e2e2e;
                line-height: 22px;
                transition: all 0.2s linear;
            }

            #home-video .modal-video-close:hover i {
                color: #3c3c3c;
            }

        #home-video iframe {
            max-width: 100%;
            max-height: 100%;
        }

    @@media (max-width: 767px) {
        .home-top .top-left-image {
            max-width: 260px !important;
            margin: 10px auto 20px;
        }
    }
</style>

<script src="~/Content/assets/js/jssor.slider.min.js" type="text/javascript"></script>

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



<script>
    $(document).ready(function () {
        // Optimalisation: Store the references outside the event handler:
        var $window = $(window);
        var $panew = $('#top-wide');
        var $panem = $('#top-m');

        function checkWidth() {
            var windowsize = $window.width();
            if (windowsize > 680) {
                //if the window is greater than 440px wide then turn on jScrollPane..
                $panew.css('display', '');
                $panem.css('display', 'none');
            } else {
                $panew.css('display', 'none');
                $panem.css('display', '');
            }
        }
        // Execute on load
        checkWidth();
        // Bind event listener
        $(window).resize(checkWidth);
    });
</script>