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

     File:        res_rsv_ruimte_by_placetime.asp
     Description: Alternatieve interface om (eenvoudig) een vrij reserveerbare ruimte en periode voor jezelf
                  te kunnen kiezen, typisch bedoeld voor ad hoc "teammeetings op kantoor"
                  Er is een straks ook een mobiel equivalent in pda/

                  De volgorde van de GUI is:
                  0. gegeven de activiteit
                  1. welke datum
                  2. welk gebouw
                  3. welke verdieping (optioneel)
                  4. welke ruimte
                  5. welke periode

     Parameters:  activiteit_key: verplicht de activiteit
                  res_disc:  optioneel voorgeselecteerde res_discipline van de ruimteen
                  geb_key:   optioneel voorgeselecteerd gebouw
                  floor_key: optioneel voorgeselecteerde verdieping

                  en verder wat sturings- en overrule-parameters zoals hieronder genoemd
     Context:     -

*/%>
<!-- #include file="../Shared/common.inc" -->
<!-- #include file="../Shared/resultset_table_v2.inc" -->
<!-- #include file="../res/res.inc" -->
<!-- #include file="../Shared/FlexFiles.inc" -->
<!-- #include file="../shared/iface.inc" -->
<!-- #include file="../res/res_rsv_ruimte_by_placetime.inc" -->
<%
FCLTHeader.Requires({ plugins: ["jQuery"],
                      js: ["jQuery-ui.js"]
                    });

var act_key = getQParamInt("activiteit_key");
var res_disc_key = getQParamInt("res_disc", -1);
var srtact  = -1 // getQParamInt("srtact", -1);

var res_disc_key_arr = (res_disc_key > -1 ? [res_disc_key] : []);
// is dit nodig?
var bezoeker = true;
if (act_key > 0)
{
    var sql_a = "SELECT res_srtactiviteit_key"
              + "     , res_activiteit_meteindtijd"
              + "     , " + lcl.xsqla("a.res_activiteit_omschrijving", "a.res_activiteit_key")
              + "  FROM res_activiteit a"
              + " WHERE a.res_activiteit_key = " + act_key;
    var oRs_a = Oracle.Execute(sql_a);
    if (!oRs_a.eof)
    {
      srtact = oRs_a("res_srtactiviteit_key").value;
      bezoeker = oRs_a("res_activiteit_meteindtijd").value == 1;
      var activiteit = oRs_a("res_activiteit_omschrijving").Value;
    }
    oRs_a.Close();
}

// Dit werkt alleen voor res_ruimte-catalogi, dat checken we maar gelijk even
// Er kunnen meerdere ruimtecatalogi bij een activiteit zitten. Dat onderscheid maken we pas later
// Vooralsnog is het op een grote hoop

var where_res_disc = (res_disc_key_arr.length > 0 ? " AND rad.res_discipline_key IN (" + res_disc_key_arr.join(",") + ")" : "");
var sql = "SELECT " + lcl.xsqla("rdis.ins_discipline_omschrijving", "rdis.ins_discipline_key")
        + "       , rdis.ins_discipline_key"
        + "       , ra.res_activiteit_volgnr"
        + "       , DECODE (auth.ins_discipline_key, NULL, 0, 1)     authorized_for_disc"
        + "  FROM res_discipline rdis, res_activiteitdiscipline rad, res_activiteit ra"
        + "     , (SELECT ins_discipline_key"
        + "          FROM fac_v_webgebruiker w, fac_functie f"
        + "         WHERE     w.fac_functie_key = f.fac_functie_key"
        + "               AND fac_gebruiker_alg_level_write < 9"
        + "               AND fac_functie_code IN ('WEB_RESUSE', 'WEB_RESFOF')"
        + "               AND w.prs_perslid_key = " + user_key + ") auth"
        + " WHERE rdis.ins_discipline_min_level = 3 "
        + "   AND rad.res_discipline_key = rdis.ins_discipline_key"
        + "   AND ra.res_activiteit_verwijder IS NULL"
        + "   AND rad.res_activiteit_key = ra.res_activiteit_key"
        + "   AND rad.res_activiteit_key = " + act_key
        + "   AND rdis.ins_discipline_key = auth.ins_discipline_key(+)"
        + where_res_disc
        + " ORDER BY 3"; // om het niet onvoorspelbaar te maken
