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

    File:               PlanningGoogleMap.asp
    Description:        Toon de planningsinfo in een Google Map
    Context:            Voor de leverancier met Mareon Planbord, met of zonder Mareon Groene Planningen

*/
%>
<!-- #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"]})



  // De leverancier die planner is, heeft WEB_RESFOF
  // Daarop gaan we controleren...

  __Log("START authparams: ");

  var authparams = user.checkAutorisation("WEB_RESFOF", true);
  var urole;
  __Log("authparams: " + authparams);
  if (authparams)
  {
    urole = "fo";
  }
  else
  {
    authparams = user.checkAutorisation("WEB_EXTORD", true);
    __Log("authparams2: " + authparams);
    if (authparams)
      urole = "fe";
  }
  __Log("urole: " + urole);

  user.auth_required_or_abort(authparams);

  // Check of leverancier de module Planbord heeft afgenomen...
  sql = " SELECT marx_bedrijf_auth_4_planbord(cp.prs_bedrijf_key) marx_planbord"
      + " FROM prs_contactpersoon cp"
      + " WHERE cp.prs_perslid_key = " + user_key;
  var oRs = Oracle.Execute(sql);
  var v_marx_planbord = 0;
  if (!oRs.eof)
  {
    v_marx_planbord = oRs("marx_planbord").Value;
  }
  oRs.close();

  // Check of leverancier de module Mareon Groene Planning heeft afgenomen...
  sql = " SELECT marx_bedrijf_auth_4_greenplan(cp.prs_bedrijf_key) marx_greenplan"
      + " FROM prs_contactpersoon cp"
      + " WHERE cp.prs_perslid_key = " + user_key;
  var oRs = Oracle.Execute(sql);
  var v_marx_greenplan = 0;
  if (!oRs.eof)
  {
    v_marx_greenplan = oRs("marx_greenplan").Value;
  }
  oRs.close();

  var v_viewname = "marx_v_planmaps_4_lev";
  var v_bedrijf_label = L("lcl_mld_behandelaar"); //opdrachtgever
  var v_bedrijf_naam = getQParam("bedrijf", ""); // Default geen "" woco/opdrachtgever
  var v_vakman_key = getQParamInt("vakmankey", -1); // Default geen -1 vakman
  var v_toon_werkgebied = getQParamInt("werkgebied", 0); // Default wel tonen van werkgebieden.
  var v_stat_omschr = getQParam("status", ""); // Default geen "" status
  var v_days_future = getQParamInt("daysfuture", 0); // Default aantal dagen in de toekomst = 0 (= vandaag).
  var v_dienst_key = getQParamInt("dienstkey", -1); // prs_dienst_key

  if (urole == "fe") v_vakman_key = user_key;

  __Log("v_bedrijf_naam: " + v_bedrijf_naam);
  __Log("v_vakman_key: " + v_vakman_key);
  __Log("v_toon_werkgebied: " + v_toon_werkgebied);
  __Log("v_stat_omschr: " + v_stat_omschr);
  __Log("v_days_future: " + v_days_future);  
  __Log("v_dienst_key: " + v_dienst_key);


%>

