<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" rel="stylesheet"></link>
<!---->
<script src="js/jquery.placepicker.js"></script>
<style>
.placepicker-map {width: 100%;height: 300px;}
.another-map-class {width: 100%;height: 300px;}
.pac-container {border-radius: 5px;}
</style>

<div class="page-content-wrapper">
                <div class="page-content">
                    <div class="page-bar">
                        <div class="page-title-breadcrumb">
                            <div class=" pull-left">
                                <div class="page-title">Edit Tech Leads</div>
                            </div>
                            <ol class="breadcrumb page-breadcrumb pull-right">
                                <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="index.php?page=home">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
                                </li>
                                <li><a class="parent-item" href="index.php?page=manage_technician">Technician</a><i class="fa fa-angle-right"></i>
								 </li>
								 <li><a class="parent-item" href="index.php?page=tech_leads">Leads</a><i class="fa fa-angle-right"></i>
								 </li>
								<li><a class="parent-item" href="index.php?page=tech_leads">Edit Tech Leads</a>
								 </li>
                            </ol>
                        </div>
                    </div>
<div class="row">
                        <div class="col-md-12 col-sm-12">
                            <div class="card card-box">
                                <div class="card-head">
                                    <header>Edit Tech Leads</header>                                    
                                </div>
                                <div class="card-body" id="bar-parent1">
                                	
                                	<?php if(isset($error) && $error!='') { ?> 
                                	<div class="alert alert-danger"><?php echo $error; ?></div>
                                	<?php } else if(isset($success) && $success!=''){ ?>                                		
                                		<div class="alert alert-success"><?php echo $success; ?></div>
                                	<?php } else if(isset($_REQUEST['success'])){ ?>                                		
                                		<div class="alert alert-success"><?php echo $_REQUEST['success']; ?></div>
                                	<?php } ?>
                                	                                	
                                    <form class="col-sm-12 pt-4 pb-4 " name="regForm" id="regForm" action="" method="post">		
				<div class="form-group row">
				  <label for="client_name" class="col-12 col-form-label">Client Name</label>
				  <div class="col-12">
				  	<input class="form-control" type="text" name="client_name" id="client_name" value="<?php if(isset($_POST['client_name']) && $_POST['client_name']!=''){ echo $_POST['client_name']; } else if(isset($leadRec['client_name']) && $leadRec['client_name']!=''){ echo $leadRec['client_name'];}?>" >
				  					    
				  </div>
				</div>
				<div class="form-group row">
				  <label for="phone" class="col-12 col-form-label">Client Phone</label>
				  <div class="col-12">
				  	<input class="form-control" type="text" name="phone" id="phone" value="<?php if(isset($_POST['phone']) && $_POST['phone']!=''){ echo $_POST['phone']; } else if(isset($leadRec['phone']) && $leadRec['phone']!=''){ echo $leadRec['phone'];}?>" >
				  </div>
				</div>	
				<div class="form-group row">
				  <label for="location" class="col-12 col-form-label">Client Location</label>
				  <div class="col-12">
				  	<input class="placepicker form-control" type="text" name="location" id="pac-input" value="<?php if(isset($_POST['location']) && $_POST['location']!=''){ echo $_POST['location']; } else if(isset($leadRec['location']) && $leadRec['location']!=''){ echo $leadRec['location'];}?>" placeholder="Client Location">
				  </div>
				</div>    
				<div class="form-group row">
				  <label for="details" class="col-12 col-form-label">Enter Details</label>
				  <div class="col-12">
				  	<textarea class="col-12" rows="10" name="details" id="details"><?php if(isset($_POST['details']) && $_POST['details']!=''){ echo $_POST['details']; } else if(isset($leadRec['details']) && $leadRec['details']!=''){ echo $leadRec['details'];}?></textarea>				    
				  </div>
				</div>
				
				<div class="form-group row">
			      <div class="col-sm-12 text-center">
			      	
			      		<button type="submit" name="update" class="btn btn-primary">Update</button>
			      
			      </div>
			    </div>
			</form>
                                </div>
                            </div>
                        </div>
                    </div>
	</div>
</div>
<div id="map" style="display: none;"></div>
<script>
      $(document).ready(function() {        
       // $(".placepicker").placepicker();        
      }); 
	
	 
   
      // This example adds a search box to a map, using the Google Place Autocomplete
      // feature. People can enter geographical searches. The search box will return a
      // pick list containing a mix of places and predicted search terms.

      // This example requires the Places library. Include the libraries=places
      // parameter when you first load the API. For example:
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

      function initAutocomplete() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -33.8688, lng: 151.2195},
          zoom: 13,
          mapTypeId: 'roadmap'
        });

        // Create the search box and link it to the UI element.
        var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        // Bias the SearchBox results towards current map's viewport.
        map.addListener('bounds_changed', function() {
          searchBox.setBounds(map.getBounds());
        });

        var markers = [];
        // Listen for the event fired when the user selects a prediction and retrieve
        // more details for that place.
        searchBox.addListener('places_changed', function() {
          var places = searchBox.getPlaces();

          if (places.length == 0) {
            return;
          }

          // Clear out the old markers.
          markers.forEach(function(marker) {
            marker.setMap(null);
          });
          markers = [];

          // For each place, get the icon, name and location.
          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }
            var icon = {
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(25, 25)
            };

            // Create a marker for each place.
            markers.push(new google.maps.Marker({
              map: map,
              icon: icon,
              title: place.name,
              position: place.geometry.location
            }));

            if (place.geometry.viewport) {
              // Only geocodes have viewport.
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);
        });
      }

    
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCDgFNMkZRmDv6tkxbKut5eIqaQbcM8zS8&libraries=places&callback=initAutocomplete"
         async defer></script>
