<%@ page language="C#" autoeventwireup="true" masterpagefile="~/Pages/Common/MasterPages/MobileViewMasterPage.master" inherits="Pages_Communication_ChatGroupMaster, App_Web_hl5zoy5y" enableEventValidation="false" viewStateEncryptionMode="Never" %>



<asp:Content ID="Content1" ContentPlaceHolderID="CP" runat="Server">


    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



    <!-- Latest compiled JavaScript -->

    <style>
        @import url(https://fonts.googleapis.com/css?family=Lato:400,700);

        .sidebar-img {
            float: left;
            height: 32px;
            margin-top: 0px;
            width: 32px;
            margin-right: 10px;
        }

        .sidebar-show {
            margin: unset;
            width: 78% !important;
        }

        body {
            background: #000;
            margin: 0 0px;
            position: relative !important;
            right: 0px !important;
            z-index: auto !important;
            /*margin: 0% 17% !important;*/
        }

        .sidebar-replace {
            margin: 0 auto;
        }





        .text-area-new {
            background-color: #fff;
            color: #000;
            border-radius: 50px;
        }

        .modal-content-area {
            padding: 10px;
        }

        .Receiverdownload {
            float: right !important;
            color: #37465b;
            padding-left: 14px;
        }

        .Senderdownload {
            float: right !important;
            color: white;
            padding-left: 14px;
        }

        .ReceiverLabel {
            color: #37465b;
        }

        .SenderLabel {
            color: white;
        }

        .new-Image {
            width: 100%;
            height: 160px;
            padding: 10px 0px;
        }

        .input-button-style {
            padding: 10px 0px 10px 10px;
        }

        .approve {
            color: green !important;
            font-size: 17px;
            padding: 10px;
        }

        :focus {
            outline: -webkit-focus-ring-color auto 0px;
        }

        .reject {
            color: red !important;
            font-size: 17px;
            padding: 10px;
        }

        .Image-Div {
            width: 34% !important;
        }

        .input-button-style {
            padding: 10px;
        }

        input.new-button-type {
            background-color: #94c2ed;
            color: #fff;
            padding: 15px 7px;
            width: 100%;
        }

        ul#ChatScreen li {
            list-style-type: none;
        }



        *, *:before, *:after {
            box-sizing: border-box;
        }

        body {
            /*background: #C5DDEB;*/
            font-size: 13px;
            font-family: Helvetica;
            padding: 34px 0;
            color: #6e6c6c;
            background-image: url('../../../Images/FolderIcon/chat-images/vidyalaya-chat.jpg');
            position: absolute;
            /*right: 0px !important;*/
            z-index: 999;
            width: 100% !important;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .container {
            width: 100%;
            padding-right: 0px !important;
            padding-left: 0px !important;
            background-color: #fff;
            border-radius: 10px;
            height: 500px;
        }

        @media (min-width: 1340px) {
            .container {
                max-width: 1340px;
            }
        }

        @media (min-width: 1200px) {
            .container {
                max-width: 1200px;
            }
        }

        ul#ChatScreen {
            padding-left: 15px;
        }

        a:not([href]):not([tabindex]) {
            color: #878787;
            text-decoration: none;
            border-bottom: 1;
        }

        .people-list {
            width: 25%;
            float: left;
        }

        ul#GroupList li.clearfix {
            border-bottom: 1px solid #f1f1f1;
        }
        /*li.clearfix {
    border-bottom: 2px solid #fff;
}*/

        .list {
            list-style: none;
            height: 420px;
            overflow-y: auto;
            padding-top: 0px;
        }

        .search {
            padding: 20px;
        }

        input {
            border-radius: 3px;
            border: none;
            padding: 14px;
            color: white;
            background: #6A6C75;
            width: 90%;
            font-size: 14px;
        }

        .fa-search {
            position: relative;
            left: -25px;
        }

        ul {
            height: auto;
        }



        li {
            padding: 5px;
            line-height: 2;
        }

        i.fa.fa-user {
            padding-right: 5px;
            font-size: 18px;
        }


        img {
            float: left;
            height: 50px;
            margin-top: -10px;
            width: 50px;
        }


        .about {
            float: left;
            /*margin-top: 10px;*/
        }

        .about {
            padding-left: 8px;
        }

        .status {
            color: #92959E;
        }



        .chat {
            width: 75%;
            float: left;
            /*background: #F2F5F8;*/
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            color: #434651;
            background: #efe7dd url(https://cloud.githubusercontent.com/assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpg) repeat;
        }

        .chat-header {
            padding: 10px 15px;
            border-bottom: 1px solid #f1f1f1;
            border-top-left-radius: 10px;
        }

        i.fas.fa-plus-circle {
            font-size: 18px;
        }

        img {
            float: left;
        }

        .chat-about {
            float: left;
            padding-left: 10px;
            margin-top: 6px;
        }

        .chat-with {
            font-weight: bold;
            font-size: 16px;
        }

        div.mainchatname {
            background-color: #e7e6e6;
            border-top-right-radius: 10px;
        }

        .chat-num-messages {
            color: #92959E;
        }

        .fa-star {
            float: right;
            color: #D8DADF;
            font-size: 20px;
            margin-top: 12px;
        }


        .chat-history {
            padding: 0px 0px 0px;
            /*border-bottom: 2px solid white;*/
            overflow-y: scroll;
            height: 375px;
        }

        .message-data {
            margin-bottom: 15px;
        }

        .message-data-time {
            color: #5c5a5a;
            padding-left: 6px;
        }

        .message {
            color: #1d1c1c;
            padding: 12px 20px;
            line-height: 26px;
            font-size: 16px;
            border-radius: 7px;
            width: fit-content;
            position: relative;
            margin-right: 2%;
        }

        &:after {
            bottom: 100%;
            left: 7%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-bottom-color: $green;
            border-width: 10px;
            margin-left: -10px;
        }

        span.message-data-name {
            font-size: 15px;
            font-weight: bold;
        }


        .my-message {
            background: #f8f8f8;
        }

        .other-message {
            background-color: #9da4ae;
            color: #ffffff;
        }

        &:after; {
            border-bottom-color: #94C2ED;
            left: 93%;
        }


        .chat-message {
            padding: 30px;
        }

        textarea {
            width: 100%;
            border: none;
            padding: 10px 20px;
            font: 14px/22px "Lato", Arial, sans-serif;
            margin-bottom: 10px;
            border-radius: 5px;
            resize: none;
        }

        .fa-file-o, .fa-file-image-o {
            font-size: 16px;
            color: #92959E;
            cursor: pointer;
        }

        button {
            float: right;
            color: #94C2ED;
            font-size: 16px;
            text-transform: uppercase;
            border: none;
            cursor: pointer;
            font-weight: bold;
            background: #F2F5F8;
        }

        &:hover {
            color: #483d8b;
        }


        .online, .offline, .me {
            margin-right: 3px;
            font-size: 10px;
        }

        .online {
            color: #000;
        }

        ul#GroupList li img {
            width: 32px;
            height: 15%;
            /* line-height: 8; */
            margin-top: 0px;
        }

        .offline {
            color: #E38968;
        }

        .me {
            color: #000;
        }

        .align-left {
            text-align: left;
        }

        .align-right {
            text-align: right;
        }

        .float-right {
            float: right;
        }

        .clearfix:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 0px;
            border: 1px solid #888;
            width: 45%;
            border-radius: 10px;
            max-height: 560px;
        }

        .close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover {
            color: #fff;
            text-decoration: none;
            opacity: .75;
        }

        .close {
            color: #aaaaaa;
            font-size: 28px;
            font-weight: bold;
            right: 0;
            position: absolute;
            top: 0;
            margin-right: 10px;
            padding-top: 7px;
        }

            .close:hover,
            .close:focus {
                color: #000;
                text-decoration: none;
                cursor: pointer;
            }

        .h2 {
            padding-top: 4px;
            padding-left: 16px;
            color: inherit;
        }

        .header {
            color: #fff !important;
            background-color: #37465b !important;
            padding: 0.01em 16px;
            position: relative;
            border-bottom: 1px dotted #6c757d;
            height: 50px;
        }

        .RadioButton {
            color: black;
            width: 100%;
            padding-top: 20px;
            font-size: 17px;
        }

        .Radio {
            width: 30px;
            height: 15px;
        }

        .searchlabel {
            /*width: 200px;*/
            float: left;
            margin: 0 20px 0 0;
        }

        .searchtext {
            /*width: 200px;*/
            padding: 5px;
            border-bottom-style: groove;
            background-color: white;
            color: black !important;
        }

        .searchspan {
            display: block;
            margin: 0 0 3px;
            font-size: 1.2em;
            font-weight: bold;
            color: #464646;
        }

        .SearchButton {
            padding-top: 5px;
            text-align: center;
        }

        .searchtable {
            max-height: 150px;
            color: black;
        }


        .pagination li a {
            display: inline-block !important;
            padding: 0px 11px !important;
            line-height: 30px !important;
        }

            .pagination li a img {
                width: 100%;
                height: 100%;
            }

        .side#menu {
            position: fixed;
            top: 35px;
            right: 0;
            width: 22%;
            height: 60%;
            background: White;
            border-radius: 5px;
            z-index: 1;
            min-height: 500px;
            /* max-height: 700px; */
        }

            .side#menu ul {
                margin: 0;
                padding: 0;
                overflow-y: auto;
                height: 415px;
            }

                .side#menu ul li {
                    list-style: none;
                    display: block;
                    line-height: 30px;
                    border: 1px solid #f8f5f547;
                    font-size: 15px;
                    font-weight: 500;
                }

                    .side#menu ul li.active {
                        background: #fbce52;
                    }

                    .side#menu ul li a {
                        padding: 6px 0;
                        color: #FFF;
                        font-size: 14px;
                        font-weight: bold;
                        text-transform: uppercase;
                        display: block;
                        text-decoration: none;
                        -webkit-transition-property: all;
                        -webkit-transition-duration: 0.1s;
                        -webkit-transition-timing-function: ease-out;
                        -moz-transition-property: all;
                        -moz-transition-duration: 0.1s;
                        -moz-transition-timing-function: ease-out;
                        -ms-transition-property: all;
                        -ms-transition-duration: 0.1s;
                        -ms-transition-timing-function: ease-out;
                        -o-transition-property: all;
                        -o-transition-duration: 0.1s;
                        -o-transition-timing-function: ease-out;
                        transition-property: all;
                        transition-duration: 0.1s;
                        transition-timing-function: ease-out;
                    }

                    .side#menu ul li:hover {
                        border-bottom: 1px solid #e4e4e4;
                    }

                    .side#menu ul li a:hover {
                        color: #e4e4e4;
                    }
        /*.menu_icon {
  position: fixed;
  right: 20px;
  top: 20px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAASCAYAAAADr20JAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAe5JREFUeNrUl0tLQkEUx+eGUPSggoi+Qd8hiiKyKBVJE7QXLWoV9FGCIChol1AQJlS7Fu0LWgRtKoJa9cBMxWdZt/+Jc2GymyncuXAHfgrOnPGeex7/GU3X9SchRLNQNy5Av4X70bOugTOwVadtCPjAitDVjysgLGSV982DSB12E+CVbaMueH8CmhRG/Nri/Y7BHOgC24B8iP5j4wW7oBVkwZGwOBp2MUAlKkU+XGXtGEjy2gzw0e9OdZwYBi/sUAlMm6wZB2npBQWMOSc7TgyBZ8mxkDTnll4MRdov22r46EHOawpr/B0kFO4/AvZAJ8iDGZAB+6ADFLknxH5YwfGs4q5+blPaG5HPcYSNSAfMbBrge4tQO9qE+kHKNAWSrPP0nwUwD+JmBi5OgUaFD3Ur7BkflMByMoPyX4u17w7n/DHIdd7NNf3JkU9z1A9/WTi8qxudPSF19iAYlWSMan6y0s7pTtNB5pEdLFZoOWl4iufo21MpZ72K5YxS705Resf46PoGFk2OrnQh2eGjao6l7sBI9bJiObtUEOk+8MD7F8BslbUe6XKS4suKsON2dmOx027pnE5BW6jBxs+1bmh7kORsU7Gc3Vu8n5e7dwks1XAzE5zeEb7NtYOAE+WM6nUdnIKNOm3DwA+WvwQYAAWqZfqMuV0VAAAAAElFTkSuQmCC) no-repeat;
  width: 30px;
  height: 18px;
}*/
    </style>

    <script data-main='<%=ResolveUrl("~/JavaScript/rjs/chat")%>' src='<%=ResolveUrl("~/JavaScript/rjs/require.js")%>'></script>
    <script type="text/javascript">
        $(document).ready(function () {
            LoadChatGroup();
        });
        function LoadChatGroup() {
            $.ajax({
                type: "POST",
                url: "ChatWindow.aspx/LoadChatGroup",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    var ChatGroup = "";
                    if (obj != "") {
                        if (obj == "-202") {
                            alert("Session Ended");
                            window.close();
                        }
                        else {
                            $.each(obj, function (i, item) {
                                if (item.SourceTypeId == "2035") {
                                    if (item.ChatTypeId == "2") {//group
                                        ChatGroup += "<li class='clearfix'><div class='about' ><input type=hidden id=sourceType value='" + item.SourceTypeId + "' /><input type=hidden id=ChatTypeId value='" + item.ChatTypeId + "' /><input type=hidden id=ChatAdminId value='" + item.ChatAdminEmployeeId + "' /><img src='../../../Images/FolderIcon/chat-images/user.png' />&nbsp;<a class='name' Id='" + item.Id + "' onclick=ChatHistory(this); style=font-size:larger;>" + item.Title + "</a></div></li>"
                                    }
                                    else if (item.ChatTypeId == "1") {//Brodcast
                                        ChatGroup += "<li class='clearfix'><div class='about' ><input type=hidden id=sourceType value='" + item.SourceTypeId + "' /><input type=hidden id=ChatTypeId value='" + item.ChatTypeId + "' /><input type=hidden id=ChatAdminId value='" + item.ChatAdminEmployeeId + "' /><img src='../../../Images/FolderIcon/chat-images/broadcast.png' />&nbsp;<a class='name' Id='" + item.Id + "' onclick=ChatHistory(this); style=font-size:larger;>" + item.Title + "</a></div></li>"
                                    }
                                }
                                else if (item.SourceTypeId == "2003" || item.SourceTypeId == "2001") { //student
                                    ChatGroup += "<li class='clearfix'><div class='about' ><input type=hidden id=sourceType value='" + item.SourceTypeId + "' /><img src='../../../Images/FolderIcon/chat-images/student.png' />&nbsp;<a class='name' Id='" + item.Id + "' onclick=ChatHistory(this); style=font-size:larger;>" + item.Title + "</a></div></li>"
                                }
                                else if (item.SourceTypeId == "95" || item.SourceTypeId == "0") { //employee/teacher
                                    ChatGroup += "<li class='clearfix'><div class='about' ><input type=hidden id=sourceType value='" + item.SourceTypeId + "' /><img src='../../../Images/FolderIcon/chat-images/teacher.png' />&nbsp;<a class='name' Id='" + item.Id + "' onclick=ChatHistory(this); style=font-size:larger;>" + item.Title + "</a></div></li>"
                                }
                                else if (item.SourceTypeId == "2036") { //onlinelearning
                                    ChatGroup += "<li class='clearfix'><div class='about' ><input type=hidden id=sourceType value='" + item.SourceTypeId + "' /><img src='../../../Images/FolderIcon/chat-images/onlineclassroom.png' />&nbsp;<a class='name' Id='" + item.Id + "' onclick=ChatHistory(this); style=font-size:larger;>" + item.Title + "</a></div></li>"
                                }
                                // alert(obj.length);

                            });
                            document.getElementById("GroupList").innerHTML = ChatGroup;
                        }
                    }
                    else {
                        document.getElementById("GroupList").innerHTML = " ";
                    }
                    var Id = ctl00_CP_GroupIdHiddenField.value;
                    var a = $(document.getElementById("GroupList"));
                    var chatId = $(a).parents('li.li-top').find('a:first');
                    if (Id == "") {
                        Id = $(a)[0].childNodes[0].childNodes[0].lastChild.id;
                        ctl00_CP_GroupIdHiddenField.value = Id;
                        var Button = document.getElementById(Id);
                        Button.onclick(Button);
                    }
                    else {
                        var Button = document.getElementById(Id);
                        Button.onclick(Button);
                    }

                }
            });
        }
        function ChatHistory(Obj) {
            var ChatId = Obj.id;
            ctl00_CP_GroupIdHiddenField.value = Obj.id;
            var SourceTypeId = $(Obj).parent().find('input:hidden:first').attr('value');
            ctl00_CP_GroupSourceTypeIdHiddenField.value = SourceTypeId;
            document.getElementById("GroupName").innerText = Obj.text;
            if (SourceTypeId == "2003" || SourceTypeId == "2001") {
                document.getElementById("ChatImage").src = "../../../Images/FolderIcon/chat-images/student.png";
                infoDiv.style.display = 'none';
            }
            else if (SourceTypeId == "95") {
                document.getElementById("ChatImage").src = "../../../Images/FolderIcon/chat-images/teacher.png";
                infoDiv.style.display = 'none';
            }
            else if (SourceTypeId == "2035") {
                var ChatTypeId = $(Obj).parent().find('input:hidden')[1].value;
                if (ChatTypeId == "2") {
                    document.getElementById("ChatImage").src = "../../../Images/FolderIcon/chat-images/user.png";
                }
                else if (ChatTypeId == "1") {
                    document.getElementById("ChatImage").src = "../../../Images/FolderIcon/chat-images/broadcast.png";
                }
                infoDiv.style.display = 'block';
            }
            else if (SourceTypeId == "2036") {
                document.getElementById("ChatImage").src = "../../../Images/FolderIcon/chat-images/onlineclassroom.png";
                infoDiv.style.display = 'block';
            }
            else if (SourceTypeId == "0") {
                document.getElementById("ChatImage").src = "../../../Images/FolderIcon/chat-images/teacher.png";
                infoDiv.style.display = 'block';
            }

            var modal = document.getElementById("SendDiv");
            var BroadCast = document.getElementById("BrodcastMessageDiv");

            if (SourceTypeId == "2035") {
                var ChatAdminId = $(Obj).parent().find('input:hidden')[2].value;
                if (ChatTypeId == "2") {
                    modal.style.display = "block";
                    BroadCast.style.display = "none";
                }
                else if (ChatTypeId == "1") {
                    if (ctl00_CP_UserIdHiddenField.value == ChatAdminId) {
                        modal.style.display = "block";
                        BroadCast.style.display = "none";
                    }
                    else {
                        modal.style.display = "none";
                        BroadCast.style.display = "block";
                    }
                }
            }
            else {
                BroadCast.style.display = "none";
            }
            $('#infoDiv').removeClass('open');
            $('#infoDiv').animate({
                "right": "20px",
                "background-position": "0px"
            });
            $('#menu').animate({ "right": "-375px" });
            $('body').css("position", "absolute");
            $('body').animate({
                "right": "0px",
                "z-index": "-999"
            });
            $("#Sidebar").addClass("sidebar-replace");
            $("#Sidebar").removeClass("sidebar-show");

            $.ajax({
                type: "POST",
                url: "ChatWindow.aspx/ChatDetail",
                data: JSON.stringify({ "ChatId": parseInt(ChatId), "SourceTypeId": parseInt(SourceTypeId) }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {

                    var obj = (result.d);
                    var Chat = "";
                    if (obj != "") {
                        if (obj == "-202") {
                            alert("Session Ended");
                            window.close();
                        }
                        else {
                            $.each(obj, function (i, item) {
                                if (item.FromSourceId == item.RequestedUserId) {
                                    if (item.ChatDetail != '') {
                                        Chat += "<li class='clearfix'> <div class='message-data align-right'><span class='message-data-time'>" + item.DateTime + "</span> &nbsp; &nbsp;<span class='message-data-name'>" + item.SenderName + "</span> <i class='fa fa-user me'></i></div>"
                                           + "<div class='message other-message float-right'>" + item.ChatDetail + "</div></li>"
                                    }
                                    if (item.ContentPath != '') {
                                        if (item.Extension == 'jpeg' || item.Extension == 'png' || item.Extension == 'PNG' || item.Extension == 'jpg' || item.Extension == 'JPG' || item.Extension == 'JPEG') {
                                            Chat += "<li class='clearfix'> <div class='message-data align-right'><span class='message-data-time'>" + item.DateTime + "</span> &nbsp; &nbsp;<span class='message-data-name'>" + item.SenderName + "</span> <i class='fa fa-user me'></i></div>"
                                          + "<div class='message other-message float-right Image-Div'><a href='" + item.ContentPath + "' target=_blank style=color:blue;> <img src='" + item.ContentPath + "' class='new-Image' />&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='Senderdownload' href='" + item.ContentPath + "' download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div></li>"
                                        }
                                        else {
                                            Chat += "<li class='clearfix'> <div class='message-data align-right'><span class='message-data-time'>" + item.DateTime + "</span> &nbsp; &nbsp;<span class='message-data-name'>" + item.SenderName + "</span> <i class='fa fa-user me'></i></div>"
                                          + "<div class='message other-message float-right'><a href='" + item.ContentPath + "' target=_blank style=color:blue;> <img src=../../../Images/FolderIcon/" + item.Extension + ".png />&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='Senderdownload' href='" + item.ContentPath + "' download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div></li>"
                                        }
                                    }
                                }
                                else {
                                    if (item.IsDisplayOnApproval == 1 && item.ChatAdminEmployeeId == ctl00_CP_UserIdHiddenField.value) {
                                        if (item.ChatStatusId == 2) {
                                            if (item.ChatDetail != '') {
                                                Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                              + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message'>" + item.ChatDetail + "</div><div class='cBoth'></div><div class='message-data'><a class='fas fa-check-circle approve'>Approved</a></div></li>"
                                            }
                                            if (item.ContentPath != '') {
                                                if (item.Extension == 'jpeg' || item.Extension == 'png' || item.Extension == 'PNG' || item.Extension == 'jpg' || item.Extension == 'JPG' || item.Extension == 'JPEG') {
                                                    Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                              + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message Image-Div'><a href='" + item.ContentPath + "' target=_blank style=color:blue;> <img src='" + item.ContentPath + "' class='new-Image'/>&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='Receiverdownload' href='" + item.ContentPath + "' download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div>"
                                              + "<div class='cBoth'></div><div class='message-data'><a class='fas fa-check-circle approve'>Approved</a></div></li>"
                                                }
                                                else {
                                                    Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                              + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message'><a href='" + item.ContentPath + "' target=_blank style=color:blue;> <img src=../../../Images/FolderIcon/" + item.Extension + ".png />&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='Receiverdownload' href='" + item.ContentPath + "' download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div>"
                                              + " <div class='cBoth'></div><div class='message-data'><a class='fas fa-check-circle approve'>Approved</a></div></li>"
                                                }
                                            }
                                        }
                                        else if (item.ChatStatusId == 3) {
                                            if (item.ChatDetail != '') {
                                                Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                              + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message'>" + item.ChatDetail + "</div><div class='cBoth'></div><div class='message-data'><a class='fa fa-ban reject'>Rejected</a></div></li>"
                                            }
                                            if (item.ContentPath != '') {
                                                if (item.Extension == 'jpeg' || item.Extension == 'png' || item.Extension == 'PNG' || item.Extension == 'jpg' || item.Extension == 'JPG' || item.Extension == 'JPEG') {
                                                    Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                              + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message Image-Div'><a href='" + item.ContentPath + "' target=_blank style=color:blue;> <img src='" + item.ContentPath + "' class='new-Image'/>&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='Receiverdownload' href='" + item.ContentPath + "' download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div>"
                                              + " <div class='cBoth'></div><div class='message-data'><a class='fa fa-ban reject'>Rejected</a></div></li>"
                                                }
                                                else {
                                                    Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                              + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message'><a href='" + item.ContentPath + "' target=_blank style=color:blue;> <img src=../../../Images/FolderIcon/" + item.Extension + ".png />&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='Receiverdownload' href='" + item.ContentPath + "' download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div>"
                                              + " <div class='cBoth'></div><div class='message-data'><a class='fa fa-ban reject'>Rejected</a></div></li>"
                                                }
                                            }
                                        }
                                        else {
                                            if (item.ChatDetail != '') {
                                                Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                              + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message'>" + item.ChatDetail + "</div><div class='cBoth'></div><div class='message-data'><a Id=" + item.Id + " class='fas fa-thumbs-up approve' onclick=ApproveReject(this); value=" + item.Id + ">Approve</a><a Id=" + item.Id + " class='fas fa-thumbs-down reject' onclick=ApproveReject(this); value=" + item.Id + ">Reject</a></div></li>"
                                            }
                                            if (item.ContentPath != '') {
                                                if (item.Extension == 'jpeg' || item.Extension == 'png' || item.Extension == 'PNG' || item.Extension == 'jpg' || item.Extension == 'JPG' || item.Extension == 'JPEG') {
                                                    Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                              + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message Image-Div'><a href='" + item.ContentPath + "' target=_blank style=color:blue;> <img src='" + item.ContentPath + "' class='new-Image'/>&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='Receiverdownload' href='" + item.ContentPath + "' download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div>"
                                              + " <div class='cBoth'></div><div class='message-data'><a Id=" + item.Id + " class='fas fa-thumbs-up approve' onclick=ApproveReject(this);>Approve</a><a Id=" + item.Id + " class='fas fa-thumbs-down reject' onclick=ApproveReject(this);>Reject</a></div></li>"
                                                }
                                                else {
                                                    Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                              + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message'><a href='" + item.ContentPath + "' target=_blank style=color:blue;> <img src=../../../Images/FolderIcon/" + item.Extension + ".png />&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='Receiverdownload' href='" + item.ContentPath + "' download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div>"
                                              + " <div class='cBoth'></div><div class='message-data'><a Id=" + item.Id + " class='fas fa-thumbs-up approve' onclick=ApproveReject(this);>Approve</a><a Id=" + item.Id + " class='fas fa-thumbs-down reject' onclick=ApproveReject(this);>Reject</a></div></li>"
                                                }
                                            }
                                        }
                                    }
                                    else {
                                        if (item.ChatDetail != '') {
                                            Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                          + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message'>" + item.ChatDetail + "</div></li>"
                                        }
                                        if (item.ContentPath != '') {
                                            if (item.Extension == 'jpeg' || item.Extension == 'png' || item.Extension == 'PNG' || item.Extension == 'jpg' || item.Extension == 'JPG' || item.Extension == 'JPEG') {
                                                Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                          + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message Image-Div'><a href='" + item.ContentPath + "' target=_blank style=color:blue;> <img src='" + item.ContentPath + "' class='new-Image'/>&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='Receiverdownload' href='" + item.ContentPath + "' download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div></li>"
                                            }
                                            else {
                                                Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                          + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message'><a href='" + item.ContentPath + "' target=_blank style=color:blue;> <img src=../../../Images/FolderIcon/" + item.Extension + ".png />&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='Receiverdownload' href='" + item.ContentPath + "' download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div></li>"
                                            }
                                        }
                                    }

                                }
                                //var modal = document.getElementById("SendDiv");
                                //var BroadCast = document.getElementById("BrodcastMessageDiv");

                                //if (SourceTypeId == "2035")
                                //{
                                //    if (ChatTypeId == "2") {
                                //        modal.style.display = "block";
                                //        BroadCast.style.display = "none";
                                //    }
                                //    else if (ChatTypeId == "1") {
                                //        if (item.RequestedUserId == item.ChatAdminEmployeeId) {
                                //            modal.style.display = "block";
                                //            BroadCast.style.display = "none";
                                //        }
                                //        else {
                                //            modal.style.display = "none";
                                //            BroadCast.style.display = "block";
                                //        }
                                //    }
                                //}
                                //else {
                                //    BroadCast.style.display = "none";
                                //}

                                //document.getElementById("GroupName").innerText = obj[0].Title;
                            });
                            document.getElementById("ChatScreen").innerHTML = Chat;
                        }
                    }
                    else {
                        document.getElementById("ChatScreen").innerHTML = " ";

                    }
                }
            });
        }
        function LoadGroupDetail() {
            var ChatId = ctl00_CP_GroupIdHiddenField.value;
            var ChatTypeId = ctl00_CP_GroupSourceTypeIdHiddenField.value;
            $.ajax({
                type: "POST",
                url: "ChatWindow.aspx/ChatGroupDetail",
                data: JSON.stringify({ "ChatId": parseInt(ChatId), "ChatTypeId": parseInt(ChatTypeId) }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    var ChatGroupDetail = "";
                    if (obj != "") {
                        if (obj == "-202") {
                            alert("Session Ended");
                            window.close();
                        }
                        else {
                            $.each(obj, function (i, item) {
                                if (item.SourceTypeId == "2003" || item.SourceTypeId == "2001") { //student
                                    ChatGroupDetail += "<li><img src=../../../Images/FolderIcon/chat-images/student.png class=sidebar-img>" + item.MemberName + "</li>"
                                }
                                else if (item.SourceTypeId == "95") { //employee/teacher
                                    ChatGroupDetail += "<li><img src=../../../Images/FolderIcon/chat-images/teacher.png class=sidebar-img>" + item.MemberName + "</li>"
                                }
                            });
                            document.getElementById("ParticipantList").innerHTML = ChatGroupDetail;
                        }
                    }
                    else {
                        document.getElementById("ParticipantList").innerHTML = '';
                    }
                }
            });
        }
        function SyncChat(InObj) {
            var ChatId = ctl00_CP_GroupIdHiddenField.value;
            var ChatSorceTypeId = ctl00_CP_GroupSourceTypeIdHiddenField.value;
            $.ajax({
                type: "POST",
                url: "ChatWindow.aspx/ChatDetail",
                data: JSON.stringify({ "ChatId": parseInt(ChatId), "SourceTypeId": parseInt(ChatSorceTypeId) }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    var Chat = "";
                    if (obj != "") {
                        if (obj == "-202") {
                            alert("Session Ended");
                            window.close();
                        }
                        else {
                            $.each(obj, function (i, item) {
                                if (item.FromSourceId == item.RequestedUserId) {
                                    if (item.ChatDetail != '') {
                                        Chat += "<li class='clearfix'> <div class='message-data align-right'><span class='message-data-time'>" + item.DateTime + "</span> &nbsp; &nbsp;<span class='message-data-name'>" + item.SenderName + "</span> <i class='fa fa-user me'></i></div>"
                                           + "<div class='message other-message float-right'>" + item.ChatDetail + "</div></li>"
                                    }
                                    if (item.ContentPath != '') {
                                        if (item.Extension == 'jpeg' || item.Extension == 'png' || item.Extension == 'PNG' || item.Extension == 'jpg' || item.Extension == 'JPG' || item.Extension == 'JPEG') {
                                            Chat += "<li class='clearfix'> <div class='message-data align-right'><span class='message-data-time'>" + item.DateTime + "</span> &nbsp; &nbsp;<span class='message-data-name'>" + item.SenderName + "</span> <i class='fa fa-user me'></i></div>"
                                          + "<div class='message other-message float-right Image-Div'><a href='" + item.ContentPath + "' target=_blank style=color:blue;> <img src='" + item.ContentPath + "' class='new-Image' />&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='Senderdownload' href='" + item.ContentPath + "' download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div></li>"
                                        }
                                        else {
                                            Chat += "<li class='clearfix'> <div class='message-data align-right'><span class='message-data-time'>" + item.DateTime + "</span> &nbsp; &nbsp;<span class='message-data-name'>" + item.SenderName + "</span> <i class='fa fa-user me'></i></div>"
                                          + "<div class='message other-message float-right'><a href='" + item.ContentPath + "' target=_blank style=color:blue;> <img src=../../../Images/FolderIcon/" + item.Extension + ".png />&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='Senderdownload' href='" + item.ContentPath + "' download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div></li>"
                                        }
                                    }
                                }
                                else {
                                    if (item.IsDisplayOnApproval == 1 && item.ChatAdminEmployeeId == ctl00_CP_UserIdHiddenField.value) {
                                        if (item.ChatStatusId == 2) {
                                            if (item.ChatDetail != '') {
                                                Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                              + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message'>" + item.ChatDetail + "</div><div class='cBoth'></div><div class='message-data'><a class='fas fa-check-circle approve'>Approved</a></div></li>"
                                            }
                                            if (item.ContentPath != '') {
                                                if (item.Extension == 'jpeg' || item.Extension == 'png' || item.Extension == 'PNG' || item.Extension == 'jpg' || item.Extension == 'JPG' || item.Extension == 'JPEG') {
                                                    Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                              + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message Image-Div'><a href='" + item.ContentPath + "' target=_blank style=color:blue;> <img src='" + item.ContentPath + "' class='new-Image'/>&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='Receiverdownload' href='" + item.ContentPath + "' download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div>"
                                              + "<div class='cBoth'></div><div class='message-data'><a class='fas fa-check-circle approve'>Approved</a></div></li>"
                                                }
                                                else {
                                                    Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                              + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message'><a href='" + item.ContentPath + "' target=_blank style=color:blue;> <img src=../../../Images/FolderIcon/" + item.Extension + ".png />&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='Receiverdownload' href='" + item.ContentPath + "' download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div>"
                                              + " <div class='cBoth'></div><div class='message-data'><a class='fas fa-check-circle approve'>Approved</a></div></li>"
                                                }
                                            }
                                        }
                                        else if (item.ChatStatusId == 3) {
                                            if (item.ChatDetail != '') {
                                                Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                              + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message'>" + item.ChatDetail + "</div><div class='cBoth'></div><div class='message-data'><a class='fa fa-ban reject'>Rejected</a></div></li>"
                                            }
                                            if (item.ContentPath != '') {
                                                if (item.Extension == 'jpeg' || item.Extension == 'png' || item.Extension == 'PNG' || item.Extension == 'jpg' || item.Extension == 'JPG' || item.Extension == 'JPEG') {
                                                    Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                              + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message Image-Div'><a href='" + item.ContentPath + "' target=_blank style=color:blue;> <img src='" + item.ContentPath + "' class='new-Image'/>&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='Receiverdownload' href='" + item.ContentPath + "' download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div>"
                                              + " <div class='cBoth'></div><div class='message-data'><a class='fa fa-ban reject'>Rejected</a></div></li>"
                                                }
                                                else {
                                                    Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                              + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message'><a href='" + item.ContentPath + "' target=_blank style=color:blue;> <img src=../../../Images/FolderIcon/" + item.Extension + ".png />&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='Receiverdownload' href='" + item.ContentPath + "' download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div>"
                                              + " <div class='cBoth'></div><div class='message-data'><a class='fa fa-ban reject'>Rejected</a></div></li>"
                                                }
                                            }
                                        }
                                        else {
                                            if (item.ChatDetail != '') {
                                                Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                              + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message'>" + item.ChatDetail + "</div><div class='cBoth'></div><div class='message-data'><a Id=" + item.Id + " class='fas fa-thumbs-up approve' onclick=ApproveReject(this); value=" + item.Id + ">Approve</a><a Id=" + item.Id + " class='fas fa-thumbs-down reject' onclick=ApproveReject(this); value=" + item.Id + ">Reject</a></div></li>"
                                            }
                                            if (item.ContentPath != '') {
                                                if (item.Extension == 'jpeg' || item.Extension == 'png' || item.Extension == 'PNG' || item.Extension == 'jpg' || item.Extension == 'JPG' || item.Extension == 'JPEG') {
                                                    Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                              + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message Image-Div'><a href='" + item.ContentPath + "' target=_blank style=color:blue;> <img src='" + item.ContentPath + "' class='new-Image'/>&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='Receiverdownload' href='" + item.ContentPath + "' download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div>"
                                              + " <div class='cBoth'></div><div class='message-data'><a Id=" + item.Id + " class='fas fa-thumbs-up approve' onclick=ApproveReject(this);>Approve</a><a Id=" + item.Id + " class='fas fa-thumbs-down reject' onclick=ApproveReject(this);>Reject</a></div></li>"
                                                }
                                                else {
                                                    Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                              + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message'><a href='" + item.ContentPath + "' target=_blank style=color:blue;> <img src=../../../Images/FolderIcon/" + item.Extension + ".png />&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='Receiverdownload' href='" + item.ContentPath + "' download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div>"
                                              + " <div class='cBoth'></div><div class='message-data'><a Id=" + item.Id + " class='fas fa-thumbs-up approve' onclick=ApproveReject(this);>Approve</a><a Id=" + item.Id + " class='fas fa-thumbs-down reject' onclick=ApproveReject(this);>Reject</a></div></li>"
                                                }
                                            }
                                        }
                                    }
                                    else {
                                        if (item.ChatDetail != '') {
                                            Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                          + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message'>" + item.ChatDetail + "</div></li>"
                                        }
                                        if (item.ContentPath != '') {
                                            if (item.Extension == 'jpeg' || item.Extension == 'png' || item.Extension == 'PNG' || item.Extension == 'jpg' || item.Extension == 'JPG' || item.Extension == 'JPEG') {
                                                Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                          + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message Image-Div'><a href='" + item.ContentPath + "' target=_blank style=color:blue;> <img src='" + item.ContentPath + "' class='new-Image'/>&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='Receiverdownload' href='" + item.ContentPath + "' download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div></li>"
                                            }
                                            else {
                                                Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                          + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message'><a href='" + item.ContentPath + "' target=_blank style=color:blue;> <img src=../../../Images/FolderIcon/" + item.Extension + ".png />&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='Receiverdownload' href='" + item.ContentPath + "' download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div></li>"
                                            }
                                        }
                                    }

                                }
                                //document.getElementById("GroupName").innerText = obj[0].Title;
                            });
                            document.getElementById("ChatScreen").innerHTML = Chat;
                            if (InObj == "1") {
                                ScrollDown();
                            }
                        }
                    }
                    else {
                        document.getElementById("ChatScreen").innerHTML = " ";
                    }
                }
            });
        }
        function SendMessage() {
            var Message = document.getElementById("lname").value;

            var ChatId = ctl00_CP_GroupIdHiddenField.value;
            var SourceTypeId = ctl00_CP_GroupSourceTypeIdHiddenField.value;
            var wtf = document.getElementById("chat-history");

            //wtf.scrollTop(height);
            //$('#chat-history').scrollTop($('#chat-history').height())
            $.ajax({
                type: "POST",
                url: "ChatWindow.aspx/SendMessage",
                data: JSON.stringify({ "Message": String(Message), "ChatId": parseInt(ChatId), "SourceTypeId": parseInt(SourceTypeId) }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    if (obj != "-201" || obj != "-202") {
                        document.getElementById("lname").value = "";
                        SyncChat(1);
                        LoadChatGroup();
                        //var wtf = document.getElementById("chat-history");
                        //wtf.scrollTop = wtf.scrollHeight;
                        //$("#ChatScreen").scrollTop($(document).height());
                        //$("#chat-history").scrollTop($(document).height());
                        ScrollDown();
                    }
                    if (obj == "-202") {
                        alert("Session Ended");
                        window.close();
                    }
                    //wtf.scrollTop = wtf.scrollHeight + 2;

                }
            });

        }
        function ScrollDown() {
            $("#chat-history").scrollTop($("#chat-history").prop('scrollHeight'));
        }
        //$("#chat-history").scrollTop($("#chat-history").prop('scrollHeight'));
        function ApproveReject(obj) {
            var ActionName = obj.innerHTML;
            var ChatId = obj.id;
            $.ajax({
                type: "POST",
                url: "ChatWindow.aspx/ApproveReject",
                data: JSON.stringify({ "Action": String(ActionName), "ChatId": parseInt(ChatId) }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    if (obj == "1") {
                        SyncChat(0);
                    }
                }
            });
        }
        window.setInterval(function () {
            SyncChat(0);
        }, 6000);

        function closepopup() {
            document.getElementById("ctl00_CP_Id").value = "";
            document.getElementById("ctl00_CP_Name").value = "";
            document.getElementById("ctl00_CP_Student").checked = true;
            var StudentTable = document.getElementById("StudentTable");
            StudentTable.style.display = "none";
            EmployeeTable.style.display = "none";
            var modal = document.getElementById("myModal");
            modal.style.display = "none";
            $('#pagging').html("");
            $('#lblTotalRecords').html("");
        }
        function Add() {

            var modal = document.getElementById("myModal");
            modal.style.display = "block";
            LoadClassDropDownList();
            classDivisionDiv.style.display = "block";
            var SourceType = ctl00_CP_UserSourceTypeIdHiddenField.value;
            var obj;
            if (ctl00_CP_UserSourceTypeIdHiddenField.value == 2003) {
                document.getElementById("ctl00_CP_Employee").checked = true;
                $('#ctl00_CP_Student').attr('disabled', true);
                classDivisionDiv.style.display = "none";
                document.getElementById('drpClass').selectedIndex = 0;
                OnClassDrop();
            }
            else {
                document.getElementById("ctl00_CP_Student").checked = true;
                $('#ctl00_CP_Student').attr('disabled', false);

            }
        }

        function SearchUser() {
            var SourceTypeId;
            var Id = document.getElementById("ctl00_CP_Id").value;
            var Name = document.getElementById("ctl00_CP_Name").value;
            if (document.getElementById("ctl00_CP_Student").checked == true) {
                SourceTypeId = 2003;
            }
            else if (document.getElementById("ctl00_CP_Employee").checked == true) {
                SourceTypeId = 95;
            }
            StudentTable.style.display = "none";
            EmployeeTable.style.display = "none";
            var PageIndex = document.getElementById("hdnPageIndex").value;
            var classId = $('#drpClass').val();
            var DivisionId = $('#drpDivision').val();
            $.ajax({
                type: "POST",
                url: "ChatWindow.aspx/SearchUser",
                data: JSON.stringify({ "SourceTypeId": parseInt(SourceTypeId), "Id": String(Id), "Name": String(Name), "ClassId": parseInt(classId), "DivisionId": parseInt(DivisionId), "PageIndex": parseInt(PageIndex) }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var datas = data.d[0];
                    if (SourceTypeId == 2003) {
                        if (datas.StudentList != '') {
                            $('#tblStudentList').html(datas.StudentList);
                            $('#pagging').html(datas.Paging);
                            $('#lblTotalRecords').html('Total Records : ' + datas.TotalRecords + '&nbsp;&nbsp;&nbsp;&nbsp;');
                            var StudentTable = document.getElementById("StudentTable");
                            StudentTable.style.display = "block";
                        }
                        else {
                            $('#pagging').html("");
                            $('#lblTotalRecords').html("");
                        }
                    }
                    else if (SourceTypeId == 95) {
                        if (datas.EmployeeList != '') {
                            $('#tblEmployeeList').html(datas.EmployeeList);
                            $('#pagging').html(datas.Paging);
                            $('#lblTotalRecords').html('Total Records : ' + datas.TotalRecords + '&nbsp;&nbsp;&nbsp;&nbsp;');
                            var EmployeeTable = document.getElementById("EmployeeTable");
                            EmployeeTable.style.display = "block";
                        }
                        else {
                            $('#pagging').html("");
                            $('#lblTotalRecords').html("");
                        }
                    }

                }
            });
        }
        function ChangePage(pageindex) {
            $('#hdnPageIndex').val(pageindex);
            SearchUser();
        }
        function SelectStudent(StudentId, Code) {
            if (document.getElementById("ctl00_CP_Student").checked == true) {
                SourceTypeId = 2001;
            }
            else if (document.getElementById("ctl00_CP_Employee").checked == true) {
                SourceTypeId = 95;
            }
            ctl00_CP_SourceIdHiddenField.value = StudentId;
            ctl00_CP_SourceTypeIdHiddenField.value = SourceTypeId;
            ctl00_CP_GroupIdHiddenField.value = StudentId;
            ctl00_CP_GroupSourceTypeIdHiddenField.value = SourceTypeId;
            $.ajax({
                type: "POST",
                url: "ChatWindow.aspx/PersonalChatDetail",
                data: JSON.stringify({ "StudentId": StudentId, "SourceTypeId": parseInt(SourceTypeId) }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {

                    var obj = (result.d);
                    var Chat = "";
                    if (obj != "") {
                        if (obj == "-202") {
                            alert("Session Ended");
                            window.close();
                        }
                        else {
                            $.each(obj, function (i, item) {
                                if (item.FromSourceId == item.RequestedUserId) {
                                    if (item.ChatDetail != '' && item.ChatDetail != "0") {
                                        Chat += "<li class='clearfix'> <div class='message-data align-right'><span class='message-data-time'>" + item.DateTime + "</span> &nbsp; &nbsp;<span class='message-data-name'>" + item.SenderName + "</span> <i class='fa fa-user me'></i></div>"
                                           + "<div class='message other-message float-right'>" + item.ChatDetail + "</div></li>"
                                    }
                                    if (item.ContentPath != '' && item.ContentPath != "0") {
                                        if (item.Extension == 'jpeg' || item.Extension == 'png' || item.Extension == 'PNG' || item.Extension == 'jpg' || item.Extension == 'JPG' || item.Extension == 'JPEG') {
                                            Chat += "<li class='clearfix'> <div class='message-data align-right'><span class='message-data-time'>" + item.DateTime + "</span> &nbsp; &nbsp;<span class='message-data-name'>" + item.SenderName + "</span> <i class='fa fa-user me'></i></div>"
                                          + "<div class='message other-message float-right Image-Div'><a href=" + item.ContentPath + " target=_blank style=color:blue;> <img src=" + item.ContentPath + " class='new-Image'/>&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='download' href=" + item.ContentPath + " download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div></li>"
                                        }
                                        else {
                                            Chat += "<li class='clearfix'> <div class='message-data align-right'><span class='message-data-time'>" + item.DateTime + "</span> &nbsp; &nbsp;<span class='message-data-name'>" + item.SenderName + "</span> <i class='fa fa-user me'></i></div>"
                                          + "<div class='message other-message float-right'><a href=" + item.ContentPath + " target=_blank style=color:blue;> <img src=../../../Images/FolderIcon/" + item.Extension + ".png />&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='download' href=" + item.ContentPath + " download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div></li>"
                                        }
                                    }

                                }
                                else {
                                    if (item.ChatDetail != '' && item.ChatDetail != "0") {
                                        Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                      + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message'>" + item.ChatDetail + "</div></li>"
                                    }
                                    if (item.ContentPath != '' && item.ContentPath != "0") {
                                        if (item.Extension == 'jpeg' || item.Extension == 'png' || item.Extension == 'PNG' || item.Extension == 'jpg' || item.Extension == 'JPG' || item.Extension == 'JPEG') {
                                            Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                      + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message Image-Div'><a href=" + item.ContentPath + " target=_blank style=color:blue;> <img src=" + item.ContentPath + " class='new-Image'/>&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='download' href=" + item.ContentPath + " download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div></li>"
                                        }
                                        else {
                                            Chat += "<li><div class='message-data'><span class='message-data-name'><i class='fa fa-user online'></i>" + item.SenderName + "</span>"
                                      + " <span class='message-data-time'>" + item.DateTime + "</span></div><div class='message my-message'><a href=" + item.ContentPath + " target=_blank style=color:blue;> <img src=../../../Images/FolderIcon/" + item.Extension + ".png />&nbsp;&nbsp;<label>" + item.FileName + "</label><a class='download' href=" + item.ContentPath + " download><i style=font-size:24px class='fa fa-arrow-alt-circle-down'></i></a></a></div></li>"
                                        }
                                    }
                                }
                            });
                            document.getElementById("GroupName").innerText = obj[0].Title;
                            if (SourceTypeId == "2003" || SourceTypeId == "2001") {
                                document.getElementById("ChatImage").src = "../../../Images/FolderIcon/chat-images/student.png";
                                infoDiv.style.display = 'none';
                            }
                            else if (SourceTypeId == "95") {
                                document.getElementById("ChatImage").src = "../../../Images/FolderIcon/chat-images/teacher.png";
                                infoDiv.style.display = 'none';
                            }
                            var modal = document.getElementById("SendDiv");
                            var BroadCast = document.getElementById("BrodcastMessageDiv");

                            modal.style.display = "block";
                            BroadCast.style.display = "none";

                            if (Chat != '') {
                                document.getElementById("ChatScreen").innerHTML = Chat;
                            }
                            else {
                                document.getElementById("ChatScreen").innerHTML = "";
                            }
                        }

                    }
                    else {
                        document.getElementById("ChatScreen").innerHTML = " ";
                    }
                    var modal = document.getElementById("myModal");
                    modal.style.display = "none";
                }
            });
        }
        function SourceTypeChange(obj) {
            document.getElementById("ctl00_CP_Id").innerHTML = "";
            document.getElementById("ctl00_CP_Name").innerHTML = "";
            StudentTable.style.display = "none";
            EmployeeTable.style.display = "none";
            $('#pagging').html("");
            $('#lblTotalRecords').html("");
            if (obj.value == 2003) {
                classDivisionDiv.style.display = "block";
            }
            else if (obj.value == 95) {
                classDivisionDiv.style.display = "none";
                document.getElementById('drpClass').selectedIndex = 0;
                OnClassDrop();
            }

        }
        function LoadClassDropDownList() {
            $.ajax({
                type: "POST",
                url: "ChatWindow.aspx/GetClass",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    $("#drpClass").html(result.d)
                }
            });
        }
        function OnClassDrop() {
            //$("#drpClass").change(function () {
            var myparam = $("#drpClass").val()
            // alert(myparam);
            $.ajax({
                type: "POST",
                url: "ChatWindow.aspx/GetDivision",
                data: JSON.stringify({ "id": myparam }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    //alert(result.d);
                    $("#drpDivision").html(result.d);
                }
                //});
            });
        }
    </script>

    <%--<div class="container clearfix sidebar-replace sidebar-show">--%>
    <div class="container clearfix sidebar-replace" id="Sidebar">
        <div class="people-list" id="people-list">
            <div class="chat-header clearfix" id="AvailableChatGroup" style="font-size: x-large; border-top-left-radius: 10px;">
                <b>Chats</b>
                <a style="float: right !important;" onclick="Add();"><i class="fas fa-plus-circle"></i></a>
            </div>
            <div id="myModal" class="modal">
                <div class="modal-content">
                    <header class="header">
                        <span class="close" onclick="closepopup();">&times;</span>
                        <h3 class="h2">Add</h3>
                    </header>
                    <div class="modal-content-area">
                        <div class="RadioButton">
                            <input type="radio" runat="server" class="Radio" id="Student" name="SourceType" value="2003" checked="true" onchange="SourceTypeChange(this);">
                            <label for="Student">Student</label>
                            <input type="radio" runat="server" class="Radio" id="Employee" name="SourceType" value="95" onchange="SourceTypeChange(this);">
                            <label for="Employee">Employee</label>
                        </div>
                        <div class="pTop15">
                            <div>
                                <label class="searchlabel" for="Id">
                                    <span class="searchspan">Id/Code</span>
                                    <input type="text" class="searchtext" id="Id" runat="server" />
                                </label>
                                <label class="searchlabel" for="Name">
                                    <span class="searchspan">Name</span>
                                    <input type="text" id="Name" class="searchtext" runat="server" />
                                </label>
                            </div>

                            <div id="classDivisionDiv">
                                <label class="searchlabel" for="Name">
                                    <span class="searchspan">Class</span>
                                    <select id='drpClass' class="form-control" onchange="OnClassDrop()" style="width: 80px">
                                        <option selected="selected" value="0">All</option>
                                    </select>
                                </label>
                                <label class="searchlabel" for="Name">
                                    <span class="searchspan">Division</span>
                                    <select id='drpDivision' class="form-control" style="width: 80px">
                                        <option selected="selected" value="0">All</option>
                                    </select>
                                </label>
                            </div>
                            <div style="clear: both!important"></div>
                            <div class="SearchButton">
                                <input type="button" name="Search" onclick="SearchUser();" class="fa fa-search col-md-3" value="&nbsp;Search">
                            </div>
                            <div class="himsBoxHeader card-head inner">
                                <div class="himsBoxTitle">
                                    <div class="pull-right mt12 display-flex">
                                        <input type="hidden" id="hdnPageIndex" value="1" />
                                        <ul id="pagging" class="pagination pagination-sm" style="float: right; height: 30px;">
                                        </ul>
                                        &nbsp;<label id="lblTotalRecords" style="margin-top: 12px; color: black"></label>&nbsp;                                                                      
                                    </div>
                                </div>
                            </div>
                            <div class="himsBt table-responsive pTop15">
                                <table class="table table-striped table-hover table-bordered searchtable" id="StudentTable" style="display: none">
                                    <thead>
                                        <tr>
                                            <th scope="col" style="width: 10%"></th>
                                            <th scope="col" style="width: 20%">Id No</th>
                                            <th scope="col" style="width: 63%">Name</th>
                                            <th scope="col" style="width: 20%">Class</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tblStudentList">
                                        <tr>
                                            <td colspan="4">No Records Available</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table class="table table-striped table-hover table-bordered searchtable" id="EmployeeTable" style="display: none">
                                    <thead>
                                        <tr>
                                            <th scope="col" style="width: 7%"></th>
                                            <th scope="col" style="width: 15%">Id No</th>
                                            <th scope="col" style="width: 50%">Name</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tblEmployeeList">
                                        <tr>
                                            <td colspan="4">No Records Available</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <ul class="list" id="GroupList">
            </ul>
        </div>

        <div class="chat">
            <div class="chat-header clearfix mainchatname" style="font-size: x-large;">
                <img src="#" class="sidebar-img" id="ChatImage">
                <span id="GroupName"></span>
                <a id="infoDiv" style="float: right !important;" class="toggle menu_icon" onclick="LoadGroupDetail()"><i class="fas fa-info-circle"></i></a>
                <div class="side" id="menu">
                    <div class="chat-header clearfix" style="font-size: x-large; background-color: white;">
                        <b>Participants</b>
                    </div>
                    <ul id="ParticipantList">
                    </ul>
                </div>
            </div>
            <%-- <a style="float: right !important;" onclick="Add();"><i class="fas fa-plus-circle"></i></a>--%>
            <input type="hidden" id="GroupIdHiddenField" runat="server" />
            <input type="hidden" id="GroupSourceTypeIdHiddenField" runat="server" />
            <input type="hidden" id="UserIdHiddenField" runat="server" />
            <input type="hidden" id="UserSourceTypeIdHiddenField" runat="server" />
            <input type="hidden" id="UserSourceIdHiddenField" runat="server" />
            <input type="hidden" id="SourceIdHiddenField" runat="server" />
            <input type="hidden" id="SourceTypeIdHiddenField" runat="server" />
            <input type="hidden" id="UploadConfigurationHiddenField" runat="server" />
            <input type="hidden" id="DocumentNameHiddenField" runat="server" />

            <div class="chat-history" id="chat-history">
                <ul id="ChatScreen">
                </ul>
            </div>
            <!-- end chat-history -->


            <div id="SendDiv" class="input-button-style" style="/* padding: 10px; */">

                <input name="lname" type="text" id="lname" placeholder="Type your message" class="col-md-10 text-area-new">

                <input type="button" onclick="OpenFileUpload();" name="Send" class="fa fa-paperclip col-md-1" value="&#xf0c6;" style="width: 50px">
                <input type="file" name="myFile" id="file1" style="display: none" onchange="readResourceURL(this);">

                <input type="button" onclick="SendMessage();" name="Send" class="fa fa-paper-plane col-md-1 new-button-type" value="&#xf1d8; Send">
            </div>

            <div id="BrodcastMessageDiv" class="input-button-style alignCenter col-md-12 pTop15" style="font-size: x-large;">

                <b class="col-md-10 text-area-new" style="color: #87878a !important; padding: 10px 15px 10px;">Only Admin Can Send Message ! </b>

            </div>
            <!-- end chat-message -->

        </div>
        <!-- end chat -->

    </div>
    <!-- end container -->


    <script>
        $('#menu').css("right", "-375px");
        $('.menu_icon').on('click', function () {
            if ($('.menu_icon').hasClass('open')) {
                $(this).removeClass('open');
                $(this).animate({
                    "right": "20px",
                    "background-position": "0px"
                });
                $('#menu').animate({ "right": "-375px" });
                $('body').css("position", "absolute");
                $('body').animate({
                    "right": "0px",
                    "z-index": "-999"
                });
                $("#Sidebar").addClass("sidebar-replace");
                $("#Sidebar").removeClass("sidebar-show");
                //var i = document.getElementById("Sidebar");
                //i.classList.add("sidebar-replace");
                //i.classList.remove("sidebar-show");

            }
            else {
                $(this).addClass('open');
                $(this).animate({
                    "right": "310px",
                    "background-position": "40px"
                });
                $('#menu').animate({ "right": "0px" });
                $('body').css("position", "absolute");
                $('body').animate({
                    "right": "-375px",
                    "z-index": "-999"
                });
                $("#Sidebar").addClass("sidebar-show");
                $("#Sidebar").removeClass("sidebar-replace");
            }
        });
    </script>



</asp:Content>
