@extends('layouts.master')
@section('title', 'Mapping')
@section('content')

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
    <!-- Content Header (Page header) -->
    <section class="content-header">
         
      <h1>
        Mapping
      </h1>
      <ol class="breadcrumb">
        <li><a href="{{ route('home') }}"><i class="fa fa-dashboard"></i> Dashboard</a></li>
      </ol>
    </section>

    <!-- Page Header -->
                    <div class="page-header">
                        <div class="row">
                            <div class="col-6">
                                <div class="header-icon"><i class="fa fa-map-marker-alt"></i></div>
                                <div class="dropdown header-title">
                                    <button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Units Locator
                                    </button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="#">Historical Locator</a>
                                        <a class="dropdown-item" href="#">Route Locator</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <form class="form-inline float-right">
                                    <div class="input-group search-box">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text"><i class="fa fa-search"></i></div>
                                        </div>
                                        <input type="text" class="form-control" placeholder="Search Landmarks / Units / Work Orders / Address" aria-label="Search">
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-secondary" type="button"><i class="fa fa-microphone"></i></button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- /#Page Header -->


                     <!-- Map Wrapper -->
                    <div class="map-wrapper">
                        <div class="map-overlay">
                            


                            <!-- <iframe class="map-display" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13007070.354009148!2d-104.65387033028972!3d37.25828124582162!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited+States!5e0!3m2!1sen!2sin!4v1522062223124" width="100%" height="670" frameborder="0" style="border:0" allowfullscreen></iframe> -->
                            <div id="map" class="show"></div>
                            <div id="map-history" class="hide"></div>
                            
                             <!--  <script>
      var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-33.863276, 151.207977),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
            alert('hjerer');
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var id = markerElem.getAttribute('id');
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
            });
          });
        }



      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}
    </script>

    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7JVZBJ1BeHdkUEVLhMTaWd14DkO8rQq8&callback=initMap">
    </script> -->

                        </div>
                        <!-- Unit Detail Accordion -->
                        <div class="info-accordion">
                            <a class="btn btn-secondary info-btn" data-toggle="collapse" href="#collapseSingleUnit" role="button" aria-expanded="false" aria-controls="collapseSingleUnit"><i class="fa fa-caret-down"></i></a>
                            <div class="collapse" id="collapseSingleUnit">
                                
                            </div>
                        </div>
                        <!-- /#Unit Detail Accordion -->
                        <!-- Unit Search Form Accordion -->
                        <div class="info-form">
                            <a class="btn btn-secondary info-btn" data-toggle="collapse" href="#mappingForm" role="button" aria-expanded="false"><i class="fa fa-ellipsis-v"></i></a>
                            <div class="form-title"><span class="partial-display"><i class="fa fa-truck"></i> Choose Units </span></div>
                            <div class="collapse" id="mappingForm">
                                <div class="form-box">
                                    <form>
                                        <div id="accordion" class="unit-group-tree">
                                            <div class="unit-group">
                                                <div id="headingOne" class="unit-title-header">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" value="" id="all_units">
                                                        <label class="form-check-label" for="defaultCheck1">
                                                            All Units
                                                        </label>
                                                    </div>
                                                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                        <i class=" fa fa-angle-down"></i>
                                                    </button>
                                                </div>
                                                <div id="collapseOne" class="collapse show units" aria-labelledby="headingOne" data-parent="#accordion">
                                                    <div class="">
                                                    	   
                                                       
                                                       
                                                       
                                                       
                                                      
                                                        
                                                        
                                                    </div>
                                                </div>
                                            </div>
                                            <!--<div class="unit-group">
                                                <div class="unit-title-header" id="headingTwo">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
                                                        <label class="form-check-label" for="defaultCheck1">
                                                            Unit Group 1
                                                        </label>
                                                    </div>
                                                    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                                        <i class=" fa fa-angle-down"></i>
                                                    </button>
                                                </div>
                                                <div id="collapseTwo" class="collapse units" aria-labelledby="headingTwo" data-parent="#accordion">
                                                    <div class="">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
                                                            <label class="form-check-label" for="defaultCheck1">
                                                                T-130
                                                            </label>
                                                        </div>
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
                                                            <label class="form-check-label" for="defaultCheck2">
                                                                T-132
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                             <div class="unit-group">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
                                                    <label class="form-check-label" for="defaultCheck2">
                                                        Unit Group 2
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="unit-group">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="" id="defaultCheck3">
                                                    <label class="form-check-label">
                                                        Unit Group 3
                                                    </label>
                                                </div>
                                            </div> -->
                                        </div>
                                        <!-- <div class="form-inline my-3">
                                            <div class="form-check mb-2 mr-3">
                                                <input class="form-check-input" type="checkbox" id="inlineFormCheck">
                                                <label class="form-check-label" for="inlineFormCheck">
                                                    Auto Refresh Map Every
                                                </label>
                                            </div>
                                            <select class="form-control">
                                                <option>30 Secs</option>
                                            </select>
                                        </div> -->
                                        <hr class="dotted">
                                        <div class="d-flex justify-content-center">
                                            <button type="button" id="map_filter" class="btn btn-primary"><i class="fa fa-truck"></i> Show Units</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <!-- /#Unit Search Form Accordion -->
                    </div>
                    <!-- /#Map Wrapper -->

                    <!-- Information Table -->
                    <div class="detailed-info-table">
                        <div class="sub-header">
                            <h4>Detailed Information</h4>
                            <button type="button" class="btn btn-outline-primary float-right"><i class="fa fa-file-excel"></i> Export to Excel</button>
                        </div>
                        <div class="info-table">
                            <table class="data-table table table-striped">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>Route</th>
                                        <th>Sequence</th>
                                        <th>Unit</th>
                                        <th>Events</th>
                                        <th>Date</th>
                                        <th>Landmark</th>
                                        <th>Address</th>
                                        <th>Speed</th>
                                        <th>Driver</th>
                                        <th>Latitude</th>
                                        <th>Longitude</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><i class="fa fa-arrow-alt-circle-right c-green route"></i></td>
                                        <td>72</td>
                                        <td>T-677</td>
                                        <td>Drive</td>
                                        <td>Mar 06 09:41:20 AM</td>
                                        <td>-</td>
                                        <td>1734 N St Marys, St San Antonio ,TX 78212</td>
                                        <td>45</td>
                                        <td>DIEGO CORREA</td>
                                        <td>29.4403100000</td>
                                        <td>-98.4853900000</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa fa-arrow-alt-circle-up c-green route"></i></td>
                                        <td>73</td>
                                        <td>T-677</td>
                                        <td>Drive</td>
                                        <td>Mar 06 09:41:20 AM</td>
                                        <td>-</td>
                                        <td>1734 N St Marys, St San Antonio ,TX 78212</td>
                                        <td>45</td>
                                        <td>DIEGO CORREA</td>
                                        <td>29.4403100000</td>
                                        <td>-98.4853900000</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa fa-dot-circle c-yellow route"></i></td>
                                        <td>74</td>
                                        <td>T-677</td>
                                        <td>Drive</td>
                                        <td>Mar 06 09:41:20 AM</td>
                                        <td>-</td>
                                        <td>1734 N St Marys, St San Antonio ,TX 78212</td>
                                        <td>45</td>
                                        <td>DIEGO CORREA</td>
                                        <td>29.4403100000</td>
                                        <td>-98.4853900000</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa fa-check-circle c-blue route"></i></td>
                                        <td>75</td>
                                        <td>T-677</td>
                                        <td>Drive</td>
                                        <td>Mar 06 09:41:20 AM</td>
                                        <td>-</td>
                                        <td>1734 N St Marys, St San Antonio ,TX 78212</td>
                                        <td>45</td>
                                        <td>DIEGO CORREA</td>
                                        <td>29.4403100000</td>
                                        <td>-98.4853900000</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa fa-arrow-alt-circle-down c-green route"></i></td>
                                        <td>76</td>
                                        <td>T-677</td>
                                        <td>Drive</td>
                                        <td>Mar 06 09:41:20 AM</td>
                                        <td>-</td>
                                        <td>1734 N St Marys, St San Antonio ,TX 78212</td>
                                        <td>45</td>
                                        <td>DIEGO CORREA</td>
                                        <td>29.4403100000</td>
                                        <td>-98.4853900000</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- /#Information Table -->
                    <!-- Alert Marqueue -->
                    <!-- <div class="footer-stuck">
                        <div class="alert alert-primary mb-0" role="alert">
                            <marquee>
                                ALERTS: Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor!
                            </marquee>
                        </div>
                    </div> -->
                    <!-- /#Alert Marqueue -->
    @include('layouts.includes.alert')
     <!-- Main content -->
    <!-- <section class="content">
      @if(Auth::user()->role_id == 1)
     
      <div class="row">
        <div class="col-lg-3 col-xs-6">
          
          <div class="small-box bg-aqua">
            <div class="inner">
              <h3>{{$totalUsers}}</h3>
              <p>Total No of Users>
            </div>
            <div class="icon">
              <i class="ion ion-person-add"></i>
            </div>
            <a href="{{ LaravelLocalization::getLocalizedURL(null, url('/users'))}}" class="small-box-footer">{{trans('messages.moreinfo')}} <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </div>
        @endif 
        
      </div>
      
    </section>   -->            
