<?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 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: 1024px;
    	   height: 760px;
}
</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">
 
/*---------------------------Submit Function----------------------------*/
$(document).on('click', '#button', function() {
//alert("test");
var idcab = $("#cb_idcab").val();
var txt_search = $("#txt_search").val();
$.ajax({url: "<?php echo $this->config->item('base_url').'/branch/map/fetch_supp_data';?>",
                    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: "idcab="+idcab+"&txt_search="+txt_search+"",
                    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!');     
                    }
                });   

	
     	
});
/*---------------------------Submit Function----------------------------*/

/*---------------------------Search Function----------------------------*/
/*$(document).ready(function(){	
$('#txt_search').keyup(function() {
//alert("test");
var idcab = $("#cb_idcab").val();
var txt_search = $("#txt_search").val();
$.ajax({url: "<?php //echo $this->config->item('base_url').'/branch/branch_supp_map/search_supp_data';?>",
                    data: {formData : $('#form1').serialize()}, // Convert a form to a JSON string representation
					dataType: "json",
                    type: 'post',                   
                    async: true,
                    beforeSend: function() {
					//Loading
                    },
					data: "idcab="+idcab+"txt_search="+txt_search+"",
                    complete: function() {
                    //Hide Loading
                    },
                    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!');     
                    }
                });   

	
 });    	
});*/
/*---------------------------Search Function----------------------------*/

/*------------------------------------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: 5,
						  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']
						 
						 //console.log(locations[i]['lat']);
						 
						 latlngset = new google.maps.LatLng(lat,long);
						
						  var marker = new google.maps.Marker({  
								  map: map, title: cust , position: latlngset  
								});
								map.setCenter(marker.getPosition())
						
						var content = '<h3>' + cust +  '</h3>' + addr     
						
						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);
							}
					  }
					   
					/*------------------------------------Google Maps Code-------------------------------------*/  
</script>


<form name="form1" id="form1" method="post" action="<?php echo $form_action ?>">
  <table width="949" border="0">
    <tr>
      <td width="112">Branch</td>
      <td width="10" align="center">:</td>
      <td width="371" colspan="4"><select name="cb_idcab" id="cb_idcab">
        <?php 

foreach ($cab as $cabs)
{ 
?>
<option value="<?php echo $cabs->idcab; ?>" ><?php echo $cabs->cabname; ?></option>
<?php
}
?>  
      </select></td>
    </tr>
    <tr>
      <td>Search</td>
      <td align="center">:</td>
      <td colspan="4"><label for="txt_search"></label>
      <input name="txt_search" type="text" id="txt_search" size="50"/>
      <input type="button" name="button" id="button" value="Submit" class="button" /></td>
    </tr>
  </table>
<div id="loading"></div>
  <div id="map_wrapper"/>
      <div id="map-canvas"/>
      </div>
  
</form>
