@{
    ViewBag.Title = "Laos";
    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>
}

<!-- Bottom -->
<div class="home-bottom">
    <img class="home-method-bg" src="~/Content/assets/imgs/home_content_bg.svg" />
    <div class="home-cover">
        <img class="bottom-image  wow  bounceIn" data-wow-duration="3s" alt="Rinh VOCA Music về nhà nào" src="~/Content/assets/imgs/home_register.png" />
        <p class="bottom-title">
            @Lang.DoYouWantToGoodAtLaos
        </p>
        <p class="bottom-text">
            @Lang.RegisterWithUnitelEduLao
        </p>
        @{
            if (isSub == "true")
            {
                <a class="bottom-button" href="/Common/Course?courseType=@UtilsController.Constant.LAO_LISTEN">
                    @Lang.JoinWithUs
                </a>
            }
            else if (profile != null)
            {
                <a class="bottom-button" href="#" onclick="registerAction(@UtilsController.Constant.LAOS); return 0;">
                    @NEducation.Content.Texts.Lang.Register
                </a>
            }
            else
            {
                <a class="bottom-button" data-toggle="modal" data-target="#signup-dialog" href="#">
                    @NEducation.Content.Texts.Lang.Register
                </a>
            }
        }

    </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%;
        }
</style>
@*<div class="modal fade" id="home-video" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <span class="modal-video-close" data-dismiss="modal"><i class="fa fa-times-circle"></i></span>
                <iframe width="680" height="495" src="https://www.youtube.com/embed/Fd7xJx4Qf9Q?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </div>
        </div>
    </div>*@

<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 > 440) {
                //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>