@extends('app_admin')

@section('title', $user->name.' Profile | Luxury Concierge')

@section('content')
  <div class="container-fluid" ng-controller="UserCtlr">
    <div class="row">
      <div id="profile-edit" class="col-md-8 col-sm-12 col-md-offset-2 col-sm-offset-0">
        <!-- Header -->
        <div class="page-header clearfix">
          <div class="back-navigation">
            <!-- Back Button -->
            <div class="col-xs-6">
              <a href="javascript:history.go(-1)"
                class="btn-back">Back
              </a>
            </div>
            <!-- Edit Button -->
            <div class="col-xs-6">
              <a class="right btn-settings"
                href="{{ url('/settings') }}">Edit
              </a>
            </div>
          </div>
        </div>
        <!-- Content -->
        <div class="panel profile">
          <!-- Avatar -->
          <div class="profile-image text-center">
            <img class="lazy user-profile-avatar"
              src="{{ asset('/assets/images/loading-primary.svg') }}"
              data-original="{{ asset('/'.$user->avatar) }}"
              alt=""/>
          </div>
          <!-- Info -->
          <div class="profile-main-info">
            <div class="profile-info">
              <ul class="profile-info-list list-unstyled">
                <!-- Main Info -->
                <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">
                      <!-- Name -->
                      <h2 class="name">{{ $user->first_name.' '.$user->last_name }}</h2>
                      <!-- Gender-->
                      <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)
                            {!! 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
                <!-- Email-->
                <li>
                  <div class="media">
                    <div class="media-left media-middle media-fifty text-center">
                      <span class="icon icon-mail_email_envelope_message nofloat nomg" style="font-size: 24px;"></span>
                    </div>
                    <div class="media-body">
                      <h4>{{ $user->email }}</h4>
                    </div>
                  </div>
                </li>
              </ul>
            </div><!-- .profile-info -->
          </div><!-- .profile-main-info -->
        </div><!--./panel -->
        <!-- Tabs -->
        <div class="row sub-info">
          <div class="col-sm-12">
            <div class="{{ ($user->is_admin() && $user->rateable) ? 'sub-info-row-three' : 'sub-info-row-two' }}">
              <!-- Total Requests -->
              <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->active_concierge_requests()->count() }}</span>
                  </div>
                </div>
              </div>
              <!-- Average Rating -->
              @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>
                      @if($user->concierge_rating())
                        <span class="sub-info-number">{{ number_format($user->concierge_rating(), 1, '.', '') }}</span>
                      @else
                        <span class="sub-info-number">No rating</span>
                      @endif
                    </div>
                  </div>
                </div>
              @endif
              <!-- Total Requests -->
              <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><!-- .col-sm-12 -->
        </div><!--./row sub-info -->

      </div><!--./col-sm-8 col-sm-offset-2 -->
    </div><!-- .row -->
  </div><!-- .container-fluid -->
@endsection

@section('script')
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'angularMoment',
      'modal',
      'ngImgCrop',
      '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="/assets/js/img-crop.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