@endsection

@section('script')
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<script src="{{ asset('js/pubnub.js') }}"></script>  
<script type="text/javascript">
var company_channel=JSON.parse('');
var device_channel=JSON.parse('');	
//alert(company_channel);
//console.log(device_channel);

    var pubnubDemo = new PubNub({
        publishKey: 'pub-c-190e722a-a4b9-4ebd-bb11-576d30de2c25',
        subscribeKey: 'sub-c-dffc7d5a-52a5-11e8-a697-1afc57e8b539'
    });
var global_locs ={};
    // Subscribe to the demo_tutorial channel
var set_marker=true;
var filterIsSet =false;
pubnubDemo.addListener({
	 
    message: function(msg){

       if(checkDevices(msg.message.device_id)){
        return false;
       }
        

       // console.log( msg.message.device_id);
        console.log( msg);
        //longi

         var messaes_arr = msg.message;
        

	        if(global_locs[messaes_arr.device_id]!==undefined) {
	        	
	         	 delete  global_locs[messaes_arr.device_id];
	    	 }
         	var items={};
         	var _info='<p>Unit Name: '+messaes_arr.device_id+'</p><p>Current Status: '+messaes_arr.other10+'</p>';
         	items['info']=_info;
         	items['lat']=messaes_arr.lat;
         	items['lng']=messaes_arr.longi;
            global_locs[messaes_arr.device_id] = { info:_info, lat:messaes_arr.lat, lng:messaes_arr.longi };
            
         	//JSONobj.push(locs);
       //  });
       //}
        //   locs = {
          	
        //     1: { info:_info, lat:msg.message.lat, lng:msg.message.longi },//update info and position
        //     //2: { info:'2. New Random info and new position', lat:12.93488, lng:77.61959},
        // };
        //console.log(global_locs);
     
    	
       	if(set_marker==true){
       		//console.log(global_locs);
     	   	setMarkers(global_locs);
    	}
    },
     storeInHistory: false,
});


