@extends('layouts.admin')

@section('styles')

@endsection

@section('content')

<!-- ============================================================== -->

<!-- Start right Content here -->

<!-- ============================================================== -->

<div class="content-page">

    <!-- Start content -->

    <div class="content">

        <div class="container-fluid">



            <div class="row">

                <div class="col-sm-12">

                    <div class="page-title-box">

                        <div class="row align-items-center">

                            <div class="col-md-8">

                                <h4 class="page-title mb-0">Welcome {{Auth::User()->name}}</h4>



                            </div>



                        </div>



                    </div>

                </div>

            </div>

            <!-- end row -->



            <div class="row">

                <div class="col-xl-12 col-md-12">




  <div class="card">
      <div class="card-header">Map

      </div>
      <div class="card-body">
        <h5 class="card-title">{{$post->title}}</h5>
        <div id="floating-panel">
             <input id="address1" type="textbox" value="Enter your location" />
             <input id="submitm" type="button" value="Geocode" onclick="myclick()" />
           </div>
         <div id="map2" style="height: 300px !important;"></div>
<ul><li>
<a href="https://maps.google.com/?api=1&query={{$post->lng}},{{$post->lat}}" target="_blank">Get Diretion using google map<a>
</li></ul>
        </div>
      </div>

                </div>


            </div>

            <!-- end row -->


<div class="row">
  <div class="col-md-12">
  </div>
</div>

        </div> <!-- container-fluid -->
    </div> <!-- content -->
    <footer class="footer">

        © 2020 - 2021

    </footer>

</div>


@endsection



@section('scripts')
<script
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBnGSnXwGnHzKDdfvR7ygbn6yIPUaT8Si4&callback=initMap2&libraries=&v=weekly"
     async
   ></script>


<script>

var mylat = {{$post->lat}};
var mylng = {{$post->lng}};
var mylat1 = -33.8688197;
var mylng1 = 151.2092955;
function initMap2() {

  var pointA = new google.maps.LatLng(mylat, mylng),
    pointB = new google.maps.LatLng(mylat1, mylng1),
    myOptions = {
      zoom: 7,
      center: pointA
    },
    map = new google.maps.Map(document.getElementById('map2'), myOptions),
    // Instantiate a directions service.
    directionsService = new google.maps.DirectionsService,
    directionsDisplay = new google.maps.DirectionsRenderer({
      map: map
    }),
    markerA = new google.maps.Marker({
      position: pointA,
      title: "point A",
      label: "A",
      map: map
    }),
    markerB = new google.maps.Marker({
      position: pointB,
      title: "point B",
      label: "B",
      map: map
    });


  // get route from A to B
  calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);

}
function myclick(){
const geocoder = new google.maps.Geocoder();
  geocodeAddress2(geocoder);
}

function geocodeAddress2(geocoder) {
  const address = document.getElementById("address1").value;
  geocoder.geocode({ address: address }, (results, status) => {
    if (status === "OK") {
      var latitude = results[0].geometry.location.lat();
     var longitude = results[0].geometry.location.lng();
     mylat1 = latitude;
     mylng1 = longitude;
     initMap2();
     // pointB = new google.maps.LatLng(latitude, longitude)
      // resultsMap.setCenter(results[0].geometry.location);
      // new google.maps.Marker({
      //   map: resultsMap,
      //   position: results[0].geometry.location,
      // });
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
  directionsService.route({
    origin: pointA,
    destination: pointB,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}


initMap2();
</script>
@endsection