<%@language = "javascript" %>
<% /*
    $Revision$
    $Id$

    File:               ShowGoogleMap.asp
    Description:        Toon een object in een Google Map
    Parameters:
        obj_key         Toon maps/positie van dit object
    Context:
    Note:               Zorg dat je een passende Google Maps API key aanvraagt
                        Veronderstelt dat bij het object Lat Lon coordinaten
                        zijn ingesteld.
*/
%>
<!-- #include file="../Shared/common.inc" -->
<!-- #include file="../Shared/iface.inc" -->
<!-- #include file="../MARX/GetLatLng.inc" -->

<%
// Functions
function GetIcon(p_stat_code){
  var l_icon = "https://maps.google.com/mapfiles/ms/micons/green-dot.png"; // default
  switch (p_stat_code) {
      case 1:   { l_icon = "https://maps.google.com/mapfiles/ms/micons/green-dot.png"; break; } // Te behandelen
      case 2:   { l_icon = "https://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; break; } // Geaccepteerd --> yellow
      case 3:  { l_icon = "https://maps.google.com/mapfiles/ms/micons/orange-dot.png"; break; } // Gepland
      case 8:   { l_icon = "https://maps.google.com/mapfiles/ms/micons/red-dot.png"; break; } // Afgemeld
      case 9:   { l_icon = "https://maps.google.com/mapfiles/ms/micons/red-dot.png"; break; } // Afgerond
      case 10:   { l_icon = "https://maps.google.com/mapfiles/ms/micons/red-dot.png"; break; } // Verwerkt
      case 11:   { l_icon = "https://maps.google.com/mapfiles/kml/pal3/icon33.png"; break; } // Afgewezen
  }
  return l_icon;
}

%>
<%
  FCLTHeader.Requires({plugins:["jQuery"]})
  //woco of lev mode
  var v_mode_woco = getQParamInt("woco", 0); // Default is leveranciersmode 0, dus als woco niet wordt meegegeven, dan 0, indien wel woco/opdrachtgever-mode dan moet deze gevuld met 1 zijn.

  if (v_mode_woco)
  {
    // woco "portaluser" heeft web_user01 rechten, de woco "API-user" heeft deze niet.
    var authparams = user.checkAutorisation("WEB_USER01", true);
    var v_viewname = "marx_v_showmaps_4_woco";
    var v_bedrijf_label = L("lcl_prs_companies_leverancier"); //leverancier
  }
  else
  {
    // en de leverancier die opdracht-inzage heeft, heeft WEB_EXTORD
    var authparams = user.checkAutorisation("WEB_EXTORD", true);
    var v_viewname = "marx_v_showmaps_4_lev";
    var v_bedrijf_label = L("lcl_mld_behandelaar"); //opdrachtgever
  }
  user.auth_required_or_abort(authparams);

  __Log("v_viewname: " + v_viewname);

  var v_bedrijf_naam = getQParam("bedrijf", ""); // Default geen "" woco/opdrachtgever
  var v_plaats_mode = getQParam("plaats_mode", "G"); // default G van Gemeente-markers (marker per gemeente)
  var v_plaatsnaam = getQParam("plaatsnaam", ""); // Default geen "" plaats
  var v_stat_omschr = getQParam("status", ""); // Default geen "" status
  var v_days_ago = getQParamInt("daysago", -1); // Default aantal dagen geleden = 0 (= vandaag).
  var v_opdr_soort = getQParam("opdrsoort", ""); // Opdrachtsoort

  __Log("v_bedrijf_naam: " + v_bedrijf_naam);
  __Log("v_plaats_mode: " + v_plaats_mode);
  __Log("v_plaatsnaam: " + v_plaatsnaam);
  __Log("v_stat_omschr: " + v_stat_omschr);
  __Log("v_days_ago: " + v_days_ago);
  __Log("v_opdr_soort: " + v_opdr_soort);

%>

<%if (v_days_ago >= 0){%>

<%
    __Log("userkey: " + user_key);

    // default URL met API-key van Mareon
    var v_apikey = S("alg_fg_remote_maps");

    if (!v_mode_woco)
    {
      //Alleen voor leveranciers
      //prs_kenmerk_key 59 is APIKEY GoogleMaps
      sql = " SELECT prs_kenmerklink_waarde"
          + " FROM prs_kenmerklink, mar_v_all_leverancier_perslid lev"
          + " WHERE lev.prs_perslid_key = " + user_key
          + " AND prs_link_key = lev.prs_bedrijf_key"
          + " AND prs_kenmerklink_niveau = 'B'"
          + " AND prs_kenmerk_key = 59"
          + " AND prs_kenmerklink_verwijder IS NULL";

      var oRs = Oracle.Execute(sql);
      if (!oRs.eof)
      {
        // Leverancier heeft eigen API-key voor GoogleMaps, die gaan we gebruiken...
        v_apikey = oRs("prs_kenmerklink_waarde").Value;
      }
      oRs.close();
    }
    var v_url_GoogleMaps = "https://maps.googleapis.com/maps/api/js?key=" + safe.url(v_apikey);


    __Log("v_plaats_mode: " + v_plaats_mode);
    if (v_plaats_mode == "G")
    {
      var v_zoom_level = 9;  // Gemeente-markers
      sql = "SELECT plaatsnaam, "
                + " plaatsnaam || ':' || count(*) html_location,"
                + " plaatsnaam ref_id,"
                + " plaatsnaam geo_location,"
                + " plaatsnaam || ': ' || count(*) geo_extra_info,"
                + " NULL lat,"
                + " NULL lng,"
                + " NULL mld_melding_key,"
                + " NULL mld_statusopdr_key,"
                + " NULL mld_statusopdr_omschrijving"
          + " FROM " + v_viewname
          + " WHERE prs_perslid_key = " + user_key;
      if (v_bedrijf_naam)
      {
        sql = sql + " AND prs_bedrijf_naam=" + safe.quoted_sql(v_bedrijf_naam);
      }
      if (v_stat_omschr)
      {
        sql = sql + " AND mld_statusopdr_omschrijving=" + safe.quoted_sql(v_stat_omschr);
      }
      if (v_opdr_soort)
      {
        sql = sql + " AND mld_opdr_soort=" + safe.quoted_sql(v_opdr_soort);
      }
      if (v_days_ago >= 0)
      {
        sql = sql + " AND dagen_geleden=" + v_days_ago;
      }
      sql = sql + " GROUP BY plaatsnaam"
                + " ORDER BY count(*) DESC";
    }
    else
    {
      var v_zoom_level = 12; //Straat/huis-markers
      sql = "SELECT plaatsnaam,"
                + " plaatsnaam || ' ' || adres html_location,"
                + " mld_opdr_key ref_id,"
                + " plaatsnaam || '+' || REPLACE(adres ,' ', '+') geo_location,"
                + " prs_bedrijf_naam || ' - ' || adres || ' (' || mld_opdr_id || '): ' || mld_opdr_omschrijving geo_extra_info,"
                + " mld_melding_x lat,"
                + " mld_melding_y lng,"
                + " mld_melding_key,"
                + " mld_statusopdr_key,"
                + " mld_statusopdr_omschrijving"
          + " FROM " + v_viewname
          + " WHERE prs_perslid_key = " + user_key;
      if (v_plaatsnaam)
      {
        sql = sql + " AND plaatsnaam=" + safe.quoted_sql(v_plaatsnaam);
      }
      if (v_bedrijf_naam)
      {
        sql = sql + " AND prs_bedrijf_naam=" + safe.quoted_sql(v_bedrijf_naam);
      }
      if (v_stat_omschr)
      {
        sql = sql + " AND mld_statusopdr_omschrijving=" + safe.quoted_sql(v_stat_omschr);
      }
      if (v_opdr_soort)
      {
        sql = sql + " AND mld_opdr_soort=" + safe.quoted_sql(v_opdr_soort);
      }
      if (v_days_ago >= 0)
      {
        sql = sql + " AND dagen_geleden=" + v_days_ago;
      }
      sql = sql + " ORDER BY html_location";
    }

    var oRs = Oracle.Execute(sql);
    var lat_list = "";
    var lng_list = "";
    var geo_locations = "";
    var geo_extra_info = "";
    var html_locations = "";
    var ref_id = "";
    var stat_code_G_list = "";
    var stat_code_S_list = "";
    var stat_list = "";
    var dag_list = "";
    var datum_list = "";
    var woco_list = "";
    var opdr_soort_list = "";
    var latlng;
    var lat;
    var lng;
    while (!oRs.eof)
    {

        if (v_plaats_mode == "G")
        {
          latlng = GetLatLng(oRs("geo_location").Value);
          if (latlng)
          {
            lat = latlng.split("|")[0];
            lng = latlng.split("|")[1];
          }
        }

        if (v_plaats_mode == "S")
        {
          lat = oRs("lat").Value;
          lng = oRs("lng").Value;
          __Log("lat: " + lat);
          __Log("lng: " + lng);
          if (!lat || !lng)
          {
            //LatLong zijn nog onbekend, eerst opvragen
            latlng = GetLatLng(oRs("geo_location").Value);
            __Log("latlng: " + latlng);
            if (latlng)
            {
              lat = latlng.split("|")[0];
              lng = latlng.split("|")[1];
              __Log("lat GetLatLng: " + lat);
              __Log("lng GetLatLng: " + lng);
              sql = " UPDATE mld_melding"
                  + " SET mld_melding_x = " + parseFloat(lat)
                  + " ,   mld_melding_y = " + parseFloat(lng)
                  + " WHERE mld_melding_key = " + oRs("mld_melding_key").Value;
              var oRs1 = Oracle.Execute(sql);
            }
          }
        }

        if (lat)
        {
          lat_list = lat_list + "|" + lat;
          lng_list = lng_list + "|" + lng;
          geo_locations = geo_locations + "|" + oRs("geo_location").Value;
          geo_extra_info = geo_extra_info + "|" + oRs("geo_extra_info").Value;
          html_locations = html_locations + "|" + oRs("html_location").Value;
          ref_id = ref_id + "|" + oRs("ref_id").Value;
          stat_code_S_list = stat_code_S_list + "|" + oRs("mld_statusopdr_key").Value;
          lat = 0; // reset voor volgende loop
        }
      oRs.MoveNext();
    }
    oRs.close();



    // DISTINCT opdrachtgevers (woco's) in lev-mode en DISTINCT leveranciers (in woco-mode)
    sql = " SELECT prs_bedrijf_naam, count(*)"
        + " FROM " + v_viewname
        + " WHERE prs_perslid_key = " + user_key;

        if (v_plaatsnaam)
        {
        sql = sql + " AND plaatsnaam=" + safe.quoted_sql(v_plaatsnaam);
        }
        if (v_bedrijf_naam)
        {
          sql = sql + " AND prs_bedrijf_naam=" + safe.quoted_sql(v_bedrijf_naam);
        }
        if (v_stat_omschr)
        {
          sql = sql + " AND mld_statusopdr_omschrijving=" + safe.quoted_sql(v_stat_omschr);
        }
        if (v_opdr_soort)
        {
          sql = sql + " AND mld_opdr_soort=" + safe.quoted_sql(v_opdr_soort);
        }
        if (v_days_ago >= 0)
        {
          sql = sql + " AND dagen_geleden=" + v_days_ago;
        }
        sql = sql
        + " GROUP BY prs_bedrijf_naam"
        + " ORDER BY prs_bedrijf_naam";
    var oRs = Oracle.Execute(sql);

    while (!oRs.eof)
    {

      woco_list = woco_list + "|" + oRs("prs_bedrijf_naam").Value;
      oRs.MoveNext();
    }
    oRs.close();

    // DISTINCT statussen...
    sql = " SELECT mld_statusopdr_key, mld_statusopdr_omschrijving, count(*)"
        + " FROM " + v_viewname
        + " WHERE prs_perslid_key = " + user_key;

        if (v_plaatsnaam)
        {
        sql = sql + " AND plaatsnaam=" + safe.quoted_sql(v_plaatsnaam);
        }
        if (v_bedrijf_naam)
        {
          sql = sql + " AND prs_bedrijf_naam=" + safe.quoted_sql(v_bedrijf_naam);
        }
        if (v_stat_omschr)
        {
          sql = sql + " AND mld_statusopdr_omschrijving=" + safe.quoted_sql(v_stat_omschr);
        }
        if (v_opdr_soort)
        {
          sql = sql + " AND mld_opdr_soort=" + safe.quoted_sql(v_opdr_soort);
        }
        if (v_days_ago >= 0)
        {
          sql = sql + " AND dagen_geleden=" + v_days_ago;
        }
        sql = sql
        + " GROUP BY mld_statusopdr_key, mld_statusopdr_omschrijving"
        + " ORDER BY mld_statusopdr_key";
    var oRs = Oracle.Execute(sql);

    while (!oRs.eof)
    {
      stat_code_G_list = stat_code_G_list + "|" + oRs("mld_statusopdr_key").Value;
      stat_list = stat_list + "|" + oRs("mld_statusopdr_omschrijving").Value;
      oRs.MoveNext();
    }
    oRs.close();

    // DISTINCT opdrachtsoorten (reparaties, mutatie, inspectie, onbekend)
    sql = " SELECT mld_opdr_soort, count(*)"
        + " FROM " + v_viewname
        + " WHERE prs_perslid_key = " + user_key;

        if (v_plaatsnaam)
        {
        sql = sql + " AND plaatsnaam=" + safe.quoted_sql(v_plaatsnaam);
        }
        if (v_bedrijf_naam)
        {
          sql = sql + " AND prs_bedrijf_naam=" + safe.quoted_sql(v_bedrijf_naam);
        }
        if (v_stat_omschr)
        {
          sql = sql + " AND mld_statusopdr_omschrijving=" + safe.quoted_sql(v_stat_omschr);
        }
        if (v_opdr_soort)
        {
          sql = sql + " AND mld_opdr_soort=" + safe.quoted_sql(v_opdr_soort);
        }
        if (v_days_ago >= 0)
        {
          sql = sql + " AND dagen_geleden=" + v_days_ago;
        }
        sql = sql
        + " GROUP BY mld_opdr_soort"
        + " ORDER BY mld_opdr_soort";
    var oRs = Oracle.Execute(sql);
    while (!oRs.eof)
    {
      opdr_soort_list = opdr_soort_list + "|" + oRs("mld_opdr_soort").Value;
      oRs.MoveNext();
    }
    oRs.close();


    // DISTINCT datums "vandaag", "gisteren", etc etc , ongeacht de andere filters...
    sql = " SELECT to_char(TRUNC(mld_opdr_datumbegin),'dd-mm-yyyy') datum, dagen_geleden dag"
          + " FROM " + v_viewname
          + " WHERE prs_perslid_key = " + user_key
          + " GROUP BY mld_opdr_datumbegin, dagen_geleden"
          + " ORDER BY dagen_geleden ASC";

    var oRs = Oracle.Execute(sql);
    v_selected_datum = "";
    while (!oRs.eof)
    {
      dag_list = dag_list + "|" + oRs("dag").Value;
      datum_list = datum_list + "|" + oRs("datum").Value;
      if (v_days_ago >= 0 && oRs("dag").Value == v_days_ago)
      {
        v_selected_datum = " (" + oRs("datum").Value + ")";
      }
      oRs.MoveNext();
    }
    oRs.close();


    // bv 'Enschede|Hengelo|Almelo'
    // bv 'Enschede+Kerkstraat+16|Hengelo+Stadhuisplein+1|Almelo+Stationsweg+123'
    lat_list = lat_list.substring(1);
    lng_list = lng_list.substring(1);
    geo_locations = geo_locations.substring(1);
    geo_extra_info = geo_extra_info.substring(1);
    html_locations = html_locations.substring(1); // plaatsnaam met aantal (G-marker) of plaatsnaam met adres (S-marker)
    ref_id = ref_id.substring(1); // plaatsnaam (G-marker) of mld_opdr_key (S-marker)
    stat_code_G_list = stat_code_G_list.substring(1); // lijstje met statuscodes
    stat_code_S_list = stat_code_S_list.substring(1); // lijstje met statuscodes, per stad de statuscode
    stat_list = stat_list.substring(1); // lijstje met statussen (omschrijvingen)
    dag_list = dag_list.substring(1);
    datum_list = datum_list.substring(1);
    woco_list = woco_list.substring(1); // lijstje met statussen (omschrijvingen)
    opdr_soort_list = opdr_soort_list.substring(1); // lijstje met soorten opdrachten (rep,mut,ins,onbekend)

    __Log("lat_list: " + lat_list);
    __Log("lng_list: " + lng_list);
    __Log("geo_locations: " + geo_locations);
    __Log("geo_extra_info: " + geo_extra_info);
    __Log("html_locations: " + html_locations);
    __Log("ref_id: " + ref_id);
    __Log("stat_code_G_list: " + stat_code_G_list);
    __Log("stat_code_S_list: " + stat_code_S_list);
    __Log("stat_list: " + stat_list);
    __Log("dag_list: " + dag_list);
    __Log("datum_list: " + datum_list);
    __Log("woco_list: " + woco_list);
    __Log("opdr_soort_list: " + opdr_soort_list);

%>

<html>
  <head>
    <%
    FCLTHeader.Generate();
    %>
    <title>Locaties</title>
    <style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0;}
      geenhekjeaanbeginregel, #map, #pano { float: left; height: 100%; width: 50%; }
    </style>

    <script type="text/javascript" src="<%=v_url_GoogleMaps%>"></script>

    <script>

      function initMap()
      {   //alert("Start initMap");

          if (1||GBrowserIsCompatible())
          {

            var v_lat_list = "<%=safe.jsstring(lat_list)%>".split("|");
            var v_lng_list = "<%=safe.jsstring(lng_list)%>".split("|");
            var v_geo_locations = "<%=safe.jsstring(geo_locations)%>".split("|");
            //alert("v_geo_locations=" + v_geo_locations);
            // bv ['Enschede', 'Hengelo', 'Almelo']
            // bv ['Enschede+Kerkstraat+1', 'Hengelo+Stadhuisplein+1', 'Almelo+Stationsweg+123']
            var v_geo_extra_info = "<%=safe.jsstring(geo_extra_info)%>".split("|");
            var v_ref_id = "<%=safe.jsstring(ref_id)%>".split("|");
            var v_stat_code_S_list = "<%=safe.jsstring(stat_code_S_list)%>".split("|");
            var v_stat_list = "<%=safe.jsstring(stat_list)%>".split("|");

            var n = v_lat_list.length;

            if (n>0 && v_lat_list!="")
            {
              //er zijn opdrachten, dan ook maps erbij...

              map = new google.maps.Map(document.getElementById("map"),{
                      //center: coord,
                      //zoom: 10,
                      xmapTypeId: google.maps.MapTypeId.HYBRID
              });
              var infowindow = new google.maps.InfoWindow({
                  content: "<%=L("lcl_search_org")%>"
              });

              //var geocoder = new google.maps.Geocoder();
              G_sum_lat = 0;
              G_sum_lng = 0;
              G_totaal = 0;

              //var v_max_markers = 11;
              //var n = v_geo_locations.length;


              var v_stat_code = 5; // default new, dit doen we bij plaats-mode "G" (van Gemeente)
              for (i = 0; i < n; i++) {
                //alert("v_geo_locations[i]:" + v_geo_locations[i]);
                //alert("v_ref_id[i]:" + v_ref_id[i]);
                //setTimeout(function () { codeAddress(geocoder,v_geo_locations[i], v_geo_extra_info[i], v_ref_id[i], i, n); }, 1000);
                //codeAddress_oud(geocoder,v_geo_locations[i], v_geo_extra_info[i], v_ref_id[i], i, n, v_max_markers);
                <%if (v_plaats_mode=="S"){%>
                  // Maar bij plaats-mode = "S (street) doen we afhankelijk van de status een kleur...
                  v_stat_code = parseInt(v_stat_code_S_list[i]);
                  //alert(v_stat_code);
                <%}%>
                PutMarker(v_lat_list[i], v_lng_list[i], v_geo_extra_info[i], v_ref_id[i], v_stat_code, i, n);
              }
            }

            //alert("Einde initMap");

        }
        else
        { // Kan eigenlijk niet voorkomen
          window.close();
        }
      }

      function GetIcon(p_stat_code){
        var l_icon = "https://maps.google.com/mapfiles/ms/micons/green-dot.png"; // default
        switch (p_stat_code) {
            case 1:   { l_icon = "https://maps.google.com/mapfiles/ms/micons/green-dot.png"; break; } // Te behandelen
            case 2:   { l_icon = "https://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; break; } // Geaccepteerd --> yellow
            case 3:  { l_icon = "https://maps.google.com/mapfiles/ms/micons/orange-dot.png"; break; } // Gepland
            case 8:   { l_icon = "https://maps.google.com/mapfiles/ms/micons/red-dot.png"; break; } // Afgemeld
            case 9:   { l_icon = "https://maps.google.com/mapfiles/ms/micons/red-dot.png"; break; } // Afgerond
            case 10:   { l_icon = "https://maps.google.com/mapfiles/ms/micons/red-dot.png"; break; } // Verwerkt
            case 11:   { l_icon = "https://maps.google.com/mapfiles/kml/pal3/icon33.png"; break; } // Afgewezen
        }
        return l_icon;
      }

      function PutMarker(p_lat, p_lng, p_extra_info, p_ref_id, p_stat_code, i , n) {
        //alert(p_ref_id);
        if (p_ref_id)
        {
          G_sum_lat = G_sum_lat + parseFloat(p_lat);
          G_sum_lng = G_sum_lng + parseFloat(p_lng);
          G_totaal = G_totaal + 1;
          //alert(p_stat_code);
          var l_icon = GetIcon(p_stat_code);
          var marker = new google.maps.Marker({
                          map: map,
                          title: p_extra_info,
                          icon: l_icon,
                          position: new google.maps.LatLng(parseFloat(p_lat), parseFloat(p_lng))
                      });
          marker.addListener("click", () => {
              <%if (v_plaats_mode=="G"){%>
                marx_show_maps("S", p_ref_id, '<%=safe.jsstring(v_stat_omschr)%>', <%=v_days_ago%>, '<%=safe.jsstring(v_bedrijf_naam)%>', '<%=safe.jsstring(v_opdr_soort)%>');
              <%}%>

              <%if (v_plaats_mode=="S"){%>
                marx_show_pano(marker.getPosition(), p_ref_id);
              <%}%>

          });
          if (i+1==n){PostInit(n)}
        }
      }

      function PostInit(n){
        if (n > 0)
        {
          //alert(n);
          v_centre_lat = G_sum_lat / G_totaal;
          v_centre_lng = G_sum_lng / G_totaal;
          var v_coords_centre = new google.maps.LatLng(v_centre_lat, v_centre_lng);

          map.setZoom(<%=v_zoom_level%>);
          map.setCenter(v_coords_centre);
        }
      }


      function construct_button_mld_opdr (controlDiv, p_mld_opdr_key) {
        // Set CSS for the control border.
        const controlUI = document.createElement("div");
        controlUI.style.backgroundColor = "#fff";
        controlUI.style.border = "2px solid #fff";
        controlUI.style.borderRadius = "3px";
        controlUI.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
        controlUI.style.cursor = "pointer";
        controlUI.style.marginTop = "8px";
        controlUI.style.marginBottom = "22px";
        controlUI.style.textAlign = "center";
        controlUI.title = "<%=L("lcl_mld_opdr_details")%>"
        controlDiv.appendChild(controlUI);
        // Set CSS for the control interior.
        const controlText = document.createElement("div");
        controlText.style.color = "rgb(25,25,25)";
        controlText.style.fontFamily = "Roboto,Arial,sans-serif";
        controlText.style.fontSize = "16px";
        controlText.style.lineHeight = "38px";
        controlText.style.paddingLeft = "5px";
        controlText.style.paddingRight = "5px";
        controlText.innerHTML = "<%=L("lcl_mld_opdr_details")%>";
        controlUI.appendChild(controlText);

        controlUI.addEventListener("click", () => {
          marx_show_mld_opdr(p_mld_opdr_key);
        });
      }

      function marx_show_maps (p_plaatsmode, p_plaatsnaam, p_status_omschr, p_daysago, p_bedrijf_naam, p_opdr_soort){
        var v_url = "../../appl/marx/showgooglemap.asp?plaats_mode="  + encodeURIComponent(p_plaatsmode)
                                                                      + "&plaatsnaam=" + encodeURIComponent(p_plaatsnaam)
                                                                      + "&status=" + encodeURIComponent(p_status_omschr)
                                                                      + "&daysago=" + p_daysago
                                                                      + "&bedrijf=" + encodeURIComponent(p_bedrijf_naam)
                                                                      + "&opdrsoort=" + encodeURIComponent(p_opdr_soort)
                                                                      + "&woco=<%=v_mode_woco%>";
        window.location.href = v_url;
      }

      function marx_show_pano (p_position, p_mld_opdr_key){
        var panorama = new google.maps.StreetViewPanorama(
                        document.getElementById('pano'), {
                          position: p_position,
                          pov: {
                            pitch: 10
                          }
                        });
        map.setStreetView(panorama);
        const centerControlDiv = document.createElement("div");
        construct_button_mld_opdr(centerControlDiv, p_mld_opdr_key);
        panorama.controls[google.maps.ControlPosition.TOP_RIGHT].push(centerControlDiv);
      }

      function marx_zoom_maps (p_mld_opdr_key, p_lat, p_lng){
        if (p_lat && p_lng)
        {
          var v_coords_centre = new google.maps.LatLng(p_lat, p_lng);
          map.setCenter(v_coords_centre);
          map.setZoom(18);
          marx_show_pano (v_coords_centre, p_mld_opdr_key);
        }
      }

      function marx_show_mld_opdr (p_mld_opdr_key){
        <% if (v_mode_woco){ %>
          var v_url = "appl/fac/fac_report.asp?mode=list&rap_name=marx_v_my_activity_opdrgvr&start_fac_tracking_datum=&end_fac_tracking_datum=&mld_opdr_key=" + p_mld_opdr_key;
          var v_titel = "<%=L("lcl_details")%>";
        <%}%>
        <%else{%>
          var v_url = "appl/mld/mld_opdr.asp?urole=b2&opdr_key=" + p_mld_opdr_key;
          var v_titel = "";
        <%}%>
        FcltMgr.openDetail(v_url, v_titel);
      }

    </script>

  </head>
  <body id="marx_googlemaps" onload="initMap();">
    <div id="mapmenu" style="width:100%;height:33%;overflow-y:auto">
      <table style="width:100%">
      <tr>
        <td colspan="5" style="text-align:center">
          <div class="card-header"><div class="card-header-content"><i class="fa fa-layer-plus fa-w-16"></i>
            <span><b><%=L("lcl_orders")%></b></span>
            <span style="cursor:pointer;float:center" onclick="marx_show_maps('<%=safe.jsstring(v_plaats_mode)%>', '<%=safe.jsstring(v_plaatsnaam)%>', '<%=safe.jsstring(v_stat_omschr)%>' , <%=v_days_ago%>, '<%=safe.jsstring(v_bedrijf_naam)%>', '<%=safe.jsstring(v_opdr_soort)%>')">
              <%=I("fa-fclt-refresh", { "fastyle": "fas" })%>
            </span>
          </div></div>
        </td>
      </tr>
        <tr>
          <td style="width:20%">
              <div class="card-header"><div class="card-header-content"><i class="fas fa-calendar-day"></i>
                <span style="font-size:10.0pt"> <%=L("lcl_orderdate") + v_selected_datum%></span>
              </div></div>
              <span style="font-size:9.0pt">
              <%
              var v_datum_list = datum_list.split("|");
              var v_dag_list = dag_list.split("|");

              for (i = 0; i < v_datum_list.length; i++) {
                v_dagnr = v_dag_list[i];
                switch (v_dagnr) {
                    case "0":   { v_dag_text = v_datum_list[i] + " (" + L("lcl_date_today") + ")"; break; } // Vandaag
                    case "1":   { v_dag_text = v_datum_list[i] + " (" + L("lcl_date_yesterday") + ")"; break; } // Gisteren
                    default:    { v_dag_text = v_datum_list[i]; break; } // Gisteren
                }
                %>
                  <span style="font-size:9.0pt;cursor:pointer" onclick="marx_show_maps('<%=safe.jsstring(v_plaats_mode)%>', '<%=safe.jsstring(v_plaatsnaam)%>', '<%=safe.jsstring(v_stat_omschr)%>' , <%=v_dagnr%>, '<%=safe.jsstring(v_bedrijf_naam)%>', '<%=safe.jsstring(v_opdr_soort)%>')">
                    <% if (v_days_ago >= 0 && v_dagnr == v_days_ago){%><i class="fas fa-calendar-day"></i><b> <%}%>
                    <%=safe.html(v_dag_text)%>
                    <% if (v_days_ago >= 0 && v_dagnr == v_days_ago){%></b><%}%>
                  </span>
                <br/>
              <%}%>
            </span>
          </td>
          <td style="width:20%">
            <!-- Bedrijven (woco's / leveranciers) -->
            <div class="card-header"><div class="card-header-content"><i class="fa fa-address-card fa-w-18"></i>
              <span style="font-size:10.0pt"> <%=safe.html(v_bedrijf_label)%>
              <% if (v_bedrijf_naam){ %>
                <span style="cursor:pointer" onclick="marx_show_maps('<%=safe.jsstring(v_plaats_mode)%>', '<%=safe.jsstring(v_plaatsnaam)%>', '<%=safe.jsstring(v_stat_omschr)%>', <%=v_days_ago%>, '' , '<%=safe.jsstring(v_opdr_soort)%>')">
                &nbsp;&nbsp;&nbsp;(<%=safe.html(v_bedrijf_naam)%>&nbsp;&nbsp;&nbsp;<i class="fa fa-trash fa-w-12"> )</i>
              </span>
              <%} %>
              </span></div></div>
              <%
                var v_woco_list = woco_list.split("|");
                // bv ['Trivire', 'Stadgenoot', 'de Alliantie']
                for (i = 0; i < v_woco_list.length; i++) {%>
                    <span style="font-size:9.0pt;cursor:pointer" onclick="marx_show_maps('<%=safe.jsstring(v_plaats_mode)%>', '<%=safe.jsstring(v_plaatsnaam)%>', '<%=safe.jsstring(v_stat_omschr)%>', <%=v_days_ago%>, '<%=safe.jsstring(v_woco_list[i])%>', '<%=safe.jsstring(v_opdr_soort)%>')">
                      <%=safe.html(v_woco_list[i])%>
                    </span>
                  <br/>
                <%}%>
            </span>
          </td>
          <td style="width:20%">
            <!-- Plaats -->
            <div class="card-header"><div class="card-header-content"><i class="fa fa-map-marker-alt fa-w-12"></i>
              <span style="font-size:10.0pt"> <%=L("lcl_cil_locaties")%>
              <% if (v_plaatsnaam){ %>
                <span style="cursor:pointer" onclick="marx_show_maps('G', '', '<%=safe.jsstring(v_stat_omschr)%>' , <%=v_days_ago%>, '<%=safe.jsstring(v_bedrijf_naam)%>', '<%=safe.jsstring(v_opdr_soort)%>')">
                &nbsp;&nbsp;&nbsp;(<%=safe.html(v_plaatsnaam)%>&nbsp;&nbsp;&nbsp;<i class="fa fa-trash fa-w-12"> )</i>
                </span>
              <%} %>
              </span></div></div>
              <%
                var v_html_locations = html_locations.split("|");
                var v_ref_id = ref_id.split("|");
                var v_lat_list = lat_list.split("|");
                var v_lng_list = lng_list.split("|");
                // bv ['Enschede', 'Hengelo', 'Almelo']
                for (i = 0; i < v_html_locations.length; i++) {%>
                  <% if (v_plaats_mode == "G") {%>
                    <span style="font-size:9.0pt;cursor:pointer" onclick="marx_show_maps('S', '<%=safe.jsstring(v_ref_id[i])%>', '<%=safe.jsstring(v_stat_omschr)%>' , <%=v_days_ago%>, '<%=safe.jsstring(v_bedrijf_naam)%>', '<%=safe.jsstring(v_opdr_soort)%>')"><%=safe.html(v_html_locations[i])%></span>
                  <%}%>
                  <% if (v_plaats_mode == "S") {%>
                    <span style="font-size:9.0pt;cursor:pointer" onclick="marx_zoom_maps(<%=v_ref_id[i]%>,<%=v_lat_list[i]%>, <%=v_lng_list[i]%>)"><%=safe.html(v_html_locations[i])%></span>
                    <span style="font-size:9.0pt;cursor:pointer" onclick="marx_show_mld_opdr(<%=v_ref_id[i]%>)"><i class="far fa-info-circle"></i></span>
                  <%}%>
                  <br/>
                <%}%>
            </span>
          </td>
          <td style="width:20%">
            <!-- Status -->
            <div class="card-header"><div class="card-header-content"><i class="fas fa-thermometer-half"></i>
              <span style="font-size:10.0pt"> <%=L("lcl_mld_opdr_status")%>
              <% if (v_stat_omschr){ %>
                <span style="cursor:pointer" onclick="marx_show_maps('<%=safe.jsstring(v_plaats_mode)%>', '<%=safe.jsstring(v_plaatsnaam)%>', '', <%=v_days_ago%>, '<%=safe.jsstring(v_bedrijf_naam)%>', '<%=safe.jsstring(v_opdr_soort)%>')">
                &nbsp;&nbsp;&nbsp;(<%=safe.html(v_stat_omschr)%>&nbsp;&nbsp;&nbsp;<i class="fa fa-trash fa-w-12"> )</i>
              </span>
              <%} %>
              </span></div></div>
              <%
                var v_stat_list = stat_list.split("|");
                var v_stat_code_G_list = stat_code_G_list.split("|");
                // bv ['Nieuw', 'Geaccepteerd', 'Afgemeld']
                for (i = 0; i < v_stat_list.length; i++) {%>
                    <span style="font-size:9.0pt;cursor:pointer" onclick="marx_show_maps('<%=safe.jsstring(v_plaats_mode)%>', '<%=safe.jsstring(v_plaatsnaam)%>', '<%=safe.jsstring(v_stat_list[i])%>', <%=v_days_ago%>, '<%=safe.jsstring(v_bedrijf_naam)%>', '<%=safe.jsstring(v_opdr_soort)%>')">
                      <%=safe.html(v_stat_list[i])%>
                    </span>
                    <% if (v_plaats_mode == "S") {%>
                      <% var v_icon = GetIcon(parseInt(v_stat_code_G_list[i]));%>
                      <img src="<%=v_icon%>" width="20" height="20" style="vertical-align:middle">
                    <%}%>
                  <br/>
                <%}%>
            </span>
          </td>
          <td style="width:20%">
            <!-- Opdrachtsoorten (rep, mut, ins, onbekend) -->
            <div class="card-header"><div class="card-header-content"></i><i class="fas fa-hammer"></i>
              <span style="font-size:10.0pt"> <%=L("lcl_mld_typeopdr")%>
              <% if (v_opdr_soort){ %>
                <span style="cursor:pointer" onclick="marx_show_maps('<%=safe.jsstring(v_plaats_mode)%>', '<%=safe.jsstring(v_plaatsnaam)%>', '<%=safe.jsstring(v_stat_omschr)%>', <%=v_days_ago%>, '<%=safe.jsstring(v_bedrijf_naam)%>', '')">
                &nbsp;&nbsp;&nbsp;(<%=safe.html(v_opdr_soort)%>&nbsp;&nbsp;&nbsp;<i class="fa fa-trash fa-w-12"> )</i>
              </span>
              <%} %>
              </span></div></div>
              <%
                var v_opdr_soort_list = opdr_soort_list.split("|");
                // bv ['Reparatie', 'Mutatie', 'Onbekend']
                for (i = 0; i < v_opdr_soort_list.length; i++) {%>
                    <span style="font-size:9.0pt;cursor:pointer" onclick="marx_show_maps('<%=safe.jsstring(v_plaats_mode)%>', '<%=safe.jsstring(v_plaatsnaam)%>', '<%=safe.jsstring(v_stat_omschr)%>', <%=v_days_ago%>, '<%=safe.jsstring(v_bedrijf_naam)%>', '<%=safe.jsstring(v_opdr_soort_list[i])%>')">
                      <%=safe.html(v_opdr_soort_list[i])%>
                    </span>
                  <br/>
                <%}%>
            </span>
          </td>
          <td>


        </tr>
      </table>
    </div>
    <div id="map" style="width:45%;height: 67%"></div>
    <div id="pano" style="width:45%;height: 67%"></div>
  </body>
</html>
<%}%>


<% ASPPAGE_END(); %>
