@extends('layouts.app')

@section('form-title') {{ __('Routes') }} @endsection
@section('form-sub-title') {{ __('Click a client to view more information') }} @endsection

@section('breadcrumb') 
<li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('Dashboard') }}</a> </li> 
<li class="breadcrumb-item"><a href="{{ route('organisations.index') }}">{{ __('Clients') }}</a> </li> 
@endsection

@push('child-style')
<style>
/* Set the size of the div element that contains the map */
#map {
  height: 600px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}
.clndr-grid { width: 100% !important;}
</style>
@endpush

@section('content')

<div class="pcoded-inner-content">
    <div class="main-body">
        <div class="page-wrapper">
            <!-- Page body start -->
            <div class="page-body">
                <div class="row">
                    <div class="col-sm-7">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-block">
                                      <div id="calendar" class="overflow-hidden bg-grey bg-lighten-3"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-block">
                                        <div id="map" class="set-map"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="card">
                          <div class="card-header">
                            <h5 class="card-header-text" id="visit_date">{{ __('Visits per region') }} {{ date('d F Y', strtotime($calendar_date)) }}</h5>
                          </div>
                            <div class="card-block accordion-block" id="driver-timeblock-tabs">
                              
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page body end -->
    </div>
</div>
<div id="clndr" class="clearfix">
    <script type="text/template" id="clndr-template">
      <div class="clndr-controls">
        <div class="clndr-previous-button">&lt;</div>
        <div class="clndr-next-button">&gt;</div>
        <div class="current-month">
          <%= month %>
          <%= year %>
        </div>
      </div>
      <div class="clndr-grid">
        <div class="days-of-the-week clearfix">
          <% _.each(daysOfTheWeek, function(day) { %>
            <div class="header-day">
              <%= day %>
            </div>
            <% }); %>
        </div>
        <div class="days">
          <% _.each(days, function(day) { %>
            <div class="<%= day.classes %>" id="<%= day.id %>"><span class="day-number"><%= day.day %></span></div>
            <% }); %>
        </div>
      </div>
      {{-- <div class="event-listing">
        <div class="event-listing-title">Event this month</div>
        <% _.each(eventsThisMonth, function(event) { %>
          <div class="event-item font-small-3">
            <div class="event-item-day font-small-2">
              <%= event.date %>
            </div>
            <div class="event-item-name text-bold-600">
              <%= event.title %>
            </div>
            <div class="event-item-location">
              <%= event.location %>
            </div>
          </div>
          <% }); %>
      </div> --}}
    </script>
</div>
@endsection

@push('child-scripts')
<script>
function initilizeMap(){
  projects("{{ $calendar_date }}");
  visits("{{ $calendar_date }}");
}

$(document).ready(function() {
    
    var a = moment().format("YYYY-MM"),
        b = moment().add(1, "month").format("YYYY-MM"),
        c = [
          {
            date: a + "-10",
            title: "Robot war",
            location: "Center of Science"
          }, 
          {
              date: a + "-19",
              title: "Cat Frisbee",
              location: "Jefferson Park"
          }, 
          {
              date: a + "-23",
              title: "Elephent fight",
              location: "Natural Park"
          }, 
          {
              date: b + "-07",
              title: "Small Cat Photo Session",
              location: "Center for Cat Photography"
          }
        ];

    var calendar = $("#calendar").clndr({
        template: $("#clndr-template").html(),
        //events: c,
        trackSelectedDate: !0,
        selectedDate: "{{ $calendar_date }}",
        clickEvents: {
          click: function(target) {
            //console.log(target.date._i);
            projects(target.date._i);
            visits(target.date._i);
            let visit_date = moment(target.date._i).format('DD MMMM YYYY');  
            $('#visit_date').html("{{ __('Visits per region') }} " + visit_date);
          },
          onMonthChange: function(month) {
            showVisitIconInCalendar(calendar);
          }
        }
    });

    showVisitIconInCalendar(calendar);
});

function showVisitIconInCalendar(calendar){

  const daysContainer = document.querySelector('.days');

  let extractedDates = [];

  daysContainer.querySelectorAll('div').forEach(dayDiv => {
      const dateClass = Array.from(dayDiv.classList).find(cls => cls.startsWith('calendar-day-'));
      
      if (dateClass) {
          const dateParts = dateClass.split('-');
          const year = parseInt(dateParts[2]);
          const month = parseInt(dateParts[3]);
          const day = parseInt(dateParts[4]);

          const dateString = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
          
          extractedDates.push(dateString);
      }
  });

  const calendar_dates = extractedDates.join(',');

  $.ajax({
      url: "{{ route('date.visits') }}",
      type: "POST",
      data: {calendar_dates: calendar_dates},
      headers: {
          'X-CSRF-TOKEN': "{{ csrf_token() }}"
      },
      success: function(date_visits){
        for(var key in date_visits){
            var value = date_visits[key];
            if(value === 'yes'){
              $('.calendar-day-'+key).find('span').after(' <i class="fa fa-map-marker text-success" aria-hidden="true"></i>');
            }
        }
      }
  });
}

function toggleicon(obj){
  if($(obj).parent().attr('aria-expanded') === 'true'){
    if($(obj).hasClass('fa-plus')){
      $(obj).addClass('fa-minus');
      $(obj).removeClass('fa-plus');
    }
  }else if($(obj).parent().attr('aria-expanded') === 'false'){
    if($(obj).hasClass('fa-minus')){
      $(obj).addClass('fa-plus');
      $(obj).removeClass('fa-minus');
    }
  }
}