pubnubDemo.subscribe({
    channels: ['demo_tutorial',company_channel]
    //channels: [company_channel]
});

// Publish a simple message to the demo_tutorial channel

</script>

  <script>
    function checkDevices(device_id){

      var checked_arr=[];
      $.each($("input[name='unit_list']:checked"), function(){ 
        checked_arr.push($(this).attr('id'));
      });
      
       if(filterIsSet && $.inArray(device_id,checked_arr)) {
           return true
       }
       else
        return false;

    }
              var locations = {}; //A repository for markers (and the data from which they were contructed).
        
        //initial dataset for markers

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 13,
            center: new google.maps.LatLng('23.03876979999999','72.51455539999999'),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
            var infowindow = new google.maps.InfoWindow();
        var trafficlayer = new google.maps.TrafficLayer();
        trafficlayer.setMap(map);
        
        var auto_remove = true; // When true, markers for all unreported locs will be removed.
      
        function setMarkers(locObj) {
        	
             if(auto_remove) {
                 // Remove markers for all unreported locs, and the corrsponding locations entry.
                 $.each(locations, function(key) {
                     if(!locObj[key]) {
                     	if(locations[key]!==undefined){
                         	if(locations[key].marker) {
                            	 locations[key].marker.setMap(null);                   
                         	}
                     	}
                         delete locations[key];
                         delete  global_locs[key];
                     }
                 });
             }
   
             //console.log(locObj);
            $.each(locObj, function(key, loc) {      
          //console.log(key+'----key');         
 //console.log(loc.lat+'---lat');
                             // console.log(loc.lng+'---longi');
            if(loc!=undefined){
                if(!locations[key] && loc.lat!==undefined && loc.lng!==undefined) {
                    // Marker has not yet been made (and there's enough data to create one).
                              map.setCenter(new google.maps.LatLng(loc.lat, loc.lng));
                              
                        var img_path= '{{ asset("images")}}/car.png';
                             
                    // Create marker
                    loc.marker = new google.maps.Marker({
                        position: new google.maps.LatLng(loc.lat, loc.lng),
                        icon: img_path,
                        map: map
                    });
      
                    // Attach click listener to marker
                    google.maps.event.addListener(loc.marker, 'click', (function(key) {
                     //

                      return function() {
                       // alert(key);
                         
                            if(locations[key]) {
                              showInfoWindow(key);
                                //console.log(locations[key]);
                                // infowindow.setContent(locations[key].info);
                                // infowindow.open(map, locations[key].marker);
                            }
                        }
                       
                    })(key));
      
                    // Remember loc in the `locations` so its info can be displayed and so its marker can be deleted.
                    locations[key] = loc;
                }
                else if(locations[key] && loc.remove) {
                    // Remove marker from map
                    if(locations[key].marker) {
                        locations[key].marker.setMap(null);
                    }
                    // Remove element from `locations`
                    delete locations[key];
                    delete  global_locs[key];
                }
                else if(locations[key]) {
                    // Update the previous data object with the latest data.
                    $.extend(locations[key], loc);
                    if(loc.lat!==undefined && loc.lng!==undefined) {
                        // Update marker position (maybe not necessary but doesn't hurt).
                        locations[key].marker.setPosition(
                            new google.maps.LatLng(loc.lat, loc.lng)
                        );
                    }
                    // locations[key].info looks after itself.
                }
            }   

            });
        }
      
        var ajaxObj = {// Object to save cluttering the namespace.
            options: {
                //url: "data.json?nocache=" + (new Date()).getTime(), // The  resource that delivers loc data made cache safe.
                url: "{{ url('ajax-getmapdata') }}",
               
                dataType: "json" // The type of data tp be returned by the server.
            },
            delay: 10000, // (milliseconds) the interval between successive gets.
            errorCount: 0, // running total of ajax errors.
            errorThreshold: 5, // the number of ajax errors beyond which the get cycle should cease.
            ticker: null, // setTimeout reference - allows the get cycle to be cancelled with clearTimeout(ajaxObj.ticker);
            get: function() { // a function which initiates 
                if(ajaxObj.errorCount < ajaxObj.errorThreshold) {
                    ajaxObj.ticker = setTimeout(getMarkerData, ajaxObj.delay);
                }
            },
            fail: function(jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
                ajaxObj.errorCount++;
            }
        };
        
        // Ajax master routine
        function getMarkerData() {
            $.ajax(ajaxObj.options)
              .done(setMarkers) // fires when ajax returns successfully
              .fail(ajaxObj.fail) // fires when an ajax error occurs
              .always(ajaxObj.get); // fires after ajax success or ajax error

        }

        //setMarkers(locs);// Create markers from the initial dataset served with the document.
        //ajaxObj.get();// Start the get cycle.
      
       
       
        
        // *******************
      var keys_filter=[];
    $(function(){

    	$("#map_filter").click(function (){
          $("#map-history").hide();
          $("#map").show();
            set_marker=false;
            filterIsSet=true;
                      // var favorite = [];

            $.each($("input[name='unit_list']:checked"), function(){      
            // var device_serial="device-"+$(this).attr('id');   
            // var filterExpStr = "device_id == '"+device_serial+"'";
            //alert(device_serial);   

            	//pubnubDemo.setFilterExpression(filterExpStr);
            	//console.log(locations);
            	//key=$(this).attr('id');
            	keys_filter.push($(this).attr('id'));
            	
            	
            	
            	
            	//pubnubDemo.setFilterExpression("device_id=device-"+$(this).attr('id'));
               // favorite.push($(this).attr('id'));

            });
            remove_marker()
            //alert("My favourite sports are: " + favorite.join(", "));

		} );

      $("#all_units").click(function (){        
        $("input[name='unit_list']:checkbox").not(this).prop('checked', this.checked);
      });


      });

    function remove_marker( ){
    	//console.log(keys_filter);
    	var data = {};
    	var key_list = '';
    	var location_data = {};
    	
    		$.each(keys_filter,function (device_keys,device_val){

    			if($.inArray(device_val,global_locs)){
    				 data[device_val]=global_locs[device_val];
    			}
    			if($.inArray(device_val,locations)){
    				 location_data[device_val]=locations[device_val];
    			}
    			var filterExpStr = "device-"+device_val;
    			if(key_list!='')
    				key_list = key_list+",'"+filterExpStr+"'";
    			else
    				key_list="'"+filterExpStr+"'";
    	 		
    	 		
    	 		// $.each(locations, function(key_location, val) {
    	 			 
        //              if(!$.inArray(key_location,keys_filter)){
        //                 if(locations[key_location].marker) {
        //                 	locations[key_location].marker.setMap(null);
                        	
        //             	}
        //             	delete locations[key_location];
        //                	delete  global_locs[key_location];

        //              }
        //          });

    		});
    		console.log('setting Filter--');
    		pubnubDemo.setFilterExpression("("+key_list+") contains device_id");
    		
    		
    		global_locs={};
    		keys_filter=[];
    		//locations={};
    		global_locs=data;
    		//locations=location_data;
    		//console.log(global_locs)
			//console.log(locations);

			/*$.each(locations, function(key_location, val) {
    	 		
                     if(!$.inArray(key_location,keys_filter)){
                     	//locations[key_location].remove=true;
                        if(locations[key_location].marker) {
                        	locations[key_location].marker.setMap(null);
                        	
                    	}
                    	 delete locations[key_location];
                     //   	delete  global_locs[key_location];

                     }
                 });*/

    		set_marker=true;
            
    }
     

