@extends('app_admin')

@section('title', 'Conversation with '.$client->name.' | Luxury Concierge')

@section('content')
  <div class="container-fluid" ng-controller="UserCtlr" ng-cloak>
    <div class="page-header">
      <div class="back-navigation no-mg">
        <a href="javascript:history.go(-1)" class="btn-back">Back</a>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <div class="panel profile">
          <div class="profile-image text-center">
            <img src="{{ asset('/assets/images/loading-primary.svg') }}" data-original="{{ asset($client->avatar) }}" class="lazy user-profile-avatar" alt="" />
          </div>
          <div class="profile-main-info">
            <div class="profile-info">
              <ul class="profile-info-list list-unstyled">
                <li>
                  <div class="media">
                    <div class="media-left media-middle">
                      <span class="icon icon-user_profile_avatar_man_boy_silhoette"></span>
                    </div>
                    <div class="media-body">
                      <h2 class="name">{{ $client->first_name.' '.$client->last_name }}</h2>
                      <div class="gender">{{ $client->gender }}</div>
                      @if($client->date_of_birth)
                        <div class="date-of-birth">{{ date('F d, Y', strtotime($client->date_of_birth)) }}</div>
                      @endif
                    </div>
                  </div>
                </li>
                @if($client->phone || $client->cell_phone)
                  <li>
                    <div class="media">
                      <div class="media-left media-middle media-fifty text-center">
                        <span class="icon icon-phone_iphone_mobile_smartphone_device_contact_call_5 nofloat nomg"></span>
                      </div>
                      <div class="media-body">
                        <h4>
                          @if($client->phone && $client->cell_phone)
                            <a href="tel:{{ $client->cell_phone }}">{{ phone_number($client->cell_phone) }}</a>{{ ' / ' }}<a href="tel:{{ $client->phone }}">{{ phone_number($client->phone) }}</a>
                          @elseif($client->phone)
                            <a href="tel:{{ $client->phone }}">{{ phone_number($client->phone) }}</a>
                          @else
                            <a href="tel:{{ $client->cell_phone }}">{{ phone_number($client->cell_phone) }}</a>
                          @endif
                        </h4>
                      </div>
                    </div>
                  </li>
                @endif
                @if($client->email)
                  <li>
                    <div class="media">
                      <div class="media-left media-middle">
                        <span class="icon icon-mail_email_envelope_message"></span>
                      </div>
                      <div class="media-body">
                        <h4><a href="mailto:{{ $client->email }}">{{ $client->email }}</a></h4>
                      </div>
                    </div>
                  </li>
                @endif
                @if($client->unit_number)
                  <li>
                    <div class="media">
                      <div class="media-left media-middle">
                        <span class="icon icon-home_house_main_homepage"></span>
                      </div>
                      <div class="media-body">
                        <h4>Unit number: {{ $client->unit_number }}</h4>
                        @if($client->ownership)
                          <h4>{{ ucfirst($client->ownership) }}</h4>
                        @endif
                      </div>
                    </div>
                  </li>
                @endif
                <li>
                  <img src="{{ asset('/assets/images/venues/logo/'.$client->venue->first()->logo_image) }}" width="165"/>
                </li>
              </ul>
            </div>
          </div>
        </div><!--./panel -->
        <div class="row sub-info">
          <div class="col-sm-6 col-xs-12">
            <div class="panel profile-statistic live-chat" style="margin: 0">
              <div class="icon-table">
                <span class="statistic-icon icon-layers_windows_multiple_copy_duplicate"></span>
              </div>
              <div class="statistic-table">
                <h5>Total of requests</h5>
                <h2>{{ $client->active_client_requests()->count() }}</h2>
              </div>
            </div><!--./panel -->
          </div><!--./col-sm-6 -->
          <div class="col-sm-6 col-xs-12">
            <div class="panel profile-statistic live-chat" style="margin: 0">
              <div class="icon-table">
                <span class="statistic-icon icon-clock_time_date"></span>
              </div>
              <div class="statistic-table">
                <h5>Last Time Online</h5>
                @if($client->online_status == "offline")
                  <h2><span am-time-ago="{{ $client->last_login }}"></h2>
                @else
                  <h2>{{ $client->online_status }}</h2>
                @endif
              </div>
            </div><!--./panel -->
          </div><!--./col-sm-6 -->
        </div><!--./row -->
        <div class="panel table-information profile-edit clearfix" ng-init="get_resident({{ $client->id }})" ng-cloak>
          <div class="note-wrapper text-center">
            <div class="no-notes" ng-if="resident.notes.length == 0">
              <span class="icon-book_read_history_bookmarks_education_journal_log_logbook_2"></span>
              <h5>No notes have been added</h5>
            </div>
            <div class="conversation-panel-inner profile">
              <div ng-repeat="note in resident.notes">
                <div class="message-wrapper clearfix you wow animated fadeInUp" data-wow-delay="200ms" data-wow-duration="400ms">
                  <span class="avatar ng-binding">
                    <img class="lazy concierge-profile-avatar" alt="" ng-src="@{{ note.concierge.avatar }}">
                    @{{ note.concierge.first_name }}
                  </span>
                  <div class="message">
                    <div class="bubble ng-binding">@{{ note.text }} </div>
                    <div class="time"><span>@{{ note.created_at | amDateFormat:'MM/DD/YYYY HH:mm A' }}</span></div>
                  </div>
                </div>
              </div>
            </div>

            <div class="form-group">
              <div class="input-group">
                <input type="text" ng-model="residentNote" class="form-control" placeholder="Note" ng-change="updateValueInScope()" ng-keydown="$event.which === 13 && add_resident_note(resident, user)">
                <div class="input-group-addon">
                  <button class="btn btn-small right" ng-click="add_resident_note(resident, user)">Submit new note</button>
                </div>
              </div>
            </div>

          </div>
        </div><!--./panel -->
      </div><!--./col-sm-6 -->
      <div class="col-sm-6" ng-controller="LiveChatCtlr">
        <div class="conversation-panel" ng-cloak>
          <div class="conversation-panel-inner scroll-bottom" scroll-bottom="resident.chat">
            <div ng-repeat="liveMessage in resident.chat">
              <div class="message-wrapper clearfix" ng-class="{true: 'me', false: 'you'}[liveMessage.sender_id == {{ Auth::user()->id }}]">
                <span class="avatar">
                  <img ng-show ="liveMessage.sender_id !== {{ Auth::user()->id }}" src="{{ asset($client->avatar) }}" class="lazy concierge-profile-avatar" alt=""/>
                  <img ng-show ="liveMessage.sender_id == {{ Auth::user()->id }}" src="/{{ Auth::user()->avatar }}" alt=""/>
                  <span ng-show ="liveMessage.sender_id !== {{ Auth::user()->id }}">{{ $client->first_name }}</span>
                  <span ng-show ="liveMessage.sender_id == {{ Auth::user()->id }}">{{ Auth::user()->first_name }}</span>
                </span>
                <div class="message">
                  <div class="bubble">
                    <p ng-bind-html="liveMessage.message | parseUrl | linkify">@{{ liveMessage.message }}</p>
                  </div>
                  <div class="time"><span>@{{ liveMessage.created_at | amDateFormat:'MM/DD/YYYY HH:mm A' }}</span></div>
                </div>
              </div>
            </div>
            <div class="message-wrapper" ng-show="fileUploadProgress == true">
              <div class="bubble me">
                <p><span class="file-upload-loading"><img src="/assets/images/loading-primary.svg" width="32px"/></span></p>
                <div class="message-time">
                  <span class="concierge-name left">@{{ uploadProgress }}%</span>
                </div>
              </div>
            </div>
          </div>
            <div class="form-group">
               <input class="form-control message-box" ng-model="message.text"
                ng-keydown="$event.which === 13 && send_live_message_to_client(resident, {{ Auth::user()->id }})"
                required></input>
                <br/>
                <button class="btn btn-small" ngf-select="concierge_chatFileUpload($file, {{ $client->id }}, {{ Auth::user()->id }})" ngf-max-size="2MB" ngf-resize="{width: 600, height: 600}">Add attachment</button>
            </div>
            <button class="btn full-width uppercase" ng-click="send_live_message_to_client(resident, {{ Auth::user()->id }})">Submit new message</button>
        </div>
      </div>
  </div>
@endsection

@section('script')
  <script 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', [
      'angularMoment',
      'modal',
      'user',
      'socket',
      'liveChat',
      'ngFileUpload',
      '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="/assets/js/ng-file-upload-shim.min.js"></script>
  <script type="text/javascript" src="/assets/js/ng-file-upload.min.js"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/user.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>
@endsection