<!-- Content Header (Page header) -->
<section class="content-header">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i>Home</a></li>
        <li class="active"><a href="index.html">Dashboard</a></li>
        <li class="active">Fare Management</li>
    </ol>
</section>
<?php
$fareId = $this->fareId;
$bookingMode = $this->bookingMode;
$disableDiv = 'div-disabled';
    if($fareId!=''){
        $disableDiv='';
    }


$distance_div='hide';
$hour_div='hide';
$distance_hour_div='hide';
$distance_waiting_div='hide';
$activebasefare='';
if($bookingMode!='' && $bookingMode==1){
    $distance_div = 'active';
    $activebasefare = '';
}else if($bookingMode!='' && $bookingMode==2){
    $hour_div = 'active';
    $activebasefare = '';
}else if($bookingMode!='' && $bookingMode==3){
     $distance_hour_div = 'active';
     $activebasefare = '';
}else if($bookingMode!='' && $bookingMode==4){
    $distance_waiting_div = 'active';
    $activebasefare = '';
}else{
    $activebasefare = 'active';
}

?>

<!-- Main content -->
<section class="content">
    <div class="padding-bottom15 col-sm-12">
    <a href="<?php $actiontype='index'; if($usertype==4 ){ $actiontype='vendor-fare'; } echo $this->url('cabfare', array('action' => $actiontype)); ?>" id="system_restore" class="btn btn-danger pull-left margin-bot20px"><i class="fa fa-backward"></i><?php echo $this->translate('Back'); ?> </a></div>
    <div class="row">

        <div class="col-sm-12">
            <div class="tabbable">
                <div class="tab-content no-border padding-24">
                    <div class="tab-pane fade in active" id="faq-tab-1">
                        <div class="space-8"></div>
                        <div class="panel-group accordion-style1 accordion-style2" id="faq-list-1">

 <div id="displayMsg"></div>


                            <?php  echo $this->partial('add-fare-form.phtml'); ?>
<!--div-disabled-->
                            <div class="col-sm-12 panel panel-default margintop20 marginbottom20 <?php echo $disableDiv;?>" id="fare_form">

                                <!-- Modal content-->

                                <?php //echo $this->partial('add-price-common.phtml'); ?>

                                <div class="col-lg-12 no-padding">

                                    <?php echo $this->partial('cab-fare-sidebar.phtml'); ?>

                                    <div class="col-sm-10 no-padding">

                                        <div id="userTabContent" class="tab-content tab_editprofile1 min-hieght410px">
                                            <div id="displayTabMsg"></div>
                                            <!-- Tab for Distance Starts Here-->
                                            <div class="tab-pane fade  in <?php echo $distance_div; ?>" id="distanceVehicle">
                                                <?php echo $this->partial('add-price-distance.phtml'); ?>
                                            </div>

                                            <!-- Tab for Distance Ends Here-->

                                            <!-- Tab for Hour Starts Here-->

                                            <div class="tab-pane fade in <?php echo $hour_div; ?>" id="HourVehicle">
                                                <?php echo $this->partial('add-price-hour.phtml'); ?>
                                            </div>
                                            <!-- Tab for Hour Ends Here-->

                                            <!-- Tab for Distance+Hour Starts Here-->

                                            <div class="tab-pane fade  in <?php echo $distance_hour_div; ?>" id="Distance_Hour">
                                                <?php echo $this->partial('add-price-distance-hour.phtml'); ?>
                                            </div>

                                            <!-- Tab for Distance+Hour Ends Here-->


                                            <!-- Tab for Distance+Waiting Starts Here-->

                                            <div class="tab-pane fade  in <?php echo $distance_waiting_div; ?>" id="Distance_Waiting">
                                                <?php echo $this->partial('add-price-distance-waiting.phtml'); ?>
                                            </div>

                                            <!-- Tab for Distance+Waiting Ends Here-->

                                            <!-- Tab for Basic Starts Here-->

                                            <div class="tab-pane fade in <?php echo $activebasefare; ?>" id="basicVehicle">
                                               <?php echo $this->partial('add-price-basic-fare.phtml'); ?>
                                            </div>

                                            <!-- Tab for Basic Ends Here-->

                                            <!-- Tab for Basic Starts Here-->

                                            <div class="tab-pane fade" id="waitingVehicle">
                                              <?php echo $this->partial('add-fees-fare.phtml'); ?>
                                            </div>

                                            <!-- Tab for Basic Ends Here-->

                                            <!-- Tab for Premium Starts Here-->
                                            <div class="tab-pane fade in" id="PremiumVehicle">
                                                 <?php echo $this->partial('add-price-premium.phtml'); ?>
                                            </div>

                                            <!-- Tab for Premium Ends Here-->

                                            <!-- Tab for Fixed Routes Starts Here-->

                                            <div class="tab-pane fade in" id="Fixed_RoutesVehicle">
                                                <?php echo $this->partial('add-price-fixed-routes.phtml'); ?>
                                            </div>

                                            <!-- Tab for Fixed Routes Ends Here-->

                                            <!-- Tab for Share Starts Here-->

                                            <div class="tab-pane fade" id="Different_Shares">
                                                <?php echo $this->partial('add-price-share.phtml'); ?>
                                            </div>
                                            
                                        </div>

                                    </div>

                                </div>


                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <!-- /.widget-box -->
        </div>
        <!-- /.col -->
    </div>

    <!-- /.row -->
    <!-- Main row -->
