{% raw %}

<div class="chat-client">
    <div ng-controller="chatClientCtrl">
        <div id="btnChat" class="pull-right m-l-lg m-r-lg" ng-click="chatSupport.showChat()"
            style="position:fixed;bottom:0px;right:60px;z-index: 1000000">
            <button class="btn btn-md btn-primary" style="font-weight:bold;border-radius: 5px !important;">
                <i class="fa fa-comment-o m-r-sm" style="color:white;"></i>
                <span>Chat với HDV - Gọi 0896 133 588</span>
            </button>
        </div>
        <div class="chat-support" style="display: none" id="panelChat">
            <div class="chat-support-header" ng-click="chatSupport.hideChat()">
                <span style="font-size:14px;"><b>Hóa Đơn Việt - Tư vấn trực tuyến</b>
                </span>
                <i class="btn-close"></i>
            </div>
            <div class="chat-support-info">
                <div class="avatar">
                    <img ng-src="{{chatSupport.roomchat.avatar}}" />
                    <span class="status" ng-class="{'online':chatSupport.roomchat.is_online}"></span>
                </div>
                <div class="user-info">
                    <p style="font-weight: bold;margin: 0">
                        {{chatSupport.roomchat.fullname}}
                    </p>
                    <p style="margin: 0; font-size:12px;">Tư vấn viên</p>
                </div>
            </div>
            <div class="chat-support-message" id="ChatPanel">
                <div class="message-box" ng-repeat="message in chatSupport.roomchat.messages">
                    <div ng-if="!message.type"
                        ng-class="{'m-l-lg':(!message.is_user_system),'m-r-lg':(message.is_user_system)}">
                        <div ng-if="chatSupport.roomchat.messages[$index].is_user_system != chatSupport.roomchat.messages[$index-1].is_user_system"
                            ng-class="{'text-user-system':(message.is_user_system),'text-user-customer':(!message.is_user_system)}"
                            style="font-size:12px">
                            <span style="margin-right: 7px;" ng-if="!message.is_user_system">Bạn</span>
                            <span style="margin-left: 7px;"
                                ng-if="message.is_user_system">{{chatSupport.roomchat.fullname}}</span>
                        </div>
                        <div ng-class="{'bg-user-customer':(!message.is_user_system),'bg-user-system':(message.is_user_system)}"
                            class="message-text" ng-bind-html="message.message"></div>
                    </div>
                    <div ng-if="message.type==='disconnect'" class="text-center"><i class="text-danger"
                            style="font-size:11px"><span>{{chatSupport.roomchat.fullname}}</span> đã ngắt kết nối...</i>
                    </div>
                    <div ng-if="message.type==='reconnect'" class="text-center"><i class="text-success"
                            style="font-size:11px"><span>{{chatSupport.roomchat.fullname}}</span> đã kết nối lại</i>
                    </div>
                </div>
            </div>
            <div class="chat-support-footer">
                <textarea ng-model="chatSupport.messageInput" id="messContent" autofocus="true"
                    placeholder="Nhập tin nhắn và nhấn Enter để gửi..."
                    ng-keypress="chatSupport.send($event);"></textarea>
            </div>
            <!--<div class="button-close">
                <div class="close-icon" />
            </div>-->
        </div>
    </div>
</div>
{% endraw %}
<script type="text/javascript" src="/mylib/socket.io/socket.io-1.3.7.js"></script>
<script type="text/javascript" src="/assets/frontend/pages/scripts/chat.js"></script>
<style type="text/css">
    .text-gray {
        color: gray;
    }

    .m-l-lg {
        margin-left: 30px;
    }

    .m-r-lg {
        margin-right: 30px;
    }


</style>