@extends('admin.account.show')
@section('content')
	<!--begin::Table-->
  <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_users">
    <!--begin::Table head-->
    <thead>
      <!--begin::Table row-->
      <tr class="text-start text-muted fw-bolder fs-7 text-uppercase gs-0">
        <th class="min-w-125px">First Name</th>
        <th class="min-w-125px">Last Name</th>
        <th class="min-w-125px">Email</th>
        <th class="min-w-125px">Phone Number</th>
        <th class="min-w-125px">UUID</th>
        <th class="min-w-125px">Relation</th>
        <th class="text-end min-w-100px">Actions</th>
      </tr>
      <!--end::Table row-->
    </thead>
    <!--end::Table head-->
    <!--begin::Table body-->
      <tbody class="text-gray-600 fw-bold">
        @if ($data['SharedLocationusers'] != null)
				@foreach ($data['SharedLocationusers'] as $key => $value)
          <!--begin::Table row-->
          <tr>
            <!--begin::User=-->
            <td class="d-flex align-items-center">
              <!--begin:: Avatar -->
              <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
                <span >
                  <div class="symbol-label">
                    <img src="{{$value['image'] ?? '/assets/media/svg/avatars/blank-dark.svg'}}" alt="" class="w-100">
                  </div>
                </span>
              </div>
              <!--end::Avatar-->
              <!--begin::User details-->
              <span  onclick="newMap({{$value['lat'] ?? ''}},{{$value['long'] ?? ''}})">{{$value['f_name'] ?? ''}}</span>
              </div>
              <!--begin::User details-->
            </td>
            <!--end::User=-->
            <!--begin::Role=-->
            <td>{{$value['l_name'] ?? ''}}</td>
            <!--end::Role=-->
            <!--begin::Last login=-->
            <td>
              {{$value['email'] ?? ''}}
            </td>
            <!--end::Last login=-->
            <!--begin::Two step=-->
            <td>{{$value['phone_number'] ?? ''}}</td>
            <!--end::Two step=-->
            <!--begin::Two step=-->
            <td>{{$value['uuid'] ?? ''}}</td>
            <!--end::Two step=-->
            <!--begin::Joined-->
            <td>{{$value['default']['friend'] ?? '--'}} </td>
              <!--begin::Joined-->
              	<!--begin::Action=-->
                <td class="text-end">
                  <a href="" class="btn btn-light btn-active-light-primary btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Actions
                  <!--begin::Svg Icon | path: icons/duotune/arrows/arr072.svg-->
                  <span class="svg-icon svg-icon-5 m-0">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z" fill="currentColor" />
                    </svg>
                  </span>
                  <!--end::Svg Icon--></a>

                  <!--begin::Menu-->
                  <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4" data-kt-menu="true">
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                          {{-- <a class="menu-link px-3 view_map"   onclick="newMap({{$value['lat'] ?? ''}},{{$value['long'] ?? ''}})" data-key="{{$key}}">View</a> --}}
                          <a class="menu-link px-3 view_map" data-key="{{$key}}" data-lat="{{$value['lat'] ?? ''}}" data-long="{{$value['long'] ?? ''}}">View</a>
                        </div>
                    <!--end::Menu item-->
                  </div>
                  <!--end::Menu-->
                </td>
                <!--end::Action=-->
            </tr>
          @endforeach
          @endif
      <!--end::Table row-->
    </tbody>
    <!--end::Table body-->
  </table>
  <!--end::Table-->

  {{-- <div id="map-canvas" style="height:400px;"></div> --}}


<!--begin::Modal - Adjust Balance-->
<!--end::Modal - New Card-->
	<!--begin::Modal - Add task-->
		<div class="modal fade" id="kt_modal_add_user" tabindex="-1" aria-hidden="true">
												<!--begin::Modal dialog-->
												<div class="modal-dialog modal-dialog-centered mw-650px">
													<!--begin::Modal content-->
													<div class="modal-content">
														<!--begin::Modal header-->
														<div class="modal-header" id="kt_modal_add_user_header">
															<!--begin::Modal title-->
															<h2 class="fw-bolder">Friend Location</h2>
															<!--end::Modal title-->
															<!--begin::Close-->
															<div class="btn btn-icon btn-sm btn-active-icon-primary"  data-bs-dismiss="modal">
																<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
																<span class="svg-icon svg-icon-1">
																	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
																		<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
																		<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
																	</svg>
																</span>
																<!--end::Svg Icon-->
															</div>
															<!--end::Close-->
														</div>
														<!--end::Modal header-->
														<!--begin::Modal body-->
														<div class="modal-body ">
                              <p class="user_key"></p>
                                <select class="dd_date mb-2 loc-cus-btn">
                                </select>
                              <div id="map" style="height:400px;"></div>
                              </div>
                             {{-- <div id="map-canvas" style="height:400px;"></div> --}}
														</div>
														<!--end::Modal body-->
													</div>
													<!--end::Modal content-->
												</div>
		<!--end::Modal dialog-->

    <script>
        //  function newMap(lat, lng) {
        //  if (!lat || !lng) {
        //         document.getElementById('map-canvas').innerHTML = '<h1>No Available Location</h1>';
        //         return;
        //       }
        //       var myLatLng = {lat: lat, lng: lng};
        //       var map = new google.maps.Map(document.getElementById('map-canvas'), {
        //         zoom: 8,
        //         center: myLatLng
        //       });
        //       var marker = new google.maps.Marker({
        //         position: myLatLng,
        //         map: map,
        //         title: 'My Location'
        //       });
        //     }
        //     newMap();
   </script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC_-hLFYGAJC_IBMnFBKZLq2IS1qr7tJgQ&callback=initMap&v=weekly"
defer>
</script>

<script type="text/javascript">

