<?php
$this->load->view('includes/header.php');
echo '<font class="title">'.$menu_path.'</font>';
echo '<br>';
			/* Display system message */
			$this->fungsi->disp_sys_msg();
			echo validation_errors('<p class="field_error">', '</p>');
?>
<script type="text/javascript">
	/*$(function() {
		$( "#tabs" ).tabs({
		//collapsible: true
		});
	});*/
</script>
<script src="<?php echo $this->config->item('base_url');?>/etc/js/jquery.serializeJSON.min.js"></script>
<!---------Google maps property-------->
<style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
	  #map_wrapper {
		   width: 500px;
    	   height: 200px;
}
</style>

<style>
body {
  font-size: 0.8em;
}

#map-container, #side-container, #side-container li {
  float: left;
}

#map-container {
  width: 500px;
  height: 600px;
}

#side-container {
  border: 1px solid #bbb;
  margin-right: 5px;
  padding: 2px 4px;
  text-align: right;
  width: 260px;
}
#side-container ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#side-container li input {
  font-size: 0.85em;
  width: 210px;
}
#side-container .dir-label {
  font-weight: bold;
  padding-right: 3px;
  text-align: right;
  width: 40px;
}

#dir-container {
  height: 525px;
  overflow: auto;
  padding: 2px 4px 2px 0;
}
#dir-container table {
  font-size: 1em;
  width: 100%;
}
</style>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0NwVgqhs1SLlvIzPn7NpVWARN_BQy9sY&sensor=false">
 </script>
<!---------Google maps property-------->

<script type="text/javascript"> 
function display_detail()
{
var idsupp = "<?php echo $this->uri->segment(4); ?>";
$.ajax({url: "<?php echo $this->config->item('base_url').'/branch/branch_supp_map/fetch_supp_data_detail';?>",
                    data: {formData : $('#form1').serialize()}, // Convert a form to a JSON string representation
					dataType: "json",
                    type: 'post',                   
                    async: true,
                    beforeSend: function() {
					//Loading
					 $('#loading').html('<img src="<?php echo $this->config->item('base_url').'/etc/images/ajax-loader.gif';?>"> Fetching data...');
                    },
					data: "idsupp="+idsupp+"",
                    complete: function() {
                    //Hide Loading
					 $('#loading').html("");
                    },
                    success: function (data) {
					
					$supp = data;
					//console.log($supp);
					initialize_gmap();
                    },
                    error: function (request,error) {
                        // This callback function will trigger on unsuccessful action                
                        console.log('Network error has occurred please try again!');     
                    }
                });   
}
 /*------------------------------------Google Maps Code-------------------------------------*/
					//Function initialize google map
					 function initialize_gmap() {
					 var locations = $supp;
					 //console.log(locations);
						var myOptions = {
						  center: new google.maps.LatLng( -6.210997,106.845192),
						  zoom: 17,
						  mapTypeId: google.maps.MapTypeId.ROADMAP
					
						};
						var map = new google.maps.Map(document.getElementById("map-canvas"),
							myOptions);
					
						setMarkers(map,locations)
					  }
					 
					  //Function set markers google map
					  function setMarkers(map,locations){

					  var marker, i
					
					 for (i = 0; i < locations.length; i++)
					 {  
						 /*var addr = locations[i][0]
						 var lat = locations[i][1]
						 var long = locations[i][2]
						 var cust =  locations[i][3]*/
						 
						 var addr = locations[i]['addr']
						 var lat = locations[i]['lat']
						 var long = locations[i]['long']
						 var cust =  locations[i]['name']
						  var idsupp =  locations[i]['idsupp']
						    var icon =  locations[i]['icon']
						
						
						//var from = 
						 
						 
						 //console.log(locations[i]['lat']);
						 
						 latlngset = new google.maps.LatLng(lat,long);
						
						var iconBase = '<?php echo $this->config->item('base_url').'/etc/images/';?>' + icon;
						  var marker = new google.maps.Marker({  
								  map: map, title: cust , position: latlngset, icon: iconBase  
								});
								map.setCenter(marker.getPosition())
						
						var content = '<h3>' + cust +  '</h3>' + addr + '<br>Coordinates :' + lat +','+ long + '<br><a href="<?php echo $this->config->item('base_url').'/branch/branch_supp_map/detail_supp_data';?>/'+idsupp+'/'+lat+'/'+long+'" onclick="NewWindow(this.href,\'mywin\',\'700\',\'500\',\'yes\',\'center\');return false" onfocus="this.blur()">Detail</a>'    
						
						var infowindow = new google.maps.InfoWindow()
						
						google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
								return function() {
								   infowindow.setContent(content);
								   infowindow.open(map,marker);
								};
							})(marker,content,infowindow)); 
							//infowindow.setContent(content);
					   		//infowindow.open(map,marker);
							}
					  }

