@extends('layouts/contentLayoutMaster')

@section('title', 'Edit Plant')

@section('content')
<!-- Basic multiple Column Form section start -->
<section id="multiple-column-form">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Edit Plant Record</h4>
        </div>
        <div class="card-body">
        @if ($errorMessage = Session::get('errorMessage'))
        <div class="demo-spacing-0 my-2">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <div class="alert-body">{{ $errorMessage }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
        @endif
          <form class="form" action="{{ route('plant.update',$plant->id) }}" method="POST">
            @csrf
            @method('PUT')
            <div class="row">
              <div class="col-md-6 col-12">
                <div class="mb-1">
                  <label class="form-label" for="plant-code-column">Plant Code *</label>
                  <input
                    type="text"
                    id="plant-code-column"
                    class="form-control"
                    placeholder="Plant Code"
                    name="code"
                    value="{{old('code',$plant->code)}}"
                    maxlength="7"
                    disabled
                  />
                    @error('code')
                        <span class="text-danger">{{$message}}</span>
                    @enderror
                </div>
              </div>
              <div class="col-md-6 col-12">
                <div class="mb-1">
                  <label class="form-label" for="name-column">Name *</label>
                  <input
                    type="text"
                    id="name-column"
                    class="form-control"
                    placeholder="Name"
                    name="name"
                    value="{{ $plant->name }}"
                  />
                  @error('name')
                        <span class="text-danger">{{$message}}</span>
                  @enderror
                </div>
              </div>

              <div class="col-md-6 col-12">
                <div class="mb-1">
                  <label class="form-label" for="plant-latitude">Latitude *</label>
                  <input
                    type="text"
                    id="latitude"
                    class="form-control"
                    name="latitude" readonly
                    placeholder="Latitude"
                    value="{{ old('latitude',$plant->latitude) }}"
                  />
                  @error('latitude')
                        <span class="text-danger">{{$message}}</span>
                  @enderror
                </div>
              </div>
              <div class="col-md-6 col-12">
                <div class="mb-1">
                  <label class="form-label" for="plant-longitude">Longitude *</label>
                  <input
                    type="text"
                    id="longitude"
                    class="form-control"
                    name="longitude"
                    placeholder="Longitude"  readonly
                    value="{{ old('longitude',$plant->longitude) }}"
                  />
                  @error('longitude')
                        <span class="text-danger">{{$message}}</span>
                  @enderror
                </div>
              </div>

                <div class="col-md-12">
                    <div class="mb-1">
                        <label class="form-label" for="plant-longitude">Location *</label>
                        <input id="address" name="address" class="form-control" type="text" value="{{old('address',$plant->address)}}" placeholder="Location">
                        <div class="invalid-feedback address"></div>
                        @error('address')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                </div>

                <div class="col-12">
                    <div id="map" class="home-map">
                        <div id="map-canvas" class="map-canvas-event" style="height: 260px; margin-bottom: 1%"></div>
                    </div>
                </div>
              @if ($showSubmit)
                <div class="col-12">
                  <button type="submit" class="btn btn-primary me-1">Submit</button>
                  <button type="reset" class="btn btn-outline-secondary me-1">Reset</button>
                  <a class="btn btn-outline-secondary cancel-btn" href="{{ route('plant.index') }}" >Cancel</a>
                </div>
              @endif
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAfh-Jh-Vn1Lf2TeP9g9cf5bzRbX1gnFZ4&libraries=places&callback=initAutocomplete&libraries=places" async defer></script>
<script>
    // initAutocomplete();
    function initAutocomplete() {
        let zoom = 10;
            var lat = parseFloat($("#latitude").val());
            var long = parseFloat($("#longitude").val());
        const map = new google.maps.Map(document.getElementById("map-canvas"), {
            center: { lat: lat, lng: long },
            zoom: zoom,
            mapTypeControl: false,
        });

        const input = document.getElementById("address");
        const options = {
            fields: ["formatted_address", "geometry", "name"],
            strictBounds: false,
            types: ["establishment"],
            componentRestrictions: { country: "pk" },
        };

        const autocomplete = new google.maps.places.Autocomplete(input, options);
        autocomplete.bindTo("bounds", map);
        const marker = new google.maps.Marker({
            position: { lat: lat, lng: long },
            map,
            draggable: true,
        });

        google.maps.event.addListener(marker, 'dragend', function (evt) {
            $("#latitude").val(evt.latLng.lat().toFixed(8));
            $("#longitude").val(evt.latLng.lng().toFixed(8));
        })

        autocomplete.addListener("place_changed", () => {
            marker.setVisible(false);
            const place = autocomplete.getPlace();
            if (!place.geometry || !place.geometry.location) {
                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) {
                $("#latitude").val(place.geometry.location.lat().toFixed(8));
                $("#longitude").val(place.geometry.location.lng().toFixed(8));
                // console.log(place.geometry.location.lng()+''+place.geometry.location.lat());
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17);
            }
            marker.setPosition(place.geometry.location);
            marker.setVisible(true);
            place.formatted_address;
        });
    }

</script>
@endsection