oRs = Oracle.Execute(sql)
var catalogusnaam = [];
var discArr = [];
do { // Als er niet 1 geschikte catalogus bestaat willen we er hier juist met een AiAi uitknallen, dan is er nl. een verkeerde activiteit geconfigureerd.
    if (oRs("authorized_for_disc").Value == 1) { // Alleen als je er rechten op hebt
        catalogusnaam.push(oRs("ins_discipline_omschrijving").Value.toLowerCase());
        discArr.push(oRs("ins_discipline_key").Value);
    }
    oRs.MoveNext();
} while (!oRs.eof);
oRs.Close();

user.auth_required_or_abort(discArr.length);
// Als je hier komt heb je dus in ieder geval ergens WEB_RESUSE en/of WEB_RESFOF rechten op
var xfunc = user.func_enabled2("RES", { "ins_discipline_key": discArr, "checkOptimistic": true });
var ALGwritelevel = 9;
for (var func in xfunc._funcodes) {
    if (func == "WEB_RESUSE" || func == "WEB_RESFOF") {
        ALGwritelevel = Math.min(ALGwritelevel, xfunc._funcodes[func].ALGwritelevel);
    }
}

var disc_keys = getQParamIntArray("discs", []);
var geb_key   = getQParamInt("geb_key", -1);
var floor_key = getQParamInt("floor_key", -1);
var local_tz  = S("fac_server_timezone");
if (geb_key > -1) {
    local_tz = res.getTimezoneBy(geb_key, "G");
} else if (floor_key > -1) {
    local_tz = res.getTimezoneBy(floor_key, "V");
}

var fac_usrrap_key       = getQParamInt("usrrap_key", -1);              // wordt doorgegeven naar het infobord

var startpage   = getQParam("startpage", "");
var daylimit    = getQParamInt("daylimit", 17);           // na daylimit kun je voor de eerste dag niet meer reserveren, default 12:00, werkt niet icm offset
var local_now   = convertToLocalTime(new Date(), local_tz);
var afternoon   = local_now.getHours() >= daylimit;
var dateoffset  = getQParamInt("offset", afternoon ? 1 : 0);
var datelimit   = getQParamInt("limit", 7);               // aantal te kiezen dagen tov offset
var selectmode  = getQParamInt("selectmode", 0);          // kiezen van het item: 0=automatisch bepalen (tekening anders lijst), 1=lijst, 2=2dtekening indien aanwezig, 3=3dtekening indien aanwezig
var fotos       = getQParamInt("fotos", 1);               // for selectmode 1: show photo or not
var floorselect = getQParamInt("floorselect", 1);         // na gebouw ook de verdiepingen laten kiezen
var sametab     = getQParamInt("sametab", 1);             // alles in 1 tab of tabs na elkaar?

var resdate     = getQParamDate("date", null);            // de (in stap 2 gekozen) datum

var minimumbeschikbaarheid = getQParamFloat("minbes", 1); // minder dan zoveel uur beschikbaar beschouwen we onbeschikbaar
var onlyfree        = getQParamInt("onlyfree", 0);        // moeten bezette ruimtes wel (0) of niet (1) (onklikbaar) getoond worden in de lijst

var thema_key       = getQParamInt("thema_key", 12);      // Voor ruimtekleuren (noot: niet zeker of die niet 13 als default moet zijn)
// var themaI_key      = getQParamInt("themai_key", 13);     // Voor objectkleurenen ("installaties")
// var bordlabel_key   = getQParamInt("bordlabel_key", 13);  // Voor objectlabels
var label_key       = getQParamInt("label_key", -1);      // Voor afwijkende 2D labels. label_key=-1 werkt zo dat je 3D de popup borden krijgt en 2D de labels cf bordlabel_key

var zoomScale = getQParamFloat("zoomScale", -1);
var zoomDWGX  = getQParamFloat("zoomDWGX", null);
var zoomDWGY  = getQParamFloat("zoomDWGY", null);

var iconmenu_width  = Math.floor(100/S("iconcolumns"));
var iconmenu_height = Math.floor(100/S("iconcolumns")*0.6);

// voorlopig
var werkdagen = true;

