FloatBackOfffice/application/views/geofence_area/price-comparison.php

<!-- Start Content-->
<div class="container-fluid">

  <!-- start page title -->
  <div class="row align-items-center">
    <div class="col-12">
      <div class="page-title-box">
        <h4 class="page-title">Price comparison</h4>
      </div>
    </div>
  </div>
  <!-- end page title -->

  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-body">
          <div class="table-responsive-sm">
            <form class="search-block" action="/geofence_area/comparePriceBetweenAreas" method="get">
              <div class="row">
                <div class="col-md-3 col-sm-6">
                  <div class="form-group">
                    <label for="city_id">City</label>
                    <select name="city_id"
                      class="form-control"
                      id="city-id"
                      data-toggle="select2">
                        <option value="">Select</option>
                        <?php
                            foreach($cityList as $city) {
                                $selected = set_value('city_id', $filterData['city_id']) == $city->id ? 'selected' : '';
                                echo '<option value="' . $city->id . '"' . $selected . '>' . $city->city . '</option>';
                            }
                        ?>
                    </select>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-3 col-sm-6">
                  <div class="form-group">
                    <label for="">From area</label>
                    <select name="from_area_id"
                      class="area-selection form-control"
                      data-toggle="select2">
                        <option value="">Select</option>
                        <?php
                            foreach($areaList as $area) {
                                $selected = set_value('from_area_id', $filterData['from_area_id']) == $area->id ? 'selected' : '';
                                echo '<option value="' . $area->id . '"' . $selected . '>' . $area->name . '</option>';
                            }
                        ?>
                    </select>
                  </div>
                </div>

                <div class="col-md-3 col-sm-6">
                  <div class="form-group">
                    <label for="">To area</label>
                    <select name="to_area_id"
                      class="area-selection form-control"
                      data-toggle="select2">
                        <option value="">Select</option>
                        <?php
                            foreach($areaList as $area) {
                                $selected = set_value('to_area_id', $filterData['to_area_id']) == $area->id ? 'selected' : '';
                                echo '<option value="' . $area->id . '"' . $selected . '>' . $area->name . '</option>';
                            }
                        ?>
                    </select>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <button class="btn btn-primary btn-search" type="submit">Search</button>
                </div>
              </div>
            </form>

            <table id="trips-datatable" class="table table-sm table-centered mb-0" width="100%">
              <thead>
                <tr>
                  <th>From area</th>
                  <th>To area</th>
                  <th>Price comparison</th>
                </tr>
              </thead>

              <tbody class="table-striped">
                <tr>
                  <td><?php echo $priceComparison['from_area']['name'] ?? '' ?></td>
                  <td><?php echo $priceComparison['to_area']['name'] ?? '' ?></td>
                  <td>
                      <?php
                          if (!empty($priceComparison['price_comparison'])) {
                              foreach ($priceComparison['price_comparison'] as $item) {
                                  echo '<strong>Transport provider:</strong> ' . $item['transport_provider_name'] . '<br/>';
                                  echo '<strong>avg:</strong> ' . $item['avg_price'] . '<br/><br/>';
                              }
                          } else {
                            echo '<strong class="text-danger">No Trip to compare.</strong>';
                          }
                      ?>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

        </div> <!-- end card body-->
      </div> <!-- end card -->

      <div class="google-map">
        <!--The div element for the map -->
        <div id="map"></div>
      </div>

    </div><!-- end col-->
  </div>
  <!-- end row-->
</div> <!-- container -->

<script>
    window.addEventListener('DOMContentLoaded', function() {
        var colors = ['red', 'green'];

        // Utility function to make a polygon with some standard properties set
        function makePolygon (paths, color) {
            return (new google.maps.Polygon({
                geodesic: true,
                paths: paths,
                strokeColor: color,
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: color,
                fillOpacity: 0.35
            }));
        };

        // Run on page load
        const initializeMap = function () {
            // Set up map
            let map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 1.3014223, lng: 103.8575394 },
                zoom: 12,
                disableDefaultUI: true,
            });

            const polygons = window.__global__.regions.map((region, index) => {
                const color = colors[index % 5];
                return makePolygon(region.polygons, color || colors[0]);
            });

            // Put sample polygons on the map with marker at approximated center
            polygons.forEach(function (poly) {
                poly.setMap(map);
            });
        }

        window.__global__ = { ...(window.__global__ || {}), regions: [] };
        const getRegionPolygon = function(polygon) {
            return polygon.map(item => ({lat: item[1], lng: item[0]}))
        }

        const parseRegions = function(res) {
            const startPolygon = getRegionPolygon(res.startPolygon);
            const endPolygon = getRegionPolygon(res.endPolygon)

            const regions = [
              {
                polygons : startPolygon
              },
              {
                polygons : endPolygon
              }
            ];

            return regions;
        }

        const getRegions = function() {
            const polygons = '<?php echo !empty($polygons) ? $polygons : '' ?>';

            if (polygons) {
                const parsedRegions = parseRegions(JSON.parse(polygons));

                window.__global__.regions = parsedRegions;
                initializeMap();
            }
        }

        getRegions();


        let cityEl = $('#city-id');
        let areaEl = $('.area-selection');
        var cityVal = cityEl.val();

        getareaFromCityIdAjax(cityVal, areaEl);
        cityEl.on('change', function() {
            var cityId = $(this).val();

            getareaFromCityIdAjax(cityId, areaEl);
        })

        ///////// FUNCTION //////////////////
        function getareaFromCityIdAjax(cityId, areaEl) {
            $.ajax({
                type: "GET",
                url: "/geofence_area/getAreaListDependOnCityIdAjax",
                data: {
                    'city_id' : cityId
                },
                cache: false,
                success: function(res) {
                    res = JSON.parse(res);
                    if (res.success) {
                        var options = '<option value="">Select</option>';
                        var areaOldVal = areaEl.val();
                        var selected = '';

                        res.data.forEach(function(item, index) {
                            if (areaOldVal == item.id) {
                                selected = 'selected';
                            } else {
                                selected = '';
                            }
                            options += '<option ' + selected + ' value="' + item.id + '"' + '' + '>' + item.name + '</option>'
                        });

                        areaEl.html(options);
                    }
                }
            });
        }
    });
</script>