@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='';
  geocoder.geocode( { 'address': loggedUserlocation}, function(results, status) {
     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: 10,
      });
      }
  })
 
  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: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng() }   

        var title = ''; var label =''; var status = false; let latlngLoc = {};
        // getDistance(latlng,results[0].formatted_address,  function(distance) {
        //   distance_to = parseInt(distance.value);
        //     if(parseInt(distance.value) <= 100000){
        //       latlngLoc =  { lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng() };
        //         if(distance.value == 0) {
        //           title = '';
        //           label =  'Current Location';
        //         } else {
        //           label =  '';
        //           title = distance.text +' far away from'+ loggedUserlocation;
        //         } 
        //         const marker = new google.maps.Marker({
        //           position: latlngLoc,
        //           map: map,
        //           title: title,
        //           label: label
        //         });
        //     }
        // }); 
          
        var km = (haversine_distance(lat_user, lng_user, results[0].geometry.location.lat(), results[0].geometry.location.lng()));
        // latlngLoc = { lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng() };
        if(km < 300) {
          title = km +' km around from '+ loggedUserlocation;
          latlngLoc = { lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng() };
            if(km == 0 ) {
                title = loggedUserlocation;
                label =  'U';
              } else {
                label =  'L';
                title = km +' km around from '+ loggedUserlocation;
            }
        }
        // Create markers.
        const marker = new google.maps.Marker({
            position: latlngLoc,
            map: map,
            title: title,
            label: label
        });
      }
    });
  }

}
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;

$(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>
<script src="../public/assets/js/bootstrap.bundle.min.js"></script>
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
    <div id="map"></div>

    <div class="d-flex justify-content-center p-4">
        <a class="btn btn-primary px-5 m-3" type="" href="#" id="btn_location_confirmation" disabled="">Next  </a>    
        <a href="location" class="btn btn-secondary text-dark px-5 m-3" type="" disabled="">Back  </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>
    

@endsection