@{
    ViewBag.Title = "Lesson";
}

@using NEducation.Content.Texts

<link type="text/css" rel="stylesheet" href="~/Content/assets/css/product-intro.css" />
<link type="text/css" rel="stylesheet" href="~/Content/assets/css/learning-diary.css" />
<link rel="stylesheet" href="~/Content/assets/css/home-voca.css" />
<link rel="stylesheet" href="~/Content/assets/css/common-lesson-view.css" />
@*<link rel="stylesheet" href="~/Content/assets/css/dialog.css" />*@



@*@using NEducation.Content.Texts;
    @using NEducation.NEduService;*@
@using NEducation.Controllers
@using NEducation.Code
@model NEducation.Models.LessonModel

@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>
            @*<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>
            <a href="/MiniGame" class="header-menu-link ">@Lang.MiniGame</a>
        }
        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>
            @*<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>*@
        }
    }
}


@{
    var controllerLearning = "";
    var msisdn = "";
    var displaySub = "";
    var displayReg = "";
    var displayBuy = "";
    var bought = false;
    var signup = false;
    //var subscribed = false;
    var status = "";
    var subscribeTxt = "";
    msisdn = Session["msisdn"] as string;
    if (msisdn == "" || msisdn == null)
    {
        msisdn = "false";
    }

    // check controller for learning
    controllerLearning = UtilsController.GetCategoryCode(Model.course.categoryId) == "VOCABULARY" ? "Voca" :
       UtilsController.GetCategoryCode(Model.course.categoryId) == "GRAMMAR" ? "Grammar" :
       UtilsController.GetCategoryCode(Model.course.categoryId) == "LISTEN" ? "Listening" : "Listening";


    // disable buycourse Session["account"] is null
    if (Session["profile"] != null)
    {
        signup = true;
        displaySub = "none";
        displayBuy = Model.course.isLearn == "-1" ? "inherit" : "none";
        bought = Model.course.isLearn == "-1" ? false : true;
        displayReg = Session["isSub"] as string == "true" ? "none" : "inherit";

    }
    else
    {
        displayBuy = "none";
        displaySub = "none";
        displayReg = "inherit";
    }
}

