@extends('app_client')

@section('title', $user->first_name.' '.$user->last_name.' Profile | '.$property->name)

@section('content')
  <div class="container-fluid">
    <div class="row" ng-cloak>
      <div id="profile-edit" class="col-md-8 col-sm-12 col-md-offset-2 col-sm-offset-0">

        <div class="page-header clearfix">
          <div class="back-navigation">
            <div class="col-xs-6">
              <a href="javascript:history.go(-1)" class="btn-back">Back</a>
            </div>
            @if(Auth::user()->id == $user->id)
              <div class="col-xs-6">
                <a class="right btn-settings" href="{{ url('/settings') }}">Edit</a>
              </div>
            @endif
          </div>
        </div>

        <div class="panel profile">
          <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>
          <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-top media-fifty text-center">
                      <span class="icon icon-user_profile_avatar_man_boy_silhoette nofloat nomg"></span>
                    </div>
                    <div class="media-body">
                      <h2 class="name">{{ $user->first_name.' '.$user->last_name }}</h2>
                      <div class="gender">{{ $user->gender }}</div>
                      <div class="date-of-birth">{{ date('M d, Y', strtotime($user->date_of_birth)) }}</div>
                    </div>
                  </div>
                </li>
                @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)
                            {!! phone_number($user->cell_phone).' / '.phone_number($user->phone) !!}
                          @elseif($user->phone)
                            {!! phone_number($user->phone) !!}
                          @else
                            {!! phone_number($user->cell_phone) !!}
                          @endif
                        </h4>
                      </div>
                    </div>
                  </li>
                @endif
                @if($user->email)
                  <li>
                    <div class="media">
                      <div class="media-left media-middle media-fifty text-center">
                        <span class="icon icon-mail_email_envelope_message" style="font-size: 24px;"></span>
                      </div>
                      <div class="media-body">
                        <h4><a href="mailto:{{ $user->email }}">{{ $user->email }}</a></h4>
                      </div>
                    </div>
                  </li>
                @endif
                @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 nofloat nomg"></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>
                @endif
              </ul>
            </div>
          </div>
        </div><!--./panel -->

        <div class="row sub-info">
          <div class="col-sm-12">
            <div class="{{ (!$user->hasRole('client') && $user->rateable) ? 'sub-info-row-three' : 'sub-info-row-two' }}">

              <div class="sub-info-col">
                <div class="media panel profile">
                  <div class="sub-info-icon media-left profile">
                    <span class="statistic-icon icon-layers_windows_multiple_copy_duplicate"></span>
                  </div>
                  <div class="media-body">
                    <span class="sub-info-title">Total of requests</span>
                    <span class="sub-info-number">{{ $user->hasRole('client') ? $user->active_client_requests()->count() : $user->active_concierge_requests()->count() }}</span>
                  </div>
                </div>
              </div>

              @if($user->is_admin() && $user->rateable)
                <div class="sub-info-col">
                  <div class="media panel profile">
                    <div class="sub-info-icon media-left">
                      <span class="statistic-icon icon-star-icon"></span>
                    </div>
                    <div class="media-body">
                      <span class="sub-info-title">Average Rating</span>
                      <span class="sub-info-number">
                        @if($user->concierge_rating())
                          {{ number_format($user->concierge_rating(), 1, '.', '') }}
                        @else
                          {{ 'No rating' }}
                        @endif
                      </spn>
                    </div>
                  </div>
                </div>
              @endif

              <div class="sub-info-col">
                <div class="media panel profile">
                  <div class="sub-info-icon media-left">
                    <span class="statistic-icon icon-clock_time_date"></span>
                  </div>
                  <div class="media-body">
                    <span class="sub-info-title">Last Time Online</span>
                    @if($user->online_status == "offline")
                      <span class="sub-info-number" am-time-ago="{{ strtotime($user->last_login)*1000 }}"></span>
                    @else
                      <span class="sub-info-number">{{ $user->online_status }}</span>
                    @endif
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div><!--./row -->

        @if($user->hasRole('client'))
          @if($user->family->count())
            <div class="panel table-information clearfix" ng-cloak>
              <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->family_member }}</h5>
                      <h5>{{ $family_member->gender }}</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>
                      {!! $family_member->notes ? $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($user->pets->count())
            <div class="panel table-information clearfix" ng-cloak>
              <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>
                      {!! $pet->notes ? $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($user->vehicles->count())
            <div class="panel table-information clearfix" ng-cloak>
              <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>
                      {!! $vehicle->notes ? $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
        @endif
        @if(strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'iphone'))
          @if(strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'safari'))
            <!-- Safari Browser on mobile -->
          @else
            <!-- Running as stand alone WebApp on iPhone -->
            <a href="javascript:top.frames.location.reload();" class="btn btn-block btn-large">Clear Cache</a>
          @endif
        @else
        @endif
      </div><!--./col-sm-8 col-sm-offset-2 -->
    </div>
  </div>
@endsection

@section('script')
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'ui.bootstrap',
      'ui.dateTimeInput',
      'ui.bootstrap.datetimepicker',
      'ngFileUpload',
      'ngSanitize',
      'angularMoment',
      'modal',
      'user',
      'socket',
      'liveChat'
    ]);
  </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="/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="{{ 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