@extends('admin.layout')
@section('content')
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<div class="search-list">
  <div class="content-wrapper search-result-list">
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <h1> {{ trans('Tracking') }} <small> {{ trans('Tracking') }}...</small> </h1>
    <ol class="breadcrumb">
      <li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
      <li class="active"> {{ trans('Tracking') }}</li>
    </ol>
  </section>
  
  <!-- Main content -->
  <section class="invoice clearfix" style="margin: 15px;">
      <!-- title row -->
      <div class="col-xs-12">
      <div class="row">
       @if(session()->has('message'))
      	<div class="alert alert-success alert-dismissible">
           <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
           <h4><i class="icon fa fa-check"></i> {{ trans('labels.Successlabel') }}</h4>
            {{ session()->get('message') }}
        </div>
        @endif
        @if(session()->has('error'))
        	<div class="alert alert-warning alert-dismissible">
               <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
               <h4><i class="icon fa fa-warning"></i> {{ trans('labels.WarningLabel') }}</h4>
                {{ session()->get('error') }}
            </div>
        @endif
       </div>
      </div>
      @php
      $jsonData = json_encode(array_merge($result));
      /* echo '<pre>';
        print_r($result);
      echo '</pre>'; */
      //echo $jsonData;
      @endphp
		<div class="col-xs-12">
			<div class="row">
				<!-- <div id="map" style="width: 100%; height: 800px;"></div> -->
        <div id="map-canvas" style="width: 100%; height: 800px;"></div>
			</div>
		</div>
    </section>  
</div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<!-- <script src="http://maps.googleapis.com/maps/api/js?key=&sensor=true" type="text/javascript"></script> -->
<!-- <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> -->
<script>    
  var map;
  var geocoder;
  var marker;
  var people = new Array();
  var latlng;
  var infowindow;

  $(document).ready(function() {
    ViewCustInGoogleMap();
  });

  function ViewCustInGoogleMap() {

    var mapOptions = {
      center: new google.maps.LatLng(51.044270, -114.062019),   // Coimbatore = (11.0168445, 76.9558321)
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    // Get data from database. It should be like below format or you can alter it.
    
    var data = '';
    //alert(data);
    people = JSON.parse(data); 

    for (var i = 0; i < people.length; i++) {
      setMarker(people[i]);
    }
  }

  function setMarker(people) {
    geocoder = new google.maps.Geocoder();
    infowindow = new google.maps.InfoWindow();
    if ((people["LatitudeLongitude"] == null) || (people["LatitudeLongitude"] == 'null') || (people["LatitudeLongitude"] == '')) {
      geocoder.geocode({ 'address': people["Address"] }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
          marker = new google.maps.Marker({
            position: latlng,
            map: map,
            draggable: false,
            html: people["DisplayText"] + people["ADDRESS"],
            icon: "images/marker/" + people["MarkerId"] + ".png"
          });
          //marker.setPosition(latlng);
          //map.setCenter(latlng);
          google.maps.event.addListener(marker, 'click', function(event) {
            infowindow.setContent(this.html);
            infowindow.setPosition(event.latLng);
            infowindow.open(map, this);
          });
        }
        else {
          alert(people["DisplayText"] + " -- " + people["Address"] + ". This address couldn't be found");
        }
      });
    }
    else {
      var latlngStr = people["LatitudeLongitude"].split(",");
      var lat = parseFloat(latlngStr[0]);
      var lng = parseFloat(latlngStr[1]);
      if (people["MarkerId"] =='Partner') {
        var myicon = "http://www.googlemapsmarkers.com/v1/P/0099FF/";
      }
      else
      {
        var myicon = "http://www.googlemapsmarkers.com/v1/D/FF0000/";
      }
      latlng = new google.maps.LatLng(lat, lng);
      marker = new google.maps.Marker({
        position: latlng,
        map: map,
        draggable: false,               // cant drag it
        html: "<strong>Partner:</strong>" + people["DisplayText"] + "<br>"+ "<strong>Address:</strong>" + people["ADDRESS"]+ "<br>"+ "<strong>Phone:</strong>" + people["Phone"],    // Content display on marker click
        //icon: "images/marker.png"       // Give ur own image
        //icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"       // Give ur own image
        icon:   myicon     // Give ur own image
      });
      //marker.setPosition(latlng);
      //map.setCenter(latlng);
      google.maps.event.addListener(marker, 'click', function(event) {
        infowindow.setContent(this.html);
        infowindow.setPosition(event.latLng);
        infowindow.open(map, this);
      });
    }
  }
</script>
@endsection