<!-- ==================================================================== -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"/>
<link href="css/fonts/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<!-- ========================================================================= -->
<link href="css/chathead-animate.min.css"/>
<link href="css/chathead-quickstyle.css" rel="stylesheet" type="text/css"/>
<link href="css/chathead-icons.css" rel="stylesheet" type="text/css"/>
<link href="css/chathead-style-document.css" rel="stylesheet" type="text/css"/>
<!-- ================================================================= -->
<script src="js/chathead/modernizr.custom.js">
</script>
<script src="js/chathead/jquery3.1.0.min.js">
</script>
<script src="js/chathead/jquery-ui.min.js">
</script>
<script src="js/chathead/jquery.ui.touch-punch.min.js">
</script>
<script src="js/chathead/drag-arrange.js">
</script>
<script src="js/chathead/draggabilly.pkgd.js">
</script>
<script src="js/chathead/cls-main.js">
</script>
<!-- quick style -->
<style type="text/css">
    .bubble-opacity-0{
        opacity: 0;
    }
    .bubble-opacity-1{
        opacity: 1;
    }
</style>
<!-- ======================================================== -->
<ion-view class="customer" hide-nav-bar="true" view-title="Customers">
    <ion-content id="customer_page" scroll="false">
        <div class="app-main" id="main-content">
            <div class="app-content">
                <div class="out_chat_container none" id="show_chathead_when_load">
                    <div class="chat_container" style="padding: 0; ">
                        <div class="out-group-bubble">
                            <div class="group-bubble">
                                <div class="bubble-sub" ng-class="!item.on_active ? '' : 'z-index9'" ng-repeat="item in bubbleArr">
                                    <div class="in-window bubble" ng-class="!item.on_active ? 'bubble-opacity-0' : 'bubble-opacity-1'" ng-click="onChatBubble($event, item)" mappitem = "{{item}}">
                                        <div class="messageSwait" ng-if="item.counter > 5">
                                            5+
                                        </div>
                                        <div class="messageSwait" ng-if="item.counter < 6 && item.counter > 0 ">
                                            {{item.counter}}
                                        </div>
                                        <figure>
                                            <img class="block" src="{{item.image_pic}}"/>
                                        </figure>
                                    </div>
                                </div>
                                <div class="bubble-sub group-bubble-chat pdLR5">
                                    <div class="bubble" ng-click="onChatBubble($event)">
                                        <figure>
                                            <img class="block" src="css/images/2.png"/>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="chat">
                            <div class="chat-main-admin">
                                <div class="head-chat">
                                    <div class="head-chat-search">
                                        <button type="button">
                                            <svg class="h25px block btn-serch" viewbox="0 0 488.4 488.4">
                                                <path class="active-path" d="M0,203.25c0,112.1,91.2,203.2,203.2,203.2c51.6,0,98.8-19.4,134.7-51.2l129.5,129.5c2.4,2.4,5.5,3.6,8.7,3.6    s6.3-1.2,8.7-3.6c4.8-4.8,4.8-12.5,0-17.3l-129.6-129.5c31.8-35.9,51.2-83,51.2-134.7c0-112.1-91.2-203.2-203.2-203.2    S0,91.15,0,203.25z M381.9,203.25c0,98.5-80.2,178.7-178.7,178.7s-178.7-80.2-178.7-178.7s80.2-178.7,178.7-178.7    S381.9,104.65,381.9,203.25z" data-old_color="#000" data-original="#000000" fill="#327ebb">
                                                </path>
                                            </svg>
                                            <svg class="h25px none btn-back" viewbox="0 0 32.635 32.635">
                                                <path class="active-path" d="M32.135,16.817H0.5c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h31.635c0.276,0,0.5,0.224,0.5,0.5   S32.411,16.817,32.135,16.817z" data-old_color="#000" data-original="#000000" fill="#327ebb">
                                                </path>
                                                <path class="active-path" d="M13.037,29.353c-0.128,0-0.256-0.049-0.354-0.146L0.146,16.669C0.053,16.575,0,16.448,0,16.315s0.053-0.26,0.146-0.354   L12.684,3.429c0.195-0.195,0.512-0.195,0.707,0s0.195,0.512,0,0.707L1.207,16.315l12.184,12.184c0.195,0.195,0.195,0.512,0,0.707   C13.293,29.304,13.165,29.353,13.037,29.353z" data-old_color="#000" data-original="#000000" fill="#327ebb">
                                                </path>
                                            </svg>
                                        </button>
                                        <form autocomplete="off" class="search-input">
                                            <input name="search" ng-model="searchText" placeholder="Find friends, messages ..." readonly="" type="text"/>
                                        </form>
                                    </div>
                                </div>
                                <div class="content-chat">
                                    <ul>
                                        <li ng-click="openChatBubble(item,true)" ng-repeat="item in rooms|filter:{name:searchText}">
                                            <button type="button">
                                                <div class="content-chat-main">
                                                    <div class="content-chat-main-img">
                                                        <figure>
                                                            <img src="resources/images/thumnails/group-default.png" style="display: block; height: 70px; width: 70px;"/>
                                                        </figure>
                                                    </div>
                                                    <div class="content-chat-main-info">
                                                        <div class="content-chat-main-info-title">
                                                            <h2 class="bold">
                                                                {{item.name}}
                                                            </h2>
                                                        </div>
                                                    </div>
                                                </div>
                                            </button>
                                        </li>
                                        <li ng-click="openChatBubble(item,false)" ng-repeat="item in users">
                                            <button type="button">
                                                <div class="content-chat-main">
                                                    <div class="content-chat-main-img">
                                                        <figure>
                                                            <img src="{{item.image_pic||'resources/images/thumnails/profile-default.png'}}" style="display: block; height: 70px; width: 70px;"/>
                                                        </figure>
                                                    </div>
                                                    <div class="content-chat-main-info">
                                                        <div class="content-chat-main-info-title">
                                                            <h2 class="bold">
                                                                {{item.nick_name}}
                                                            </h2>
                                                        </div>
                                                    </div>
                                                </div>
                                            </button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="chat-main-user none">
                                <div class="head-chat">
                                    <div class="head-chat-info">
                                        <h2 class="fz16 pdLR10">
                                            {{chatinfo.name||chatinfo.nick_name + ' - ' + chatinfo.title}}
                                        </h2>
                                    </div>
                                    <div class="head-chat-setting">
                                        <p style="color: #fff; padding:0 10px; cursor: pointer; margin: 0">
                                            <svg class="h25px" viewbox="0 0 512 512">
                                                <circle class="active-path" cx="256" cy="256" data-old_color="#327ebb" data-original="#000000" fill="#327ebb" r="64">
                                                </circle>
                                                <circle class="active-path" cx="256" cy="448" data-old_color="#327ebb" data-original="#000000" fill="#327ebb" r="64">
                                                </circle>
                                                <circle class="active-path" cx="256" cy="64" data-old_color="#327ebb" data-original="#000000" fill="#327ebb" r="64">
                                                </circle>
                                            </svg>
                                        </p>
                                        <div class="head-chat-setting-mode">
                                            <div class="head-chat-setting-mode-noti">
                                                <h2>
                                                    Notification
                                                </h2>
                                                <div class="checkedbox-toggle-1 right">
                                                    <input class="" name="isnotification" ng-change="changeSetting()" ng-false-value="'0'" ng-model="currentsetting.isnotification" ng-true-value="'1'" type="checkbox"/>
                                                    <i>
                                                    </i>
                                                    <span>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="separator-right">
                                            </div>
                                            <div class="head-chat-setting-mode-noti">
                                                <h2>
                                                    Sound Setting
                                                </h2>
                                                <div class="checkedbox-toggle-1 right">
                                                    <input class="" ng-change="changeSetting()" ng-false-value="'0'" ng-model="currentsetting.issound" ng-true-value="'1'" type="checkbox"/>
                                                    <i>
                                                    </i>
                                                    <span>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="bg-white pd10 mgT10 max-h1200px scrollbar">
                                                <div class="mgB5 dis-flex" ng-repeat="item in sounds">
                                                    <div class="radio-field-2 mgR3">
                                                        <input input="" name="rdSound" ng-change="changeSetting()" ng-model="$parent.currentsetting.sound_id" type="radio" value="{{item.id}}">
                                                            <i>
                                                            </i>
                                                        </input>
                                                    </div>
                                                    <span class="label-1">
                                                        {{item.name}}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="app-content">
                                    <div class="app-content-inner">
                                        <ion-scroll class="scroll-area" delegate-handle="scrollerPopupChatDetail" direction="y" has-bouncing="false" on-scroll="scrollContent('scrollerPopupChatDetail')" overflow-scroll="false">
                                            <ion-refresher on-refresh="myScrollEvent()" pulling-text="Loading older messages...">
                                            </ion-refresher>
                                            <div class="content-pd">
                                                <div class="lst-chat-history pdTB20">
                                                    <div class="itm" ng-class="{me: history.from_user == currentuser.id}" ng-if="history.message!=''" ng-repeat="history in histories">
                                                        <div class="message layout-fixed clear">
                                                            <div class="thumnail-area clear v-top-i" ng-click="addMessageHashtag(getNicknameForGroup(history.from_user))">
                                                                <button class="thumnail bg-transparent">
                                                                    <img ng-src="{{::getImage(history.from_user)||'resources/images/thumnails/profile-default.png'}}"/>
                                                                </button>
                                                            </div>
                                                            <div class="text-area v-top-i" ng-if="history.applicationtype==applicationtype.text">
                                                                <div class="message clr-red" ng-bind-html="history.message||history.contents" ng-if="(history.opportunity_id == oppId && oppId>0)">
                                                                </div>
                                                                <div class="message" ng-bind-html="history.message||history.contents" ng-if="!(history.opportunity_id == oppId && oppId>0)">
                                                                </div>
                                                                <div class="date text-date-1">
                                                                    {{::formatDate(history)}}
                                                                </div>
                                                            </div>
                                                            <div class="text-area v-top-i" ng-if="history.applicationtype==applicationtype.file">
                                                                <div class="message">
                                                                    <a ng-click="downloadFile(history)">
                                                                        <img class="h48px" src="img/file-chat.png"/>
                                                                        {{history.filename||history.filename}}
                                                                    </a>
                                                                    <div class="date text-date-1">
                                                                        {{::formatDate(history)}}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="text-area v-top-i" ng-if="history.applicationtype==applicationtype.image">
                                                                <div class="message">
                                                                    <div href="{{history.message||history.contents}}" ng-click="downloadFile(history)">
                                                                        <img class="img-file" ng-src="{{history.thumbnail}}"/>
                                                                        {{history.filename}}
                                                                    </div>
                                                                </div>
                                                                <div class="date text-date-1">
                                                                    {{::formatDate(history)}}
                                                                </div>
                                                            </div>
                                                            <div class="text-area v-top-i" ng-if="history.applicationtype==applicationtype.link">
                                                                <div class="message" ng-bind-html="history.message||history.contents">
                                                                </div>
                                                                <div class="date text-date-1">
                                                                    {{::formatDate(history)}}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </ion-scroll>
                                    </div>
                                </div>
                                <div class="footer-chat">
                                    <div class="footer-chat-icon">
                                        <button class="btn-emoticon" ng-click="setTabEmoticonChat('Set1')" type="button">
                                            <!-- <button type="button" ng-click="openEmo();"> -->
                                            <svg class="h25px" viewbox="0 0 368 368">
                                                <path d="M261.336,226.04c-3.296-2.952-8.36-2.664-11.296,0.624C233.352,245.312,209.288,256,184,256 c-25.28,0-49.352-10.688-66.04-29.336c-2.952-3.288-8-3.576-11.296-0.624c-3.296,2.944-3.568,8-0.624,11.296 C125.76,259.368,154.176,272,184,272c29.832,0,58.248-12.64,77.96-34.664C264.904,234.04,264.624,228.984,261.336,226.04z" fill="#327ebb">
                                                </path>
                                                <path d="M184,0C82.544,0,0,82.544,0,184s82.544,184,184,184s184-82.544,184-184S285.456,0,184,0z M184,352 c-92.64,0-168-75.36-168-168S91.36,16,184,16s168,75.36,168,168S276.64,352,184,352z" fill="#327ebb">
                                                </path>
                                                <path d="M248,128c-22.056,0-40,17.944-40,40c0,4.416,3.584,8,8,8c4.416,0,8-3.584,8-8c0-13.232,10.768-24,24-24s24,10.768,24,24 c0,4.416,3.584,8,8,8c4.416,0,8-3.584,8-8C288,145.944,270.056,128,248,128z" fill="#327ebb">
                                                </path>
                                                <path d="M144,168c0,4.416,3.584,8,8,8s8-3.584,8-8c0-22.056-17.944-40-40-40c-22.056,0-40,17.944-40,40c0,4.416,3.584,8,8,8 s8-3.584,8-8c0-13.232,10.768-24,24-24S144,154.768,144,168z" fill="#327ebb">
                                                </path>
                                            </svg>
                                        </button>
                                    </div>
                                    <div style="flex: 1">
                                        <textarea class="input content-measse-chat" hashtag="" id="message" my-text="" ng-focus="stopBlink($event)" ng-keypress="checkKeypress($event)" ng-keyup="sendMessage_mobile($event,'false')" ng-model="$parent.message" ng-trim="boolean" placeholder="Message ...">
                                        </textarea>
                                    </div>
                                    <div class="group-file-voice-img">
                                        <button class="send-measse" id="btnSendMessage" ng-click="sendMessage_mobile($event,'true')" type="button">
                                            <svg class="h25px" viewbox="0 0 448.011 448.011">
                                                <path class="active-path" d="M438.731,209.463l-416-192c-6.624-3.008-14.528-1.216-19.136,4.48c-4.64,5.696-4.8,13.792-0.384,19.648l136.8,182.4    l-136.8,182.4c-4.416,5.856-4.256,13.984,0.352,19.648c3.104,3.872,7.744,5.952,12.448,5.952c2.272,0,4.544-0.48,6.688-1.472    l416-192c5.696-2.624,9.312-8.288,9.312-14.528S444.395,212.087,438.731,209.463z" data-old_color="#327ebb" data-original="#000000" fill="#327ebb">
                                                </path>
                                            </svg>
                                        </button>
                                        <button class="no-send-measse" ng-click="openPicker()" type="button">
                                            <svg class="h25px" viewbox="0 0 417.416 417.416">
                                                <path class="active-path" d="M392.526,38.439c-16.077-16.076-37.451-24.93-60.187-24.93s-44.11,8.854-60.187,24.93L19.295,291.297  c-25.727,25.727-25.727,67.587,0,93.314c12.863,12.863,29.76,19.295,46.657,19.295c16.896,0,33.793-6.432,46.656-19.295  l199.146-199.146c18.247-18.247,18.247-47.937,0-66.185c-18.247-18.247-47.938-18.247-66.185,0l-127.94,127.939  c-3.905,3.905-3.905,10.237,0,14.143s10.238,3.905,14.142,0l127.94-127.939c10.448-10.449,27.451-10.449,37.899,0  c10.449,10.449,10.449,27.451,0,37.9L98.467,370.469c-17.929,17.928-47.101,17.929-65.03,0  c-8.685-8.685-13.468-20.232-13.468-32.515s4.783-23.83,13.468-32.515L286.294,52.582c12.299-12.299,28.651-19.072,46.045-19.072  s33.746,6.773,46.044,19.072c25.389,25.389,25.389,66.7,0,92.089L196.731,326.323c-3.905,3.905-3.905,10.237,0,14.143  s10.237,3.905,14.143,0l181.652-181.652C425.712,125.626,425.712,71.626,392.526,38.439z" data-old_color="#151212" data-original="#000000" fill="#327ebb">
                                                </path>
                                            </svg>
                                        </button>
                                        <button class="no-send-measse" ng-click="filePicker()" type="button">
                                            <svg class="h25px" viewbox="0 0 489.4 489.4">
                                                <path class="active-path" d="M0,437.8c0,28.5,23.2,51.6,51.6,51.6h386.2c28.5,0,51.6-23.2,51.6-51.6V51.6c0-28.5-23.2-51.6-51.6-51.6H51.6    C23.1,0,0,23.2,0,51.6C0,51.6,0,437.8,0,437.8z M437.8,464.9H51.6c-14.9,0-27.1-12.2-27.1-27.1v-64.5l92.8-92.8l79.3,79.3    c4.8,4.8,12.5,4.8,17.3,0l143.2-143.2l107.8,107.8v113.4C464.9,452.7,452.7,464.9,437.8,464.9z M51.6,24.5h386.2    c14.9,0,27.1,12.2,27.1,27.1v238.1l-99.2-99.1c-4.8-4.8-12.5-4.8-17.3,0L205.2,333.8l-79.3-79.3c-4.8-4.8-12.5-4.8-17.3,0    l-84.1,84.1v-287C24.5,36.7,36.7,24.5,51.6,24.5z" data-old_color="#0E0C0C" data-original="#000000" fill="#327ebb">
                                                </path>
                                                <path class="active-path" d="M151.7,196.1c34.4,0,62.3-28,62.3-62.3s-28-62.3-62.3-62.3s-62.3,28-62.3,62.3S117.3,196.1,151.7,196.1z M151.7,96    c20.9,0,37.8,17,37.8,37.8s-17,37.8-37.8,37.8s-37.8-17-37.8-37.8S130.8,96,151.7,96z" data-old_color="#0E0C0C" data-original="#000000" fill="#327ebb">
                                                </path>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                                <div class="chat-emoticon" ng-include="'templates/dashboard/chat/popup/submodule/emotico.tpl'">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="drop-area" id="drop-area" style="z-index: 99999999">
                        <div class="drop-area__item">
                            <i aria-hidden="true" class="fa fa-times">
                            </i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="app-content-popup-area">
        </div>
    </ion-content>
</ion-view>