//Get Route
	
				   
					/*------------------------------------Google Maps Code-------------------------------------*/  
					
</script>

<body onLoad="display_detail()">
<br />
<table width="813" border="1">
  <tr>
    <td width="111" bgcolor="#CCCCCC"><strong>Nama Supplier</strong></td>
    <td width="16" align="center" bgcolor="#CCCCCC"><strong>:</strong></td>
    <td width="284" bgcolor="#EEEEEE"><?php echo $supp_name; ?></td>
    <td width="110" bgcolor="#CCCCCC"><strong>Fax</strong></td>
    <td width="15" align="center" bgcolor="#CCCCCC"><strong>:</strong></td>
    <td width="251" bgcolor="#EEEEEE"><?php echo $supp_fax; ?></td>
  </tr>
  <tr>
    <td bgcolor="#CCCCCC"><strong>Alamat</strong></td>
    <td align="center" bgcolor="#CCCCCC"><strong>:</strong></td>
    <td bgcolor="#FFFFFF"><?php echo $supp_alamat; ?></td>
    <td bgcolor="#CCCCCC"><strong>Latitude</strong></td>
    <td align="center" bgcolor="#CCCCCC"><strong>:</strong></td>
    <td bgcolor="#FFFFFF"><?php echo $supp_lat; ?></td>
  </tr>
  <tr>
    <td bgcolor="#CCCCCC"><strong>Kota</strong></td>
    <td align="center" bgcolor="#CCCCCC"><strong>:</strong></td>
    <td bgcolor="#EEEEEE"><?php echo $supp_city; ?></td>
    <td bgcolor="#CCCCCC"><strong>Longitude</strong></td>
    <td align="center" bgcolor="#CCCCCC"><strong>:</strong></td>
    <td bgcolor="#EEEEEE"><?php echo $supp_long; ?></td>
  </tr>
  <tr>
    <td bgcolor="#CCCCCC"><strong>Propinsi</strong></td>
    <td align="center" bgcolor="#CCCCCC"><strong>:</strong></td>
    <td bgcolor="#FFFFFF"><?php echo $supp_prov; ?></td>
    <td bgcolor="#CCCCCC"><strong>PIC</strong></td>
    <td align="center" bgcolor="#CCCCCC"><strong>:</strong></td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#CCCCCC"><strong>Telepon</strong></td>
    <td align="center" bgcolor="#CCCCCC"><strong>:</strong></td>
    <td bgcolor="#EEEEEE"><?php echo $supp_phone; ?></td>
    <td bgcolor="#CCCCCC"><strong>Status</strong></td>
    <td align="center" bgcolor="#CCCCCC"><strong>:</strong></td>
    <td bgcolor="#EEEEEE">&nbsp;</td>
  </tr>
</table>
<br>
<font class="title">GET DIRECTIONS</font><br><br>
<div id="error"></div>
<!--<div id="tabs">
    <ul>
      <li><a href="#tabs-1">Detail Location</a></li>
       <li><a href="#tabs-2">Get Directions</a></li>
    </ul>
<div id="loading"></div>
 <div id="tabs-1">
  <div id="map_wrapper"/>
      <div id="map-canvas"/>
      </div>
 	</div>   
