<%@ page title="Employee Search" language="C#" masterpagefile="~/Pages/Common/MasterPages/MainMasterPage_new.master" autoeventwireup="true" inherits="Pages_Communication_MyMessages, App_Web_u21icgua" uiculture="auto" meta:resourcekey="PageResource1" enableEventValidation="false" viewStateEncryptionMode="Never" %>

<%@ Register Src="~/UserControls/DatePicker/DatePickerControl.ascx" TagName="DatePickerControl" TagPrefix="Date" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%@ Register Src="~/UserControls/Common/ScreenGroup/ScreenGroup.ascx" TagName="ScreenGroupControl" TagPrefix="ScreenGroup" %>


<asp:Content ID="Content1" ContentPlaceHolderID="CP" runat="Server">
    <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">

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

        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;
        }

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

        ul {
            height: auto;
        }



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

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

        .status {
            color: #92959E;
        }



        .chat {
            width: 75%;
            /*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;
        }

        .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%;
        }

        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;
        }

        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;
        }
    </style>

    <asp:UpdatePanel ID="HREmployeeMasterSearchUpdatePanel" runat="server">
        <ContentTemplate>
            <div id="divContentPage" class="divcontentpagemargin">

                <div class="dashBoardLeftCont" valign="top" runat="server" id="ScreenGroupTableId">
                    <div class="himssuHeader3WireBox">
                        <table>
                            <tr>
                                <td>
                                    <div class="himsBoxContent">
                                        <div class="leftUlMenu">
                                            <ScreenGroup:ScreenGroupControl EnableViewState="true" ID="ScreenGroupControl1" ScreenGroupId="114"
                                                Visible="true" runat="server" />
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="whiteboxpaddingleft row">
                    <div class="himssuHeader5WireBox card card-box">
                        <div class="himsBoxHeader card-head">
                            <asp:Panel ID="SearchHeaderPanel" runat="server" meta:resourcekey="SearchHeaderPanelResource1">

                                <div class="himsBoxTitle">
                                    <div class="headerText">
                                        <header>
                                            <i class="fab fa-whatsapp"></i>
                                            <asp:Label ID="SearchHeaderLabel" runat="server" Text="My WhatsApp Chat History"></asp:Label>
                                        </header>
                                    </div>
                                </div>
                            </asp:Panel>
                        </div>
                    </div>
                    <div id="bodyContainer" class="card-body">
                        <div class="himsPopupWireBox">
                            <div class="himsBoxHeadermain">
                                <div>
                                </div>
                            </div>

                            <div class="himsBoxContentmain" style="overflow: hidden">
                                <div id="divContentPage1">
                                    <div class="spacer">
                                        <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/spacer.gif"
                                            meta:resourcekey="Image1Resource1" />
                                    </div>
                                    <%--<div class="himssuHeader5WireBox">--%>
                                    <div class="himsBoxHeader">
                                        <asp:Panel ID="TopPanel" runat="server" meta:resourcekey="TopPanelResource1">
                                            <div class="leftdiv">
                                            </div>
                                            <div class="himsBoxTitle">
                                            </div>
                                        </asp:Panel>
                                    </div>
                                    <%--<div class="himsBoxContent col-md-12">--%>
                                    <asp:Panel ID="Panel2" runat="server" meta:resourcekey="DetailPanelResource1">
                                        <%--<div class="contentHolder table-responsive">--%>
                                        <asp:Panel ID="Panel3" runat="server" meta:resourcekey="SearchCriteriaPanelResource1">
                                            <div class="contentHolder">
                                                <%--Here--%>
                                                <%--<div class="container clearfix sidebar-replace" id="Sidebar">--%>
                                                <%--<div class="people-list" id="people-list" style="visibility:hidden;width:158px">
                                                                        <ul class="list" id="GroupList" runat="server">
                                                                        </ul>
                                                                    </div>--%>
                                                <div class="chat" style="width: 1110px; border-bottom-left-radius: 5px; border-top-left-radius: 5px; height: 449px">
                                                    <%--<img src="#" class="sidebar-img" id="ChatImage" runat="server">
                                                                        <span id="GroupName" style="margin-left: 444px; font-weight: bold;" runat="server"></span>--%>
                                                    <div class="chat-history" id="chat-history">
                                                        <ul id="ChatScreen" runat="server">
                                                        </ul>
                                                    </div>
                                                    <!-- end chat-history -->
                                                </div>
                                                <!-- end chat -->

                                                <%--</div>--%>
                                            </div>
                                        </asp:Panel>
                                        <%--</div>--%>
                                    </asp:Panel>
                                    <%--</div>--%>
                                    <%--</div>       --%>
                                </div>
                            </div>
                            <div class="himsmainBoxBottom">
                            </div>
                            <div class="himsmainBoxFooter">
                                <div>
                                    <table>
                                        <tr>
                                            <td>&nbsp
                                            </td>
                                        </tr>

                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </tr>
                    </table>
            </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <script data-main='<%=ResolveUrl("~/JavaScript/rjs/assign-organization")%>' src='<%=ResolveUrl("~/JavaScript/rjs/require.js")%>'></script>
</asp:Content>
