@model MentorsTeachers.Models.CatsAndTeachersAndOneLesson

@{
    Layout = "~/Views/Shared/_LoggedInLayout.cshtml";
}


<div class="container instrument">

    <ul id="instrument-list">
        @foreach (MentorsTeachers.Models.CategoryModel category in Model.categories)
        {
            <li id=@category.CategoryId class="current-instrument">
                <img src=@category.Picture>
                <h4 id="instrument-cat">@category.CategoryName</h4>
            </li>
        }
    </ul>
</div>

<div class="container" id="student-teachers">
    <h3>My Teachers</h3>

    <ul id="student-teacher">

        @foreach (var teacher in Model.teachers.Where(x => x.categoryId == ViewBag.selectedCategory).Distinct())
        {
            <li id=@teacher.ID class="current-teacher">
                <img src=@teacher.PictureUrl>
                <h4>@teacher.FirstName @teacher.LastName</h4>
            </li>
        }
    </ul>

</div>

<div class="container" id="lesson-body">

    <div id="avatar">

        <img src="http://placehold.it/300.png/09f/fff">
        <h4>You</h4>

    </div>

    <div id="post-box">

        <textarea cols="50" rows="5" placeholder="Write message"></textarea>

        <button class="btn btn-default" id="upload-video-btn">Upload Video</button>

        <button class="btn btn-default" id="post-btn">Post</button>

    </div>

    <div class="container" id="chat-area">

        @foreach (var message in Model.lesson.messages)
        {
            if (message.IsFromTeacher)
            {
                <ul id="teacher-post">
                    <li id="teacher-video">
                        @if (!string.IsNullOrEmpty(message.VideoUrl))
                        {
                            <iframe width="350" height="200" src=@message.VideoUrl frameborder="0" allowfullscreen></iframe>
                        }
                        @if (!string.IsNullOrEmpty(message.Text))
                        {
                            <p id="teacher-message">@message.Text</p>
                        }
                    </li>
                    <li id="teacher-avatar">
                        <img src=@Model.firstSelectedTeacherPicUrl>
                        <h4>@Model.firstSelectedTeacherName</h4>
                    </li>
                </ul>
            }
            else
            {
                <ul id="student-post">
                    <li id="student-avatar">
                        <img src=@Model.myPicUrl>
                        <h4>You</h4>
                    </li>
                    <li id="student-video">
                        @if (!string.IsNullOrEmpty(message.VideoUrl))
                        {
                            <iframe width="350" height="200" src=@message.VideoUrl frameborder="0" allowfullscreen></iframe>
                        }
                        @if (!string.IsNullOrEmpty(message.Text))
                        {
                            <p id="student-message">@message.Text</p>
                        }
                    </li>
                </ul>
            }
        }
        @*<ul id="teacher-post">
                <li id="teacher-video">

                    <iframe width="350" height="200" src="https://www.youtube.com/embed/OWsyrnOBsJs" frameborder="0" allowfullscreen></iframe>

                    <p id="teacher-message">You're doing great! Keep practicing those ladders</p>

                </li>

                <li id="teacher-avatar">
                    <img src="http://placehold.it/300.png/09f/fff">
                    <h4>Mark Openheimer</h4>
                </li>
            </ul>*@

        @*<ul id="student-post">

                <li id="student-avatar">

                    <img src="http://placehold.it/300.png/09f/fff">
                    <h4>You</h4>
                </li>

                <li id="student-video">
                    <iframe width="350" height="200" src="https://www.youtube.com/embed/K1LHMG__bws" frameborder="0" allowfullscreen></iframe>
                    <p id="student-message">It feels as though I'm doing better stairway to heaven than last time. What do you think</p>
                </li>

            </ul>*@

    </div>



</div>

@section Scripts {
    <script type="text/JavaScript">
    $(document).ready(function () {
        var globalCategoryId = @ViewBag.selectedCategory;
        var globalTeacherId = @ViewBag.selectedTeacher;
        var globalLessonId = -1;
        var data = @(Html.Raw(Json.Encode(Model)));

            $(".current-instrument").click(function (evt) {
                var activeId = this.id;
                if (activeId == globalCategoryId)
                    return;
                globalCategoryId = activeId;
                //alert(activeId);
                document.getElementById("student-teacher").innerHTML = "";
                for (var key in data.teachers)
                {
                    if (data.teachers[key].categoryId == activeId)
                    {
                        var teacher = data.teachers[key];
                        document.getElementById("student-teacher").innerHTML += "<li id=" + teacher.ID + " class='current-teacher'> <img src=" + teacher.PictureUrl + "> <h4> " + teacher.FirstName + " " + teacher.LastName + "</h4> </li>";
                    }
                }
            })

            $(document).on('click', ".current-teacher", function (evt) {
                var activeTeacherId = this.id;
                //alert(activeTeacherId);
                if (activeTeacherId == globalTeacherId)
                    return;
                globalTeacherId = activeTeacherId;
                document.getElementById("chat-area").innerHTML = "";
                // put spinner
                var form_data = {

                    teacherId: activeTeacherId,
                    categoryId: globalCategoryId
                };
                $.ajax({
                    type: "POST",
                    url: "/Lesson/OneLesson",
                    data: form_data,
                    success: function (response) {
                        console.log(response);
                        if (response.ID > 0) {
                            globalLessonId = response.ID;
                            var chatArea = document.getElementById("chat-area");
                            for (var key in response.messages)
                            {
                                var message = response.messages[key];
                                var str = "";
                                if (message.IsFromTeacher == true)
                                {
                                    str += "<ul id='teacher-post'> <li id='teacher-video'>";

                                    if (message.VideoUrl)
                                    {
                                        str += "<iframe width='350' height='200' src=" + message.VideoUrl + "frameborder='0' allowfullscreen></iframe>";
                                    }
                                    if (message.Text)
                                    {
                                        str += "<p id='teacher-message'>" + message.Text +"</p>";
                                    }
                                        str += "</li><li id='teacher-avatar'><img src=" + response.teacherPicture + "><h4>" + response.teacherName + "</h4></li></ul>"
                                }
                                else
                                {
                                    str += "<ul id='student-post'><li id='student-avatar'><img src=" + response.myPicture + "><h4>You</h4></li><li id='student-video'>";
                                    if (message.VideoUrl)
                                    {
                                        str += "<iframe width='350' height='200' src=" + message.VideoUrl + "frameborder='0' allowfullscreen></iframe>";
                                    }
                                    if (message.Text)
                                    {
                                        str += "<p id='student-message'>" + message.Text +"</p>";
                                    }
                                    str += " </li></ul>"
                                }
                                chatArea.innerHTML += str;
                            }
                        }
                        else {
                            // show error message
                            alert('Something went wrong. Please try again');
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(xhr.status);
                        alert(thrownError);
                        alert(xhr.responseText);
                    },
                    dataType: "json"//set to JSON
                })

            })
        });
    </script>
}