// ik twijfel of geb_key en floor_key hier in moeten, voor de zekerheid nu ff 2 versies dan maar
var transitParam1 = buildTransitParam(['activiteit_key', 'daylimit', 'offset', 'limit', 'selectmode', 'res_disc', 'floorselect', 'date', 'minbes', 'onlyfree', 'sametab', 'thema_key', 'label_key', 'fotos', 'zoomScale', 'zoomDWGX', 'zoomDWGY', 'discs'],
                                      { 'res_disc': discArr }); // discArr is specifieker dan res_disc
var transitParam2 = buildTransitParam(['activiteit_key', 'daylimit', 'offset', 'limit', 'selectmode', 'res_disc', 'floorselect', 'date', 'geb_key', 'floor_key', 'minbes', 'onlyfree', 'sametab', 'thema_key', 'label_key', 'fotos', 'zoomScale', 'zoomDWGX', 'zoomDWGY', 'discs']);
if (hasQParam("from_menu_key")) {
    if (floor_key > 0) {
        startpage = "wpl";
    } else if (resdate) {
        startpage = "flr";
    } else if (geb_key > 0) {
        startpage = "day";
    } else {
        startpage = "bld";
    }
}
transitParam1 += "&startpage=" + startpage;
transitParam2 += "&startpage=" + startpage;
%>
<html>
  <head>