function showInfoWindow(key){
 
   $.ajax({
        type: "POST",
        url : "{{ url('/unit/getunitinfo') }}/"+key,
        dataType: "JSON",
        data : {"_token": "{{ csrf_token() }}"},
        success: function(data)
        {
          if(data.status === true){ 
          unit_data= data.unit_data;
              //console.log(unit_data.serial_number);

            $('#collapseSingleUnit').collapse('show');
             
              var _html ='<div class="info-box"><div class="row"><div class="col-4"><p>Unit Name: '+unit_data.unitid+'</p><p>Driver: '+unit_data.first_name+' '+unit_data.last_name+' </p><p>Address: </p></div><div class="col-4"><p>Date: '+unit_data.created_at+'</p><p>Phone: '+unit_data.phone_number+'</p><p>Event: Drive, Speed: 45 MPH, Direction: E</p></div><div class="col-4"><p>English Hours: 1182.94</p><p>Email: xyz.yxz@gmail.com</p><p>Veh. Info: , CR: , LP#: , VIN#:'+unit_data.vin+' </p></div> <div class="col d-flex justify-content-end"><button type="button" onclick="return showHistory(\''+unit_data.serial_number+'\');" class="btn btn-outline-primary"><i class="fa fa-history"></i> History Locations</button></div></div></div>';
              // <button type="button" class="btn btn-outline-primary ml-3"><i class="fa fa-map-signs"></i> Street Level</button><button type="button" class="btn btn-outline-primary ml-3"><i class="fa fa-map-pin"></i> Create Landmark</button><button type="button" class="btn btn-outline-primary ml-3"><i class="fa fa-street-view"></i> Closest</button><button type="button" class="btn btn-outline-primary ml-3"><i class="fa fa-globe"></i> Create Geofence</button>
              $('#collapseSingleUnit').html(_html);
              
              
          }else{
              alert('Some Error.');
          }         
        }
      });
}