<%if (v_days_future >= 0 && v_marx_planbord == 1){%>

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

    function marx_getHexColor(p_number){
        return "#"+ ('000000' + ((123456 * p_number)>>>0).toString(16)).slice(-6)
    }

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

    var v_7dagen = 7;

    //Voor leveranciers met eigen GoogleMaps
    //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);

    var v_zoom_level = 12; //Straat/huis-markers
    sql = "SELECT prs_vakman_key,"
              + " prs_vakman_naam,"
              + " TO_CHAR(res_rsv_ruimte_van, 'HH24:MI') start_tijd,"
              + " 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_vakman_key != -1)
    {
      sql = sql + " AND prs_vakman_key=" + v_vakman_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_dienst_key != -1)
    {
      sql = sql + " AND prs_dienst_key=" + v_dienst_key;
    }
    if (v_days_future >= 0)
    {
      sql = sql + " AND dagen_toekomst=" + v_days_future;
    }
    sql = sql + " ORDER BY prs_vakman_naam, res_rsv_ruimte_van";

    var oRs = Oracle.Execute(sql);
    var lat_list = "";
    var lng_list = "";
    var geo_locations = "";
    var geo_extra_info = "";
    var vakman_ids = "";
    var prs_vakmannen = "";
    var start_tijd = "";
    var vakgebied_x = "";
    var vakgebied_y = "";
    var vakgebied_rad = "";
    var vakman_keys_bij_refid = "";
    var vakman_naam_bij_refid = "";
    var start_tijd_list = "";
    var ref_id = "";
    var stat_code_G_list = "";
    var stat_code_S_list = "";
    var stat_list = "";
    var dag_list = "";
    var dag_naam_list = "";
    var datum_list = "";
    var woco_list = "";
    var dienst_key_list = "";
    var dienst_naam_list = "";
    var latlng;
    var lat;
    var lng;
    while (!oRs.eof)
    {
      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;
        vakman_keys_bij_refid = vakman_keys_bij_refid + "|" + oRs("prs_vakman_key").Value;
        vakman_naam_bij_refid = vakman_naam_bij_refid + "|" + oRs("prs_vakman_naam").Value;
        start_tijd_list = start_tijd_list + "|" + oRs("start_tijd").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 vakmannen, en staan los van de opdrachten die al of niet aan hun zijn gekoppeld, maw ze hoeven nog geen opdracht te hebben
    // Dus gewoon een complete lijst van vakmannen behorende bij user_key
    // MARX#70903: DISTINCT omdat een vakman (=perslid) meerdere expertises (prs_bedrijfdienstlocatie) kan hebben, en als competentie (als parameter) niet is meegegeven (= leeg), dan wil je ze niet dubbel in de lijst tonen.

    sql = " SELECT DISTINCT p.prs_perslid_key, pf.prs_perslid_naam_friendly, COALESCE(pi.prs_perslid_inzetbaar_dag, dagnrs.prs_perslid_inzetbaar_dag), pi.prs_perslid_inzetbaar_plaats_x, pi.prs_perslid_inzetbaar_plaats_y, pi.prs_perslid_inzetbaar_radius"
        + " FROM res_deel d, prs_v_perslid_fullnames pf, prs_perslid p, prs_bedrijfdienstlocatie bdl, prs_contactpersoon cp,"
        + " prs_perslid_inzetbaar pi, (SELECT TRUNC (SYSDATE + (LEVEL - 1)) datum, TO_CHAR (SYSDATE + (LEVEL - 1), 'D') - 1 prs_perslid_inzetbaar_dag, LEVEL - 1 dagentoekomst FROM DUAL CONNECT BY LEVEL <= " + v_7dagen + ") dagnrs"
        + " WHERE d.res_deel_verwijder IS NULL"
        + " AND d.res_prs_perslid_key = p.prs_perslid_key"
        + " AND p.prs_perslid_verwijder IS NULL"
        + " AND p.prs_perslid_key = pf.prs_perslid_key"
        + " AND p.prs_perslid_key = pi.prs_perslid_key (+)"
        + " AND dagnrs.prs_perslid_inzetbaar_dag = pi.prs_perslid_inzetbaar_dag (+)"
        + " AND dagnrs.dagentoekomst = MOD(" +  v_days_future + "," + v_7dagen + ")"
        + " AND bdl.prs_perslid_key = p.prs_perslid_key"     
        + " AND p.prs_perslid_key = cp.prs_perslid_key"
        + " AND cp.prs_bedrijf_key IN"
        + "    (SELECT cp2.prs_bedrijf_key FROM prs_contactpersoon cp2"
        + "     WHERE cp2.prs_perslid_key = " + user_key
        + "     AND cp2.prs_contactpersoon_verwijder IS NULL)";

    if (v_vakman_key != -1)
    {
      sql = sql + " AND p.prs_perslid_key=" + v_vakman_key;
    }
    if (v_dienst_key != -1)
    {
      sql = sql + " AND bdl.prs_dienst_key=" + v_dienst_key;
    }
    var oRs = Oracle.Execute(sql);
    while (!oRs.eof)
    {
      vakman_ids = vakman_ids + "|" + oRs("prs_perslid_key").Value;
      prs_vakmannen = prs_vakmannen + "|" + oRs("prs_perslid_naam_friendly").Value;
      vakgebied_x = vakgebied_x + "|" + oRs("prs_perslid_inzetbaar_plaats_x").Value;
      vakgebied_y = vakgebied_y + "|" + oRs("prs_perslid_inzetbaar_plaats_y").Value;
      vakgebied_rad = vakgebied_rad + "|" + oRs("prs_perslid_inzetbaar_radius").Value;
      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_vakman_key != -1)
        {
          sql = sql + " AND prs_vakman_key=" + v_vakman_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_dienst_key != -1)
        {
          sql = sql + " AND prs_dienst_key =" + v_dienst_key;
        }
        if (v_days_future >= 0)
        {
          sql = sql + " AND dagen_toekomst=" + v_days_future;
        }
        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_vakman_key != -1)
        {
          sql = sql + " AND prs_vakman_key=" + v_vakman_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_dienst_key != -1)
        {
          sql = sql + " AND prs_dienst_key=" + v_dienst_key;
        }
        if (v_days_future >= 0)
        {
          sql = sql + " AND dagen_toekomst=" + v_days_future;
        }
        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 functies/expertises oftewel de competentie (ele, loo, sch etc)

    sql = " SELECT DISTINCT di.prs_dienst_key, di.prs_dienst_omschrijving"
        + " FROM res_deel d, prs_perslid p, prs_bedrijfdienstlocatie bdl, prs_dienst di, prs_contactpersoon cp"
        + " WHERE d.res_deel_verwijder IS NULL"
        + " AND d.res_prs_perslid_key = p.prs_perslid_key"
        + " AND p.prs_perslid_verwijder IS NULL"
        + " AND bdl.prs_perslid_key = p.prs_perslid_key"
        + " AND di.prs_dienst_key = bdl.prs_dienst_key"
        + " AND cp.prs_perslid_key = p.prs_perslid_key"
        + " AND cp.prs_contactpersoon_verwijder IS NULL"
        + " AND cp.prs_bedrijf_key IN"
        + "     (SELECT cp2.prs_bedrijf_key FROM prs_contactpersoon cp2"
        + "      WHERE cp2.prs_perslid_key =  " + user_key
        + "      AND cp2.prs_contactpersoon_verwijder IS NULL)";
    if (v_vakman_key != -1)
    {
      sql = sql + " AND p.prs_perslid_key=" + v_vakman_key;
    }
    if (v_dienst_key != -1)
    {
      sql = sql + " AND di.prs_dienst_key=" + v_dienst_key;
    }
    var oRs = Oracle.Execute(sql);
    while (!oRs.eof)
    {
      dienst_key_list = dienst_key_list + "|" + oRs("prs_dienst_key").Value;
      dienst_naam_list = dienst_naam_list + "|" + oRs("prs_dienst_omschrijving").Value;
      oRs.MoveNext();
    }
    oRs.close();

    // DISTINCT datums "vandaag", "morgen", etc etc , ongeacht de andere filters...
    sql = " SELECT TO_CHAR (TRUNC (SYSDATE + " + v_7dagen + "*FLOOR(" + v_days_future + "/" + v_7dagen + ") + (LEVEL - 1)),'dd-mm-yyyy') datum,"
        + " TO_CHAR (SYSDATE + " + v_7dagen + "*FLOOR("  + v_days_future + "/" + v_7dagen + ") + (LEVEL - 1), 'D') dagnr,"
        + " TO_CHAR (SYSDATE + " + v_7dagen + "*FLOOR("  + v_days_future + "/" + v_7dagen + ") + (LEVEL - 1), 'DAY') dagnaam,"
        + " TO_CHAR (SYSDATE + " + v_7dagen + "*FLOOR("  + v_days_future + "/" + v_7dagen + ") + (LEVEL - 1), 'D') - 1 prs_perslid_inzetbaar_dag,"
        + " " + v_7dagen + "*FLOOR(" + v_days_future + "/" + v_7dagen + ") + LEVEL - 1 dag"
        + " FROM DUAL"
        + " CONNECT BY LEVEL <= " + v_7dagen;


    var oRs = Oracle.Execute(sql);
    v_selected_datum = "";
    while (!oRs.eof)
    {
      dag_list = dag_list + "|" + oRs("dag").Value;
      dag_naam_list = dag_naam_list + "|" + oRs("dagnaam").Value;
      datum_list = datum_list + "|" + oRs("datum").Value;

      if (v_days_future >= 0 && oRs("dag").Value == v_days_future)
      {
        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);
    vakman_ids = vakman_ids.substring(1); // keys van de vakmannen
    prs_vakmannen = prs_vakmannen.substring(1); // namen van de vakmannen
    vakgebied_x = vakgebied_x.substring(1); // prs_perslid_inzetbaar_plaats_x bij de vakman
    vakgebied_y = vakgebied_y.substring(1);  //prs_perslid_inzetbaar_plaats_y bij de vakman
    vakgebied_rad = vakgebied_rad.substring(1); // prs_perslid_inzetbaar_radius bij de vakman
    vakman_keys_bij_refid = vakman_keys_bij_refid.substring(1)// Keys van de vakman die opdracht gaat uitvoeren, dus behorende bij ref_id
    vakman_naam_bij_refid = vakman_naam_bij_refid.substring(1)// Namen van de vakman die opdracht gaat uitvoeren, dus behorende bij ref_id
    start_tijd_list = start_tijd_list.substring(1);
    ref_id = ref_id.substring(1)// Opdracht-keys
    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);
    dag_naam_list = dag_naam_list.substring(1);
    datum_list = datum_list.substring(1);
    woco_list = woco_list.substring(1); // lijstje met statussen (omschrijvingen)
    dienst_key_list = dienst_key_list.substring(1); // lijst met gedefinieerde expertises (keys) bij de leverancier
    dienst_naam_list = dienst_naam_list.substring(1); // lijst met gedefinieerde expertises (namen) bij de leverancier

    __Log("lat_list: " + lat_list);
    __Log("lng_list: " + lng_list);
    __Log("geo_locations: " + geo_locations);
    __Log("geo_extra_info: " + geo_extra_info);
    __Log("vakman_ids: " + vakman_ids);
    __Log("prs_vakmannen: " + prs_vakmannen);
    __Log("vakgebied_x: " + vakgebied_x);
    __Log("vakgebied_y: " + vakgebied_y);
    __Log("vakgebied_rad: " + vakgebied_rad);
    __Log("vakman_keys_bij_refid: " + vakman_keys_bij_refid);
    __Log("vakman_naam_bij_refid: " + vakman_naam_bij_refid);
    __Log("start_tijd_list: " + start_tijd_list);
    __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("dag_naam_list: " + dag_naam_list);
    __Log("datum_list: " + datum_list);
    __Log("woco_list: " + woco_list);
    __Log("dienst_key_list: " + dienst_key_list);
    __Log("dienst_naam_list: " + dienst_naam_list);
    __Log("v_marx_greenplan: " + v_marx_greenplan);


%>

<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_vakman_ids = "<%=safe.jsstring(vakman_ids)%>".split("|");
            var v_prs_vakmannen = "<%=safe.jsstring(prs_vakmannen)%>".split("|");
            var v_vakgebied_x = "<%=safe.jsstring(vakgebied_x)%>".split("|");
            var v_vakgebied_y = "<%=safe.jsstring(vakgebied_y)%>".split("|");
            var v_vakgebied_rad = "<%=safe.jsstring(vakgebied_rad)%>".split("|");
            var v_vakman_keys_bij_refid = "<%=safe.jsstring(vakman_keys_bij_refid)%>".split("|");
            var vakman_naam_bij_refid = "<%=safe.jsstring(vakman_naam_bij_refid)%>".split("|");
            var v_start_tijd_list = "<%=safe.jsstring(start_tijd_list)%>".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("|");

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

            //Eerst maar eens de vakgebieden als die er zijn...
            //En alleen tonen als v_toon_werkgebied = 1


            <% if (v_toon_werkgebied == 1 && v_marx_greenplan == 1){%>
              var n = v_vakman_ids.length;

              if (n>0 && v_vakman_ids!="")
              {

                //er zijn vakmannen
                G_sum_lat = 0;
                G_sum_lng = 0;
                G_totaal = 0;
                for (i = 0; i < n; i++) {

                  if (v_vakgebied_x[i] != "null" && v_vakgebied_y[i] != "null" && v_vakgebied_rad[i] != "null")
                  {
                    marx_display_vakgebied(v_vakman_ids[i], parseFloat(v_vakgebied_x[i]), parseFloat(v_vakgebied_y[i]), parseInt(v_vakgebied_rad[i]));
                  }
                }

                if (v_lat_list == "")
                { // Alleen als er geen opdrachten zijn, dan doen we postinit, anders gebert dat hieronder...
                  PostInit(0);
                }
              }
            <%}%>

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

              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
              var l_prev_vakman_id = "-1";
              var l_correctie = 0;
              for (i = 0; i < n; i++) {
                //Afhankelijk van de status een kleur...
                var v_stat_code = parseInt(v_stat_code_S_list[i]);
                var l_vakman_id = v_vakman_keys_bij_refid[i];
                if (l_vakman_id != l_prev_vakman_id)
                {// Nummeren voor nieuwe vakman in de loop begint weer bij 1, dus l_correctie zetten we op i
                  l_correctie = i;
                }
                else
                {
                  //Het is dezelfde vakman, we kunnen een stippellijn tekenen...
                  //Dat doen we alleen als vakman is gekozen (anders wordt het een heel netwerk van allemaal lijnen, wordt mogelijk een onoverzichtelijk geheel.
                  <% if (v_vakman_key != -1 )%>
                  <%{%>
                    marx_draw_stippel_polyline(l_vakman_id,l_prev_lat, l_prev_lng, v_lat_list[i], v_lng_list[i]);
                  <%}%>
                }
                var l_opdracht_nr = i + 1 - l_correctie;

                var l_opdrnr_info = "<b>" + l_opdracht_nr + "</b>";
                var v_vakman_info = l_opdracht_nr + ". "  + v_start_tijd_list[i] + "u. (" + vakman_naam_bij_refid[i] + ") " + ": " + v_geo_extra_info[i] ;
                PutCircle_Marker_Text(l_vakman_id, l_opdrnr_info, v_lat_list[i], v_lng_list[i], v_vakman_info, v_ref_id[i], v_stat_code, i, n);
                l_prev_vakman_id = l_vakman_id;
                l_prev_lat = v_lat_list[i];
                l_prev_lng = v_lng_list[i];
              }
            }

            //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 PutMarkerAndText (p_lat, p_lng, p_vakman_info, p_extra_info, p_ref_id, p_stat_code, i , n) {

        if (p_ref_id)
        {
          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", () => {
                marx_show_pano(marker.getPosition(), p_ref_id);
          });

          //Tekst doen we alleen als is ingezoomed op 1 medewerker, anders wordt het onoverzichtelijk, dus:
          <% if (v_vakman_key != -1 )%>
          <%{%>
            var infowindow = new google.maps.InfoWindow({
              content: p_vakman_info,
              maxWidth: 150
            });
            infowindow.open({anchor: marker, map, shouldFocus: false});
          <%}%>
        }
      }
      function PutCircle_Marker_Text(p_vakman_key, p_vakman_info, p_lat, p_lng, p_extra_info, p_ref_id, p_stat_code, i , n) {
        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;

          marx_draw_circle_opdracht(p_vakman_key, p_ref_id, p_lat, p_lng, 50);

          PutMarkerAndText(p_lat, p_lng, p_vakman_info, p_extra_info, p_ref_id, p_stat_code, i , n);

          if (i+1==n){PostInit(n)}
        }
      }
      function PostInit(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_vakman_key, p_status_omschr, p_daysfuture, p_bedrijf_naam, p_dienst_key, p_toon_werkgebied){
          var v_url = "../../appl/marx/PlanningGoogleMap.asp?" + "vakmankey=" + p_vakman_key
                                                               + "&werkgebied=" + p_toon_werkgebied
                                                               + "&status=" + encodeURIComponent(p_status_omschr)
                                                               + "&daysfuture=" + p_daysfuture
                                                               + "&bedrijf=" + encodeURIComponent(p_bedrijf_naam)
                                                               + "&dienstkey=" + p_dienst_key;
        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){
        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);
      }

      function marx_getHexColor(p_number){
        return "#"+ ('000000' + ((123456 * p_number)>>>0).toString(16)).slice(-6)
      }

      function marx_display_vakgebied(p_vakman_key, p_lat, p_lng, p_rad){
        G_sum_lat = G_sum_lat + parseFloat(p_lat);
        G_sum_lng = G_sum_lng + parseFloat(p_lng);
        G_totaal = G_totaal + 1;
        marx_draw_circle_vakgebied(p_vakman_key, p_lat, p_lng, p_rad, 0);
      }
      function marx_create_vakgebied(p_vakman_key){
        <% if (urole == "fo") %>
        <% { %>
          v_centre_lat = map.getCenter().lat();
          v_centre_lng = map.getCenter().lng();
          marx_draw_circle_vakgebied(p_vakman_key, v_centre_lat, v_centre_lng, 5000, 1);
          marx_show_maps(<%=v_vakman_key%>, '<%=safe.jsstring(v_stat_omschr)%>' , <%=v_days_future%>, '<%=safe.jsstring(v_bedrijf_naam)%>', <%=v_dienst_key%>, <%=v_toon_werkgebied%>);
        <% } %>
      }
      function marx_delete_vakgebied(p_vakman_key, p_vakman_naam){
        <% if (urole == "fo") %>
        <% { %>
          if (window.confirm("Verwijderen <%=L("lcl_prs_work_location")%> van " + p_vakman_naam + " ?"))
          {
            marx_draw_circle_vakgebied(p_vakman_key, 0, 0, 0, 1);
            marx_show_maps(<%=v_vakman_key%>, '<%=safe.jsstring(v_stat_omschr)%>' , <%=v_days_future%>, '<%=safe.jsstring(v_bedrijf_naam)%>', <%=v_dienst_key%>, <%=v_toon_werkgebied%>);
          }
        <% } %>
      }

      // Tekent een circel voor vakman p_vakman_key met middelpunt p_center_lat, p_center_lng en straal p_rad, p_update_DB (0 of 1) zet deze gegevens ook direct in DB (0 = nee, 1=ja)
      function marx_draw_circle_vakgebied (p_vakman_key, p_center_lat, p_center_lng, p_rad, p_update_DB){
        <% if (v_marx_greenplan == 1) %>
        <%{%>
        if (p_rad != 0)
        {
          var v_coords_centre = new google.maps.LatLng(p_center_lat, p_center_lng);
          var v_color = marx_getHexColor(p_vakman_key);

          var v_circle_vakgebied = new google.maps.Circle({
            strokeColor: v_color,
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: v_color,
            fillOpacity: 0.35,
            map,
            center: v_coords_centre,
            radius: p_rad,
            <% if (urole == "fo") %>
            <% { %>
            editable: true
            <% } %>
          });
          <% if (urole == "fo") %>
          <% { %>
          if (p_update_DB == 1)
          {
            doSubmitVakgebied(p_vakman_key, <%=v_days_future%>, v_circle_vakgebied.getCenter().lat(), v_circle_vakgebied.getCenter().lng(), v_circle_vakgebied.getRadius());
          }

          v_circle_vakgebied.addListener("radius_changed", () => {
            doSubmitVakgebied(p_vakman_key, <%=v_days_future%>, v_circle_vakgebied.getCenter().lat(), v_circle_vakgebied.getCenter().lng(), v_circle_vakgebied.getRadius())
          });

          v_circle_vakgebied.addListener("center_changed", () => {
            doSubmitVakgebied(p_vakman_key, <%=v_days_future%>, v_circle_vakgebied.getCenter().lat(), v_circle_vakgebied.getCenter().lng(), v_circle_vakgebied.getRadius())
          });
          <% } %>
        }
        else
        {
          <% if (urole == "fo") %>
          <% { %>
          // Delete van circle
          if (p_update_DB == 1)
          {
            doSubmitVakgebied(p_vakman_key, <%=v_days_future%>, p_center_lat, p_center_lng , p_rad);
          }
          <% } %>
        }
      <%}%>
      }

      function marx_draw_circle_opdracht (p_vakman_key, p_ref_id, p_center_lat, p_center_lng, p_rad){

          var v_coords_centre = new google.maps.LatLng(p_center_lat, p_center_lng);
          var v_color = marx_getHexColor(p_vakman_key);

          var v_circle_opdr = new google.maps.Circle({
            strokeColor: v_color,
            strokeOpacity: 0.8,
            strokeWeight: 3,
            fillColor: v_color,
            fillOpacity: 0.35,
            map,
            center: v_coords_centre,
            radius: p_rad,
            editable: false
          });

          v_circle_opdr.addListener("click", () => {
                //marx_show_pano(v_circle_opdr.getCenter(), p_ref_id);
                marx_show_mld_opdr(p_ref_id);
          });
      }

      function marx_draw_stippel_polyline (p_vakman_key, p_x1, p_y1, p_x2, p_y2){
          var v_vertex1 = new google.maps.LatLng(p_x1, p_y1);
          var v_vertex2 = new google.maps.LatLng(p_x2, p_y2);
          var v_color = marx_getHexColor(p_vakman_key);
          // Define a symbol using SVG path notation, with an opacity of 1.
          var lineSymbol = {
            path: "M 0,-1 0,1",
            path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
            strokeOpacity: 1,
            scale: 2,
            strokeColor: v_color
          };
          // Create the polyline, passing the symbol in the 'icons' property.
          // Give the line an opacity of 0.
          // Repeat the symbol at intervals of 20 pixels to create the dashed effect.
          var line = new google.maps.Polyline({
            path: [ v_vertex1, v_vertex2],
            strokeOpacity: 0,
            icons: [
              {
                icon: lineSymbol,
                offset: "0",
                repeat: "20px",
              },
            ],
            map: map,
          });

      }


      function doSubmitVakgebied(p_vakman_key, p_days_ahead, p_x, p_y, p_rad)
      {

          var http_request = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
          var l_url = "../../appl/marx/api_prs_inzetbaar.asp"
          l_url = l_url + "?v_perslid_key=" + p_vakman_key
          l_url = l_url + "&v_days_ahead=" + p_days_ahead
          l_url = l_url + "&v_lat=" + p_x
          l_url = l_url + "&v_lng=" + p_y
          l_url = l_url + "&v_rad=" + p_rad

          http_request.open("POST", l_url, false);
          var body = "";
          http_request.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
          http_request.send(body);
      }

    </script>

  </head>
  <body id="marx_googlemaps" onload="initMap();">
    <div id="mapmenu" style="width:100%;height:30%;overflow-y:auto">
      <table style="width:100%;border:5px double black">
      <tr>
        <td colspan="19" 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(<%=v_vakman_key%>, '<%=safe.jsstring(v_stat_omschr)%>' , <%=v_days_future%>, '<%=safe.jsstring(v_bedrijf_naam)%>', <%=v_dienst_key%>, <%=v_toon_werkgebied%>)">
              <%=I("fa-fclt-refresh", { "fastyle": "fas" })%>
            </span>
            <% if (v_marx_greenplan == 1){ %>
              <% if (v_toon_werkgebied == 1){ %>
                <span style="cursor:pointer" onclick="marx_show_maps(<%=v_vakman_key%>, '<%=safe.jsstring(v_stat_omschr)%>' , <%=v_days_future%>, '<%=safe.jsstring(v_bedrijf_naam)%>', <%=v_dienst_key%>, 0)">
                &nbsp;&nbsp;&nbsp;(<%=L("lcl_prs_work_location")%>&nbsp;&nbsp;&nbsp;<i class="fas fa-eye-slash">)</i>
                </span>
              <%} %>
              <%else %>
              <%{ %>
                <span style="cursor:pointer" onclick="marx_show_maps(<%=v_vakman_key%>, '<%=safe.jsstring(v_stat_omschr)%>' , <%=v_days_future%>, '<%=safe.jsstring(v_bedrijf_naam)%>', <%=v_dienst_key%>, 1)">
                &nbsp;&nbsp;&nbsp;(<%=L("lcl_prs_work_location")%>&nbsp;&nbsp;&nbsp;<i class="fas fa-eye">)</i>
                </span>
              <%} %>
           <%} %>
          </div></div>
        </td>
      </tr>
        <tr>
          <td style="width:35%">
          <table style="width:100%">
            <tr>
            <td colspan=7 style="text-align:center;width:100%">
              <div class="card-header">
                <div class="card-header-content">
                <% if (v_days_future >= 1*v_7dagen){ %>
                  <span style="cursor:pointer" onclick="marx_show_maps(<%=v_vakman_key%>, '<%=safe.jsstring(v_stat_omschr)%>' , <%=v_days_future-v_7dagen%>, '<%=safe.jsstring(v_bedrijf_naam)%>', <%=v_dienst_key%>, <%=v_toon_werkgebied%>)">
                  <i class="fas fa-less-than"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  </span>
                <%} %>
                <i class="fas fa-calendar-day"></i>
                <span style="font-size:10.0pt"> <%=L("lcl_opdr_plandate") + v_selected_datum%></span>
                <% if (v_days_future < 3*v_7dagen){ %>
                  <span style="cursor:pointer" onclick="marx_show_maps(<%=v_vakman_key%>, '<%=safe.jsstring(v_stat_omschr)%>' , <%=v_days_future+v_7dagen%>, '<%=safe.jsstring(v_bedrijf_naam)%>', <%=v_dienst_key%>, <%=v_toon_werkgebied%>)">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fas fa-greater-than"></i>
                  </span>
                <%} %>
              </div></div>
            </td>
            </tr>
            <tr>
              <%
              var v_datum_list = datum_list.split("|");
              var v_dag_list = dag_list.split("|");
              var v_dag_naam_list = dag_naam_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].substring(0,5) + " " + L("lcl_date_today") ; break; } // Vandaag
                    case "1":   { v_dag_text = v_datum_list[i].substring(0,5) + " " + L("lcl_date_tomorrow") ; break; } // Gisteren
                    default:    { v_dag_text = v_datum_list[i].substring(0,5) + " " + v_dag_naam_list[i] ; break; } //Dagnaam
                }
              %>
              <td style="width:14%">
              <div class="card-header">
                <span style="text-align:left;font-size:7.0pt;cursor:pointer" onclick="marx_show_maps(<%=v_vakman_key%>, '<%=safe.jsstring(v_stat_omschr)%>' , <%=v_dagnr%>, '<%=safe.jsstring(v_bedrijf_naam)%>', <%=v_dienst_key%>, <%=v_toon_werkgebied%>)">
                  <% if (v_days_future >= 0 && v_dagnr == v_days_future){%><i class="fas fa-calendar-day"></i><b> <%}%>
                  <%=safe.html(v_dag_text)%>
                  <% if (v_days_future >= 0 && v_dagnr == v_days_future){%></b><%}%>
                </span>
              </div>
              </td>
              <%}%>
            </tr>
          </table>
          </td>

          <td style="width:17%">
            <!-- Expertises (ele, loo, sch) -->
            <div class="card-header"><div class="card-header-content"></i><i class="fas fa-hammer"></i>
              <span style="font-size:10.0pt"> <%=L("lcl_prs_person_function")%>
              <%
                var v_dienst_key_list = dienst_key_list.split("|");
                var v_dienst_naam_list = dienst_naam_list.split("|");
                if (v_dienst_key != -1){ %>
                <span style="cursor:pointer" onclick="marx_show_maps(<%=v_vakman_key%>, '<%=safe.jsstring(v_stat_omschr)%>', <%=v_days_future%>, '<%=safe.jsstring(v_bedrijf_naam)%>', '' , <%=v_toon_werkgebied%>)">
                &nbsp;&nbsp;&nbsp;(<%=safe.html(v_dienst_naam_list[0])%>&nbsp;&nbsp;&nbsp;<i class="fa fa-trash fa-w-12"> )</i>
              </span>
              <%} %>
              </span></div></div>
              <% for (i = 0; i < v_dienst_naam_list.length; i++) {%>
                  <span style="font-size:9.0pt;cursor:pointer" onclick="marx_show_maps(<%=v_vakman_key%>, '<%=safe.jsstring(v_stat_omschr)%>', <%=v_days_future%>, '<%=safe.jsstring(v_bedrijf_naam)%>', <%=v_dienst_key_list[i]%>, <%=v_toon_werkgebied%>)">
                    <%=safe.html(v_dienst_naam_list[i])%>
                  </span>
                <br/>
              <%}%>
            </span>
          </td>

          <td style="width:18%">
            <!-- Vakmannen -->
            <%
              var v_vakman_ids = vakman_ids.split("|");
              var v_prs_vakmannen = prs_vakmannen.split("|");
            %>
            <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_prs_person_name")%>
              <% if (v_vakman_key != -1){ %>
                <span style="cursor:pointer" onclick="marx_show_maps('', '<%=safe.jsstring(v_stat_omschr)%>' , <%=v_days_future%>, '<%=safe.jsstring(v_bedrijf_naam)%>', <%=v_dienst_key%>, <%=v_toon_werkgebied%>)">
                &nbsp;&nbsp;&nbsp;(<%=safe.html(v_prs_vakmannen[0])%>&nbsp;&nbsp;&nbsp;<i class="fa fa-trash fa-w-12"> )</i>
                </span>
              <%} %>
              </span></div></div>
              <%
                var v_ref_id = ref_id.split("|");
                var v_vakgebied_x = vakgebied_x.split("|");
                var v_vakgebied_y = vakgebied_y.split("|");
                var v_vakgebied_rad = vakgebied_rad.split("|");
                for (i = 0; i < v_prs_vakmannen.length; i++) {%>
                  <% var v_color = marx_getHexColor(v_vakman_ids[i]); %>
                  <span style="color:<%=v_color%>;font-size:9.0pt"><i class="fas fa-circle"></i></span>
                  <span style="font-size:9.0pt;cursor:pointer" onclick="marx_show_maps(<%=safe.jsstring(v_vakman_ids[i])%>, '<%=safe.jsstring(v_stat_omschr)%>' , <%=v_days_future%>, '<%=safe.jsstring(v_bedrijf_naam)%>', <%=v_dienst_key%>, <%=v_toon_werkgebied%>)"><%=safe.html(v_prs_vakmannen[i])%></span>
                  <% if (v_marx_greenplan == 1 && urole == "fo")%>
                  <%{ %>
                    <% if (v_toon_werkgebied == 1)%>
                    <%{ %>
                      <% if (v_toon_werkgebied == 1 && v_vakgebied_x[i] != "null" && v_vakgebied_y[i] != "null" && v_vakgebied_rad[i] != "null")%>
                      <%{ %>
                        <b><span style="color:<%=v_color%>;font-size:9.0pt;cursor:pointer" onclick="marx_delete_vakgebied(<%=safe.jsstring(v_vakman_ids[i])%>, '<%=safe.jsstring(v_prs_vakmannen[i])%>')">( <i class="fa fa-trash fa-w-12"></i><%/*=L("lcl_delete")*/%>&nbsp;<%=L("lcl_prs_work_location")%>)</span></b>
                      <%} %>
                      <%else %>
                      <%{ %>
                       <b><span style="color:<%=v_color%>;font-size:9.0pt;cursor:pointer" onclick="marx_create_vakgebied(<%=safe.jsstring(v_vakman_ids[i])%>)">( <i class="fas fa-plus-circle"></i> <%/*=L("lcl_add")*/%>&nbsp;<%=L("lcl_prs_work_location")%>)</span></b>
                      <%} %>
                    <%} %>
                  <%} %>
                  <br/>
                <%}%>

            </span>
          </td>
          <td style="width:15%">
            <!-- 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(<%=v_vakman_key%>, '', <%=v_days_future%>, '<%=safe.jsstring(v_bedrijf_naam)%>', <%=v_dienst_key%>, <%=v_toon_werkgebied%>)">
                &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(<%=v_vakman_key%>, '<%=safe.jsstring(v_stat_list[i])%>', <%=v_days_future%>, '<%=safe.jsstring(v_bedrijf_naam)%>', <%=v_dienst_key%>, <%=v_toon_werkgebied%>)">
                      <%=safe.html(v_stat_list[i])%>
                    </span>
                    <% 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:15%">
            <!-- 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="text-align:left;font-size:9.0pt;cursor:pointer" onclick="marx_show_maps(<%=v_vakman_key%>, '<%=safe.jsstring(v_stat_omschr)%>', <%=v_days_future%>, '' , <%=v_dienst_key%>, <%=v_toon_werkgebied%>)">
                &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(<%=v_vakman_key%>, '<%=safe.jsstring(v_stat_omschr)%>', <%=v_days_future%>, '<%=safe.jsstring(v_woco_list[i])%>', <%=v_dienst_key%>, <%=v_toon_werkgebied%>)">
                      <%=safe.html(v_woco_list[i])%>
                    </span>
                  <br/>
                <%}%>
            </span>
          </td>
        </tr>
      </table>
    </div>
    <div id="map" style="width:50%;height: 70%"></div>
    <div id="pano" style="width:50%;height: 70%"></div>
  </body>
</html>
<%}%>


<% ASPPAGE_END(); %>
