@extends('layouts.app')

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

@section('breadcrumb') 
<li class="breadcrumb-item"><a href="{{ route('settings') }}">{{ __('Settings') }}</a> </li> 
<li class="breadcrumb-item">{{ __('Organisation') }} </li> 
@endsection

@section('content')

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

<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('settings.update', $type) }}" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    
                    <input type="hidden" name="type" value="{{ $type }}">
                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('Organisation') }} *</label>
                      <div class="col-sm-8">
                        <input type="text" class="form-control" name="name" id="name" placeholder="{{ __('Organisation name') }}" value="{{ old('name', $setting->org_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">{{ __('Street') }} *</label>
                      <div class="col-sm-8">
                        <input type="text" class="form-control" name="street" id="street" placeholder="{{ __('street') }}" value="{{ old('street', $setting->street) }}" onclick="openLocationMap();" readonly="">
                        <input type="hidden" name="latitude" id="latitude" value="{{ old('latitude', $setting->latitude) }}">                    
                        <input type="hidden" name="longitude" id="longitude" value="{{ old('longitude', $setting->longitude) }}">
                        <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">{{ __('Zip') }} *</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="zip" id="zip" placeholder="{{ __('Zip code') }}" value="{{ old('zip', $setting->zip) }}">
                            <span class="messages">
                                @if($errors->has('zip'))
                                <p class="text-danger error">{{ $errors->first('zip') }}</p>
                                @endif
                            </span>
                        </div>
                    </div>

                    <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',$setting->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">{{ __('Phone') }} *</label>
                        <div class="col-sm-8">
                          <div class="row">
                            <div class="col-sm-3">
                              <input type="number" class="form-control country-code" name="country_dial_code" maxlength="4">
                            </div>
                            <div class="col-sm-9">
                              <input type="text" class="form-control mob_no fill" data-mask="9999-999-999" name="phone" id="phone" placeholder="{{ __('Phone number') }}" value="{{ old('phone', $setting->phone) }}">
                            </div>
                            <span class="messages">
                                @if($errors->has('phone'))
                                <p class="text-danger error">{{ $errors->first('phone') }}</p>
                                @endif
                            </span>
                          </div>
                        </div>
                    </div>

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

                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('Email') }} *</label>
                      <div class="col-sm-8">
                        <input type="email" class="form-control" name="email" id="email" placeholder="{{ __('Email address') }}" value="{{ old('email', $setting->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">{{ __('Application Language') }} *</label>
                      <div class="col-sm-8">
                        {!! languages('language', old('language', $setting->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">{{ __('Logo') }} </label>
                      <div class="col-sm-8">
                        <input type="hidden" name="old_logo" value="{{ $setting->logo }}">
                        <input type="file" class="form-control" name="logo" id="logo">
                        <span class="messages">
                            @if($errors->has('logo'))
                            <p class="text-danger error">{{ $errors->first('logo') }}</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="bg-default p-2">
                            @if($setting->logo === 'logo-blue.png')
                            <img class="img-fluid" src="{{ asset('images/'.$setting->logo) }}" alt="organisation logo">
                            @else
                            <img class="img-fluid" src="{{ asset('storage/avatars/'.$setting->logo) }}" alt="organisation logo">
                            @endif
                          </div>
                        </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('Favicon') }} </label>
                      <div class="col-sm-8">
                        <input type="hidden" name="old_favicon" value="{{ $setting->favicon }}">
                        <input type="file" class="form-control" name="favicon" id="favicon">
                        <small class="text-muted">{{ __('Recommended size: 64x64 pixels and must be in PNG format') }}</small>
                        <span class="messages">
                            @if($errors->has('favicon'))
                            <p class="text-danger error">{{ $errors->first('favicon') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>

                    @if(!empty($setting->favicon))
                    <div class="mb-3 row">
                        <label class="form-label col-sm-4 col-form-label">&nbsp;</label>
                        <div class="col-sm-8">
                          <div class="bg-default p-2">
                            <img class="img-fluid" src="{{ asset('storage/avatars/'.$setting->favicon) }}" alt="organisation favicon">
                          </div>
                        </div>
                    </div>
                    @endif

                    <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>
                    </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('street').value = address;
  document.getElementById('latitude').value = lat;
  document.getElementById('longitude').value = lng;
}
</script>
@endpush