@extends('layouts.app')

@section('content')

<style>
#focus-area .card-body{
    min-height: 100px;
}

</style>

<style type="text/css">
    
    /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
    #map {
      height: 650px;
    }

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

    #floating-panel {
      position: absolute;
      top: 10px;
      left: 25%;
      z-index: 5;
      background-color: #fff;
      padding: 5px;
      border: 1px solid #999;
      text-align: center;
      font-family: "Roboto", "sans-serif";
      line-height: 30px;
      padding-left: 10px;
    }
  </style>
  <script>

   
    // let map;
    // function initMap() {
    //     var geocoder =  new google.maps.Geocoder();
    //     var location = "{{Auth::user()->location}}";
    //     geocoder.geocode( { 'address': location}, function(results, status) {
    //       if (status == google.maps.GeocoderStatus.OK) {
    //         const myLatLng = { lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng() };
    //         const map = new google.maps.Map(document.getElementById("map"), {
    //         zoom: 15,
    //         center: myLatLng,
    //     });

    //     new google.maps.Marker({
    //         position: myLatLng,
    //         map,
    //         title: "Hello World!",
    //     });


    //       } else {
    //         alert("Something got wrong ");
    //       }
    //     });
    // }
    // window.initMap = initMap;    


let map;
var array_locations = 'null';
array_locations = JSON.parse(array_locations);


function getDistance(latlng, location_name, callback) {
    var geocoder =  new google.maps.Geocoder();
    var loggedUserlocation = "{{Auth::user()->location}}";
    let request = {};
    geocoder.geocode( { 'address': loggedUserlocation}, function(results1, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        const service = new google.maps.DistanceMatrixService();
        const originLatLong = { lat: results1[0].geometry.location.lat(), lng: results1[0].geometry.location.lng() }
        const origin =loggedUserlocation;
        const destination = location_name;
        const destinationLatLong = latlng;
        request = {
            origins: [originLatLong, origin],
            destinations: [destination, destinationLatLong],
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.METRIC,
            avoidHighways: false,
            avoidTolls: false,
        };
        console.log(service.getDistanceMatrix(request));
        service.getDistanceMatrix(request).then((response) => {
          callback(response.rows[0].elements[0].distance);
        });
      }
    });
}

function getLocations() {
  const locations = [];
  for (i = 0; i < array_locations.length; i++) {
    if(array_locations[i] !== null) {
      locations.push(array_locations[i]);
    }
  }
  return locations;
}


function initMap() {
  var loggedUserlocation = "{{Auth::user()->location}}";
  var geocoder =  new google.maps.Geocoder();
  var lat_user= ''; var lng_user='';
  var currWindow = false;
  geocoder.geocode( { 'address': loggedUserlocation}, function(results, status) {
    console.log(results);
     lat_user = results[0].geometry.location.lat();
     lng_user = results[0].geometry.location.lng();
      if (status == google.maps.GeocoderStatus.OK) {
        map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng() ),
        zoom: 9,
      });
      var latlngLoc = { lat: parseFloat(results[0].geometry.location.lat()), lng: parseFloat(results[0].geometry.location.lng()) };
       // Create markers.
        const marker = new google.maps.Marker({
            position: latlngLoc,
            map: map,
            title: results[0].formatted_address,
            // label: 'U'
        });
      }
  })
 
  const locations = getLocations();
  for (i = 0; i < locations.length; i++) {
    geocoder.geocode( { 'address': locations[i]}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var latlng =  { lat: parseFloat(results[0].geometry.location.lat()), lng: parseFloat(results[0].geometry.location.lng()) }   
        var title = ''; var label =''; var status = false; let latlngLoc = {};
        var km = (haversine_distance(lat_user, lng_user, results[0].geometry.location.lat(), results[0].geometry.location.lng()));
        if(km < 300) {
          title = km +' km around from '+ loggedUserlocation;
          latlngLoc = { lat: parseFloat(results[0].geometry.location.lat()), lng: parseFloat(results[0].geometry.location.lng()) };
            if(km != 0 ) {
              label =  'L';
              title = results[0].formatted_address +' ('+ km +') km around from '+ loggedUserlocation;
               // Create markers.
                const marker = new google.maps.Marker({
                    position: latlngLoc,
                    map: map,
                    // title: title,
                    // label: label,
                    icon:  "http://i.stack.imgur.com/su8w5.png",
                });
                var infoWindow = new google.maps.InfoWindow({
                                    maxWidth: 320
                                });
                var infocontent = "<div class='map-box-content'>" +
                    "<h6>Name</h6>" +
                    "<hr />" +
                    "<p>" + title + "</p>" +
                    "<hr />" +
                    "<a href='#' class='btn btn-primary btn-sm connect-chat'>Connect</a>" +
                    "</div>";
                google.maps.event.addListener(marker, 'click', function() {
                    if (currWindow) {
                        currWindow.close();
                    }

                    infoWindow.setContent(infocontent);
                    currWindow = infoWindow;
                    infoWindow.open(map, this);
                });
            }
        }
       
      }
    });
  }

}
function haversine_distance(lat1, lng1, lat2,lng2) {

function toRad(x) {
    return x * Math.PI / 180;
}

var dLat = toRad(lat1 - lat2);
var dLon = toRad(lng1 - lng2)

var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
     Math.cos(toRad(lat1)) * 
     Math.cos(toRad(lat2)) *
     Math.sin(dLon / 2) * Math.sin(dLon / 2);

    var km =12742 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    return km.toFixed();

}
window.initMap = initMap;
</script>
  
    <div id="map"></div>
    <div class="d-flex justify-content-center mb-5">
        <a href="location" class="btn btn-secondary text-dark btn-rounded  px-5 m-3" type="" disabled="">Back  </a>
        <a class="btn btn-primary px-5 m-3 btn-rounded" type="" href="#" id="btn_location_confirmation" disabled="">Next  </a>  
    </div>
    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDC-M1aaMpS2JHQGNq0Ap43hZ669ttcW8c&callback=initMap&libraries=&v=weekly"
      async
    ></script>


<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script>  
    $(document).ready(function(){
        $(document).on("click", "#btn_location_confirmation", function (e) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });   
            e.preventDefault();
            $.ajax({
                url: "update-location-status",
                type: "POST",
                dataType: 'json',
                beforeSend: function(){
                  $('#btn_location_confirmation').html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading..')
                },
                success: function(result) {
                    window.location.href = 'welcome';
                },
                error:function (response){},
                complete:function(data){
                   
                }
            });
        });
    })
</script>
@endsection

<style>
  #map{
    height: 540px !important;
    max-height: 90% !important;
  }
</style>