@extends('layouts.app')
@extends('layouts.master')
@section('content')
      <style type="text/css">
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 450px;
      }

      /* Optional: Makes the sample page fill the window. */
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #description {
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
      }

      #infowindow-content .title {
        font-weight: bold;
      }

      #infowindow-content {
        display: none;
      }

      #map #infowindow-content {
        display: inline;
      }

      .pac-card {
        margin: 10px 10px 0 0;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        background-color: #fff;
        font-family: Roboto;
      }

      #pac-container {
        padding-bottom: 12px;
        margin-right: 12px;
      }

      .pac-controls {
        display: inline-block;
        padding: 5px 11px;
      }

      .pac-controls label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }

      #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 400px;
      }

      #pac-input:focus {
        border-color: #4d90fe;
      }

      #title {
        color: #fff;
        background-color: #4d90fe;
        font-size: 25px;
        font-weight: 500;
        padding: 6px 12px;
      }

      #target {
        width: 345px;
      }
    </style>
      <div class="main-panel dashboard">
        <div class="content-wrapper">
          <div class="row">
            <div class="col-lg-12 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <div class="row">
                  <div class="col-md-6">

                    <form method="POST" class="form-horizontal" action="{{url('/save_location')}}">
                      @csrf
                      <div class="form-group">
                        <label class="control-label col-md-6 label-bold" for="area">{{ trans('location.area') }}:</label>
                        <div class="col-md-12">
                        <select class="form-control area" name="area" id="area" required>
                        <option value="">{{ trans('location.select_area') }}</option>
                        @foreach($areas as $area)
                        <option value="{{$area->id}}">{{$area->area}}</option>
                        @endforeach
                        </select>
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="control-label col-md-6 label-bold" for="location">{{ trans('location.location') }}:</label>
                        <div class="col-md-12">
                          <input type="text" class="form-control" id="location" name="location"  value="" required="required">
                        </div>
                      </div>

                      <div class="form-group">
                        <label class="control-label col-md-6 label-bold" for="longitude">Search Pincode</label>
                        <div class="col-md-12">
                          <input type="text" class="form-control" onFocus="geolocate()" id="autocomplete" name="" >
                        </div>
                      </div>
                        <div class="form-group">
                        <label class="control-label col-md-6 label-bold" for="longitude">{{ trans('location.pincode') }}:</label>
                        <div class="col-md-12">
                          <input type="text" class="form-control"  id="postal_code" name="pincode" maxlength="8" value="" required="required">
                        </div>
                      </div>
                      
                      <div class="form-group">
                        <label class="control-label col-md-6 label-bold" for="address_1">{{ trans('location.address_1') }}:</label>
                        <div class="col-md-12">
                          <textarea class="form-control" id="route" name="address_1" rows="2"></textarea>
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="control-label col-md-6 label-bold" for="address_2">{{ trans('location.address_2') }}:</label>
                        <div class="col-md-12">
                          <textarea class="form-control" id="address_2" name="address_2" rows="2"></textarea>
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="control-label col-md-6 label-bold" for="latitude">{{ trans('location.latitude') }}:</label>
                        <div class="col-md-12">
                          <input type="text" class="form-control" id="latitude" name="latitude"  value="" >
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="control-label col-md-6 label-bold" for="longitude">{{ trans('location.longitude') }}:</label>
                        <div class="col-md-12">
                          <input type="text" class="form-control" id="longitude" name="longitude"  value="" >
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="control-label col-md-6 label-bold" for="area">{{ trans('device.maintenance_company') }}:</label>
                        <div class="col-md-12">
                        <select class="form-control maintenance_company" name="maintenance_company" id="maintenance_company">
                        <option value="">{{ trans('device.select_company') }}</option>
                        @foreach($maintenance_companies as $company)
                        <option value="{{$company->id}}">{{$company->company_name}} ({{$company->code}})</option>
                        @endforeach
                        </select>
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="control-label col-md-6 label-bold" for="area">{{ trans('device.maintenance_person') }}:</label>
                        <div class="col-md-12">
                        <select class="form-control maintenance_person" name="maintenance_person" id="maintenance_person">
                        <option value="">{{ trans('device.select_maintenance_person') }}</option>
                        @foreach($maintenance_persons as $person)
                        <option value="{{$person->user_id}}">{{$person->first_name}} ({{$person->code}})</option>
                        @endforeach
                        </select>
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="control-label col-md-6 label-bold" for="email">{{ trans('location.initial_hours') }}:</label>
                        <div class="col-md-12">
                          <input type="number" class="form-control" id="initial_hours" min="0" name="initial_hours" value="" required="required">
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="control-label col-md-6 label-bold" for="email">{{ trans('location.initial_charge') }}:</label>
                        <div class="col-md-12">
                          <input type="number" class="form-control" id="initial_charges" min="0" name="initial_charges" value="" required="required">
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="control-label col-md-6 label-bold" for="email">{{ trans('location.rate_per_hour') }}:</label>
                        <div class="col-md-12">
                          <input type="number" class="form-control" id="rate_per_hour" min="0" name="rate_per_hour" value="" required="required">
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="control-label col-md-6 label-bold" for="email">{{ trans('location.maximum_hours') }}:</label>
                        <div class="col-md-12">
                          <input type="number" class="form-control" id="max_time" name="max_time" value="" required="required">
                        </div>
                      </div>
                      <div class="col-md-12">
                      <div class="form-group" style="margin-bottom: 1rem;">
                        <label class="form-check-label">
                          <input type="hidden" value="0" name="works_24_hours">
                          <input type="checkbox" class="form-check-input" value="1" id="works_24_hours" name="works_24_hours" style="height:13px; margin-left: 102px;">{{ trans('device.works_24_hours') }}
                        </label>
                      </div>
                      </div>
                      <div class="form-group">
                        <label class="control-label col-md-6 label-bold" for="email">{{ trans('location.start_time') }}:</label>
                        <div class="col-md-12">
                          <input type="text" class="form-control time_element" id="start_time" name="start_time" value="" >
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="control-label col-md-6 label-bold" for="email">{{ trans('location.end_time') }}:</label>
                        <div class="col-md-12">
                          <input type="text" class="form-control time_element" id="end_time" name="end_time"  value="" >
                        </div>
                      </div>
                      <div class="form-group">        
                        <div class="col-sm-offset-2 col-sm-10">
                          <button type="submit" id="submit_form" class="btn btn-primary">{{ trans('location.save') }} </button>
                        </div>
                      </div>
                    </form>
                  </div>
                  <div class="col-md-6">
                    <label class="control-label col-md-6 label-bold" for="latitude">&nbsp;</label>
                    <input id="pac-input" class="controls" type="text" placeholder="{{ trans('location.search_location') }}"/>
                    <div id="map"></div>
                    <br>
                    <label class="control-label col-md-12 label-bold" for="notes">* {{ trans('location.click_map_to_get_lat_long') }}</label>
                    <label class="control-label col-md-12 label-bold" for="notes">* {{ trans('location.use_cntrl_scroll_to_zoom') }}</label>
                  </div>
                  </div>
            </div>
          </div>
        </div>
        <!-- content-wrapper ends -->
        <!-- partial:partials/_footer.html -->

        <!-- partial -->
      </div>
      <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
 
            $("#maintenance_company").change(function () {
              var maintenance_company = $(this).val();
              if(maintenance_company.length==0){
                maintenance_company = null;
              }
                $.ajax({
                  method: 'GET',
                  url:'{{url('/getMaintenancePersons')}}',
                  data:{maintenance_company : maintenance_company },
                  dataType: 'json',
                  success: function (responseData, textStatus, jqXHR) {
                    if (responseData.status == true) {
                      var htmlAppend = '<option value="">{{trans('device.select_maintenance_person')}}</option>';
                      $.each(responseData.maintenance_persons, function (index, value) {
                        htmlAppend += '<option value="' + value.user_id + '">' + value.first_name +' ('+ value.code + ')'+'</option>';
                      });
                      $("#maintenance_person").html(htmlAppend);
                    }
                  },
                  error: function (responseData, textStatus, errorThrown) {
                    console.log('Something went wrong');
                  },
                });
            });
  });
  </script>
    <script type="text/javascript">
      // 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">
