@extends('layouts.main')

    @section('content')
    <div class="row">
        <div class="col-md-6">
            <div class="panel-body" style="width: 100%;">                    
                <div id="map" style="height: 100%;"></div>                              
            </div>
        </div>
        <div class="col-md-6">
          <div class="card">
              <div class="card-header">
                  <h4 class="card-title">{{__('strings.point_of_interes')}}</h4>
              </div>
              <hr>
              <div class="card-body">
                  <div class="card-block">
                      <form class="form" action="{{route('suburb_create')}}" method="post">
                          {{ csrf_field() }}

                          <div class="form-body">

                              <div class="col-md-12">
                                  <div class="form-group">
                                      <label for="suburb" >{{__('strings.name')}}</label>
                                      <input id="suburb" name="suburb" class="form-control" required="required">     
                                      <span class="float-sm-right"> <a href="https://www.google.com/maps" target="_blank"> {{__('strings.search_on_google')}}</a></span>
                                  </div>
                              </div>
                              
                              <div class="col-md-12">
                                  <div class="form-group">
                                      <label for="lat" class="require">lat</label>
                                      <input id="lat" name="lat" class="form-control" required="required">
                                  </div>
                              </div>

                              <div class="col-md-12">
                                  <div class="form-group">
                                      <label for="lng" class="require">lng</label>
                                      <input id="lng" name="lng" class="form-control" required="required">
                                  </div>
                              </div>


                              <div class="col-md-12">
                                  <div class="form-group">
                                      <label for="cp" >CP</label>
                                      <input name="cp" class="form-control" required="required">
                                  </div>
                              </div>

                              <div class="col-md-12">
                                  <div class="form-group">
                                      <label for="type" >{{__('strings.suburb_type')}}</label>
                                      <input name="type" class="form-control">
                                  </div>
                              </div>

                              <div class="col-md-12">
                                  <div class="form-group">
                                      <label for="city" >{{__('strings.city')}}</label>
                                      <input name="city" class="form-control">
                                  </div>
                              </div>

                              <div class="col-md-12">
                                  <div class="form-group">
                                      <label for="state" >{{__('strings.state')}}</label>
                                      <input name="state" class="form-control">
                                  </div>
                              </div>

                              <div class="col-md-12">
                                  <div class="form-group">
                                      <label for="country" >{{__('strings.country')}}</label>
                                      <input name="country" class="form-control">
                                  </div>
                              </div>

                              <div class="col-md-12">
                                  <div class="form-group">
                                      <label for="full_address" >{{__('strings.full_address')}}</label>
                                      <input name="full_address" class="form-control" required="required">
                                  </div>
                              </div>


                          </div>
                          <div class="col-md-6">
                              <button type="submit" class="btn btn-block btn-primary">
                                  {{ __('strings.submit_update') }}
                              </button>
                          </div>

                      </form>
                  </div>
              </div>
          </div>
      </div>
</div>

@endsection

@push('scripts')
<script>
    
    var map;
    var lat =  22.148757;
    var lng = -100.991894;
    var marker;
    $("#lat").keyup(function(e){
        map.panTo([$('#lat').val(), $('#lng').val()]);
    });    
    
    $("#lng").keyup(function(e){
        map.panTo([$('#lat').val(), $('#lng').val()]);
    }); 
    
    var pin_start_marker = L.icon({
        iconUrl: '{{asset('images/start_pin.png')}}',
        iconSize:     [26, 43], // size of the icon
        iconAnchor:   [13, 43], // point of the icon which will correspond to marker's location
        popupAnchor:  [0, -24] // point from which the popup should open relative to the iconAnchor
    });
    $(document).ready(function(){
        // initialize map
        map = new L.map('map',{attributionControl: false});
        
        map.on('load',function(){            
            console.log('map loaded');
            marker = L.marker([lat,lng], {icon: pin_start_marker})    
                                    .on('click', function(e){
                                        map.setView(e.latlng, map.zoom);
                                    })
                                    .addTo(map);
            
            $('#lat').val(lat);
            $('#lng').val(lng);
            
        });
        
        L.tileLayer('https://mapas.rtplataforma.com:8443/styles/klokantech-basic/{z}/{x}/{y}.png', {            
            maxZoom: 18,
        }).addTo(map);
        
        map.setView([lat, lng], 16);
        // adding controls to map
        L.control.fullscreen().addTo(map);
        $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
                map.invalidateSize();
        });
    });
    
    // detect paste or typing on start address to proccess lat,lng data        
    $("#suburb").on('input', function () {
        // regualar expression to validate if given string has lat,lng values.
        // online regular expresion validator: https://www.debuggex.com/r/mNdKcumz2T5n-fWr#cheatsheet
        var patt = new RegExp(/(.*)place(.*)@(\-?\d+\.\d+),\s*(\-?\d+\.\d+)(.*)d(\d+.\d+)(.*)d(\-?\d+\.\d+)$/);

        if (patt.test($(this).val())) {
            var data = patt.exec($(this).val());
            // get string elementos from regular expresion,                
            // replace all '+' characters with white space. 
            var address = decodeURIComponent(data[2]).replace(/\+/g, " ").replace(/\//g, "");
            $(this).val(address);
            $("#lat").val(data[6]);
            $("#lng").val(data[8]);
            marker.setLatLng([data[6], data[8]]);
            map.setView([data[6], data[8]], 16);
        }
    });
</script>
@endpush