@extends('layouts.main')
@push('styles')
<link href="{{asset('css/daterangepicker.css')}}" rel='stylesheet' />
<!-- Map API -->    
<link href="{{asset('css/leaflet.css')}}" rel='stylesheet' />
<script src="{{asset('js/leaflet.js')}}" type="text/javascript"></script>
<script src="{{asset('js/leaflet.rotatedMarker.js')}}" type="text/javascript"></script>
<script src="{{asset('js/Leaflet.fullscreen.min.js')}}"></script>
<link href="{{asset('css/leaflet.fullscreen.css')}}" rel='stylesheet' />
<link href="{{asset('css/L.Control.Locate.min.css')}}" rel='stylesheet' />
<link rel="stylesheet" type="text/css" href="{{asset('css/dataTables.checkboxes.css')}}"/>
<!-- END Map API -->
@endpush
@section('content')
<div class="row">
  <div class="col-md-12">
    <div class="card">
      <div class="card-body">
      <h3 class="card-title">{{__('strings.route_configuration')}}</h3> <h1>{{$route->alias ?? ''}}</h1>               
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-6">
  <div class="card">
        <div class="card-body">
          <div clas="col-md-2">
              <div class="table-responsive">            
                  <table id="stop-address-table" class="table hover">
                      <thead class="thead-ligth">
                          <tr>
                              <th>Alias</th>
                              <th>{{__('strings.address')}}</th>
                              <th></th>
                          </tr>
                      </thead>
                  </table>
              </div>
          </div> 
        </div>  
    </div>
  </div>

  <div class="col-md-6">
  <div class="card">
        <div class="card-body">
          <div style="width: 100%; height: 500px;">                    
              <div id="map" style="height: 100%;"></div>                              
          </div>  
        </div>  
    </div>
  </div>
</div>

@endsection('content')

@push('scripts')
<script src="{{asset('js/daterangepicker.js')}}" type="text/javascript"></script>
<script src="{{asset('js/dataTables.checkboxes.min.js')}}" type="text/javascript"></script>

<script>

var map;
var table;
var stopAddresses = @json($stopAddresses);
var lat = {{Auth::user()->START_LAT == NULL ? config('app.latitude') : Auth::user()->START_LAT}};
var lng = {{Auth::user()->START_LNG == NULL ? config('app.longitude')  : Auth::user()->START_LNG}};
var selectedStopAddresses = new Map();
var polyline;

/* Init custom markers */
var stopAddressLayer;
var startMarker;
var pin_start = 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
});


$(function() {
  //setting language for moment.js
  moment.locale('es');
  initDatatable();
  initMap();
});

/**
* Init map view
*/
function initMap() {
    // configure Leaflet map
    map = new L.map('map',{attributionControl: true, attributionControl: false});
    
    // listen onLoad event
    map.on('load', function() {
        // init start marker
        startMarker = L.marker([lat, lng], { icon: pin_start, draggable: true})    
          .bindTooltip("{{__('strings.start_location')}}", {permanent: true, offset: [0,-25]})
          .on('click', function(e){
              map.setView(e.latlng, map.zoom);
          }).addTo(map);
        
        startMarker.on('dragend', function (e) {
          drawRoute();
        });
    });
    // set map view
    map.setView([lat, lng], {{config('app.zoom')}});
    // load map style
    L.tileLayer("{{config('app.style_map_uri')}}", {
            maxZoom: 19,
    }).addTo(map);
    // add fullscreen control
    L.control.fullscreen().addTo(map);

    $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
        map.invalidateSize();
    });
    //resize the chart when window resize
    $(window).resize(function () {
        map.invalidateSize();
    });
    
    L.Control.Layers.include({
        clearLayers: function () {
            // Iterate all layers in control
            this._layers.forEach(function (obj) {
                // Check if it's an overlay and added to the map
                if (obj.layer) {
                    this.map.removeLayer(obj.layer);
                }
            });
        }
    });
}

function initDatatable() {
  table = $('#stop-address-table').DataTable({
    paging: false,	
    searching: true,
    scrollY: "400px",
    data: stopAddresses,
    select:true,
    columns: [
      {data:'alias', defaultContent:'n/a'},
      {data:'address', defaultContent:'n/a'},
      {data: 'id',  checkboxes: {
          selectAll: false
        }
      }
    ],
    language : {
            url: "{!! asset('datatables/languages/spanish.json') !!}"
    }
  });

  table.on('change','tr', function(){
    var data = table.row( this ).data();
    
    var distance = L.latLng(data.lat, data.lng).distanceTo(startMarker.getLatLng());
    data.dist = distance;

    if(selectedStopAddresses.has(data.id)) {
      selectedStopAddresses.delete(data.id);
    } else {
        selectedStopAddresses.set(data.id, data);
    }
    drawRoute();
  });

}


function drawRoute() {
    if(stopAddressLayer != undefined) {
      map.removeLayer(stopAddressLayer);
    }
    if(polyline != undefined) {
      map.removeLayer(polyline);
    }

    var addresses = Array.from(selectedStopAddresses.values());
    console.log(addresses);
    // asc sort stop addresses based on distance
    addresses.sort( function( a , b ) {
      return a.dist - b.dist;
    });

    stopAddressLayer = L.geoJson({type:'FeatureCollection', 'features': addresses.map(function(item) {
        return {
          type:'Point', 
          coordinates: [item.lng, item.lat],
          properties : item,
          popupContent: "<strong><h5>Alias: " + item.alias + " </h5></strong>" 
                  + "<strong>{{__('strings.address')}}:</strong> " + item.address
        };
      })},{
        style: {
            "color": "#ffffff",
            "weight": 3
        },
        pointToLayer: function (feature, latlng) {
            return L.marker(latlng);
        },
        onEachFeature: function(feature, layer) {
            // does this feature have a property named popupContent?
            if (feature.properties && feature.popupContent) {
                layer.bindPopup(feature.popupContent);
            }
        }
    }).addTo(map);
    
    // build route
    var apiUrl = "https://mapas.rtplataforma.com:8444/route/v1/driving/#cords?overview=full&geometries=geojson";
    var cords = addresses.map(function(item){
      return [item.lng, item.lat];
    });
    cords.unshift([startMarker.getLatLng().lng, startMarker.getLatLng().lat]);
    $.getJSON(apiUrl.replace('#cords', cords.join(";")), function (response) {
      polyline = L.geoJson(response.routes[0].geometry, {
          color: "#09091a",
          weight: 6,
      }).addTo(map);
      // fit map to polyline
      map.fitBounds(polyline.getBounds(),{padding: [50, 50]});
    }).fail(function(err) {
        console.log(err);
    });
  }
</script>

@endpush('scripts')