<link
  rel="stylesheet"
  href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
  integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
  crossorigin=""
/>

<script
  src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
  integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
  crossorigin=""
></script>

<div id="map"></div>

<style>
  #map {
    width: 100%;
    padding-bottom: 70%;
    margin-bottom: 80px;
  }

  .black-dot {
    background-color: black;
    border-radius: 50%;
  }
</style>

<script>
  var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  });


  var blackDotIcon = L.divIcon({
    className: 'black-dot',
    iconSize: [20, 20],
    iconAnchor: [10, 10]
  });


  // Create makers layer group
  var makers = L.layerGroup();
  {{ with getJSON "https://kios-admin.lumbung.space/api/makers"}}
    {{ range .docs }}
    var makerMarker = L.marker(L.GeoJSON.coordsToLatLng({{ .location }}), {
      icon: blackDotIcon  
    });
      makerMarker.bindPopup({{ .name }})
      makers.addLayer(makerMarker);
    {{ end }}
  {{ end }}

  // Create retailers layer group
  var retailers = L.layerGroup();
  {{ with getJSON "https://kios-admin.lumbung.space/api/retailers"}}
    {{ range .docs }}
      var retailerMarker = L.marker(L.GeoJSON.coordsToLatLng({{ .location }}), {
        icon: blackDotIcon  
      });
      retailerMarker.bindPopup({{ .name }})
      retailers.addLayer(retailerMarker);
    {{ end }}
  {{ end }}

  // Create dispatches layer group
  var dispatches = L.layerGroup();
  {{ with getJSON "https://kios-admin.lumbung.space/api/dispatches"}}
    {{ range .docs }}
      var start = L.GeoJSON.coordsToLatLng({{ .startingPoint.location }});
      var startMarker = L.marker(start, {icon: blackDotIcon});
      startMarker.bindPopup({{ .startingPoint.name }});

      var end = L.GeoJSON.coordsToLatLng({{ .endPoint.location }});
      var endMarker = L.marker(end, {icon: blackDotIcon});
      endMarker.bindPopup({{ .endPoint.name }});

      // Add line to display dispatch route
      var myDashArray = {{ .status }} === "routeRequested" ? "20, 10" : {{ .status }} === "completed" ? "1, 5" : "0, 0"; // Dashed line based on status
      var route = L.polyline([start, end], {color: '#000', dashArray: myDashArray });

      // Generate string to display list of products in popup
      var productsString = "";
      var productsList = {{ .products }};
      productsList.forEach((product, i) => productsString = productsString + product.productTitle + (i + 1 < productsList.length ? ', ' : ""));

      route.bindPopup(
         '<p>Origin: <strong>' + {{ .startingPoint.name }} + '</strong><br />' +
         'Destination: <strong>' + {{ .endPoint.name }} + '</strong><br />' +
         'Courier: <strong>' + {{ .courier.name }} + '</strong><br />' +
         'Products: <strong>' + productsString + '</strong><br />' +
         'Status: <strong>' + {{ .status }} + '</strong></p>');

      dispatches.addLayer(route);
      dispatches.addLayer(startMarker);
      dispatches.addLayer(endMarker);
    {{ end }}
  {{ end }}

  var map = L.map('map', {
    center: [-6.1815, 106.8228],
    zoom: 3,
    layers: [osm, dispatches]
  });

  var overlayMaps = {
    "Dispatches": dispatches,
    "Makers": makers,
    "Retailers": retailers
  };

  var layerControl = L.control.layers(overlayMaps, null, {collapsed: false, position: "topleft"}).addTo(map);
  window.addEventListener('load', (event) => {
    map.invalidateSize();
  });
</script>
