@extends('layouts.app')

@section('link')
    <link href="{{ asset('css/theme.default.css') }}" rel="stylesheet">
    <link href="{{ asset('css/leaflet.css') }}" rel="stylesheet">
    <link href="{{ asset('css/leaflet-routing-machine.css') }}" rel="stylesheet">
    
    
    <style type="text/css">

    	#mymap {
      		border:1px solid red;
      		width: 100%;
      		height: 870px;
    	}
    </style>
@endsection


@section('content')
    <button class="btn btn-primary back-btn" onclick="window.history.back()">{{__('texte.objects_arr.show.back')}}</button>
    <div id="mymap"></div>
  

<script src="{{ asset('js/leaflet.js') }}"></script>
<script src="{{ asset('js/leaflet-routing-machine.js') }}"></script>
<script src="{{ asset('js/Leaflet.Icon.Glyph.js') }}"></script>


  <script>

    var waypoints = [
          L.latLng(43.222074,27.8612873),
          L.latLng({!!$object->gps_lat !!},{!! $object->gps_lng !!})
        ];
        
        
    var map = L.map('mymap',{
        center: [43.251061, 27.855555],
        zoom: 9
    });

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    
    
    L.Routing.control({
        
        plan: L.Routing.plan(waypoints, {
			createMarker: function(i, wp) {
				return L.marker(wp.latLng, {
					draggable: true,
					icon: L.icon.glyph({ glyph: String.fromCharCode(65 + i) })
				});
			},
        }),
    }).addTo(map);

  </script>

@endsection