@extends('layouts.map')

@section('content')
<link rel="stylesheet" href="{{ asset('css/jquery-ui.css') }}">
<div class="row">
  <div class="col-12" id="master-container">

  </div>
</div>
<div id="map-loader"></div>
<img src="{{asset('assets/images/map-loader.gif')}}" alt="Loading.. please wait" width="50" class="map-loader-img" />
<!-- The Modal -->
<div class="modal fade" id="sequence_model_popup">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Move To Sequence No.</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
          <div class="row">
            <div class="col-12">
              <h6>Choose Sequence No.:</h6>
            </div>  
            <div class="col-12">
              <select class="form-select" id="seq_selection">
                <option value="">Select</option>
              </select>
            </div>  
          </div>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="move_sequence">Move</button>
      </div>

    </div>
  </div>
</div>
@endsection
@push('scripts')
 <script src="{{ asset('js/jquery-ui.js') }}"></script> 
<script type="text/javascript">
  var leftPanelRouteAddressWidth;
  var leftPanelRouteAddressDetailWidth;
  var mapDivider1;
  var mapDivider2;
  var outerMargin;
  var mapWidth;
  var homeMarker = "{{asset('assets/images/home.png')}}";
  var orangeMarker = "{{asset('assets/images/o-marker.png')}}";
  var blueMarker = "{{asset('assets/images/b-marker.png')}}";
  var blue2Marker = "{{asset('assets/images/b2-marker.png')}}";
  var mapData = [];
  var markers = [];
  var routeId = 0;
  var infoWindowList = [];
  var map;
  var selectedSeqNo;
  function toggleNav() {
        
        if($('.left-fixed').hasClass('view')){
            $('.rightside-main').css({ left:"270px",width:"100%",width:"-=270px" });   
            $('.left-fixed').removeClass('view');
            $(".left-fixed").animate({ left: "0px" }, 100);   
            calculateMapWidth(mapWidth);  
        }else{
            $('.rightside-main').css({ 'width':"100%", 'left': "0px" });   
            $('.left-fixed').addClass('view');
            $(".left-fixed").animate({ left: "-270px" }, 100);   
            calculateMapWidth(mapWidth,true);  
        }
    }
    
  
  function loadMap() {
    var mapMarkerIcon = {
      url: orangeMarker, // URL of the image
      scaledSize: new google.maps.Size(30, 30), // Resizes the marker
    };
    
    var mapProp= {
      center: {lat: parseFloat(mapData[0].lat), lng: parseFloat(mapData[0].lng)},
      zoom:5,
    };
    var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
    
    // Create a LatLngBounds object
    var bounds = new google.maps.LatLngBounds();
    // Loop through waypoints and place markers
    
    var pathCoordinates = [];
    var samePoints = [];
    mapData.forEach((item) => {
  
      mapMarkerIcon = {
        url: item.rank == 0 ? homeMarker : orangeMarker, // URL of the image
        scaledSize: new google.maps.Size(30, 30), // Resizes the marker
      };
      var marker = new google.maps.Marker({
              position: {lat: parseFloat(item.lat), lng: parseFloat(item.lng)},
              map: map,
              animation: google.maps.Animation.DROP,
              icon: mapMarkerIcon,
              zIndex: samePoints.includes(item.lat+"-"+item.lng) ? 1 : 11,
              label: item.rank == 0 ? {} : {
                  text: item.rank.toString(),
                  fontWeight: "medium",
                  fontSize: "11px",
                  color:"white",
                  className: 'marker-label',
              },
          });
          
          samePoints.push(item.lat+"-"+item.lng);
          // Define the HTML content for the info window
          const infoWindowContent = `
              <div class="marker-info-content">
                <div class="info-block">
                  <label class="info-heading">Route</label>
                  <div class="info-value">`+item.routeName+`</div>
                </div>
                <div class="info-block">
                  <label class="info-heading">Scheduled for</label>
                  <div class="info-value">`+item.routeDate+`</div>
                </div>
                <div class="info-block">
                  <label class="info-heading">Name</label>
                  <div class="info-value">`+item.name+`</div>
                </div>
                <div class="info-block">
                  <label class="info-heading">Address</label>
                  <div class="info-value">`+item.address+`</div>
                </div>
                <div class="info-block">
                  <label class="info-heading">Order no</label>
                  <div class="info-value">`+item.orderNos+`</div>
                </div>
                <div class="info-block">
                  <label class="info-heading">Destination type</label>
                  <div class="info-value">Delivery</div>
                </div>
              </div>`;

          // Create an info window
          var infoWindow = new google.maps.InfoWindow({
            content: infoWindowContent,
            pixelOffset: new google.maps.Size(0, 0),
            disableAutoPan: false
          });
          infoWindowList.push(infoWindow);

          marker.addListener("mouseover", () => {
            
            infoWindowList.forEach((item) => {
              item.close();
            });

            $(".list-group-item").each(function() {
              $(this).removeClass("hover_addresses_list");
            })
            if(item.rank > 0) {
              infoWindow.open(map, marker);
              
              if(!$("#list-group-item-"+item.id).hasClass("active_addresses_list")) {
                marker.setIcon({
                  url: blueMarker, // URL of the image
                  scaledSize: new google.maps.Size(30, 30), // Resizes the marker
                }); 
              }
            }
            $("#list-group-item-"+item.id).addClass("hover_addresses_list");   
            scrollToItem(item.id);
          });
          marker.addListener("mouseout", (event) => {            
            if(item.rank > 0) {
              $("#list-group-item-"+item.id).removeClass("hover_addresses_list");  
              if(!$("#list-group-item-"+item.id).hasClass("active_addresses_list")) {
                marker.setIcon({
                  url: orangeMarker, // URL of the image
                  scaledSize: new google.maps.Size(30, 30), // Resizes the marker
                }); 
              }
            }                           
          });
          markers.push({id : item.id, marker : marker, lat : item.lat, lng : item.lng, infoWindow : infoWindow});
        // Extend bounds to include this waypoint's position
        bounds.extend({lat: parseFloat(item.lat), lng: parseFloat(item.lng)});
        pathCoordinates.push({lat: parseFloat(item.lat), lng: parseFloat(item.lng), name: item.name});
    });

    // Create the polyline (path)
    const pathPolyline = new google.maps.Polyline({
          path: pathCoordinates, // Path coordinates
          geodesic: true, // True makes the path "curved" based on Earth's curvature
          strokeColor: "#A5D14B", // Path color
          strokeOpacity: 1.0, // Opacity of the path
          strokeWeight: 8, // Width of the path in pixels
        });

     // Set the polyline on the map
     pathPolyline.setMap(map); 
        // Set the polyline on the
    // Adjust the map's bounds to fit all markers
    map.fitBounds(bounds);
    map = map;
  }

  function scrollToItem(id) {
    let target = $("#list-group-item-"+id);
    $('.left-panel-route-address').animate({
        scrollTop: target.offset().top - $('.left-panel-route-address').offset().top + $('.left-panel-route-address').scrollTop()
    }, 300);
  }

  function calculateMapWidth(w,isAnimate=false) {
    var width = $(".master-container").width() - w;
    if(isAnimate) {
      $(".right-panel-routes-map").animate({ width: width+"px" }, 300);
    } else {
      $(".right-panel-routes-map").css({ 'width': width+"px" });
    }
  }

  $(window).resize(function(){
    console.log(mapWidth);
    calculateMapWidth(mapWidth);
  });

  function loadMapWithData() {
    $.ajax({
        url: "{{route('routes.master_detail',$id)}}",
        type: 'GET',
        success: function(res) {
            routeId = parseInt(res.route_id);
            $("#master-container").html(res.html);
            mapData = JSON.parse(res.map_data);
            loadVariables();
            calculateMapWidth(mapWidth);
            loadMap();
            $("#map-loader, .map-loader-img").hide();
            $("#sortable-addresses-list").sortable(
              {
                stop: function( event, ui ) {
                  routeAddressesSorting();
                 }
              }
            );
        }
    });
  }

  function routeAddressesSorting() {
    userIds = [];
    routeAddressIds = [];
    $( ".addresses-list .list-group-item" ).each(function( index ) {
        var userId = $(this).attr("user_id");
        var routeAddressId = $(this).attr("route_address_id");
        if (typeof userId !== 'undefined' && userId !== false) {
          userIds.push(userId);
          routeAddressIds.push(routeAddressId);
        }
        $(this).find(".num-label").text(index);
    });
    setAddressesPositionOnServer(userIds,routeId,routeAddressIds);
  }

  function loadVariables() {
    leftPanelRouteAddressWidth = $(".left-panel-route-address").width();
    leftPanelRouteAddressDetailWidth = $(".left-panel-route-address-detail").width();
    mapDivider1 = $(".map-divider1").width();
    mapDivider2 = $(".map-divider2").outerWidth();
    outerMargin = 0.5;
    mapWidth = leftPanelRouteAddressWidth + leftPanelRouteAddressDetailWidth + mapDivider1 + mapDivider2 + outerMargin;
    console.log(leftPanelRouteAddressWidth+" -- "+leftPanelRouteAddressDetailWidth);
  }

  $(function() {
    toggleNav();
    loadMapWithData();
    $(document).on("click",".map-divider2", function() {
      if($(".left-panel-route-address-detail").width() == 0) {
        leftPanelRouteAddressDetailWidth = 300;
        mapWidth = leftPanelRouteAddressWidth + leftPanelRouteAddressDetailWidth + mapDivider1 + mapDivider2 + outerMargin;
        calculateMapWidth((leftPanelRouteAddressWidth + leftPanelRouteAddressDetailWidth + mapDivider1 + mapDivider2 + outerMargin),true);
        $(".left-panel-route-address-detail").animate({ width: leftPanelRouteAddressWidth+"px" }, 300); 
        $(".open-address-detail .arrow").attr("class","fa fa-angle-double-left arrow");
        $(".open-address-detail").css({ 'border-radius': "10px 0 0 10px",'margin-left': '-15px' });
      } else {
        leftPanelRouteAddressDetailWidth = 0;
        mapWidth = leftPanelRouteAddressWidth + leftPanelRouteAddressDetailWidth + mapDivider1 + mapDivider2 + outerMargin;
        $(".left-panel-route-address-detail").animate({ width: 0 }, 300); 
        calculateMapWidth(mapWidth,true);
        $(".open-address-detail .arrow").attr("class","fa fa-angle-double-right arrow");
        $(".open-address-detail").css({ 'border-radius': "0 10px 10px 0",'margin-left': '0' });
      }
    });

    $(document).on("mouseover",".list-group-item", function() {
      $(".list-group-item").each(function() {
        $(this).removeClass("hover_addresses_list");
      });
      $(this).addClass("hover_addresses_list");
      var userId = parseInt($(this).attr("user_id"));
      var samePoints = [];
      markers.forEach((item) => {
        if(item.id == userId) {
          if(!$("#list-group-item-"+userId).hasClass("active_addresses_list")) {
            item.marker.setIcon({
              url: blueMarker, // URL of the image
              scaledSize: new google.maps.Size(30, 30), // Resizes the marker
            });  
          } else {
            item.marker.setIcon({
              url: blue2Marker, // URL of the image
              scaledSize: new google.maps.Size(30, 30), // Resizes the marker
            });  
          }
          
          item.marker.setZIndex(999);
        } else {
          if(item.id > 0) {
            //   if(!$("#list-group-item-"+userId).hasClass("active_addresses_list")) {
            //     item.marker.setIcon({
            //       url: orangeMarker, // URL of the image
            //       scaledSize: new google.maps.Size(33, 33), // Resizes the marker
            //     }); 
            // }
            item.marker.setZIndex(samePoints.includes(item.lat+"-"+item.lng) ? 1 : 11);
          }
        }
        samePoints.push(item.lat+"-"+item.lng);
      });
    });

    $(document).on("mouseout",".list-group-item", function() {
      $(".list-group-item").each(function() {
        $(this).removeClass("hover_addresses_list");
      })
      var userId = parseInt($(this).attr("user_id"));
      markers.forEach((item) => {
        if(item.id == userId) {
          if(!$("#list-group-item-"+userId).hasClass("active_addresses_list")) {
            item.marker.setIcon({
              url: orangeMarker, // URL of the image
              scaledSize: new google.maps.Size(30, 30), // Resizes the marker
            }); 
          } else {
            item.marker.setIcon({
              url: blue2Marker, // URL of the image
              scaledSize: new google.maps.Size(30, 30), // Resizes the marker
            }); 
          }
        }
      });
    });

    $(document).on("click",".list-group-item", function() {
      $(".list-group-item").each(function() {
        $(this).removeClass("active_addresses_list");
      })
      $(this).addClass("active_addresses_list");
      if($(".left-panel-route-address-detail").width() == 0) {
        $(".map-divider2").trigger("click");
      }
      $(".left-panel-route-address-detail").html($(this).find(".address-detail").html());
      var userId = parseInt($(this).attr("user_id"));
      var samePoints = [];
      markers.forEach((item) => {
        if(item.id == userId) {
          item.marker.setIcon({
            url: blue2Marker, // URL of the image
            scaledSize: new google.maps.Size(30, 30), // Resizes the marker
          });  
          item.marker.setZIndex(999);
        } else {
          if(item.id > 0) {
            item.marker.setIcon({
              url: orangeMarker, // URL of the image
              scaledSize: new google.maps.Size(30, 30), // Resizes the marker
            }); 
          }
          
          item.marker.setZIndex(samePoints.includes(item.lat+"-"+item.lng) ? 1 : 11);
        }
        samePoints.push(item.lat+"-"+item.lng);
      });
    });

    $(document).on("mouseleave",".gm-style-iw-t", function() {
      $(".gm-style-iw-t").hide();
    });
    
    $(document).on('contextmenu','.list-group-item', function(e) {
        // Prevent the default context menu from appearing
        $('.right_click_popup').hide();
        e.preventDefault();
        // Get the mouse position and display the popup at that location
        $(this).find('.right_click_popup').show();
    });
    
    $(document).on('click', function() {
        $('.right_click_popup').hide();
        $(".gm-style-iw-t").hide();
    });

    $(document).on('change','#seq_selection', function() {
      if($(this).val() == "") {
        $('#move_sequence').addClass('seqMoveButtonDisabled');
      } else {
        $('#move_sequence').removeClass('seqMoveButtonDisabled');
      }
    });

    $(document).on('click','.right_click_popup ul li', function() {
        var cur = $(this);
        var type = cur.attr("type");
        
        switch (type) {
          case 'MF':
          case 'ML':
            moveAddressesPosition(cur,type)
            break;
          case 'CDTC':
            copyCode(cur.parents(".right_click_popup").next(".copy_content").text().trim());
            break;
          case 'MTSN':
            selectedSeqNo = cur.parents(".right_click_popup").prevAll(".gutter").find(".num-label").text();
            var totalSequences = $( ".addresses-list .list-group-item" ).length - 1;
            var optionsHtml = "<option value=''>Select</option>";
            
            for(var i=1; i<=totalSequences;i++) {
              optionsHtml += "<option value='"+i+"'>"+i+"</option>";
            }
            $("#seq_selection").html(optionsHtml);
            setTimeout(() => {
              $('#sequence_model_popup').modal('show');
              $('#move_sequence').addClass('seqMoveButtonDisabled');
            }, 500);
            break;
        }
    });

    $(document).on('click','#move_sequence', function() {
       if(!$(this).hasClass("seqMoveButtonDisabled")) {
        $('#sequence_model_popup').modal('hide');
        var seqNo = $("#seq_selection :selected").val();
        var userIds = [];
        var routeAddressIds = [];
        $( ".addresses-list .list-group-item" ).each(function( index ) {
            var userId = $(this).attr("user_id");
            var routeAddressId = $(this).attr("route_address_id");
            var sNo = $(this).find(".num-label");
            if (typeof userId !== 'undefined' && userId !== false) {
              userIds.push(userId);
              routeAddressIds.push(routeAddressId);
            }
        });
        
          userIds = array_move(userIds,selectedSeqNo-1,seqNo-1);
          routeAddressIds = array_move(routeAddressIds,selectedSeqNo-1,seqNo-1);
          setAddressesPositionOnServer(userIds,routeId,routeAddressIds);
          $("#seq_selection :selected").val("");
       }
    });

  });

  function array_move(arr, old_index, new_index) {
    if (new_index >= arr.length) {
        var k = new_index - arr.length + 1;
        while (k--) {
            arr.push(undefined);
        }
    }
    arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
    return arr; // for testing
  }


  async function copyCode(text) {
     
    if (navigator.clipboard) {
      navigator.clipboard.writeText(text).then(function() {
        console.log('Text copied to clipboard');
      }).catch(function(err) {
        console.error('Error in copying text: ', err);
      });
    } else {
      const textArea = document.createElement('textarea');
      textArea.value = text;
      document.body.appendChild(textArea);
      textArea.select();
      try {
        document.execCommand('copy');
        console.log('Text copied to clipboard');
      } catch (err) {
        console.error('Fallback: Oops, unable to copy', err);
      }
      document.body.removeChild(textArea);
    }
  }

  function moveAddressesPosition(cur,type) {
    
    var uId = cur.parents(".list-group-item").attr("user_id");
    var rAId = cur.parents(".list-group-item").attr("route_address_id");
    var userIds = [];
    var routeAddressIds = [];

    $( ".addresses-list .list-group-item" ).each(function( index ) {
        var userId = $(this).attr("user_id");
        var routeAddressId = $(this).attr("route_address_id");
        if (typeof userId !== 'undefined' && userId !== false) {
          userIds.push(userId);
          routeAddressIds.push(routeAddressId);
        }
    });

    userIds = userIds.filter(item => item !== uId);
    routeAddressIds = routeAddressIds.filter(item => item !== rAId);
    if(type == "MF") {
      userIds.unshift(uId); 
      routeAddressIds.unshift(rAId); 
    } else if(type == "ML") {
      userIds.push(uId); 
      routeAddressIds.push(rAId); 
    }
    
    setAddressesPositionOnServer(userIds,routeId,routeAddressIds);
  }

  function setAddressesPositionOnServer(userIds,routeId,routeAddressIds) {
    $.ajax({
          url: "{{route('routes.update_address_ranks')}}",
          type: 'POST',
          data : {userIds:userIds, routeId:routeId, routeAddressIds: routeAddressIds},
          success: function(res) {
            loadMapWithData();
          }
      });
  }

</script>
<script src="https://maps.googleapis.com/maps/api/js?key={{config('app.google_map_key')}}"></script>
@endpush