@extends('app_admin')

@section('title', 'Request '.$request->id.' | Luxury Concierge')

@section('content')
  <div class="container-fluid" ng-controller="RequestCtlr" ng-init="get_admin_request({{ $request->id }})">
    <div class="row">
      <div class="col-sm-12 col-md-7">
        <div class="page-header">
          <div class="back-navigation">
            <a href="javascript:history.go(-1)" class="btn-back">Back</a>
          </div>
          <span class="icon icon-layers_windows_multiple_copy_duplicate"></span>
          <h1>Request ID <span class="regular wow animated fadeIn">{{ $request->id }}</span></h1>
        </div>
        <uib-tabset active="activeForm">
          <uib-tab index="0" heading="Request Information">
            <div class="requests-item">
              <div class="requests-item-info">
                <div class="request-category-mobile">
                  <span>Click for details</span>
                  <ul class="tooltip-list list-unstyled">
                    <li data-tooltipinfo="{{ $request->category }}"
                      data-side="top"
                      tabindex="0">
                      <i class="icon-folder_files_storage_open"></i>
                    </li>
                    @if($request->concierge)
                      <li data-tooltipinfo="{{ $request->concierge->first_name.' '.$request->concierge->last_name }}"
                        data-side="top"
                        tabindex="0">
                        <i class="icon-headphones_headset_audio_music_sound_support"></i>
                      </li>
                    @endif
                    <li data-tooltipinfo="{{ $request->date }}"
                      data-side="top"
                      tabindex="0">
                      <i class="icon-clock_time_date"></i>
                    </li>
                  </ul>
                </div>
                <h5 class="request-category"
                  ng-init="category = '{{ $request->category }}'">
                  <div class="form-group select">
                    <label for="category">Category:</label>
                    <select class="form-control"
                      name="category"
                      ng-model="category"
                      ng-change="categorize(request, category)">
                      <option value="">Select Category</option>
                      @foreach($categories as $category)
                        <option value="{{ $category->name }}">{{ $category->name }}</option>
                      @endforeach
                    </select>
                  </div>
                  <div ng-init="date = '{{ $request->date ? angular_datetime($request->date) : '' }}'">
                    <span class="request-time nowrap"
                      ng-show="date">
                      <i class="icon-calendar_date_schedule_event_month_year_3"></i>@{{ date | date : 'MMMM dd, yyyy h:mm a' }}
                    </span>
                    <div class="dropdown" style="margin: 10px 0">
                      <button id="request_date"
                        class="btn btn-small"
                        role="button"
                        data-toggle="dropdown"
                        data-target="#">@{{ date ? 'Change Date' : 'Set Request Date' }}
                      </button>
                      <ul class="dropdown-menu" role="menu" ng-disabled>
                        <datetimepicker
                          data-ng-model="date"
                          data-datetimepicker-config="{ dropdownSelector: '#request_date', startView: 'day', minView: 'minute' }"
                          ng-change="change_request_date(request, date)"/>
                      </ul>
                    </div>
                  </div>
                  @if(Auth::user()->hasRole('virtual_concierge') || Auth::user()->hasRole('onsite_concierge'))
                    <div ng-init="request_check_if_assigned({{ $request->concierge_id }})" ng-switch="request_assigned">
                      @if($request->concierge)
                        <span class="request-concierge nowrap" ng-switch-when="true">
                          <i class="icon-user_profile_avatar_man_boy_silhoette"></i>Concierge: <a href="{{ url('concierges/'.$request->concierge->id) }}">{{ $request->concierge->first_name.' '.$request->concierge->last_name }}</a>
                        </span>
                        @if(!$request->task)
                          <button ng-if="request" class="task btn btn-small assign" ng-click="create_request_task(request)" ng-cloak>Create Task</button>
                        @endif
                      @else
                        <button class="btn btn-small assign" ng-switch-when="false" ng-click="assign_to_me(request, user)" ng-cloak>Assign to me</button>
                        <span class="request-concierge nowrap" ng-switch-when="true">
                          <i class="icon-user_profile_avatar_man_boy_silhoette"></i>Concierge: <a href="/concierges/@{{ request.concierge.id }}">@{{ request.concierge.first_name + ' ' + request.concierge.last_name }}</a>
                          <button ng-if="request && !request.task" class="task btn btn-small assign" ng-click="create_request_task(request)" ng-cloak>Create Task</button>
                        </span>
                        <br><br>
                      @endif
                    </div>
                  @endif
                  <div>
                    <span class="request-concierge nowrap">
                      <i class="icon-layers_windows_multiple_copy_duplicate"></i>{{ 'Request Type: '.$request->request_type->name }}
                    </span>
                  </div>
                </h5>
                <p>{{ $request->description }}</p>
                @if($request->amenity)
                  <div class="media participants">
                    <div class="media-left media-middle participants-icon">
                      <span class="icon-amenities"></span>
                    </div>
                    <div class="media-body media-middle participants-text">{{ $request->amenity }}</div>
                  </div>
                @endif
                @if($request->destination)
                  <div class="media participants">
                    <div class="media-left media-middle participants-icon">
                      <span class="icon-camper"></span>
                    </div>
                    <div class="media-body media-middle participants-text">{{ $request->destination }}</div>
                  </div>
                @endif
                @if($request->participants)
                  <div class="media participants">
                    <div class="media-left media-middle participants-icon">
                      <span class="icon-collective_group_masses_friends_company_silhoette"></span>
                    </div>
                    <div class="media-body media-middle participants-text">{{ $request->participants }} Participants</div>
                  </div>
                @endif
                @if($request->vehicle)
                  <div class="media participants">
                    <div class="media-left media-middle participants-icon">
                      <span class="icon-sign_car_passenger"></span>
                    </div>
                    <div class="media-body media-middle participants-text">{{ $request->vehicle }}</div>
                  </div>
                @endif
                <div class="request-status-wrapper">
                  <div class="request-concierge">
                    <div class="media">
                      <div class="media-left media-middle client-image">
                        <img src="{{ '/'.$request->client->avatar }}" class="lazy concierge-profile-avatar" alt=""/>
                      </div>
                      <div class="media-body">
                        <span>Requested by:</span>
                        <h5 ng-switch="sinceTime(request.created_at)">
                          <a href="{{ url('residents/'.$request->client->id) }}">{{ $request->client->first_name.' '.$request->client->last_name }}</a>
                          <span ng-switch-on="true" am-time-ago="@{{ request.created_at }}"></span>
                          <span ng-switch-on="false">@{{ request.created_date }}</span>
                        </h5>
                        @if($request->client->from_venue)
                          <div class="media participants">
                            <div class="media-left media-middle participants-icon">
                              <span class="icon-home_house_main_homepage"></span>
                            </div>
                            <div class="media-body media-middle participants-text">{{ $request->client->from_venue }}</div>
                          </div>
                        @endif
                      </div>
                    </div>
                  </div>
                  <span class="request-status">
                    <div ng-show="request.archived == false">
                      <div ng-show="request.status == true">
                        <span class="status-icon solved icon-check_complete_alright_ok_tick_test_circle_button" ></span>
                        <h5>Solved</h5>
                      </div>
                      <div ng-show="request.status == false">
                        <span class="status-icon pending icon-question_ask_help_support_circle_button"></span>
                        <h5>Pending</h5>
                      </div>
                    </div>
                    <div ng-show="request.archived == true">
                      <div>
                        <span class="status-icon pending icon-delete_close_hide_circle_button col-red"></span>
                        <h5>Canceled</h5>
                      </div>
                    </div>
                  </span><!--./request-status -->
                </div><!--./request-status-wrapper -->
                @if($request->concierge && $request->concierge->rateable && $request->rating)
                  <hr>
                  <div class="request-rating text-center">
                    <div class="rating">
                      @for($i = 0; $i < $request->rating; $i++)
                        <i class="concierge-star fa fa-star"></i>
                      @endfor
                    </div>
                    @if($request->comment)
                      <div>{{ $request->comment }}</div>
                    @endif
                  </div>
                @endif
                <hr>
                <span>
                  <div class="note-wrapper text-center">
                    <h4><i class="icon-message_chat_bubble_comment_talk_conversation"></i> This request has <span class="regular wow animated fadeIn" ng-cloak>@{{ request.request_notes.length }} notes</span>  <a class="btn btn-small no-open" ng-click="slideToggle1 =! slideToggle1">@{{ !request.request_notes.length ? 'Add Note' : 'View' }}</a></h4>
                    <div class="slide-toggle clearfix wow animated fadeIn" ng-show="slideToggle1">
                      <div class="no-notes" ng-if="!request.request_notes.length">
                        <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" ng:class="{true:'empty', false:''}[request.request_notes.length==0]">
                        <div ng-repeat="note in request.request_notes" >
                         <div class="message-wrapper clearfix you wow animated fadeInUp" data-wow-delay="200ms" data-wow-duration="400ms">
                           <span class="avatar ng-binding">
                             <img ng-src="/@{{ note.concierge.avatar }}" class="lazy concierge-profile-avatar" alt="">
                             @{{ 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" ng-controller="RequestCtlr">
                      <div class="input-group">
                        <input type="text" ng-model="requestNote" class="form-control" placeholder="Note" ng-keydown="$event.which === 13 && !$event.shiftKey && newRequestNote({{ $request->id }})">
                        <div class="input-group-addon">
                          <button class="btn btn-small right" ng-click="newRequestNote({{ $request->id }})">Submit new note</button>
                        </div>
                      </div>
                    </div>
                   </div>
                  </div>
                </span>
                <div ng-show="request.concierge_id">
                  <div class="controls text-center">
                    <span ng-if="request.archived == false">
                      <form class="inline-block nowrap third-width btn-sm-block" ng-submit="ticket(request, 1, {{ $request->client->id }}, {{ Auth::user()->id }} )" class="center" ng-if="request.status == false">
                        <button class="btn-oval reopen nolineheight text-sm-center btn-sm-block">Close request</button>
                      </form>
                      <form class="inline-block nowrap third-width btn-sm-block" ng-submit="ticket(request, 0, {{ $request->client->id }}, {{ Auth::user()->id }} )" class="center" ng-if="request.status == true">
                        <button class="btn-oval reopen nolineheight text-sm-center btn-sm-block">Reopen request</button>
                      </form>
                      <form class="inline-block nowrap third-width btn-sm-block xs-mg-10" ng-show="!request.concierge && request.status == 0" ng-submit="archive_unnasigned(request, 1)">
                        <button class="btn-oval reopen nolineheight text-sm-center btn-sm-block">Cancel</button>
                      </form>
                      <form class="inline-block nowrap third-width btn-sm-block xs-mg-10" ng-show="request.concierge && request.status == 0" ng-submit="concierge_archive(request, 1, request.client_id, {{ Auth::user()->id }})">
                        <button class="btn-oval reopen nolineheight text-sm-center btn-sm-block">Cancel</button>
                      </form>
                    </span>
                    <span ng-if="request.archived == true">
                      <form class="inline-block nowrap third-width btn-sm-block xs-mg-10"  ng-show="!request.concierge" ng-submit="archive_unnasigned(request, 0)">
                        <button class="btn-oval reopen nolineheight text-sm-center">Resubmit</button>
                      </form>
                      <form class="inline-block nowrap third-width btn-sm-block xs-mg-10" ng-show="request.concierge" ng-submit="concierge_archive(request, 0, request.client_id, {{ Auth::user()->id }})">
                        <button class="btn-oval reopen nolineheight text-sm-center">Resubmit</button>
                      </form>
                    </span>
                  </div>
                </div><!--./requests-item-action -->
              </div><!--./requests-item-info -->
            </div>

            @if($request->directory)
              <div class="panel directory request-panel wow animated fadeInUp" data-wow-delay="100ms" data-wow-duration="400ms">
                <div class="panel-heading">
                  <h1 class="title"><a href="{{ url('/directories/'.$request->directory->slug) }}">{{ $request->directory->name }}</a></h1>
                  <h3 class="subtitle">{{ $request->directory->category }}</h3>
                </div>
                <div class="panel-content">
                  <div class="directory-info">
                    <ul class="directory-info-list list-unstyled">
                      @if($request->directory->hyperlink)
                        <li>
                          <span class="icon icon-planet_earth_globe_world_worldwide_space_cosmos_science_solar_system"></span>
                          <a href="{{ url($request->directory->hyperlink) }}" target="_blank">{{ website($request->directory->hyperlink) }}</a>
                        </li>
                      @endif
                      @if($request->directory->address)
                        <li>
                          <span class="icon icon-map_pin_locate_location_marker_gps"></span>{{ ' '.$request->directory->address }}
                        </li>
                      @endif
                    </ul>
                  </div>
                </div>
              </div>
            @endif

            @if($request->perk)
              <div class="req-perk">
                <div class="panel directory request-panel wow animated fadeInUp" data-wow-delay="100ms" data-wow-duration="400ms">
                  <div class="perk-tag">
                    <div class="tag">
                        <i class="icon-price_tag_finance_product_info_details"></i>Residents Perk
                    </div>
                  </div>
                  <div class="panel-heading">
                    @if($request->perk->directory)
                      <h1 class="title"><a href="{{ url('/directories/'.$request->perk->directory->slug) }}">{{ $request->perk->directory->name }}</a></h1>
                    @else
                      <h1 class="title">{{ $request->perk->custom_directory }}</a></h1>
                    @endif
                    <h3 class="subtitle">{{ $request->perk->categories->last()->name }}</h3>
                  </div>
                  @if($request->perk->directory)
                    <div class="panel-content">
                      <div class="directory-info">
                        <ul class="directory-info-list list-unstyled">
                          @if($request->perk->directory->hyperlink)
                            <li>
                              <span class="icon icon-planet_earth_globe_world_worldwide_space_cosmos_science_solar_system"></span>
                              <a href="{{ url($request->perk->directory->hyperlink) }}" target="_blank">{{ website($request->perk->directory->hyperlink) }}</a>
                            </li>
                          @endif
                          <li>
                          <span class="icon icon-map_pin_locate_location_marker_gps"></span>
                            {{ $request->perk->directory->address }}
                          </li>
                        </ul>
                      </div>
                    </div>
                  @endif
                </div>
              </div>
            @endif

            @if($request->event)
              <div class="panel event request-panel wow animated fadeInUp" data-wow-delay="100ms" data-wow-duration="400ms">
                <div class="panel-heading clearfix">
                  <div class="event-date">
                    <h3 class="day">{{ date('d', strtotime($request->date)) }}</h3>
                    <span class="month uppercase">{{ date('M', strtotime($request->date)) }}</span>
                  </div>
                  <h1 class="title"><a href="{{ url('events/'.$request->event->slug.'/'.date('Y-m-d', strtotime($request->date))) }}">{{ $request->event->title }}</a></h1>
                  <h3 class="subtitle">{{ $request->event->category->name }}</h3>
                </div>
              </div>
            @endif

            @if($request->article)
              <div class="news-list request-panel slide-top wow animated fadeInUp" data-wow-delay="100ms" data-wow-duration="400ms">
                <div class="news-list-item">
                  <div class="row">
                    <div class="col-sm-12">
                      @if($request->article->images->count())
                        <div class="news-list-item-image lazy" style="background-image:url(/assets/images/articles/{{ $request->article->images->first()->hyperlink }})"></div>
                      @else
                        <div class="news-list-item-image lazy" style="background-image:url(/assets/images/default-profile.png)"></div>
                      @endif
                    </div>
                    <div class="col-sm-12">
                      <div class="news-list-item-content">
                        <span class="time">{{ date('M d', strtotime($request->date)) }}</span>
                        <a class="title" href="{{ url('news/'.$request->article->slug) }}">{{ $request->article->title }}</a>
                        {!! strlen($request->article->content) < 200 ? $request->article->content : substr($request->article->content, 0, 200).' ...' !!}
                        <div class="controls">
                          <a href="{{ url('news/'.$request->article->slug) }}" class="btn-medium bg-accent">Read more</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            @endif

            @if($request->recommendation)
              <div class="news-list request-panel slide-top wow animated fadeInUp" data-wow-delay="100ms" data-wow-duration="400ms">
                <div class="news-list-item">
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="news-list-item-image lazy" style="background-image:url(/assets/images/recommendations/{{ $request->recommendation->image }})"></div>
                    </div>
                    <div class="col-sm-12">
                      <div class="news-list-item-content">
                        <a class="title" href="{{ url('recommendations/'.$request->recommendation->slug) }}">{{ $request->recommendation->title }}</a>
                        <span class="time">{{ $request->recommendation->subtitle }}</span>
                        {!! $request->recommendation->description !!}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            @endif
          </uib-tab>

          @if(Auth::user()->hasRole('admin') || Auth::user()->hasRole('virtual_concierge'))
            <uib-tab index="1" heading="Client Information">
              <div class="panel profile">
                <div class="profile-image text-center">
                  <img src="{{ '/'.$request->client->avatar }}" class="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 media-fifty text-center">
                            <span class="icon icon-user_profile_avatar_man_boy_silhoette"></span>
                          </div>
                          <div class="media-body">
                            <h2 class="name">{{ $request->client->first_name.' '.$request->client->last_name }}</h2>
                            <div class="gender">{{ $request->client->gender }}</div>
                            <div class="date-of-birth">{{ date('F d, Y', strtotime($request->client->date_of_birth)) }}</div>
                          </div>
                        </div>
                      </li>
                      @if($request->client->phone || $request->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($request->client->phone && $request->client->cell_phone)
                                  <a href="tel:{{ $request->client->cell_phone }}">{{ phone_number($request->client->cell_phone) }}</a>{{ ' / ' }}<a href="tel:{{ $request->client->phone }}">{{ phone_number($request->client->phone) }}</a>
                                @elseif($request->client->phone)
                                  <a href="tel:{{ $request->client->phone }}">{{ phone_number($request->client->phone) }}</a>
                                @else
                                  <a href="tel:{{ $request->client->cell_phone }}">{{ phone_number($request->client->cell_phone) }}</a>
                                @endif
                              </h4>
                            </div>
                          </div>
                        </li>
                      @endif
                      @if($request->client->email)
                        <li>
                          <div class="media">
                            <div class="media-left media-middle media-fifty text-center">
                              <span class="icon icon-mail_email_envelope_message"></span>
                            </div>
                            <div class="media-body">
                              <h4><a href="mailto:{{ $request->client->email }}">{{ $request->client->email }}</a></h4>
                            </div>
                          </div>
                        </li>
                      @endif
                      @if($request->client->unit_number)
                        <li>
                          <div class="media">
                            <div class="media-left media-middle media-fifty text-center">
                              <span class="icon icon-home_house_main_homepage"></span>
                            </div>
                            <div class="media-body">
                              <h4>Unit number: {{ $request->client->unit_number }}</h4>
                              @if($request->client->ownership)
                                <h4>{{ ucfirst($request->client->ownership) }}</h4>
                              @endif
                            </div>
                          </div>
                        </li>
                      @endif
                      <img ng-src="/assets/images/venues/logo/{{ $request->client->venue->first()->logo_image  }}" width="145"/>
                    </ul>
                  </div>
                </div>
              </div><!--./panel -->
              <div class="row sub-info">
                <div class="col-sm-6 col-xs-12">
                  <div class="panel profile-statistic clearfix">
                    <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>{{ $request->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 clearfix">
                    <div class="icon-table">
                      <span class="statistic-icon icon-clock_time_date"></span>
                    </div>
                    <div class="statistic-table">
                      <h5>Last Time Online</h5>
                      @if($request->client->online_status == "offline")
                        <h2><span am-time-ago="{{ strtotime($request->client->last_login)*1000 }}"></h2>
                      @else
                        <h2>{{ $request->client->online_status }}</h2>
                      @endif
                    </div>
                  </div><!--./panel -->
                </div><!--./col-sm-6 -->
              </div><!--./row -->
              @if($request->client->family->count() >= 1)
                <div class="panel table-information clearfix" ng-cloak>
                  <div class="heading">
                    <h4>Family</h4>
                  </div>
                  @foreach($request->client->family as $family_member)
                    <div class="table-full children">
                      <div class="table-cell-half border-right">
                        <div class="icon-table">
                          <span class="statistic-icon icon-collective_group_masses_friends_company_silhoette"></span>
                        </div>
                        <div class="user-table">
                          <h2>{{ $family_member->name }}</h2>
                          <h5>{{ $family_member->gender }}</h5>
                          <h5>{{ $family_member->family_member }}</h5>
                          <h5>{{ $family_member->date_of_birth }}</h5>
                        </div>
                      </div><!--./table-cell-half -->
                      <div class="table-cell-half vertical-middle notes">
                        <h5>Notes</h5>
                        <p>
                          {{ strlen($family_member->notes) !== 0 ? $family_member->notes : "There aren't any notes added. Please add any necessary notes under the Edit section on this page." }}
                        </p>
                      </div><!--./table-cell-half -->
                    </div><!--./table-full -->
                  @endforeach
                </div><!--./panel -->
              @endif

              @if($request->client->pets->count() >= 1)
                <div class="panel table-information clearfix" ng-cloak>
                  <div class="heading">
                    <h4>Pets</h4>
                  </div>
                  @foreach($request->client->pets as $pet)
                    <div class="table-full pets">
                      <div class="table-cell-half border-right">
                        <div class="icon-table">
                          <span class="statistic-icon icon-trace_dog_animal_foodprint"></span>
                        </div>
                        <div class="user-table">
                          <h2>{{ $pet->name }}</h2>
                          <h5>{{ $pet->type }} / {{ $pet->breed }}</h5>
                          <h5>{{ $pet->color }}</h5>
                        </div>
                      </div><!--./table-cell-half -->
                      <div class="table-cell-half vertical-middle notes">
                        <h5>Notes</h5>
                        <p>
                          {{ strlen($pet->notes) !== 0 ? $pet->notes : "There aren't any notes added. Please add any necessary notes under the Edit section on this page." }}
                        </p>
                      </div><!--./table-cell-half -->
                    </div><!--./table-full -->
                  @endforeach
                </div><!--./panel -->
              @endif

              @if($request->client->vehicles->count() >= 1)
                <div class="panel table-information clearfix" ng-cloak>
                  <div class="heading">
                    <h4>Vehicles</h4>
                  </div>
                  @foreach($request->client->vehicles as $vehicle)
                    <div class="table-full vehicles">
                      <div class="table-cell-half border-right">
                        <div class="icon-table">
                          <span class="statistic-icon icon-sign_car_passenger"></span>
                        </div>
                        <div class="user-table">
                          <h2>{{ $vehicle->type }}</h2>
                          <h5>{{ $vehicle->model }} / {{ $vehicle->color }} / {{ $vehicle->year }}</h5>
                        </div>
                      </div><!--./table-cell-half -->
                      <div class="table-cell-half vertical-middle notes">
                        <h5>Notes</h5>
                        <p>
                          {{ strlen($vehicle->notes) !== 0 ? $vehicle->notes : "There aren't any notes added. Please add any necessary notes under the Edit section on this page." }}
                        </p>
                      </div><!--./table-cell-half -->
                    </div><!--./table-full -->
                  @endforeach
                </div><!--./panel -->
              @endif

            </uib-tab>
          @endif

          <uib-tab index="2" heading="Client Notes">
            <div class="panel table-information profile-edit clearfix" ng-cloak>
              <div class="note-wrapper text-center" scrollBottom="request.client.notes">
                <div class="no-notes" ng-if="request.client.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 scroll-bottom" scroll-bottom="request.client.notes">
                    <div ng-repeat="note in request.client.notes">
                      <div class="message-wrapper clearfix you animated fadeInUp">
                        <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" ng-controller="UserCtlr">
                   <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(request.client, user)">
                     <div class="input-group-addon">
                       <button class="btn btn-small right" ng-click="add_resident_note(request.client, user)">Submit new note</button>
                     </div>
                   </div>
                 </div>
              </div>
            </div><!--./panel -->
          </uib-tab>

        </uib-tabset>
      </div><!--./col-sm-6 -->

      <div class="col-sm-12 col-md-5">
        <div class="page-header messages">
          <span class="icon icon-message_chat_bubble_comment_talk_conversation"></span>
          <h1>Your Messages</h1>
        </div>
        <div class="conversation-panel" ng-cloak>
          <div class="conversation-panel-inner chat-wrap" scroll-bottom="request.messages">
            <div ng-repeat="message in request.messages">
              <div class="message-wrapper clearfix" ng-class="{true: 'me', false: 'you'}[message.user.id == {{ Auth::user()->id }}]">
                <span class="avatar">
                  <img ng-src="/@{{ message.user.avatar }}" class="lazy concierge-profile-avatar" alt=""/>
                  @{{ message.user.first_name }}
                </span>
                <div class="message">
                  <div class="bubble">
                    <p ng-bind-html="message.text | parseUrl | linkify">@{{ message.text | parseUrl}}</p>
                  </div>
                  <div class="time"><span>@{{ message.created_at | amDateFormat:'MM/DD/YYYY HH:mm A'}}</span></div>
                </div>
              </div>
            </div>
          </div>
          <div class="form-group">
            <textarea class="form-control message-box" ng-model="message.text"
              ng-keydown="$event.which === 13 && sendMessageRequestClient({{ $request->client_id }}, {{ Auth::user() }}, {{ $request->id }}, {{ Auth::user()}} )"
              required></textarea>
            <button class="btn btn-small" type="button" name="button" ngf-select="concierge_chatFileUpload($file, {{ $request->client_id }}, {{ Auth::user() }}, {{ $request->id }})" ngf-max-size="2MB" ngf-resize="{width: 600, height: 600}">Add attachment</button>
          </div>
          <button class="btn full-width uppercase" ng-click="sendMessageRequestClient({{ $request->client_id }}, {{ Auth::user() }}, {{ $request->id }}, {{ Auth::user()}} )">Submit new message</button>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('script')
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'ui.dateTimeInput',
      'ui.bootstrap.datetimepicker',
      'uiSwitch',
      'ngAnimate',
      'ngFileUpload',
      'angularMoment',
      'modal',
      'requests',
      'user',
      'socket',
      'liveChat'
    ]);
    new WOW().init();
  </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/dateTimeInput.js"></script>
  <script type="text/javascript" src="/assets/js/datetimepicker.js"></script>
  <script type="text/javascript" src="/assets/js/datetimepicker.templates.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/modal.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/requests.js') }}"></script>
@endsection