<%  FCLTHeader.Generate(); %>
    <style>
        div.iconmenuh { height: 500px; }
    </style>
    <script>

        function reserveerresruimte (row)
        {
            var l_rr_key = row.getAttribute("ROWKEY");
            var url = "../pda/reserveringen.asp?qrc=1&modal=1&res_ruimte_key=" + l_rr_key + "&res_van=" + <%= resdate?resdate.getTime():0 %>;
            FcltMgr.openModalDetail(url, "", { alwaysCallback: true, callback: FcltMgr.reload, width: 650 });
        }

        function continue_with_bld (p_bld_key, p_flr_key, p_samewindow)
        {
            var url_param = "?geb_key="+p_bld_key+"&floor_key="+p_flr_key+"<%=transitParam1%>";
            if (p_samewindow || <%=sametab==1?1:0%>)
                window.location.href = "../res/res_rsv_ruimte_by_placetime.asp" + url_param;
            else
                FcltMgr.openDetail("appl/res/res_rsv_ruimte_by_placetime.asp" + url_param, '<%=safe.jsstring(L("lcl_res_byplace"))%>');
        }

        function continue_with_discdate(p_disc_key, p_date)
        {
            var url_param = "?date="+p_date.getTime()+"&res_disc="+p_disc_key+"<%=transitParam2%>";
            if (<%=sametab==1?1:0%>)
                window.location.href = "../res/res_rsv_ruimte_by_placetime.asp" + url_param;
            else
                FcltMgr.openDetail("appl/res/res_rsv_ruimte_by_placetime.asp" + url_param, '<%=safe.jsstring(L("lcl_res_byplace_select"))%>');
        }

        // Next part unchanged from mld_fe_menu
        // flex-box fix for Internet Explorer
        var $elem = "";
        var timeout_timer = false;
        function resizeWindow(event)
        {
            if ($elem != "")
            {
                $elem.change();
            }
        }
        function resizeIconContainer(event) {
            var $this = $(this);    // h3 accordion header
            var $container = $("div.res-menu-flex", "#" + $this.attr("aria-controls")); // div controlled by $this
            // resize the container if necessary
            function _resizeIconContainer() {
                $container.css("width", "");
                var $area = $("#" + $this.attr("aria-controls")); // area controlled by $this
                var $accordion = $("div#accordion"); // accordion div
                var paddingLeft = $area.css("padding-left"); // padding left of controlled area div
                var paddingRight = $area.css("padding-right"); // padding right of controlled area div
                $elem = $this;
                // fix only if the icon container width is wider then the accordion width
                if ($container.width() > $accordion.width())
                {
                    $container.css("width", "calc(" + $accordion.innerWidth() + "px" + " - " + paddingLeft + " - " + paddingRight + ")");
                }
                timeout_timer = false;
            }
            if (timeout_timer) { clearTimeout(timeout_timer); }
            timeout_timer = setTimeout(_resizeIconContainer, 100);
        }

        function doFilter(event)
        {
            var valThis = $autofilter.val().toLowerCase();
            if (valThis != window.lastFilter)
            {
                delayed(500, _doFilter);
            }
            function _doFilter()
            {
                var valThis = $autofilter.val().toLowerCase();
                $("div.iconmenu").each(function()
                    {
                        var gloc = $(this).data("loc").toLowerCase();
                        var gbld = $(this).data("bld").toLowerCase();
                        var gsrt = $(this).data("srt").toLowerCase();
                        var found = (valThis.trim().length == 0 || gloc.indexOf(valThis) > -1
                                                                || gbld.indexOf(valThis) > -1
                                                                || gsrt.indexOf(valThis) > -1);
                        $(this).toggle(found);
                    });
                FcltMgr.resized();
                window.lastFilter = valThis;
            }
        }

         $(function ()
         {
            // Voeg aan de header een SAYT filterveld toe.
            var $autofilterAfter = $(".fcltframeheader").find("#iframerextratitle");
            $autofilter = $("<input id='autofilter' type='text' placeholder='"+L("lcl_autofilter")+"'>");
            $autofilterAfter.after($autofilter);
            // Voeg de actie op het filterveld toe.
            $autofilter.click(function (e) { e.stopPropagation() })
                            .keyup(function (e) {
                                if (e.which == 27) {
                                    $(".floating #autofilter").val("");
                                }
                                doFilter();
                            });

            // Noot: vrijwel identieke code te vinden in bes_fe_menu.asp
            var accord = $('#accordion');
            var nnheads = accord.children("h3").length; // Voordat accordion de DOM heeft aangepast

            accord.accordion({collapsible: true,
                              active: false,
                              heightStyle: "content",
                              activate: function () { FcltMgr.resized(); }
                              });

            // flex-box fix for Internet Explorer
            $("h3[aria-controls]").on("click change", resizeIconContainer);
            $(window).on("resize", resizeWindow);
            setTimeout(function() { $("h3[aria-controls]").click().click(); });

            if (nnheads == 1) // Dan direct openklappen
                accord.accordion({ active: 0 });
         });

         function go_back(p, params)
         {
            var samewindow = (<%=sametab==1?1:0%> == 1);
            switch (p)
            {
                case "bld": FcltMgr.closeDetail();
                            break;
                case "day": if (samewindow)
                                continue_with_bld(-1, -1, samewindow);
                            else
                                FcltMgr.closeDetail();
                            break;
                case "flr": if (samewindow)
                                continue_with_discdate(null, params.disckey);
                            else
                                FcltMgr.closeDetail();
                            break;
                case "wpl": var datum = (params.resdate?params.resdate:null);
                            datum = (params.flrkey == -1 ? null : datum);
                            if (samewindow)
                                continue_with_date_bld(datum, params.disckey, -1);
                            else
                                FcltMgr.closeDetail();
                            break;
            }
         }

    </script>
  </head>