</section>
<!-- /.content -->
<script src="<?php echo $google_map_url; ?>?key=<?php echo $google_map_key; ?>&callback=initMap&libraries=places&v=weekly" async defer></script>
    
    <script type="text/javascript">

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.749933, lng: -73.98633 },
    //center: { lat: latitude, lng: longitude },
    zoom: 13,
    mapTypeControl: false,
  });
  const card = document.getElementById("pac-card");
  const input = document.getElementById("pac-input");
  const biasInputElement = document.getElementById("use-location-bias");
  const strictBoundsInputElement = document.getElementById("use-strict-bounds");
  const options = {
    fields: ["formatted_address", "geometry", "name"],
    strictBounds: false,
    types: ["establishment"],
  };

  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

  const autocomplete = new google.maps.places.Autocomplete(input, options);

  // Bind the map's bounds (viewport) property to the autocomplete object,
  // so that the autocomplete requests use the current map bounds for the
  // bounds option in the request.
  autocomplete.bindTo("bounds", map);

  const infowindow = new google.maps.InfoWindow();
  const infowindowContent = document.getElementById("infowindow-content");

  infowindow.setContent(infowindowContent);

  const marker = new google.maps.Marker({
    map,
    anchorPoint: new google.maps.Point(0, -29),
  });

  autocomplete.addListener("place_changed", () => {
    infowindow.close();
    marker.setVisible(false);

    const place = autocomplete.getPlace();

    if (!place.geometry || !place.geometry.location) {
      // User entered the name of a Place that was not suggested and
      // pressed the Enter key, or the Place Details request failed.
      window.alert("No details available for input: '" + place.name + "'");
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);
    }

    marker.setPosition(place.geometry.location);
    marker.setVisible(true);
    infowindowContent.children["place-name"].textContent = place.name;
    infowindowContent.children["place-address"].textContent =
      place.formatted_address;
    infowindow.open(map, marker);
    
  });

  // Sets a listener on a radio button to change the filter type on Places
  // Autocomplete.
  function setupClickListener(id, types) {
    const radioButton = document.getElementById(id);

    radioButton.addEventListener("click", () => {
      autocomplete.setTypes(types);
      input.value = "";
    });
  }

  setupClickListener("changetype-all", []);
  setupClickListener("changetype-address", ["address"]);
  setupClickListener("changetype-establishment", ["establishment"]);
  setupClickListener("changetype-geocode", ["geocode"]);
  setupClickListener("changetype-cities", ["(cities)"]);
  setupClickListener("changetype-regions", ["(regions)"]);
  biasInputElement.addEventListener("change", () => {
    if (biasInputElement.checked) {
      autocomplete.bindTo("bounds", map);
    } else {
      // User wants to turn off location bias, so three things need to happen:
      // 1. Unbind from map
      // 2. Reset the bounds to whole world
      // 3. Uncheck the strict bounds checkbox UI (which also disables strict bounds)
      autocomplete.unbind("bounds");
      autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });
      strictBoundsInputElement.checked = biasInputElement.checked;
    }

    input.value = "";
  });
  strictBoundsInputElement.addEventListener("change", () => {
    autocomplete.setOptions({
      strictBounds: strictBoundsInputElement.checked,
    });
    if (strictBoundsInputElement.checked) {
      biasInputElement.checked = strictBoundsInputElement.checked;
      autocomplete.bindTo("bounds", map);
    }

    input.value = "";
    
  });
  
  google.maps.event.addListener(map, 'click', function(event) {
    document.getElementById('latitude').value = event.latLng.lat();
    document.getElementById('longitude').value =  event.latLng.lng();    
  });
}

window.initMap = initMap;
    
    </script>