$( ".view_map" ).click(function() {

    $('#kt_modal_add_user').modal('show');
    $('.dd_date').empty();

    $('#map').css('display', 'none');
    $('.dd_date').css('display', 'none');
    // $('.user_key').text('No data available');

    var friend_key = $(this).data('key');
    localStorage.setItem("friend_key", $(this).data('key'));

    var date = null;
    var i = 0;

    var settings = {
      "url": "https://safe-word-new-default-rtdb.firebaseio.com/SharedLocationusers.json",
      "method": "GET",
      "timeout": 0,
    };

    $.ajax(settings).done(function (response) {

      var dynamicCoordinates = [];
      dynamicCoordinates.splice(0, dynamicCoordinates.length);
      var firstKey = Object.keys(response)[0];
      if (response[firstKey][friend_key] && response[firstKey][friend_key]['Probablyhistory']){
      // if (response[firstKey][friend_key]['Probablyhistory']) {
        $.each(response[firstKey][friend_key]['Probablyhistory'], function (index, value) {
          $(".dd_date").append(new Option(index, index));
          if(i == 0)
          {
            date = index;
            i++;
          }
        });

        if(i > 0)
        {
          $('#map').css('display', 'block');
          $('.dd_date').css('display', 'block');
          $('.user_key').text('');

          $.each(response[firstKey][friend_key]['Probablyhistory'][date]['onLocation'], function (index2, value2) {
          var locationData = response[firstKey][friend_key]['Probablyhistory'][date]['onLocation'][index2]['locationData'];
          var coordinates = locationData.split(',');
          var lat = parseFloat(coordinates[0]);
          var lng = parseFloat(coordinates[1]);

          dynamicCoordinates.push({
            lat: lat,
            lng: lng
          });

          });
          // console.log(dynamicCoordinates.length);
          if (dynamicCoordinates.length >= 2) {

            $('#map').css('display', 'block');
            $('.user_key').text('');
            var startPoint = dynamicCoordinates[0];
            var endPoint = dynamicCoordinates[dynamicCoordinates.length - 1];
            dynamicCoordinates.unshift(startPoint);
            dynamicCoordinates.push(endPoint);

            // Call the initMap function with the dynamic coordinates
            initMap(dynamicCoordinates);
          } else {
            // $('#map').css('display', 'none');
            // $('.user_key').text('No data available ');
            // console.error("Insufficient coordinates to create polyline.");
          }
        }
      }
      else
      {
        $('#map').css('display', 'block');
        // console.log('No data available ');
          var lat = $('.view_map').data("lat");
          var long = $('.view_map').data("long");

          if (lat != '' && long != '') {

            var myLatLng = {lat: lat, lng: long};
            var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 8,
              center: myLatLng
            });
            var marker = new google.maps.Marker({
              position: myLatLng,
              map: map,
              title: 'My Location'
            });

          }

      }

    });
  });


  $(".dd_date").on('change', function(){

    var date = $(this).val();
    var friend_key = localStorage.getItem("friend_key");

    var settings = {
      "url": "https://safe-word-new-default-rtdb.firebaseio.com/SharedLocationusers.json",
      "method": "GET",
      "timeout": 0,
    };

    $.ajax(settings).done(function (response) {
      var dynamicCoordinates = [];
      dynamicCoordinates.splice(0, dynamicCoordinates.length);

      var firstKey = Object.keys(response)[0];

      if (response[firstKey][friend_key]['Probablyhistory']) {
       if (response[firstKey][friend_key]['Probablyhistory'][date]['onLocation']) {
          $.each(response[firstKey][friend_key]['Probablyhistory'][date]['onLocation'], function (index2, value2) {

            var locationData = response[firstKey][friend_key]['Probablyhistory'][date]['onLocation'][index2]['locationData'];
            var coordinates = locationData.split(',');
            var lat = parseFloat(coordinates[0]);
            var lng = parseFloat(coordinates[1]);

            dynamicCoordinates.push({
              lat: lat,
              lng: lng
            });
          });

        }

        if (dynamicCoordinates.length >= 2) {
            $('#map').css('display', 'block');
            $('.user_key').text('');
            var startPoint = dynamicCoordinates[0];
            var endPoint = dynamicCoordinates[dynamicCoordinates.length - 1];
            dynamicCoordinates.unshift(startPoint);
            dynamicCoordinates.push(endPoint);

            // Call the initMap function with the dynamic coordinates
            initMap(dynamicCoordinates);
          } else {
            $('#map').css('display', 'none');
            $('.user_key').text('No data available');
            console.error("Insufficient coordinates to create polyline.");
          }


      }
      else
      {
        console.log('No data available');
      }

    });

  });

  function initMap(coordinates)
  {
    if (coordinates.length >= 2) {
      // Set the center of the map based on the first coordinate in the array
      var mapCenter = coordinates[0];

      const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 18,
        center: mapCenter,
        mapTypeId: "satellite",
      });

      // Create a marker for the starting point
      var startMarker = new google.maps.Marker({
        position: coordinates[0],
        map: map,
        icon: "https://maps.google.com/mapfiles/ms/icons/green-dot.png", // Set the icon image URL for the starting point
        title: "Start Point"
      });

      // Create a marker for the ending point
      var endMarker = new google.maps.Marker({
        position: coordinates[coordinates.length - 1],
        map: map,
        icon: "https://maps.google.com/mapfiles/ms/icons/red-dot.png", // Set the icon image URL for the ending point
        title: "End Point"
      });

      const flightPath = new google.maps.Polyline({
        path: coordinates,
        geodesic: true,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2,
      });

      flightPath.setMap(map);
    }
    else {
      console.error("Insufficient coordinates to create markers and polyline.");
    }
  }

  window.initMap = initMap;


  </script>

@endsection