@extends('layouts.app')

@section('form-title') {{ __('User') }} @endsection

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('users.index') }}">{{ __('Users') }}</a> </li>
<li class="breadcrumb-item">{{ __('User') }} </li>
@endsection



@section('content')
<style>
  #show-map {
    height: 200px;
    /* The height is 400 pixels */
    width: 100%;
    /* The width is the width of the web page */
  }
</style>
<div class="pcoded-inner-content">
  <div class="main-body">
    <div class="page-wrapper">
      <!-- Page body start -->
      <div class="page-body">
        <div class="row">
          <div class="col-sm-8">
            <!-- Basic Inputs Validation start -->
            <div class="card">
              <div class="card-header">
                <h5>{{ __('User informations') }}</h5>
              </div>
              <div class="card-block">
                <div class="mb-3 row">
                  <label class="col-sm-4 fw-bold">{{ __('Name') }}</label>
                  <div class="col-sm-8">
                    <span>{{ $user->name }}</span>
                  </div>
                </div>
                @if(!empty($user->organisation))
                <div class="mb-3 row">
                  <label class="col-sm-4 fw-bold">{{ __('Organisation') }}</label>
                  <div class="col-sm-8">
                    <span>{{ $user->organisation->name }}</span>
                  </div>
                </div>
                @endif

                <div class="mb-3 row">
                  <label class="col-sm-4 fw-bold">{{ __('Zip code') }} </label>
                  <div class="col-sm-8">
                    <span class="messages">
                      {{ $user->zip_code }}
                    </span>
                  </div>
                </div>

                <div class="mb-3 row">
                  <label class="col-sm-4 fw-bold">{{ __('House number') }} </label>
                  <div class="col-sm-8">
                    <span class="messages">
                      {{ $user->house_number }}
                    </span>
                  </div>
                </div>

                <div class="mb-3 row">
                  <label class="col-sm-4 fw-bold">{{ __('Addition (optional)') }} </label>
                  <div class="col-sm-8">
                    <span class="messages">
                      {{ $user->house_number_optional }}
                    </span>
                  </div>
                </div>

                <div class="mb-3 row">
                  <label class="col-sm-4 fw-bold">{{ __('Street') }} </label>
                  <div class="col-sm-8">
                    <span class="messages">
                      {{ $user->street }}
                    </span>
                  </div>
                </div>

                <div class="mb-3 row">
                  <label class="col-sm-4 fw-bold">{{ __('City') }} </label>
                  <div class="col-sm-8">
                    <span class="messages">
                      {{ $user->city }}
                    </span>
                  </div>
                </div>

                <div class="mb-3 row">
                  <label class="col-sm-4 fw-bold">{{ __('Google Maps address') }} </label>
                  <div class="col-sm-8">
                    <span class="messages">
                      {{ $user->gml }}
                    </span>
                  </div>
                </div>

                <div class="mb-3 row">
                  <label class="col-sm-4 fw-bold">{{ __('Country') }} </label>
                  <div class="col-sm-8">
                    <span class="messages">
                      <span>{{ $user->country->country_name }}</span>
                    </span>
                  </div>
                </div>

                <div class="mb-3 row">
                  <label class="col-sm-4 fw-bold">{{ __('Mobile number') }} </label>
                  <div class="col-sm-8">
                    <span class="messages">
                      <a class="a-blue" href="tel:{{ formatPhoneNumber($user->mobile) }}"> {{ formatPhoneNumber($user->mobile) }}</a>
                    </span>
                  </div>
                </div>

                <div class="mb-3 row">
                  <label class="col-sm-4 fw-bold">{{ __('Phone number') }} </label>
                  <div class="col-sm-8">
                    <span class="messages">
                      <a class="a-blue" href="tel:{{ formatPhoneNumber($user->phone) }}"> {{ formatPhoneNumber($user->phone) }}</a>
                    </span>
                  </div>
                </div>

                <div class="mb-3 row">
                  <label class="col-sm-4 fw-bold">{{ __('Email address') }} </label>
                  <div class="col-sm-8">
                    <span class="messages">
                      <a class="a-blue" href="mailto:{{ $user->email }}"> {{ $user->email }}</a>
                    </span>
                  </div>
                </div>

                <div class="mb-3 row">
                  <label class="col-sm-4 fw-bold">{{ __('Notification via email') }} </label>
                  <div class="col-sm-8">
                    <span class="messages">
                      {{ $user->display_notification_type }}
                    </span>
                  </div>
                </div>

                <div class="mb-3 row">
                  <label class=" col-sm-4 fw-bold">{{ __('Job Title') }} </label>
                  <div class="col-sm-8">
                    <span class="messages">
                      {{ $user->job_title }}
                    </span>
                  </div>
                </div>

                @if(getAuthUser()->can('view user status'))
                <div class="mb-3 row">
                  <label class=" col-sm-4 fw-bold">{{ __('Status') }} </label>
                  <div class="col-sm-8">
                    <span class="messages">
                      {{ $user->display_status }}
                    </span>
                  </div>
                </div>
                @endif

                <div class="mb-3 row">
                  <label class=" col-sm-4 fw-bold">{{ __('Role') }} </label>
                  <div class="col-sm-8">
                    <span class="messages">
                      {{ $user->displayRole() }}
                    </span>
                  </div>
                </div>

                @if(canViewUpdate('View driver') && $modules__->drivers === 'yes')
                  <div class="mb-3 row">
                    <label class="col-sm-4 fw-bold">{{ __('Driver') }} </label>
                    <div class="col-sm-8">
                      <span class="messages">
                        {{ $user->display_driver }}
                      </span>
                    </div>
                  </div>
                @endif

                <div class="mb-3 row">
                  <label class=" col-sm-4 fw-bold">{{ __('Color (bin hex) #') }} </label>
                  <div class="col-sm-8">
                    <div class="row text-uppercase text-center">
                      <div class="col-sm-3 p-b-10">
                        <div class="p-10 " style="color:#ffff; background-color: {{ $user->color }} !important;">
                          {{ $user->color }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="mb-3 row">
                  <label class=" col-sm-4 fw-bold">{{ __('Application Language') }} </label>
                  <div class="col-sm-8">
                    <span class="messages">
                      {{ $user->display_language }}
                    </span>
                  </div>
                </div>

                <div class="mb-3 row">
                  <label class=" col-sm-4 fw-bold">{{ __('Photo') }} </label>
                  <div class="col-sm-8">
                    <span class="messages">
                      <img src="{{ asset('storage/avatars/'.$user->avatar) }}" alt="user profile image">
                    </span>
                  </div>
                </div>

                <div class="mb-3 row">
                  <label class=" col-sm-4 fw-bold">{{ __('Signature') }} </label>
                  <div class="col-sm-8">
                      <div class="border rounded p-3 bg-light small mb-2">{!! preferredUserSignature($user->id) !!}</div>
                  </div>
                </div>

                @if(allowedToUpdateUser($user))
                <div class="mb-3 row">
                  <label class=" col-sm-4"></label>
                  <div class="col-sm-8">
                    <a href="{{ route('users.edit', $user->uuid) }}" class="btn btn-primary m-b-0">{{ __('Edit') }}</a>
                  </div>
                </div>
                @endif
              </div>
            </div>
            <!-- Basic Inputs Validation end -->
          </div>
          {{-- Main information section ends --}}

          <div class="col-sm-4">
            <div class="row">
              {{-- Start map section --}}
              <div class="col-sm-12">
                <div class="card">
                  <div class="card-header">
                    <h5>{{ __('Google Maps') }}</h5>
                  </div>
                  <div class="card-block">
                    @if(!empty($user->latitude) && !empty($user->longitude))
                    <div id="show-map" class="set-map"></div>
                    <a href="https://www.google.com/maps/search/?api=1&query={{ $user->latitude }},{{ $user->longitude }}" target="__blank" class="btn btn-primary mt-4">{{ __('Google Maps') }}</a>
                    @else
                    <p>{{ __('No map data available. Please update user map location') }}</p>
                    @endif
                  </div>
                </div>
              </div>
              {{-- End map section --}}

              {{-- Start group section --}}
              @if(canViewUpdate('users-group-section'))
              <div class="col-sm-12">
                <div class="card">
                  <div class="card-header">
                    <h5>{{ __('Groups') }}</h5>
                  </div>
                  <div class="card-block" id="groups"></div>
                </div>
              </div>
              @endif
              {{-- Start group section --}}
            </div>
          </div>
          {{-- Maps section ends --}}
        </div>
      </div>
    </div>
    <!-- Page body end -->
  </div>
</div>

@endsection

@push('child-scripts')
@if(!empty($user->latitude) && !empty($user->longitude))
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('furnit.google_map_key') }}&callback=initMap&libraries=&v=weekly&channel=2" async></script>
<script>
  // Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: {{ $user->latitude }}, lng: {{ $user->longitude }} };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("show-map"), {
    zoom: 20,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}
</script>
@endif
<script>
$(document).ready(function(){
  // Start fetching project attachments
  let user_id = {{ $user ? $user->id : 0 }}
  fetchGroups(1, user_id);

  $(document).on('click', '.page-user-groups a', function(event){
      event.preventDefault();
      let page = $(this).attr('href').split('page=')[1];
      fetchGroups(page, user_id);
  });

  function fetchGroups(page, user_id){
    $.ajax({
        url: "{{ route('user.groups') }}",
        data: {page: page, user_id: user_id},
        success: function(data){
          $('#groups').html(data);
          initGroupsTable();
        }
    });
  }

  function initGroupsTable(){
    $('.groups-table').footable({
        "paging": {
            "enabled": false,
        },
        "sorting": {
            "enabled": true
        }
    });
  }
});
</script>
@endpush