@extends('user::_layouts.authenticated.layout')

@section('title', __('messages.global.my_profile'))

@section('content')
  <div class="row">
    <div class="col-lg-4">
      {{-- User Card --}}
      @include('user::profile/_includes/user')
    </div>
    <div class="col-lg-8 order-first">
      {{-- Edit Profile Card --}}
      @include('user::profile/_includes/edit_profile_form')
    </div>

    @if (!$user->isOrganizationAccess)
      <div class="col-lg-8">
        {{-- Change Password Card --}}
        @include('user::profile/_includes/change_password_form')
      </div>
    @endif
  </div>
@endsection


@section('js')
  <script>
    // Autocompletion for address field
    var placeSearch, autocomplete;

    function initAutocomplete() {
      autocomplete = new google.maps.places.Autocomplete(
        document.getElementById('address'), {
          types: ['address']
        });

      autocomplete.setFields(['geometry', 'address_components']);
      autocomplete.addListener('place_changed', fillInAddress);
    }

    function fillInAddress() {
      var place = autocomplete.getPlace();
      var zipcode = '';
      var country = '';

      for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];

        if (addressType == 'postal_code') {
          zipcode = place.address_components[i]['short_name'];
        }
        if (addressType == 'country') {
          country = place.address_components[i]['short_name'];
        }
      }

      document.getElementById('location_latitude').value = place.geometry.location.lat();
      document.getElementById('location_longitude').value = place.geometry.location.lng();
      document.getElementById('location_zipcode').value = zipcode;
      document.getElementById('location_country').value = country;
    }

    // Bias the autocomplete object to the user's geographical location,
    // as supplied by the browser's 'navigator.geolocation' object.
    function geolocate() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var geolocation = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          };
          var circle = new google.maps.Circle({
            center: geolocation,
            radius: position.coords.accuracy
          });
          autocomplete.setBounds(circle.getBounds());
        });
      }
    }
  </script>

  <script
    src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google_maps.api_key') }}&libraries=places&callback=initAutocomplete"
    async defer></script>
@endsection