@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')

@include('partials.modals.maps')
@include('users.signature')

@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('users.update', $user->uuid) }}" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <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', $user->name) }}">
                        <span class="messages">
                            @if($errors->has('name'))
                            <p class="text-danger error">{{ $errors->first('name') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>
                   
                    @if(!empty($user->organisation))
                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('Organisation') }} *</label>
                      <div class="col-sm-8">
                          @if(canViewUpdate('edit users of other organizations'))
                          {!! organisations('organisation', old('organisation', $user->organisation_id)) !!}
                          <span class="messages">
                              @if($errors->has('organisation'))
                              <p class="text-danger error">{{ $errors->first('organisation') }}</p>
                              @endif
                          </span>
                          @else
                          {{ $user->organisation->name }}
                          @endif
                      </div>
                    </div>
                    @endif

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

                    @if(canViewUpdate('edit driver') && $modules__->drivers === 'yes')
                    <div class="mb-3 row" id="div-driver">
                        <label class="form-label col-sm-4 col-form-label">{{ __('Driver') }}</label>
                        <div class="col-sm-8 col-xl-6">
                            {!! driverOptions('driver', old('driver', $user->driver)) !!}
                            <span class="messages">
                              @if($errors->has('driver'))
                              <p class="text-danger error">{{ $errors->first('driver') }}</p>
                              @endif
                            </span>
                        </div>
                    </div>
                    @endif

                    <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', $user->color) }}">
                          <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">{{ __('Zip code') }} </label>
                      <div class="col-sm-8">
                          <input type="text" class="form-control" name="zip" id="zip" placeholder="{{ __('Zip code') }}" value="{{ old('zip', $user->zip_code) }}">
                          <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="{{ __('House number') }}" value="{{ old('house_number', $user->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', $user->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', $user->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', $user->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', $user->gml) }}">
                        @else
                        <input type="text" class="form-control" name="gml" id="gml" placeholder="{{ __('Google Maps address') }}" value="{{ old('gml', $user->gml) }}" onclick="openLocationMap();" readonly="">
                        @endif
                        <input type="hidden" name="latitude" id="latitude" value="{{ old('latitude', $user->latitude) }}">                    
                        <input type="hidden" name="longitude" id="longitude" value="{{ old('longitude', $user->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(old('country',$user->country_id)) !!}
                        <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" 
                            name="mobile" 
                            id="mobile" 
                            placeholder="{{ __('Your Mobile Number') }}" 
                            value="{{ old('mobile', $user->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" 
                            name="phone" 
                            id="phone" 
                            placeholder="{{ __('Your Phone Number') }}" 
                            value="{{ old('phone', $user->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>

                    @if(allowedToUpdate($user, 'email'))
                    <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', $user->email) }}">
                        <span class="messages">
                            @if($errors->has('email'))
                            <p class="text-danger error">{{ $errors->first('email') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>
                    @else
                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('Email address') }} *</label>
                      <div class="col-sm-8">
                        <span class="text-primary">{{ $user->email }}</span>
                      </div>
                    </div>
                    @endif

                    <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',$user->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', $user->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('edit user 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', $user->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', $user->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="password" class="form-control" name="pass" id="pass" placeholder="{{ __('Password') }}">
                        <span class="messages">
                            @if($errors->has('pass'))
                            <p class="text-danger error">{{ $errors->first('pass') }}</p>
                            @endif
                        </span>
                      </div>
                    </div> --}}

                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">&nbsp;</label>
                      <div class="col-sm-8">
                        <button type="button" class="btn btn-primary m-b-0" onclick="showPasswordChangeModal();">{{ __('Change password') }}</button>
                      </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="hidden" name="old_avatar" value="{{ $user->avatar }}">
                        <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 col-form-label">&nbsp;</label>
                      <div class="col-sm-8">
                        <div class="row">
                          <div class="col-sm-2">
                            <img src="{{ asset('storage/avatars/'.$user->avatar) }}" id="img_avatar" alt="user profile image">
                          </div>
                          <div class="col-sm-10">
                            <input type="hidden" name="default_image" id="default_image" value="0">
                            <button type="button" class="btn btn-success" id="restore_default_img" data-default_img_src="{{ asset('storage/avatars/avatar-blank.jpg') }}">{{ __('Restore default image') }}</button>
                          </div>
                          <span class="messages">
                              @if($errors->has('avatar'))
                              <p class="text-danger error">{{ $errors->first('avatar') }}</p>
                              @endif
                          </span>
                        </div>
                      </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>
                          <button type="button" class="btn btn-primary m-b-0" data-bs-toggle="modal" data-bs-target="#user_signature_modal">{{ __('Edit Signature') }}</button>
                        </div>
                    </div>
                  </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-4"></label>
                      <div class="col-sm-2">
                        <button type="submit" class="btn btn-primary m-b-0">{{ __('Save') }}</button>
                      </div>
                      @if(allowedToDeleteUser($user))
                      <div class="col-sm-6">
                        <button type="button" class="btn btn-danger m-b-0 user-del-conf">{{ __('Delete') }}</button>
                      </div>
                      @endif
                    </div>
                  </form>
                  @if(allowedToDeleteUser($user))
                  <form id="frm_user_delete" action="{{ route('users.destroy', $user->uuid) }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <input type="hidden" name="delete_user" value="{{ $user->uuid }}">
                  </form>
                  @endif
                </div>
              </div>
              <!-- Basic Inputs Validation end -->
              
            </div>
            <!-- Form components Validation card end -->
          </div>
        </div>
      </div>
      <!-- Page body end -->
    </div>
  </div>
</div>
@include('partials.modals.change-password')   
@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>
var authUserType = '{{ getAuthUser()->role }}';

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;
}

$(document).ready(function () {
  functionInitilizeCkEditor('editor', 150);

  let userDelConf = document.querySelector('.user-del-conf');
  if (userDelConf !== null) {
    document.querySelector('.user-del-conf').onclick = function(){
      swal({
        title: "Are you sure?",
        text: "",
        type: "warning",
        showCancelButton: true,
        confirmButtonClass: "btn-danger",
        confirmButtonText: "Yes, delete it!",
        closeOnConfirm: false
      },
    function(){
        $('#frm_user_delete').submit();
      });
    };
  }
});

function showPasswordChangeModal(){
  $('#password_msg').hide();
  $('#password_success').hide();
  $('#password').val('');
  $('#change_password_modal').modal('show');
}

function toggleShowPassword(obj){
  if($('#password').attr('type') === 'password') {
    $('#password').attr('type', 'text');
    $('#toggleIcon').removeClass('feather icon-eye').addClass('feather icon-eye-off');
    $('#passwordHelp').html("{{ __('Hide password') }}")
  }else{
    $('#password').attr('type', 'password');
    $('#toggleIcon').removeClass('feather icon-eye-off').addClass('feather icon-eye');
    $('#passwordHelp').html("{{ __('Show password') }}")
  }
}
$("#frm-change-password").submit(function(e){
    e.preventDefault();

    $.ajax({
        type:'POST',
        url: "{{ route('change.password') }}",
        data: $(this).serialize(),
        success: function(resp){
            if(resp.error){
                $.each(resp.messages, function(key, msg) {
                    $('#'+key+'_msg').html(msg);
                    $('#'+key+'_msg').show();
                });
            }else{
                $('#password_msg').hide();
                $('#password_success').show();
            }
        }
    });
});
</script>
@include('partials.postcode-js')
@endpush