@extends('app_admin')

@section('title', 'Chat | Luxury Concierge')

@section('content')
  <div class="container-fluid" ng-controller="UserCtlr" ng-init="get_chat_users()" ng-cloak>
    <div class="page-header">
      <div class="header left">
        <span class="icon icon-message_chat_bubble_comment_talk_conversation"></span>
        <h1 class="header-title">Live Chat</h1>
      </div>
      <div class="sort" ng-show="chat_clients.length">
        <div class="search-field">
          <input type="search" placeholder="Search here ..." ng-model="filterChat"/>
          <div class="search-result" ng-if="filterChat" ng-cloak>@{{ filtered.length }} results found</div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="online-client-list" ng-show="chat_clients.length">
        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12" ng-repeat="client in chat_clients | filter: filterChat as filtered">
          <div class="panel live-chat">
            <div class="live-chat-userinfo">
              <div class="user-avatar">
                <span class="status" ng:class="{true: 'online', false: ''}[client.client_data.online_status == 'online']" data-tooltipinfo="Client Online" data-side="right" tabindex="0"></span>
                <img ng-src="@{{ client.client_data.avatar }}"/>
              </div>
              <div class="user-info">
                <a href="/chat/@{{ client.client_data.id }}"><h3>@{{ client.client_data.first_name + ' ' + client.client_data.last_name }}</h3></a>
                <span class="time-ago">@{{ client.last_message.created_at | amDateFormat: 'MM/DD/YYYY HH:mm A' }}</span>
              </div>
            </div>
            <div class="last-message triangle-border top">
              <p ng-bind-html="client.last_message.message | chatParse | linkify">
                @{{ client.last_message.message | limitTo:'50' }} @{{ client.last_message.message.length > 50 ? '...' : '' }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-12"><br/><h5 ng-if="chat_clients.length == 0">{!! $empty !!}</h5></div>
    </div>
  </div>
@endsection

@section('script')
  <script type="text/javascript" src="https://cdn.rawgit.com/AngularClass/angular-websocket/v2.0.0/dist/angular-websocket.min.js"></script>
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'modal',
      'user',
      'socket',
      'liveChat',
      'uiSwitch'
    ]);
  </script>
  <script type="text/javascript" src="/assets/js/moment.min.js"></script>
  <script type="text/javascript" src="/assets/js/angular-moment.min.js"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/socket.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/liveChat.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/modal.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/user.js') }}"></script>
@endsection