function showHistory(serial_number){
  
  $('#collapseSingleUnit').collapse('hide');
     

    $.ajax({
        type: "POST",
        url : "{{ url('/unit/getunitroute') }}/"+serial_number,
        dataType: "JSON",
        data : {"_token": "{{ csrf_token() }}"},
        success: function(data)
        {
          if(data.status === true){ 
             $("#map").hide();
             $("#map-history").show();
          data= data.unit_data;
          //console.log(data);
          initMap(data);
          }else{
              alert('Some Error.');
          }         
        }
      });
}

function initMap(data) {

        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});

        var map = new google.maps.Map(document.getElementById('map-history'), {
          zoom: 13,
          center: {lat: parseFloat(data.origin.lat), lng: parseFloat(data.origin.longi)}
        });
        /*gps_data=data.gps_data;
        var flightPlanCoordinates = [];
         for (var i = 0; i < gps_data.length; i++) {
          flightPlanCoordinates.push({lat:parseFloat(gps_data[i].lat),lng:parseFloat(gps_data[i].longi)})
           
          
        }
        var flightPath = new google.maps.Polyline({
          path: flightPlanCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });

        // flightPath.setMap(map);
       // console.log(flightPlanCoordinates);*/
        directionsDisplay.setMap(map);
        calculateAndDisplayRoute(directionsService, directionsDisplay, data);
       
        
      }

      

      function calculateAndDisplayRoute(directionsService, directionsDisplay,data) {
        var selectedMode = 'DRIVING';
        var waypts = [];
        gps_data=data.gps_data;
       //alert(gps_data.length);

        for (var i = 0; i < gps_data.length; i++) {
          
            waypts.push({
              location: new google.maps.LatLng(parseFloat(gps_data[i].lat),parseFloat(gps_data[i].longi)),
              stopover: true
            });
          
        }

        directionsService.route({
          origin: {lat: parseFloat(data.origin.lat), lng: parseFloat(data.origin.longi)},  
          destination: {lat: parseFloat(data.dest.lat), lng: parseFloat(data.dest.longi)},  
          // Note that Javascript allows us to access the constant
          // using square brackets and a string value as its
          // "property."
          waypoints: waypts,
          optimizeWaypoints: true,
          travelMode: google.maps.TravelMode[selectedMode]
        }, function(response, status) {
          if (status == 'OK') {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }

</script>


@endsection