let placeSearch;
let autocomplete;
const componentForm = {
  
  postal_code: "long_name",
  route: "long_name",
  
 
};
    function initAutocomplete() {
      var myLatlng = {
        lat: 35.6804, lng: 139.7690
        };
      const map = new google.maps.Map(document.getElementById("map"), {
        center: {lat: 35.6804, lng: 139.7690},
        zoom: 10,
        mapTypeId: "roadmap",
      });

      autocomplete = new google.maps.places.Autocomplete(
    document.getElementById("autocomplete"),
    { types: ["geocode"] }
  );

  autocomplete.setFields(["address_component"]);
  autocomplete.addListener("place_changed", fillInAddress);
      // Create the search box and link it to the UI element.
      const input = document.getElementById("pac-input");
      const 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", () => {
        searchBox.setBounds(map.getBounds());
      });
      let markers = [];
      // Listen for the event fired when the user selects a prediction and retrieve
      // more details for that place.
      searchBox.addListener("places_changed", () => {
        const places = searchBox.getPlaces();

        if (places.length == 0) {
          return;
        }
        // Clear out the old markers.
        markers.forEach((marker) => {
          marker.setMap(null);
        });
        markers = [];
        // For each place, get the icon, name and location.
        const bounds = new google.maps.LatLngBounds();
        places.forEach((place) => {
          if (!place.geometry) {
            console.log("Returned place contains no geometry");
            return;
          }
          const 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,
              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);
      });

      // Create the initial InfoWindow.
        var infoWindow = new google.maps.InfoWindow(
            {content: 'Click the map to get Lat/Lng!', position: myLatlng});
        infoWindow.open(map);

      map.addListener("click", (mapsMouseEvent) => {
        // Close the current InfoWindow.
        infoWindow.close();
        // Create a new InfoWindow.
          infoWindow = new google.maps.InfoWindow({position: mapsMouseEvent.latLng});
          infoWindow.setContent(mapsMouseEvent.latLng.toString());
          infoWindow.open(map);
          document.getElementById("latitude").value = mapsMouseEvent.latLng.lat();
          document.getElementById("longitude").value = mapsMouseEvent.latLng.lng();
      });

     

    }

    function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();

  for (const component in componentForm) {
    document.getElementById(component).value = "";
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  for (const component of place.address_components) {
    const addressType = component.types[0];

    if (componentForm[addressType]) {
      const val = component[componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

function geolocate() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition((position) => {
            const geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude,
            };
            const circle = new google.maps.Circle({
              center: geolocation,
              radius: position.coords.accuracy,
            });
            autocomplete.setBounds(circle.getBounds());
          });
        }
      }
    </script>
    <script src=""></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCU9LeMH_qMQd5d_amzpHeY62yNGqzlfr8&callback=initAutocomplete&libraries=places&v=weekly"
      defer
    ></script>
  <script type="text/javascript">    

    $('#works_24_hours').click(function() {
      if($("#works_24_hours").is(':checked'))
      {
          $("#start_time").prop('readonly', true);
          $("#end_time").prop('readonly', true);
      } else {
          $("#start_time").prop('readonly', false);
          $("#end_time").prop('readonly', false);
      }
    });

  </script>
  
@endsection