@extends('layouts.app')

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

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

@section('content')

@include('partials.modals.maps');

@php
  $google_maps_field = $settings__->google_maps_field ? json_decode($settings__->google_maps_field) : null;
@endphp
<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-12">
              <!-- Basic Inputs Validation start -->
              <div class="card">
                <div class="card-block">
                  <form id="main" method="post" action="{{ route('client.user.store') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('Name') }} *</label>
                      <div class="col-sm-8">
                        <input type="text" class="form-control" name="name" id="name" placeholder="{{ __('User Name') }}" value="{{ old('name') }}">
                        <span class="messages">
                            @if($errors->has('name'))
                            <p class="text-danger error">{{ $errors->first('name') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('Color (bin hex) #') }}</label>
                      <div class="col-sm-8">
                          <input type="text" name="color" id="color" class="form-control color" data-control="hue" value="{{ old('color', '#1E6AEE') }}">
                          <span class="messages">
                            @if($errors->has('color'))
                            <p class="text-danger error">{{ $errors->first('color') }}</p>
                            @endif
                          </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('Organisation') }} *</label>
                      <div class="col-sm-8">
                        {!! organisations('organisation', old('organisation')) !!}
                        <span class="messages">
                            @if($errors->has('organisation'))
                            <p class="text-danger error">{{ $errors->first('organisation') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>

                    <input type="hidden" name="role" value="{{ $role }}">

                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('Zip code') }} </label>
                      <div class="col-sm-8">
                          <input type="text" class="form-control" name="zip" id="zip" placeholder="{{ __('E.g. 123...') }}" value="{{ old('zip') }}">
                          <span class="messages">
                              @if($errors->has('zip'))
                              <p class="text-danger error">{{ $errors->first('zip') }}</p>
                              @endif
                              <p class="text-danger error" id="zip_error" style="display: none;"></p>
                          </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('House number') }} </label>
                      <div class="col-sm-8">
                          <input type="text" class="form-control" name="house_number" id="house_number" placeholder="{{ __('E.g. 1') }}" value="{{ old('house_number') }}">
                          <span class="messages">
                              @if($errors->has('house_number'))
                              <p class="text-danger error">{{ $errors->first('house_number') }}</p>
                              @endif
                              <p class="text-danger error" id="house_number_error" style="display: none;"></p>
                          </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('Addition (optional)') }} </label>
                      <div class="col-sm-8">
                          <input type="text" class="form-control" name="house_number_optional" id="house_number_optional" placeholder="{{ __('E.g. A') }}" value="{{ old('house_number_optional') }}">
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('Street') }} </label>
                      <div class="col-sm-8">
                        <input type="text" class="form-control" name="street" id="street" placeholder="{{ __('Street') }}" value="{{ old('street') }}">
                        <span class="messages">
                            @if($errors->has('street'))
                            <p class="text-danger error">{{ $errors->first('street') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('City') }} </label>
                      <div class="col-sm-8">
                        <input type="text" class="form-control" name="city" id="city" placeholder="{{ __('City') }}" value="{{ old('city') }}">
                        <span class="messages">
                            @if($errors->has('city'))
                            <p class="text-danger error">{{ $errors->first('city') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>
                    @if($google_maps_field->option_to_fill_in === 'yes')
                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('Google Maps address') }} </label>
                      <div class="col-sm-8">
                          @if($google_maps_field->forward_to_gm_api === 'yes')
                          <input type="text" class="form-control" name="gml" id="gml" placeholder="{{ __('Google Maps address') }}" value="{{ old('gml') }}">
                          @else
                          <input type="text" class="form-control" name="gml" id="gml" placeholder="{{ __('Google Maps address') }}" value="{{ old('gml') }}" onclick="openLocationMap();" readonly="">
                          @endif
                        <input type="hidden" name="latitude" id="latitude" value="{{ old('latitude') }}">                    
                        <input type="hidden" name="longitude" id="longitude" value="{{ old('longitude') }}">
                        <span class="messages">
                            @if($errors->has('gml'))
                            <p class="text-danger error">{{ $errors->first('gml') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>
                    @endif

                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('Country') }} </label>
                      <div class="col-sm-8">
                        {!! countries(156) !!}
                        <span class="messages">
                            @if($errors->has('country'))
                            <p class="text-danger error">{{ $errors->first('country') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('Mobile number') }} </label>
                      <div class="col-sm-8">
                        <div class="row">
                          <div class="col-sm-3">
                            <input type="number" class="form-control country-code" name="country_code" maxlength="4">
                          </div>
                          <div class="col-sm-9">
                            <input type="text" class="form-control fill" name="mobile" id="mobile" placeholder="{{ __('Your Mobile Number') }}" value="{{ old('mobile') }}">
                            <span class="messages">
                              @if($errors->has('mobile'))
                              <p class="text-danger error">{{ $errors->first('mobile') }}</p>
                              @endif
                              <p class="text-danger error" id="mobile-error" style="display: none;"></p>
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('Phone number') }} </label>
                      <div class="col-sm-8">
                        <div class="row">
                          <div class="col-sm-3">
                            <input type="number" class="form-control country-code" name="country_code" maxlength="4">
                          </div>
                          <div class="col-sm-9">
                            <input type="text" class="form-control fill" name="phone" id="phone" placeholder="{{ __('Your Phone Number') }}" value="{{ old('phone') }}">
                            <span class="messages">
                              @if($errors->has('phone'))
                              <p class="text-danger error">{{ $errors->first('phone') }}</p>
                              @endif
                              <p class="text-danger error" id="phone-error" style="display: none;"></p>
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('Email address') }} *</label>
                      <div class="col-sm-8">
                        <input type="email" class="form-control" name="email" id="email" placeholder="{{ __('Email address') }}" value="{{ old('email') }}">
                        <span class="messages">
                            @if($errors->has('email'))
                            <p class="text-danger error">{{ $errors->first('email') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                        <label class="form-label col-sm-4 col-form-label">{{ __('Notifications via email') }} *</label>
                        <div class="col-sm-8 col-xl-6">
                            {!! notificationTypes('notification_type', old('notification_type')) !!}
                            <span class="messages">
                              @if($errors->has('notification_type'))
                              <p class="text-danger error">{{ $errors->first('notification_type') }}</p>
                              @endif
                            </span>
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label class="form-label col-sm-4 col-form-label">{{ __('Job Title') }} </label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="job_title" id="job_title" placeholder="{{ __('Job Title') }}" value="{{ old('job_title') }}">
                            <span class="messages">
                                @if($errors->has('job_title'))
                                <p class="text-danger error">{{ $errors->first('job_title') }}</p>
                                @endif
                            </span>
                        </div>
                    </div>

                    @if(getAuthUser()->can('change users status'))
                    <div class="mb-3 row">
                        <label class="form-label col-sm-4 col-form-label">{{ __('Status') }}</label>
                        <div class="col-sm-8 col-xl-6">
                            {!! userStatus('status', old('status')) !!}
                            <span class="messages">
                              @if($errors->has('status'))
                              <p class="text-danger error">{{ $errors->first('status') }}</p>
                              @endif
                            </span>
                        </div>
                    </div>
                    @endif

                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('Application Language') }} </label>
                      <div class="col-sm-8">
                        {!! languages('language', old('language')) !!}
                        <span class="messages">
                            @if($errors->has('language'))
                            <p class="text-danger error">{{ $errors->first('language') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('Password') }} *</label>
                      <div class="col-sm-8">
                          <input type="text" class="form-control" name="password" id="password" placeholder="{{ __('Password') }}" value="{{ old('password', randomPassword()) }}">
                          <span class="messages">
                              @if($errors->has('password'))
                              <p class="text-danger error">{{ $errors->first('password') }}</p>
                              @endif
                          </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('Photo') }}</label>
                      <div class="col-sm-8">
                        <input type="file" class="form-control" name="avatar" id="avatar">
                        <span class="messages">
                            @if($errors->has('avatar'))
                            <p class="text-danger error">{{ $errors->first('avatar') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-4"></label>
                      <div class="col-sm-8">
                        <button type="submit" class="btn btn-primary m-b-0">{{ __('Save') }}</button>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
              <!-- Basic Inputs Validation end -->
              
            </div>
            <!-- Form components Validation card end -->
          </div>
        </div>
      </div>
      <!-- Page body end -->
    </div>
  </div>
</div>
        
@endsection

@push('child-scripts')
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('furnit.google_map_key') }}&libraries=places&callback=initialize" async defer></script>
<script>
function openLocationMap(){
  //getLocation();
  $('#maps_modal').modal('show');
}

