<style>
  .promtion-form-wrapper form {
    width: 500px;
  }

  .promtion-form-wrapper form .input-title {
    margin-bottom: 4px;
  }

  .promtion-form-wrapper .form-control {
    background-color: #F5F6F7;
    border: 2px solid #ccd0d5;
    font-size: 18px;
  }

  .promtion-form-wrapper .form-control:focus {
    border-color: #ccd0d5;
  }

  .promtion-form-wrapper form .form-btns .btn {
    background-color: #343a40;
    color: #c2c7d0;
    font-size: 18px;
    font-weight: 600;
  }
</style>
<div id="map" class="hidden"></div>
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">

      <div class="col-offset-2 col-8 promtion-form-wrapper">
        <form action="<?php echo base_url(); ?>trips/insertsystemtripdata/<?php echo $id ?>" id="" method="post">
          <div class="row">
            <div class="col-sm-6 col-md-6">
              <label class="form-label">Pickup Date<span class="form-required">*</span></label>
              <div class="form-group">
                <input type="datetime-local" class="form-control " name="pickupDate" class="form-control">
              </div>
            </div>
            <div class="col-sm-6 col-md-6">
              <label class="form-label">Customer Phone Number</label>
              <div class="form-group">
                <input class="form-control" type ="hidden" name="userId" value="JA0JzIVME0PhOe7RmmAoOXupj2u1">
                <input class="form-control" type ="text" name="phonnumber" required value="">
              
              </div>
            </div>
            <div class="col-sm-6 col-md-6">
              <label class="form-label">Car Type</label>
              <div class="form-group">
                <select class="form-control" required name="carType">
                  <option value="">Select</option>
                  <?php foreach ($rides as $id => $ride) {
                  ?>
                    <option value="<?= $id; ?>"><?= $ride['name'] ?></option>
                  <?php
                  } ?>
                </select>
              </div>
            </div>
            <script>
              // 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 initMap() {
                var map = new google.maps.Map(document.getElementById('map'), {
                  center: {
                    lat: 33.6824444,
                    lng: 72.99091609999999
                  },
                  zoom: 11
                });
                var card = document.getElementById('pac-card');
                var input1 = document.getElementById('pac-input-1');
                var input2 = document.getElementById('pac-input-2');
                var types = document.getElementById('type-selector');
                var strictBounds = document.getElementById('strict-bounds-selector');

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

                var autocomplete1 = new google.maps.places.Autocomplete(input1);

                autocomplete1.bindTo('bounds', map);

                autocomplete1.setFields(
                  ['address_components', 'geometry', 'icon', 'name']);

                var autocomplete2 = new google.maps.places.Autocomplete(input2);

                autocomplete2.bindTo('bounds', map);

                autocomplete2.setFields(
                  ['address_components', 'geometry', 'icon', 'name']);

                var infowindow = new google.maps.InfoWindow();
                var infowindowContent = document.getElementById('infowindow-content');
                infowindow.setContent(infowindowContent);
                var marker = new google.maps.Marker({
                  map: map,
                  anchorPoint: new google.maps.Point(0, -29)
                });

                autocomplete1.addListener('place_changed', function() {
                  infowindow.close();
                  marker.setVisible(false);
                  var place = autocomplete1.getPlace();


                  if (!place.geometry) {
                    // 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); // Why 17? Because it looks good.
                  }
                  marker.setPosition(place.geometry.location);
                  marker.setVisible(true);

                  var address = '';
                  console.log(place.address_components)
                  if (place.address_components) {
                    var latitude = place.geometry.location.lat();
                    var longitude = place.geometry.location.lng();
                    console.log("pickuplat:" + latitude);
                    console.log("pickuplng:" + longitude);
                    document.getElementById("pickuplat").value = latitude;
                    document.getElementById("pickuplng").value = longitude;

                    //infodetail
                    //    $("#lat").val(latitude);
                    //   $("#lng").val(longitude);


                    address = [
                      (place.address_components[0] && place.address_components[0].short_name || ''),
                      (place.address_components[1] && place.address_components[1].short_name || ''),
                      (place.address_components[2] && place.address_components[2].short_name || '')
                    ].join(' ');
                  }
                  // document.getElementById("infodetail").value = place.name;
                  infowindowContent.children['place-icon'].src = place.icon;
                  infowindowContent.children['place-name'].textContent = place.name;
                  infowindowContent.children['place-address'].textContent = address;
                  infowindow.open(map, marker);
                });

                autocomplete2.addListener('place_changed', function() {
                  infowindow.close();
                  marker.setVisible(false);
                  var place = autocomplete2.getPlace();


                  if (!place.geometry) {
                    // 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); // Why 17? Because it looks good.
                  }
                  marker.setPosition(place.geometry.location);
                  marker.setVisible(true);

                  var address = '';
                  console.log(place.address_components)
                  if (place.address_components) {
                    var latitude = place.geometry.location.lat();
                    var longitude = place.geometry.location.lng();
                    console.log("destinationlat:" + latitude);
                    console.log("destinationlng:" + longitude);
                    document.getElementById("destinationlat").value = latitude;
                    document.getElementById("destinationlng").value = longitude;

                    //infodetail
                    //    $("#lat").val(latitude);
                    //   $("#lng").val(longitude);


                    address = [
                      (place.address_components[0] && place.address_components[0].short_name || ''),
                      (place.address_components[1] && place.address_components[1].short_name || ''),
                      (place.address_components[2] && place.address_components[2].short_name || '')
                    ].join(' ');
                  }
                  // document.getElementById("infodetail").value = place.name;
                  infowindowContent.children['place-icon'].src = place.icon;
                  infowindowContent.children['place-name'].textContent = place.name;
                  infowindowContent.children['place-address'].textContent = address;
                  infowindow.open(map, marker);
                });

                // Sets a listener on a radio button to change the filter type on Places
                // Autocomplete2.
                function setupClickListener(id, types) {
                  var radioButton = document.getElementById(id);
                  radioButton.addEventListener('click', function() {
                    autocomplete1.setTypes(types);
                  });
                }

                setupClickListener('changetype-all', []);
                setupClickListener('changetype-address', ['address']);
                setupClickListener('changetype-establishment', ['establishment']);
                setupClickListener('changetype-geocode', ['geocode']);

                function setupClickListener2(id, types) {
                  var radioButton = document.getElementById(id);
                  radioButton.addEventListener('click', function() {
                    autocomplete2.setTypes(types);
                  });
                }

                setupClickListener2('changetype-all', []);
                setupClickListener2('changetype-address', ['address']);
                setupClickListener2('changetype-establishment', ['establishment']);
                setupClickListener2('changetype-geocode', ['geocode']);

                document.getElementById('use-strict-bounds')
                  .addEventListener('click', function() {
                    console.log('Checkbox clicked! New state=' + this.checked);
                    autocomplete2.setOptions({
                      strictBounds: this.checked
                    });
                  });
              }
            </script>
            <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC16Tbzkes6aBNrdQBsIACs-UwyHrG07k4&libraries=places&callback=initMap" async defer></script>
            <div class="col-sm-6 col-md-6">
              <label class="form-label">Pickup Location<span class="form-required">*</span></label>
              <div class="form-group">
                <input type="text" class="form-control pickupaddress" name="pickupaddress" value="<?php echo (isset($tripdetails)) ? $tripdetails['pickUp']['address'] : '' ?>" class="form-control" id="pac-input-1">
              </div>
            </div>
            <input type="hidden" name="pickuplat" id="pickuplat" value="<?= $tripdetails['pickUp']['lat'] ?>">
            <input type="hidden" name="pickuplng" id="pickuplng" value="<?= $tripdetails['pickUp']['lng'] ?>">
            <input type="hidden" name="destinationlat" id="destinationlat" value="<?= $tripdetails['destinations']['lat'] ?>">
            <input type="hidden" name="destinationlng" id="destinationlng" value="<?= $tripdetails['destinations']['lng'] ?>">
            <div class="col-sm-6 col-md-6">
              <label class="form-label">Destination Address<span class="form-required">*</span></label>
              <div class="form-group">
                <input type="text" class="form-control destination" name="destinationaddress" value="<?php echo (isset($tripdetails)) ? $tripdetails['destinations']['address'] : '' ?>" class="form-control" id="pac-input-2">
              </div>
            </div>

          </div>
          <button type="submit" class="btn btn-primary" value="submit">Update</button>
      </div><!-- /.promtion-form-wrapper -->
      </form>

    </div>


  </div>
</div>