@model CourseDetail
@using Nop.Core
@using Nop.Core.Domain.Catalog
@inject CatalogSettings catalogSettings
@inject IWorkContext workContext
@{

}
@{
    var sectionCount = 1;
    var lessonCount = 1;
    Layout = "_CourseDetailRoot";

    NopHtml.AddTitleParts(Model.Name);

    NopHtml.AddCssFileParts("~/lib_npm/bootstrap/css/bootstrap.min.css");
    NopHtml.AddCssFileParts("~/lib_npm/@fortawesome/fontawesome-free/css/all.min.css");
    NopHtml.AddCssFileParts("~/Plugins/Misc.SimpleLMS/Content/Public/Productstyle.css");
    //<link rel="stylesheet" href="~/Plugins/Misc.SimpleLMS/Content/Public/Productstyle.css" />

    NopHtml.AddScriptParts(ResourceLocation.Footer, "~/lib_npm/bootstrap/js/bootstrap.min.js");


}


<nav class="navbar navbar-expand-lg navbar-dark cstm-nav bg-dark">


    @await Component.InvokeAsync("Logo")

    @*<a class="navbar-brand" href="@Url.Action("mycourses","customer")">@T("SimpleLMS.MyCourses")</a>*@
    <span class="course-title text-light pl-2"> @Model.Name</span>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link">
                    <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="--value:@(Model.Progress);height:30px;width:30px;"></div>
                    @Model.CompletedLessons @T("SimpleLMS.Of")  @Model.TotalLessons @T("SimpleLMS.Completed")
                </a>
            </li>
        </ul>
    </div>
</nav>
<div class="page-wrapper">
    <section class="course-page">
        <div class="hide-overflow-x">
            <div class="row">
                <div class="col-md-9 pr-0">
                    @if (Model.Sections.Count == 0)
                    {
                        <div class="m-3 p-3">
                            <p class="text-danger">  @T("SimpleLMS.NoLessonsAvailable")</p>
                        </div>
                    }
                    <div id="loaddiv">

                    </div>
                </div>
                <div class="col-md-3 pl-md-0">
                    <div class="accordion vh-100 overflow-auto" id="accordion@(Model.Id)">
                        @foreach (var section in Model.Sections)
                        {
                            <div class="card">
                                <div class="card-header p-0" id="heading@(section.Id)">
                                    <h2 class="p-2 m-0">
                                        <button class="btn btn-link btn-block text-left text-decoration-none text-dark" type="button" data-toggle="collapse" data-target="#collapse@(section.Id)" aria-expanded="true"
                                                aria-controls="collapse@(section.Id)">
                                            <strong>   @T("SimpleLMS.Section") @(sectionCount++): @(section.Title)</strong>
                                            <i class="fa fa-caret-down"></i>


                                            <div class="duration">
                                                @(section.CompletedLessons)  / @(section.TotalLessons)
                                                @(section.Duration>0? "| " + section.Duration + " " +T("SimpleLMS.Minutes"):"")
                                            </div>

                                        </button>
                                    </h2>
                                </div>
                                <div id="collapse@(section.Id)" class="collapse show" aria-labelledby="heading@(section.Id)">
                                    <div class="card-body p-0">

                                        @foreach (var lesson in section.Lessons)
                                        {<div class="course-lesson p-2 pl-3" id="lesson_@lesson.Id">
                                                <div class="form-check">

                                                    <label class="vertical-align">
                                                        <input type="checkbox" data-course="@(Model.Id)" data-section="@(section.Id)" @(lesson.IsCompleted ? "checked" : "")
                                                               data-lesson="@(lesson.Id)" class="form-check-input is-complete" data-iscompleted="@lesson.IsCompleted" />
                                                    </label>

                                                    <span>
                                                        <a class="showCource text-secondary text-decoration-none p-1" style="max-width:100%;" href="javascript:void(0)" data-lesson="@lesson.Id" data-course="@lesson.CourseId">
                                                            @(lessonCount++). @lesson.Name
                                                        </a>
                                                    </span>
                                                    <div class="duration ml-2">
                                                        <small class="text-muted">
                                                            @if (lesson.LessonType == Nop.Plugin.Misc.SimpleLMS.Domains.LessonType.Video)
                                                            {
                                                                <i class="fa fa-play-circle pr-1" aria-hidden="true"></i>
                                                            }
                                                            @if (lesson.LessonType == Nop.Plugin.Misc.SimpleLMS.Domains.LessonType.Text)
                                                            {
                                                                <i class="fa fa-sticky-note"></i>
                                                            }

                                                            @(lesson.Duration>0? lesson.Duration+ " " + @T("SimpleLMS.Minutes"):"")


                                                        </small>
                                                    </div>
                                                </div>
                                            </div>
                                        }

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


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

<script type="text/javascript">
$(document).ready(function () {

        $(function () {
            $(document).ajaxStart(function () {
                $("#loader").show();
            });

            $(document).ajaxStop(function () {
                $("#loader").hide();
            });

            $(document).ajaxError(function () {
                $("#loader").hide();
            });
        });


        $(".showCource").on("click", function () {
            let lessonId = $(this).data("lesson");
            let courseId = $(this).data("course");
            loadLesson(lessonId, courseId);
        });

        $(".is-complete").change(function () {

            let isChecked = $(this).is(":checked");

            let lessonId = $(this).data("lesson");
            let courseId = $(this).data("course");
            let sectionId = $(this).data("section");

            console.log($(this).data("lesson"));

            $.ajax({
                type: "POST",
                url: '/customer/updatelessonstatus',
                data: {
                    courseId: courseId,
                    sectionId: sectionId,
                    lessonId: lessonId,
                    isCompleted: isChecked
                },
                headers: {
                    "RequestVerificationToken":
                        $('input:hidden[name="__RequestVerificationToken"]').val()
                },
                success: function (response) {

                },
                failure: function (response) {
                    alert(JSON.stringify(response));
                    $(this).prop("checked", !isChecked);

                },
                error: function (response) {
                    alert(JSON.stringify(response));
                    $(this).prop("checked", !isChecked);
                }
            });

        });

        $('.collapse').collapse({
            toggle: false
        });

    loadLesson('@Model.CurrentLesson','@Model.Id');



    });
    function loadLesson(lessonId, courseId) {
        $.get('/Customer/LessonContent?lessonId=' + lessonId + '&courseId=' + courseId, function (data) {
            $("#loaddiv").html("");
            $("#loaddiv").html(data);
        });

        $('.course-lesson').removeClass("course-lesson-active");
        $('#lesson_' + lessonId).addClass("course-lesson-active");
    }



</script>
<script src="https://player.vimeo.com/api/player.js"></script>