var x = '';
var select_address_id = '';

function getLocation(id='') {
  if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
  } else { 
      x.innerHTML = "Geolocation is not supported by this browser.";
  } 
  select_address_id = id;
}

function showPosition(position) {
  var Latitude = position.coords.latitude; 
  var Longitude = position.coords.longitude;
}
 
function initialize() {
  var latlng = new google.maps.LatLng(52.377956,4.897070);
  var map = new google.maps.Map(document.getElementById('map'), {
      center: latlng,
      zoom: 10
  });

  var marker = new google.maps.Marker({
      map: map,
      position: latlng,
      draggable: true,
      anchorPoint: new google.maps.Point(0, -29)
  });

  var input = document.getElementById('input_maps_location');
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  var geocoder = new google.maps.Geocoder();
  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);
  var infowindow = new google.maps.InfoWindow();  

  autocomplete.addListener('place_changed', function() {
      infowindow.close();
      marker.setVisible(false);
      var place = autocomplete.getPlace();

      if (!place.geometry) {
          window.alert("Autocomplete's returned place contains no geometry");
          return;
      }

      // If the place has a geometry, then present it on a map.
      if (place.geometry.viewport) {
          map.fitBounds(place.geometry.viewport);
      } else {
          map.setCenter(place.geometry.location);
          map.setZoom(17);
      }

      marker.setPosition(place.geometry.location);
      marker.setVisible(true);          

      bindDataToForm(place.formatted_address,place.geometry.location.lat(),place.geometry.location.lng());
      infowindow.setContent(place.formatted_address);
      infowindow.open(map, marker);
  });

  // this function will work on marker move event into map 
  google.maps.event.addListener(marker, 'dragend', function() {
      geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
              if (results[0]) {        
                  bindDataToForm(results[0].formatted_address,marker.getPosition().lat(),marker.getPosition().lng());
                  infowindow.setContent(results[0].formatted_address);
                  infowindow.open(map, marker);
              }
          }
      });
  });
}

function bindDataToForm(address,lat,lng){
  document.getElementById('gml').value = address;
  document.getElementById('latitude').value = lat;
  document.getElementById('longitude').value = lng;
}
</script>
@include('partials.postcode-js')
@endpush