 
<?php $__env->startSection('content'); ?>

	<div id="map"></div>
	<div id="directions-panel"></div>
	<div id="output_container">
		<table id="output" style="page-break-before: always;">
		
		</table>
	</div>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('extras'); ?>

<style>

      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 90%;
        float: left;
        width: 100%;

      }
      #directions-panel {
        margin-top: 20px;
        background-color: #FFEE77;
        padding: 10px;
      }
      td {
      padding: 2px;
      }
      
</style>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('bottom'); ?>
<script 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCLCUIiAMXPt4lT859z3Iit1l77mehWAGg">
</script>

<script>
// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = '123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*<>{}[]~-_+=|\?/.,;:';
var labelIndex = 0;
var output = document.getElementById('output');

function initialize() {
  var bangalore = { lat: 39.63, lng: -111.44 };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  /*
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });
	*/
	
  // Add a marker at the center of the map.
  //addMarker(bangalore, map);

  var geocoder = new google.maps.Geocoder();

  <?php foreach($conversions as $conversion): ?>
	geocodeAddress(geocoder, map, "<?php echo e($conversion->address . ' ' . $conversion->city . ' ' . $conversion->state . ' ' . $conversion->zip); ?>", "<?php echo e($conversion->fname . ' ' . $conversion->lname); ?>");
  <?php endforeach; ?>
}


function geocodeAddress(geocoder, resultsMap, address, customer) {
	  
	  geocoder.geocode({'address': address}, function(results, status) {
	    if (status === google.maps.GeocoderStatus.OK) {
	      resultsMap.setCenter(results[0].geometry.location);
	      var tempLabel = labels[labelIndex++ % labels.length];
	      var marker = new google.maps.Marker({
	        map: resultsMap,
	        position: results[0].geometry.location,
	        label: tempLabel
	      });
	      output.innerHTML += '<tr><td><strong>' + tempLabel + '</strong></td><td>' + customer + '</td><td>' + address + '</td></tr>';
	    } else {
	      alert('Geocode was not successful for the following reason: ' + status);
	    }
	  });
	}


google.maps.event.addDomListener(window, 'load', initialize);

	  
</script>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('pdfs.pdf_template', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>