@extends('app_admin')

@section('title', $user->first_name.' '.$user->last_name.' | Luxury Concierge')

@section('content')
  <div class="container-fluid" ng-controller="UserCtlr">
    <div class="row">
      <div class="col-md-8 col-sm-12 col-md-offset-2 col-sm-offset-0">
        <!-- Header -->
        <div class="page-header">
          <div class="back-navigation">
            <a href="javascript:history.go(-1)" class="btn-back">Back</a>
          </div>
        </div>
        <!-- Content -->
        <div class="panel profile">
          <!-- Avatar -->
          <div class="profile-image text-center">
            <img src="{{ asset('/assets/images/loading-primary.svg') }}" data-original="{{ asset('/'.$user->avatar) }}" class="lazy user-profile-avatar" alt=""/>
          </div>
          <!-- Main Info -->
          <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 nofloat nomg"></span>
                    </div>
                    <div class="media-body">
                      <!-- Name -->
                      <h2 class="name">{{ $user->first_name.' '.$user->last_name }}</h2>
                      <div class="gender">{{ $user->gender }}</div>
                      <!-- Date Of Birth -->
                      @if($user->date_of_birth)
                        <div class="date-of-birth">{{ date('F d, Y', strtotime($user->date_of_birth)) }}</div>
                      @endif
                    </div>
                  </div>
                </li>
                <!-- Phone -->
                @if($user->phone || $user->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($user->phone && $user->cell_phone)
                            <a href="tel:{{ $user->cell_phone }}">{{ phone_number($user->cell_phone) }}</a>{{ ' / ' }}<a href="tel:{{ $user->phone }}">{{ phone_number($user->phone) }}</a>
                          @elseif($user->phone)
                            <a href="tel:{{ $user->phone }}">{{ phone_number($user->phone) }}</a>
                          @else
                            <a href="tel:{{ $user->cell_phone }}">{{ phone_number($user->cell_phone) }}</a>
                          @endif
                        </h4>
                      </div>
                    </div>
                  </li>
                @endif
                <!-- Email -->
                @if($user->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:{{ $user->email }}">{{ $user->email }}</a></h4>
                      </div>
                    </div>
                  </li>
                @endif
                <!-- Email -->
                @if($user->from_venue)
                  <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>{{ $user->from_venue }}</h4>
                      </div>
                    </div>
                  </li>
                @endif
                <!-- Unit Number -->
                @if($user->hasRole('client') && $user->unit_number)
                  <li>
                    <div class="media">
                      <div class="media-left media-middle media-fifty text-center">
                        <span class="icon icon-home_house_main_homepage nomg nofloat"></span>
                      </div>
                      <div class="media-body">
                        <h4>Unit number: {{ $user->unit_number }}</h4>
                        @if($user->ownership)
                          <h4>{{ ucfirst($user->ownership) }}</h4>
                        @endif
                      </div>
                    </div>
                  </li>
                  <li>
                    <img ng-src="/assets/images/venues/logo/{{ $user->venue->first()->logo_image }}" width="145"/>
                  </li>
                @endif
              </ul>
            </div>
          </div>
        </div><!--./panel -->
        <!-- Tabs -->
        <uib-tabset active="activeForm" class="tabset-three">
          <!-- Overview -->
          @if($user->hasRole('client'))
            <uib-tab index="0" heading="Overview">
          @endif

            <div class="row sub-info">
              <!-- Active Requests -->
              <div class="col-sm-{!! ($user->rateable) ? 4 : 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>{{ $user->active_client_requests()->count() }}</h2>
                  </div>
                </div><!--./panel -->
              </div><!--./col-sm -->
              <!-- Concierge Rating -->
              @if($user->is_admin() && $user->rateable)
                <div class="col-sm-4 col-xs-12">
                  <div class="panel profile-statistic clearfix">
                    <div class="icon-table">
                      <span class="statistic-icon icon-star-icon"></span>
                    </div>
                    <div class="statistic-table">
                      <h5>Average Rating</h5>
                        <span class="sub-info-number">{{ $user->concierge_rating ? number_format($user->concierge_rating, 1, '.', '') : 'No rating' }}</span>
                    </div>
                  </div><!--./panel -->
                </div><!--./col-sm-4 -->
              @endif
              <!-- Last Time Online -->
              <div class="col-sm-{!! ($user->rateable) ? 4 : 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($user->online_status == "offline")
                      <h2><span am-time-ago="{{ strtotime($user->last_login)*1000 }}"></h2>
                    @else
                      <h2>{{ $user->online_status }}</h2>
                    @endif
                  </div>
                </div><!--./panel -->
              </div><!--./col-sm -->

            </div><!--./row -->
            <!-- Family Members -->
            @if($user->family->count() >= 1)
              <div class="panel table-information clearfix">
                <div class="heading">
                  <h4>Family</h4>
                </div>
                @foreach($user->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
            <!-- Pets -->
            @if($user->pets->count() >= 1)
              <div class="panel table-information clearfix">
                <div class="heading">
                  <h4>Pets</h4>
                </div>
                @foreach($user->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
            <!-- Vehicles -->
            @if($user->vehicles->count() >= 1)
              <div class="panel table-information clearfix">
                <div class="heading">
                  <h4>Vehicles</h4>
                </div>
                @foreach($user->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
          @if($user->hasRole('client'))
            </uib-tab>
          @endif
          <!-- Requests -->
          @if($user->hasRole('client'))
            <uib-tab index="1" heading="Requests">
              <div class="requests">
                @if($user->active_client_requests()->count())
                  @foreach($user->active_client_requests()->sortByDesc('created_at') as $request)
                    <!-- Request -->
                    <div class="requests-item">
                      <div class="requests-item-info dashboard operator">
                        <div class="requests-item-info-request">
                          <span class="admin-request-status">
                            <!-- Status -->
                            @if(!$request->archived)
                              @if($request->status)
                                <div><span class="status-icon solved icon-check_complete_alright_ok_tick_test_circle_button"></span></div>
                              @else
                                <div><span class="status-icon pending icon-question_ask_help_support_circle_button"></span></div>
                              @endif
                            @else
                              <div><span class="status-icon pending icon-delete_close_hide_circle_button col-red"></span></div>
                            @endif
                          </span>
                          <!-- Description -->
                          <a href="/requests/{{ $request->id }}" class="title">{{ $request->description }}</a>
                        </div>
                        <ul class="requests-item-moreinfo clearfix">
                          <!-- Date -->
                          <li>
                            <span class="icon icon-calendar_date_schedule_event_month_year_3"></span>
                            <h5 class="info-text">{{ date('d/m/y', strtotime($request->date)) }}</h5>
                          </li>
                          <!-- Category -->
                          <li>
                            <span class="icon icon-folder_files_storage_open"></span>
                            <h5 class="info-text">{{ $request->category == null ? '-': $request->category }}</h5>
                          </li>
                          <!-- Client Name -->
                          <li>
                            <span class="icon icon-user_profile_avatar_man_boy_silhoette"></span>
                            <h5 class="info-text">Created by <a href="{{ url('residents/'.$request->client->id) }}">{{ $request->client->first_name }} {{ $request->client->last_name }}</a></h5>
                          </li>
                          <!-- Concierge Name -->
                          <li>
                            @if($request->concierge)
                              <span class="icon icon-user_profile_avatar_man_boy_silhoette"></span>
                              <h5 class="info-text">Concierge <a href="{{ url('concierges/'.$request->concierge->id) }}">{{ $request->concierge->first_name }} {{ $request->concierge->last_name }}</a></h5>
                            @endif
                          </li>
                        </ul>
                      </div><!--./requests-item-info -->
                      <div class="requests-item-action">
                        <a href="/requests/{{ $request->id }}" class="btn btn-medium btn-sm-block">View request</a>
                      </div><!--./requests-item-action -->
                    </div><!--./requests-item -->
                  @endforeach
                @else
                  <h5><p>There are no requests.</p></h5>
                @endif
              </div>
              <div class="clear"></div>
            </uib-tab>
            <!-- Notes -->
            <uib-tab index="2" heading="Notes">
              <div class="panel table-information profile-edit clearfix" ng-init="get_resident({{ $user->id }})">
                <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">
                        <!-- Note -->
                        <div class="message-wrapper clearfix you animated fadeInUp">
                          <span class="avatar ng-binding">
                            <img ng-src="@{{ note.concierge.avatar }}" class="lazy concierge-profile-avatar" alt="">
                            @{{ note.concierge.first_name }}
                          </span>
                          <!-- Message -->
                          <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>
                    <!-- New Note -->
                    <div class="form-group">
                     <div class="input-group">
                       <input type="text" ng-model="$parent.$parent.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>
            </uib-tab>
          @endif
        </uib-tabset>
      </div><!--./col-sm-8 col-sm-offset-2 -->
    </div>
  </div>
@endsection

@section('script')
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'ngAnimate',
      'angularMoment',
      '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/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>
@endsection