<body id="iconbody">
<%
    function catalogus_header(stap, params)
    {
        var k = "";
        if (params.keys)
        {
            k = "'gebkey':" + params.keys.gebkey + ","
              + "'flrkey':" + params.keys.flrkey + ","
              + "'disckey':"+ params.keys.disckey;
        }
        var titel = "";
        switch (stap)
        {
            case "bld": titel = L("lcl_beschikbaarheid_by_bld").format(safe.html(params.act));
                        break;
            case "day": titel = L("lcl_beschikbaarheid_by_day").format(safe.html(params.bld),safe.html(params.disc));
                        break;
            case "flr": titel = L("lcl_beschikbaarheid_by_flr").format(safe.html(params.disc),safe.html(params.bld),toDateString(params.resdate).toLowerCase());
                        break;
        }
        Response.write("<h3><a>" + titel + "</a></h3/>");
        Response.write("<div style='display:none;'>");
        if (stap != startpage) { // !hasFromMenuKey
            Response.write("<span class=\"overlaying-back-button\" title=\"" + L("lcl_back") + "\" onclick=\"go_back('" + stap + "',{" +k+ "});\">" + I("fa-angle-left") + "</span>");
        }
        Response.write("<table width='100%'><tr><td><div class='res-menu-flex' id='iconcontainer'>");
    }

    // 1. KIES GEBOUW INDIEN NOG NIET BEKEND
    // We willen daarbij een indicatie van de mogelijkheden, zijnde het aantal + soort ruimte die voor deze activiteit zijn
    if (geb_key == -1)
    {
        IFRAMER_HEADER(startpage, [], {id: 1}); // De titel (startpage) wordt later overschreven!
        %>
        <div id='accordion'>
        <%

        var sql = rrpt.mijn_verdiepingen_met_resruimten_sql(act_key, -1, ALGwritelevel, dateoffset);
        var oRs = Oracle.Execute(sql)
        var pos = 0;
        // We hebben nu een cursor met alle gebouwen en daarbinnen de ruimtecategorieen en hun aantallen
        // Die presenteren we per gebouw

        while (!oRs.Eof)
        {
            if (pos == 0)
            {   // Catalogus-header; niet noodzakelijk als het er maar eentje is, maar hoort ook dan bij de accordeon
                catalogus_header("bld", {act: activiteit});
            }
            var gebkey = oRs("alg_gebouw_key").Value;
            var alglocatieplaats = oRs("alg_locatie_plaats").Value;
            var alggebouwnaam = oRs("alg_gebouw_naam").Value;
            var alg_gebouw_image = oRs("alg_gebouw_image").Value;
            var aanwezigeresruimtesoorten = "";
            var totaalaantal = 0;
            // Doorloop dit gebouw voor de verschillende categorieen
            while (!oRs.Eof) {
                if (oRs("alg_gebouw_key").Value == gebkey) {
                    aanwezigeresruimtesoorten += oRs("aantal").Value +" x "+ oRs("ins_discipline_omschrijving").Value+"\n";
                    totaalaantal += oRs("aantal").Value;
                    oRs.MoveNext();
                } else {
                    break;
                }
            }
    %>
    <div class='iconmenu'
        title='<%=safe.htmlattr(aanwezigeresruimtesoorten)%>'
        data-loc='<%=safe.htmlattr(alglocatieplaats)%>'
        data-bld='<%=safe.htmlattr(alggebouwnaam)%>'
        data-srt='<%=safe.htmlattr(aanwezigeresruimtesoorten)%>'
        onclick='continue_with_bld(<%=gebkey%>, -1);'>
      <div class="iconitem">
        <div class="iconimg iconbld">
          <%=SYMBOL(alg_gebouw_image, { "module": "ALGPHG", "key": gebkey, "defVal": "fa-building", "alt": L("alg_gebouw") })%>
        </div>
        <div class="res-iconlabel">
          <%=safe.html((alglocatieplaats?alglocatieplaats+"-" :"")+alggebouwnaam) +"<br>"+safe.html(aanwezigeresruimtesoorten)%>
        </div>
      </div>
    </div>
    <%
            pos ++;
            if (oRs.Eof)
            {
    %>
      </div></td></tr></table></div>
    <%
            }
        }
        oRs.Close();
    %>
        </div>
    <%
        if (pos == 1)  // Er is maar 1 gebouw om uit te kiezen. Dat is makkelijk!
        {
            %><script>continue_with_bld(<%=gebkey%>, -1, true);</script><%
        }
    } // geb_key



    // 2. KIES DATUM INDIEN NOG NIET BEKEND
    if (geb_key > 0 && resdate == null)
    {
    %>
    <div id='accordion'>
    <%
    // Dagbezetting (som van de gereserveerde uren) van iedere dag vanaf vandaag+offset t/m vandaag+limit, inclusief de lege dagen
    // Als p_resdate is gegeven, dan wordt uiteindelijk alleen het record voor die dag daaruit geselecteerd.

    sql = "SELECT g.alg_gebouw_werkdagen, alg_gebouw_naam "
            + "  FROM alg_gebouw g"
            + " WHERE g.alg_gebouw_key = " + geb_key;
    oRs = Oracle.Execute(sql)
    var werkdagen = oRs("alg_gebouw_werkdagen").Value;
    var gebouw_naam = oRs("alg_gebouw_naam").Value;  // theoretisch kunnen dit er meerdere zijn, dan nog aanpassen
    oRs.close();

    // Niet alle categorien komen in elk gebouw voor. Wat hebben we hier allemaal?
    sql = rrpt.aantal_resruimten_in_gebouw_sql(res_disc_key_arr, act_key, geb_key, -1, resdate);
    oRs = Oracle.Execute(sql)
    var gebdiscArr =[];
    while (!oRs.Eof)
    {
        if (oRs("aantal").value > 0)
        {
            var deze= {};
            deze.key = oRs("ins_discipline_key").Value;
            deze.naam = oRs("ins_discipline_omschrijving").Value;
            deze.aantal = oRs("aantal").Value;
            gebdiscArr.push(deze);
        }
        oRs.moveNext();
    }
    oRs.close();

    cpos =0;
    for (disc in gebdiscArr)
    {
        catalogus_header("day", {bld: gebouw_naam, disc: gebdiscArr[cpos].naam});
        sql = rrpt.dagbezetting_resruimten_in_aanweziggebouw_sql(act_key, geb_key, -1, dateoffset, datelimit, null, gebdiscArr[cpos].key);
        var oRs = Oracle.Execute(sql)

        var pos = 0;
        while (!oRs.Eof)
        {
            var reserveerbaredag = true;
            var aantalruimten = oRs("ruimten").Value;
            // TODO itt werkplekken kun je hier door bv koppelzalen verkeerde getallen krijgen TODO
            var beschikbaarheid = ((1 - (oRs("gevuld").Value/aantalruimten))*100).toFixed(0); // 0..100
            var bcls = rrpt.bezettings_class_ruimte(oRs("gevuld").value, aantalruimten, minimumbeschikbaarheid);
            if (oRs("vrijedag").value > 0)
            {
                bcls += " vrijedag";
                reserveerbaredag = false;
            }
            if (oRs("weekdag").value == 1 || oRs("weekdag").value == 7)
            {
                if (werkdagen)
                {
                    bcls += " vrijweekend";
                    reserveerbaredag = false;
                }
                else
                {
                    bcls += " werkweekend";
                }
            }
            var clickaction = (reserveerbaredag ? "onclick='continue_with_discdate("+gebdiscArr[cpos].key+",new Date("+ new Date(oRs("datum").Value).getTime()+"));'" : "");

          %>
            <div class='iconmenu'
                  style='width:14%; height: <%=100/(datelimit/7)%>vw;' <%=clickaction%>>
               <div class="iconitem">
                   <div class="icondate iconimg <%=bcls%>"><%=toDateString(oRs("datum").Value, false, true) %></div>
                   <div class="res-iconlabel" style='background-color: <%=safe.html("#FEFEFE")%>; color: <%=safe.html("#333")%>;'><%=safe.html(aantalruimten) +" "+ safe.html(gebdiscArr[cpos].naam)%><br><%=L("lcl_mobile_resbeschikbaar")+" "+safe.html("" +" "+beschikbaarheid +"%") %></div>
               </div>
            </div>
        <%
            oRs.MoveNext();
            pos ++;
        }
        oRs.Close();
        %>
              </div></td></tr></table></div>
    <%
        cpos ++;
        }%>
    </div>
    <%
    } // resdate


    // 3. KIES VERDIEPING INDIEN GEWENST EN NOG NIET BEKEND
    if (resdate && floorselect == 1 && geb_key > -1 && floor_key == -1)
    {
        %>
        <div id='accordion'>
        <%
        var sql = rrpt.mijn_verdiepingen_met_resruimten_sql(res_disc_key_arr, act_key, geb_key, ALGwritelevel, dateoffset, resdate);
        var oRs = Oracle.Execute(sql)
        var pos = 0;

        // Nu per verdieping doorlopen
        while (!oRs.Eof)
        {
            var gebkey = oRs("alg_gebouw_key").Value; // dan weet ik hem nog na de close
            var flrkey = oRs("alg_verdieping_key").Value; // dan weet ik hem nog na de close
            if (pos == 0)
            {   // Catalogus-header; niet noodzakelijk als het er maar eentje is, maar hoort ook dan bij de accordeon
                catalogus_header( "flr"
                                , { bld: oRs("alg_gebouw_naam").value
                                  , disc: catalogusnaam[0]
                                  , resdate: resdate
                                  , keys: {'gebkey': gebkey, 'flrkey': flrkey, 'disckey': discArr[0]}
                                  });

            }
            var aantalitems = oRs("aantal").Value;
            var flr_icon = '<div class="flooravatar">'+safe.html(oRs("alg_verdieping_code").Value)+'</div>';

            var sql2 = rrpt.dagbezetting_resruimten_in_gebouw_sql(-1, act_key, gebkey, flrkey, dateoffset, datelimit, resdate);
            var oRs2 = Oracle.Execute(sql2)
            var beschikbaarheid = ((1 - (oRs2("gevuld").Value/aantalitems))*100); // 0..100
            var fcls = rrpt.bezettings_class_ruimte(oRs2("gevuld").value, aantalitems, minimumbeschikbaarheid);
    %>
    <div class='iconmenu'
          title='<%=safe.htmlattr(oRs("alg_locatie_plaats").Value+"-"+oRs("alg_gebouw_naam").value)%>'
          onclick='continue_with_bld(<%=oRs("alg_gebouw_key").Value%>,<%=oRs("alg_verdieping_key").Value%>);'>
       <div class="iconitem">
           <div class="iconimg iconbld <%=fcls%>"><%=flr_icon%></div>
           <div class="res-iconlabel" ><%=safe.html(oRs("alg_verdieping_omschrijving").value) +"<br>"+safe.html(aantalitems +" "+catalogusnaam[0]) %><br><%=L("lcl_mobile_resbeschikbaar")+" "+safe.html(beschikbaarheid.toFixed(0) +"%") %></div>
       </div>
    </div>
    <%
            oRs2.Close();
            pos ++;
            oRs.MoveNext();
            if (oRs.Eof)
            {
    %>
      </div></td></tr></table></div>
    <%
            }
        }
        oRs.Close();
    %>
        </div>
    <%
        if (pos == 1)  // Er is maar 1 verdieping om uit te kiezen. Dat is makkelijk!
        {
            %><script>continue_with_bld(<%=gebkey%>, <%=flrkey%>, true);</script><%
        }
    } // floor_key


    // 4. ALS JE HIER BENT, WEET JE EEN GEBOUW, DESGEWENST ZELFS EEN VERDIEPING, EN EEN DATUM(B)
    // Dan willen we verder concrete van/tot-tijden
    if (resdate && geb_key > 0 && (floorselect == 0 || (floorselect == 1 && floor_key > -1)))
    {
        if (selectmode != 1)
        {
            // als er een plattegrond bestaat van de verdiepingen van het gebouw, dan verder naar plattegrond
            var sql = "SELECT COUNT (*) tekeningen"
                    + "  FROM cad_tekening t, alg_v_aanwezigverdieping v "
                    + " WHERE     t.alg_verdieping_key = v.alg_verdieping_key "
                    + "       AND cad_tekening_verwijder IS NULL "
                    + (floor_key > -1
                        ? " AND v.alg_verdieping_key = " + floor_key
                        : " AND v.alg_gebouw_key = " + geb_key
                      );
            var oRs = Oracle.Execute(sql)
            var aantaltekeningen = oRs("tekeningen").Value;
            oRs.Close();
        }

        if (selectmode != 1 && aantaltekeningen > 0)
        {
            // Er zijn tekeningen en er wordt niet naar een lijst geforceerd

            // Wanneer er een disc_key wordt meegegeven worden alleen de juiste verdiepingen getoond. Echter zijn er dan ook nog impliciete
            // afhankelijkheden die we daar moeten aanpassen denk ik. Het thema moet dan bv een objectthema zijn, daar moet nog wat verbeterd worden.
            // Wat moeten we hier dan nog doen?

            // LET OP: hieronder moeten de views achter themaI en labelI een kolom FCLT_F_DATUM bevatten!
            %>
            <script>
                 window.location.href = "../cad/infobord.asp?discs=<%=disc_keys%>&geb_key=<%=geb_key%>&floor_key=<%=floor_key%>"
                                      + "&thema_key=<%=thema_key%>&label_key=<%=label_key%>"
                                      + "&datumfilter=<%=resdate.getTime()%>"
                                      + "&resruimtefilter=1"
                                      + "&zoomScale=<%=zoomScale%>&zoomDWGX=<%=zoomDWGX%>&zoomDWGY=<%=zoomDWGY%>"
                                      + "&fac_usrrap_key=<%=fac_usrrap_key%>"
                                      + "<%=(selectmode != 0 ? '&showmode='+selectmode : "")%>";
            </script>
            <%
        }
        else
        {
            // Er zijn geen tekeningen of er wordt naar een lijst geforceerd
            sql = "SELECT alg_gebouw_naam"
                + "  FROM alg_v_aanweziggebouw"
                + " WHERE alg_gebouw_key = " + geb_key;
            oRs = Oracle.Execute(sql)
            var gebouw_naam = oRs("alg_gebouw_naam").Value;
            oRs.Close();

            function fnIntervallen(oRs)
            {
                return oRs("bezet").value == 0 ? L("lcl_mobile_res_ruimtevrij") : L("lcl_res_intervalbezet");
            }

            function fnResRuimtePhoto(oRs)
            {
                var icon = "fa-map-marker";
                if (oRs.Fields("res_ruimte_image").Value != null)
                {
                  icon = oRs.Fields("res_ruimte_image").Value;
                  if (!icon.match(/^http/))
                      icon = safe.htmlattr(S("res_image_path") + "deel/" + icon);
                }

                if (icon.match(/^fa-/))
                {
                    return I(icon + " fa-2x");
                }
                else
                {
                    return '<img loading="lazy" alt="' + safe.htmlattr(L("res_ruimte_key")) + '" src="' + safe.htmlattr(icon) + '">';
                }
            }

            function fnResRuimteIcon(oRs)
            {
                // een gekleurde indicatie
                var lcls = rrpt.bezettings_class_ruimte(oRs("bezet").value, 1, minimumbeschikbaarheid); // gewoon bezet of niet, dus capaciteit op 1 (er mag maar 1 reservering staan)
                return '<span class="rticon {0}">'.format(lcls) + I("fa-circle fa-2x", {fastyle: "fas"}) + '</span>';
            }

            sql = rrpt.res_ruimte_bezetting_op_dag_sql(res_disc_key_arr, act_key, geb_key, floor_key, ALGwritelevel, resdate, onlyfree);

            var buttons = [{ icon: "fa-arrow-left", title: L("lcl_back")
                           , action: "go_back('wpl', {'resdate': new Date("+resdate.getTime()+"),'disckey':"+res_disc_key_arr[0]+",'flrkey':-1})"
                           }];
            var rst = new ResultsetTable({ keyColumn: "res_ruimte_key",
                                           ID: "resrmtable",
                                           sql: sql,
                                           title: L("lcl_resdeel_beschikbaar_op").format(gebouw_naam, toDateString(resdate)),
                                           buttons: buttons,
                                           emptySetString: L("lcl_res_niets_beschikbaar")
                                       });
            if (fotos)
                rst.addColumn(new Column({caption: "", content: fnResRuimtePhoto, colName: "fnResRuimtePhoto", classList: "placephoto"}));
            rst.addColumn(new Column({caption: L("lcl_floor"), content: "alg_verdieping_omschrijving", nowrap: true}));
            rst.addColumn(new Column({caption: L("res_ruimte_nr"), content: "res_ruimte_nr", nowrap: true}));
            rst.addColumn(new Column({caption: L("res_ruimte_omschrijving"), content: "res_ruimte_omschrijving", nowrap: true}));

            rst.addColumn(new Column({caption: "", content: fnResRuimteIcon, colName: "fnResRuimteIcon", classList: "placeicon", align: "center" }));
            rst.addColumn(new Column({caption: L("lcl_res_interval_opties"), content: fnIntervallen, nowrap: true}));

            rst.addAction({ action: "reserveerresruimte", caption: "", isDefault: true });
            var cnt = rst.processResultset();

        }
    }
%>
</body>
</html>
    <script>
        $(function ()
            {   // Naam van de header hier aanpassen. Anders wordt deze overschreven door de IFRAMER zelf.
                var tabtitle = FcltMgr.getTitle();
                FcltMgr.setFrameTitle(tabtitle, {id:1});
            });
    </script>
<% ASPPAGE_END(); %>