function projects(deadline){
    $.ajax({
        url: "{{ route('map.projects') }}",
        type: "POST",
        data: {deadline: deadline},
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        success: function(projects){
            //console.log(projects);
            initMap(projects);
        }
    });
}
/**
 * old google map library
function initMap(projects) {
  // The location of Neatherlands (replace with your desired center coordinates)
  const nl = { lat: 52.370216, lng: 4.895168 };

  // The map, centered at the provided coordinates
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 8,
    center: nl,
  });

  const infoWindow = new google.maps.InfoWindow({
    content: "",
    disableAutoPan: true,
  });

  // Create an array of alphabetical characters used to label the markers.
  const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

  // Initialize the markers array
  const markers = [];

  // Add some markers to the map, handling duplicates through shifting coordinates
  projects.forEach((project, index) => {
    const marker = new google.maps.Marker({
      position: { lat: parseFloat(project.lat), lng: parseFloat(project.long) },
      title: project.title,
      icon: project.icon,
      map: map,
    });

    const offset = 0.00001; // Adjust this value for desired level of separation

    // Check for duplicates before adding the marker and apply a random offset if needed
    let duplicateFound = false;
    for (const existingMarker of markers) {
      if (existingMarker.getPosition().lat() === marker.getPosition().lat() &&
          existingMarker.getPosition().lng() === marker.getPosition().lng()) {
        duplicateFound = true;
        break;
      }
    }

    if (duplicateFound) {
      const newLat = marker.getPosition().lat() + (Math.random() > 0.5 ? offset : -offset);
      const newLng = marker.getPosition().lng() + (Math.random() > 0.5 ? offset : -offset);
      marker.setPosition({ lat: newLat, lng: newLng });
    }

    // Attach click listener and info window content
    marker.addListener("click", () => {
      infoWindow.setContent(project.content);
      infoWindow.open(map, marker);
    });

    // Push the marker into the markers array
    markers.push(marker);
  });

  // Add a marker clusterer to manage the markers
  new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
    averageCenter: true, 
    zoomOnClick: true, 
    maxZoom: 12,
  });
}
**/

async function initMap(projects) {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const {PinElement} = await google.maps.importLibrary("marker")

  const map = new Map(document.getElementById("map"), {
    center: {lat: 52.370216, lng: 4.895168},
    zoom: 8,
    mapId: "4504f8b37365c3d0",
  });

  // Function to create a marker with custom image and title
  const createMarker = (projectData) => {
    if(projectData.type === 'not_planned'){
      const icon = document.createElement("img");
      icon.src = projectData.icon;

      const marker = new AdvancedMarkerElement({
        map,
        position: {lat: parseFloat(projectData.lat), lng: parseFloat(projectData.long)},
        content: icon,
        title: projectData.title,
      });

      // Attach click listener and info window content
      const infowindow = new google.maps.InfoWindow({
        content: projectData.content,
        ariaLabel: "Uluru",
      });

      marker.addListener("click", () => {
        infowindow.open({
          anchor: marker,
          map,
        });
      });
    }else if(projectData.type === 'article'){
      const icon = document.createElement('div');
      icon.innerHTML = '<i class="fa-regular fa-truck-fast"></i>';

      const faPin = new PinElement({
        glyph: icon,
        glyphColor: projectData.icon,
        background: "#FFF",
        borderColor: projectData.icon,
      });

      const marker = new AdvancedMarkerElement({
        map,
        position: {lat: parseFloat(projectData.lat), lng: parseFloat(projectData.long)},
        content: faPin.element,
        title: projectData.title,
      });

      // Attach click listener and info window content
      const infowindow = new google.maps.InfoWindow({
        content: projectData.content,
        ariaLabel: "Uluru",
      });

      marker.addListener("click", () => {
        infowindow.open({
          anchor: marker,
          map,
        });
      });
    }else{
      const pinBackground = new PinElement({
        background: projectData.icon,
        borderColor: '#000',
        glyph: ""
      });

      const marker = new AdvancedMarkerElement({
        map,
        position: {lat: parseFloat(projectData.lat), lng: parseFloat(projectData.long)},
        content: pinBackground.element,
        title: projectData.title,
      });

      // Attach click listener and info window content
      const infowindow = new google.maps.InfoWindow({
        content: projectData.content,
        ariaLabel: "Uluru",
      });

      marker.addListener("click", () => {
        infowindow.open({
          anchor: marker,
          map,
        });
      });
    }
  };

  // Create markers for each project
  projects.forEach(project => createMarker(project));
}


function visits(visit_date){
  $.ajax({
      url: "{{ route('driver.visits') }}",
      type: "POST",
      data: {visit_date: visit_date},
      headers: {
          'X-CSRF-TOKEN': "{{ csrf_token() }}"
      },
      success: function(visits){
        $('#driver-timeblock-tabs').html(visits);
      }
  });
}
</script>
{{-- <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAh0eb3iuRzHBUOeNm7F5S1vBvj-UbpvH8&loading=async&libraries=places&callback=initilizeMap"></script> --}}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{ config('furnit.google_map_key') }}&loading=async&callback=initilizeMap"></script>
<script src="https://use.fontawesome.com/releases/v4.0.0/js/all.js"></script>
@endpush