<!-- Body -->
<div class="main-body">
    <div class="main-body-container product-detail-container">

        <!-- Banner -->
        <div class="product-detail-banner">
            <img class="img-banner" alt="Prepare For National Exam" src="@Model.course.logoPath" />
        </div>

        <!-- Product detail body -->
        <div class="product-detail-body">
            <!-- Infor -->
            <div class="product-detail-infor">
                <div class="block-infor">
                    <h2 class="infor-name">@Model.course.name</h2>
                    <p class="infor-level">@Model.course.description</p>
                </div>
                <form class="block-button">
                    @Html.AntiForgeryToken()
                    <a href="javascript:void(0)" style="display: @displaySub" data-toggle="modal" data-target="#signup-dialog" class="button-renew" id="sign-up-button">
                        @Lang.SignUp
                    </a>
                    @*<a class="button-ranking" style="display: @displayBuy"
                           data-target="buycourse-dialog"
                           onclick="BuyCourse(@Model.course.id.ToString());"
                           href="#" id="buy-button">
                            Buy
                            (@Model.course.fee HTG)
                        </a>*@

                    @*<a id="buy-button" class="button-ranking" style="display: @displayBuy"
                           data-toggle="modal"
                           data-target="#buycourse-dialog"
                           onclick="BuyCourse()"
                           href="#">
                            @Lang.Buy
                        </a>*@

                    @{
                        if (msisdn != "false")
                        {
                            @*<a id="sub-button" class="button-renew btn-subscribe"
                               style="display: @displayReg"
                               href="#">
                                @Lang.Subscriber
                            </a>*@
                        }
                        else
                        {
                            <a class="button-renew"
                               style="display: @displayReg"
                               data-toggle="modal"
                               data-target="#signup-dialog"
                               href="#">
                                @Lang.Subscriber
                            </a>
                        }
                    }

                </form>
                <div class="clearfix"></div>
                <div class="product-tab-group">
                    <a data-toggle="tab" id="product-tab-lesson" class="product-tab-lesson product-tab-active" href="#tab-lesson">@Lang.Lesson <span id="product-tab-lesson">@Model.course.listLesson.Count</span></a>
                    <a data-toggle="tab" id="product-tab-intro" class="product-tab-intro" href="#tab-intro">@Lang.Introduction</a>
                </div>
            </div>
            <!-- Lesson -->
            <div class="tab-content">
                <div class="product-detail-lesson tab-pane fade in active" id="tab-lesson">
                    <div class="row lesson-list">
                        @for (int i = 0; i < Model.course.listLesson.Count; i++)
                        {
                            Lesson lesson = Model.course.listLesson[i];
                            <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3 lesson-item">
                                <div style="max-width:200px;">
                                    <div class="lesson-image">
                                        <img src="@lesson.logoPath" alt="@lesson.name" alt="@lesson.name">
                                    </div>
                                    <p class="lesson-name">@lesson.name</p>
                                    @if (bought || (i == 0 && signup))
                                    {
                                        <a href="@Url.Action("Learning", controllerLearning, new { lessonId = lesson.id, lessonName = lesson.name })" class="lesson-button button-learn-now">
                                            @Lang.LearnNow
                                        </a>
                                    }
                                    else if (!signup)
                                    {
                                        <a href="#" class="lesson-button button-lock">
                                            @Lang.PleaseSignIn
                                        </a>
                                    }
                                    else
                                    {
                                        <a href="#" class="lesson-button button-lock">
                                            @Lang.Locked
                                        </a>
                                    }
                                </div>

                            </div>
                        }
                    </div>
                </div>
                <div class="product-detail-lesson tab-pane fade" id="tab-intro">
                    @Html.Raw(Model.course.description)
                </div>
            </div>
        </div>
    </div>

    <div id="buycourse-dialog" class="modal fade signup" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <a class="modal-button-close" href="javascript:void(0)" data-dismiss="modal"></a>
                @*<button type="button" class="close" data-dismiss="modal">&times;</button>*@
                <div class="modal-body">
                    <div class="common-lesson-view-confirm">
                        <div class="row">
                            <div class="col-md-12 col-lg-6">

                                <form class="body-box-modal">
                                    <h3 class="members-title"> <span class="login-title">@Lang.EnterOTP</span></h3>
                                    <hr />

                                    <div id="otp-result" class="text-red">@Lang.otpWasSent</div>

                                    <div style="position:relative;">
                                        <input id="otpData" class="input-area" type="password" placeholder="OTP" name="otp" />
                                        <div class="form-control-position icon-float-left" style=" top: 5px;">
                                            <i class="fa fa-2x fa-lock"></i>
                                        </div>
                                    </div>

                                    <a href="#" class="button btn-signup" onclick="ConfirmOtpClick()">@Lang.Confirm</a>


                                    <div style=" margin: 10px 0; margin-top: 50px;">
                                        <a class="des-a"><i class="fas fa-check-square"></i> @Lang.otpProblem </a><a class="link-button" onclick="ResentOtp(); return 0;">@Lang.resentOtp</a>
                                    </div>
                                </form>

                                @*<div class="common-lesson-view-sub-register-confirm-otp">
                                        <div class="wrap-confirm" style="position:relative;">
                                            <input id="otpSubData" class="input-area" type="text" placeholder="OTP" name="otp" />
                                            <div class="form-control-position icon-float-left" style=" top: -12px;">
                                                <i class="fa fa-2x fa-lock"></i>
                                            </div>

                                            <div style="text-align: center;display: inline-block; width:100%;">
                                                <a class="button button-dialog-signup-confirm btn-dialog-signup-confirm-register otpButton" href="#"
                                                   onclick="SubConfirmOtpClick()">@Lang.Confirm</a>
                                                <a class="button button-dialog-signup-confirm btn-dialog-signup-confirm-register otpButton" href="#" style=" background: gray;"
                                                   onclick="SubCancelOtpClick()">@Lang.Cancel</a>
                                            </div>
                                        </div>
                                    </div>*@

                            </div>
                            <div class="col-md-12 col-lg-6 d-sm-none image-box-area">
                                <img class="image-area" src="~/Content/assets/imgs/img-home-02.png" alt="Image" />
                            </div>
                        </div>
                    </div>


                    @*<h4>@Lang.EnterOTP</h4>*@
                    @*<div class="common-lesson-view-confirm-otp" style="width:100%;">
                            <div class="wrap-confirm" style="position:relative;">
                                <input id="otpData" class="input-area" type="text" placeholder="OTP" name="otp" />
                                <div class="form-control-position icon-float-left" style=" top: -12px;">
                                    <i class="fa fa-2x fa-lock"></i>
                                </div>
                                <div style="text-align: center;display: inline-block; width:100%;">
                                    <a class="button button-dialog-signup-confirm btn-dialog-signup-confirm-register otpButton" href="#"
                                       onclick="ConfirmOtpClick()">@Lang.Confirm</a>
                                    <a class="button button-dialog-signup-confirm btn-dialog-signup-confirm-register otpButton" href="#" style="background: gray;"
                                       onclick="CancelOtpClick()">@Lang.Cancel</a>
                                </div>
                            </div>
                        </div>*@
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="~/Content/assets/js/product-intro.js"></script>
<script type="text/javascript">
    $('.product-tab-intro').click(function () {
        console.log("product-tab-intro click");
        document.getElementById('product-tab-intro').className += " product-tab-active";
        document.getElementById('product-tab-lesson').className -= " product-tab-active";
    })
    $('.product-tab-lesson').click(function () {
        console.log("product-tab-intro click");
        document.getElementById('product-tab-lesson').className += " product-tab-active";
        document.getElementById('product-tab-intro').className -= " product-tab-active";
    })
    function RenewCousre(courseId) {
        $.ajax({
            url: urlConfig("/Home/RenewCourse"),
            data: {
                __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val(),
                courseId: courseId
            },
            type: "POST"
        }).success(function (data) {
            if (data.error_code != "0") {
                // success
                $('#message-dialog').modal('show');
                $('#message-content').html(data.error_content);
            } else {
                $('#message-dialog').modal('show');
                $('#message-content').html(data.error_content);
                //window.location.href = "/Voca/Lesson?courseId=" + courseId;
            }
        });
    };

    // buyCourse is only valid with existed user profile, user must login or signup before
    function BuyCourse() {
        console.log("BuyCourse");
        if (@msisdn != "false") {
            $.ajax({
                url: urlConfig("/Home/BuyCourse"),
                data: {
                    __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val(),
                    courseId: @Model.course.id.ToString(),
                    phone: @msisdn,
                    courseChoose: 7
                },
                type: "POST"
            }).success(function (data) {
                if (data.error_code != "100") {
                    // success
                    $('#buycourse-dialog').modal('hide');
                    $('#message-dialog').modal('show');
                    $('#message-content').html(data.error_content);
                    //document.getElementById('buy-button').style.display = "none";
                } else {
                    // to test, bypass input otp
                    //document.getElementById('buy-button').style.display = "none";
                    $('.common-lesson-view-confirm-otp').css('display', 'block');
                }
            });
        } else {
            $('#message-dialog').modal('show');
            $('#message-content').html("@Lang.InvalidMsisdn");
        }
    }

    @*function BuyCourse() {
        console.log("BuyCourse")

        var phone = document.getElementById('phoneNumber').value;
        // check data input
        if (phone == null) {
            $('#message-dialog').modal('show');
            $('#message-content').html("Please check your input data");
        } else {
            $.ajax({
                url: urlConfig("/Home/BuyCourse"),
                data: {
                    __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val(),
                    courseId: @Model.course.id.ToString(),
                    phone: phone,
                    courseChoose:  7
                },
                type: "POST"
            }).success(function (data) {
                if (data.error_code != "100") {
                    // success
                    $('#buycourse-dialog').hide();
                    $('#message-dialog').modal('show');
                    $('#message-content').html(data.error_content);
                    document.getElementById('buy-button').css('display', 'none');

                } else {
                    // to test, bypass input otp
                    document.getElementById('buy-button').css('display', 'none');
                    $('.common-lesson-view-confirm-otp').show();
                    $('.phoneButton').hide();
                    $('#phoneNumber').hide();
                    //window.location.href = "/Voca/Lesson?courseId=" + courseId;
                }
            });
        }
    };*@

    function ConfirmOtpClick() {
        var otpConfirm = document.getElementById("otpData").value;
        if (otpConfirm == "") {
            $('#message-dialog').modal('show');
            $('#message-content').html("@ErrCode.WrongOTP");
        } else {
            $.ajax({
                url: urlConfig("/Home/BuyCourse"),
                data: {
                    __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val(),
                    courseId: @Model.course.id.ToString(),
                    phone: @msisdn,
                    courseChoose:  7,
                    otpConfirm: otpConfirm
                },
                type: "POST"
            }).success(function (data) {
                if (data.error_code != "0") {
                    // success
                    //$('#message-dialog').modal('show');
                    //$('#message-content').html(data.error_content);
                    $("#otp-result").html(data.error_content);
                } else {
                    $('#buycourse-dialog').modal('hide');
                    $('#message-dialog').modal('show');
                    $('#message-content').html(data.error_content);
                    $('#buy-button').css('display', 'none');
                }
            });
        }
    }

    function CancelOtpClick() {
        $('#buycourse-dialog').hide();
        Reload();
    }
</script>