</div>
       <div id="tabs-2">
    </div>
      </div>-->
   <div id="side-container">
  <ul>
    <li class="dir-label">From:</li>
    <li><input id="from-input" type=text /><br><a id="from-link" href="#">Get my current position</a></li>
    <br clear="both"/>
    <li class="dir-label">To:</li>
    <li><input id="to-input" type=text value="<?php echo $this->uri->segment(5).",".$this->uri->segment(6); ?>"/></li>
  </ul>
  <div>
    <select onchange="Demo.getDirections();" id="travel-mode-input">
      <option value="driving" selected="selected">By car</option>
      <option value="bicycling">Bicycling</option>
      <option value="walking">Walking</option>
    </select>
    <select onchange="Demo.getDirections();" id="unit-input">
      <option value="imperial" selected="selected">Imperial</option>
      <option value="metric">Metric</option>
    </select>
    <input onclick="Demo.getDirections();" type=button value="Go!"/>
  </div>
  <div id="dir-container"></div>
</div>
<div id="map-container"></div> 
<script>
     
      $(document).ready(function() {
        // If the browser supports the Geolocation API
        if (typeof navigator.geolocation == "undefined") {
          $("#error").text("Your browser doesn't support the Geolocation API");
          return;
        }
 
        $("#from-link, #to-link").click(function(event) {
          event.preventDefault();
          var addressId = this.id.substring(0, this.id.indexOf("-"));
 
          navigator.geolocation.getCurrentPosition(function(position) {
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
              "location": new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
            },
            function(results, status) {
              if (status == google.maps.GeocoderStatus.OK)
                $("#from-input").val(results[0].formatted_address);
              else
                $("#error").append("Unable to retrieve your address<br />");
            });
          },
          function(positionError){
            $("#error").append("Error: " + positionError.message + "<br />");
          },
          {
            enableHighAccuracy: true,
            timeout: 10 * 1000 // 10 seconds
          });
        });
 
        $("#calculate-route").submit(function(event) {
          event.preventDefault();
          calculateRoute($("#from").val(), $("#to").val());
        });
      });
    </script>
<script type="text/javascript">

		
var Demo = {
	
	
  // HTML Nodes
  mapContainer: document.getElementById('map-container'),
  dirContainer: document.getElementById('dir-container'),
  fromInput: document.getElementById('from-input'),
  toInput: document.getElementById('to-input'),
  travelModeInput: document.getElementById('travel-mode-input'),
  unitInput: document.getElementById('unit-input'),

  // API Objects
  dirService: new google.maps.DirectionsService(),
  dirRenderer: new google.maps.DirectionsRenderer(),
  map: null,

  showDirections: function(dirResult, dirStatus) {
    if (dirStatus != google.maps.DirectionsStatus.OK) {
      alert('Directions failed: ' + dirStatus);
      return;
    }

    // Show directions
    Demo.dirRenderer.setMap(Demo.map);
    Demo.dirRenderer.setPanel(Demo.dirContainer);
    Demo.dirRenderer.setDirections(dirResult);
  },

  getSelectedTravelMode: function() {
    var value =
        Demo.travelModeInput.options[Demo.travelModeInput.selectedIndex].value;
    if (value == 'driving') {
      value = google.maps.DirectionsTravelMode.DRIVING;
    } else if (value == 'bicycling') {
      value = google.maps.DirectionsTravelMode.BICYCLING;
    } else if (value == 'walking') {
      value = google.maps.DirectionsTravelMode.WALKING;
    } else {
      alert('Unsupported travel mode.');
    }
    return value;
  },

  getSelectedUnitSystem: function() {
    return Demo.unitInput.options[Demo.unitInput.selectedIndex].value == 'metric' ?
        google.maps.DirectionsUnitSystem.METRIC :
        google.maps.DirectionsUnitSystem.IMPERIAL;
  },

  getDirections: function() {
    var fromStr = Demo.fromInput.value;
    var toStr = Demo.toInput.value;
    var dirRequest = {
      origin: fromStr,
      destination: toStr,
      travelMode: Demo.getSelectedTravelMode(),
      unitSystem: Demo.getSelectedUnitSystem(),
      provideRouteAlternatives: true
    };
    Demo.dirService.route(dirRequest, Demo.showDirections);
  },

  init: function() {
    var latLng = new google.maps.LatLng( -6.210997,106.845192);
    Demo.map = new google.maps.Map(Demo.mapContainer, {
      zoom: 10,
      center: latLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // Show directions onload
    Demo.getDirections();
  }
};

// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', Demo.init);
</script>

</body>