/*
     $Revision$
     $Id$

     File:               modal_kenmerken.js
     Description:        Javascript functies om kenmerken in een modal scherm te tonen
                         Het modal scherm met de kenmerken wordt getoond door de functie showKenmerkModal(key, url, title) aan te roepen.
                         Voor het submitten van een scherm die gebruik maakt van dit modal scherm moet submitten met de functie doSubmitWithKenmerken(key)
     Parameters:         De functies showKenmerkModal(key, url, title) verwacht de volgende parameters
                         key                  Key (Discipline / objectsoort/enz) die zijn eigen groep met kenmerken heeft
                         url                  Url naar kenmerken bestand voor het tonen van de module specifieke kenmeken
                         titel                Parameters die de weergave van het modal scherm bepalen
                         De functie doSubmitWithKenmerken(key) verwacht alleen de bovenstaande parameter key
     Globals:
     Context:            Wordt gebruikt door de XXX_search.asp (overzicht) bestanden
     Note:
*/

// Voeg dkenmmodal divs toe aan de <body>
$(function()
{
  var content = '<div id="dkenmmodal2" style="display:none"></div>'
              + '<div id="dkenmmodal"></div>' // div "dkenmmodal" wordt buiten het formulier (<form>) gebracht door jquery

  $("form").append(content);
});

(function($)
  { // Om in FireFox de gewijzigde waarden in de velden over te nemen
    // moet deze functie gebruikt worden in plaats van html().
    // Anders krijgt men de velden terug zoals die gezet zijn bij het maken van het scherm.
    var oldHTML = $.fn.html;
    $.fn.formhtml = function()
      {
        if (arguments.length) return oldHTML.apply(this,arguments);
        $("input,button", this).each(function()
        {
            this.setAttribute('value',this.value);
        });
        $("textarea", this).each(function()
        {
            this.innerHTML = this.value;
        });
        $("input:radio,input:checkbox", this).each(function()
        {
            if (this.checked)
                this.setAttribute('checked', 'checked');
            else
                this.removeAttribute('checked');
        });
        $("option", this).each(function()
        {
            if (this.selected)
                this.setAttribute('selected', 'selected');
            else
                this.removeAttribute('selected');
        });
        return oldHTML.apply(this);
      };
      // optional to override real .html() if you want
      // $.fn.html = $.fn.formhtml;
  }
)(jQuery);


// Array voor het opslaan van de html van de kenmerken van de verschillende activiteiten
var kenmerk_html;
var kenmerk_waarden = new Array();
//var script_html = new Array();
var lasturl = "";
var sameurl = false;

// Deze functie uitvoeren als op de zoek button wordt geklikt
function doSubmitWithKenmerken()
{
  // Ingevulde waarden van de kenmerken bewaren.
  $("div#dkenmmodal2").formhtml(kenmerk_html);
  var $dk2 = $("div#dkenmmodal2"); // shortcut

  var aantal_kenm = $("div#dkenmmodal2 #k_all").val();

  // Voeg handmatig de nog niet geinitialiseerde multiSuggests toe
  for (var n = 1; n <= aantal_kenm; n++)
  {
    if ($("#k" + n + "t").val() == "S")                                                 // if (isSuggest)
    {
      if ($("#k" + n + "val").val() && $("#k" + n + "val").val().split(",").length > 1) // if (holds multiple values)
      {
        if ($("#execDonek"+n).val() == 0)                                               // if (has not been initialized)
        {
          var storedVal = $("#k" + n + "val").val().split(",");
          $("#k" + n + "val").remove();
          for (var i = 0; i < storedVal.length; i++)
          {
            $("<input>").attr({
                           type:  "hidden",
                           id:    "k"+n+"val",
                           name:  "k"+n+"val",
                           value: storedVal[i]
                               }).appendTo($dk2);
          }
        }
        else if ($("#execDonek"+n).val() == 1) // Remove the input.val field because we have a select#knval.field
          $("input#k" + n + "val").remove();
      }
    }
  }

  // Strip alle velden er uit die niets doen. Voorkomt extreem lange querystring
  var $dk2 = $("div#dkenmmodal2"); // shortcut
  /* Global kenmerk_waarden */
  for (var m = 0; m < kenmerk_waarden.length; m++)
  {
    if (kenmerk_waarden[m].op == "IS NOT NULL" || kenmerk_waarden[m].op == "IS NULL")
        continue; // blijven
    if (kenmerk_waarden[m].val && kenmerk_waarden[m].typ != "R" && kenmerk_waarden[m].typ != "S")
        continue;
    if (kenmerk_waarden[m].val && kenmerk_waarden[m].val != "-1" && kenmerk_waarden[m].val != "" && (kenmerk_waarden[m].typ == "R" || kenmerk_waarden[m].typ == "S"))
        continue;
    // Schrappen
    $dk2.find("#k" + (m+1) + "val").remove();
    $dk2.find("#k" + (m+1) + "key").remove();
    $dk2.find("#k" + (m+1) + "t").remove();
    $dk2.find("#k" + (m+1) + "p").remove()
    $dk2.find("#k" + (m+1) + "d").remove()
    $dk2.find("#k" + (m+1) + "count").remove();
    $dk2.find("#k" + (m+1) + "omsch").remove();
    $dk2.find("#ko" + (m+1)).remove();
    $dk2.find("#Suggestk" + (m+1) + "_show").remove();
    $dk2.find("#execDonek" + (m+1)).remove();
    $dk2.find("#has_k" + (m+1) + "val").remove();
  }
  document.forms.u2.submit();
  $('div#dkenmmodal2').formhtml("").hide();
}

function kenmerkValues(n)
{
  this.key  = $("#k" + n + "key").val();
  this.typ  = $("#k" + n + "t").val();
  this.op   = $("#ko" + n).val();
  this.id   = n;

  if ((this.typ == "N" || this.typ == "V") && $("#has_k" + n + "val").val() == 1)
  { // Het is een checkbox
    this.checkbox = true;
    this.val      = $("#k" + n + "val").prop("checked") ? 1 : 0;
  }
  else if (this.typ == "S")
  {
    var $multiSuggest = $("select#Suggestk" + n + "_show");
    if ($multiSuggest.length)
    {
      if ($multiSuggest.val().length > 1)
      {
          this.val = $multiSuggest.val();
          this.sug = $multiSuggest.val();
      }
      else if ($multiSuggest.val().length == 1)
      {
          this.val = $multiSuggest.val()[0];
          this.sug = $multiSuggest.find("option:selected").text();
      }
    }
    else if ($("#k" + n + "val").val() != "" && $("#k" + n + "val").val() != -1)
    {
      this.val = $("#k" + n + "val").val();
      this.sug = $("#Suggestk" + n + "_show").val();
    }
  }
  else
  {
    this.val = $("#k" + n + "val").val();
    if (!this.val || (this.val == -1 && (this.typ == "r" || this.typ == "R")))
      delete this.val;
  }
}

function getAdvFlexValues() // Voor extern gebruik zoals in FcltMgr.saveTab();
{
  if (typeof kenmerk_waarden === "undefined" || kenmerk_waarden == null)
      return;

  var flexValues = {};
  var save_k = {};
  var this_k;

  for (var n = 0; n < kenmerk_waarden.length; n++)
  {
    this_k = kenmerk_waarden[n];
    save_k = { "op": this_k.op };

    if (this_k.op == "IS NOT NULL" || this_k.op == "IS NULL")
    {
        // Alleen operator opslaan.
    }
    else if ((this_k.val && this_k.typ != "R" && this_k.typ != "S") ||
             (this_k.val && this_k.val != "-1" && this_k.val != "" && (this_k.typ == "R" || this_k.typ == "S")))
    {
        save_k.typ = this_k.typ;
        save_k.val = this_k.val;
        if (this_k.typ == "S")
            save_k.sug = this_k.sug;
    }
    else
        continue; // niet opslaan

    flexValues[this_k.key] = save_k;
  }
  return JSON.stringify(flexValues);
}

function setAdvFlexValues(flexKenmerken)
{
    var this_k;
    for (x in flexKenmerken)
    {
        this_k = flexKenmerken[x];
        this_k.key = x;

        this_k.id = $("input[value='"+this_k.key+"'][name$='key']").eq(0).attr("id"); // input id
        if (!this_k.id) continue; // bestaat niet meer ?
        this_k.id = this_k.id.slice(1, -3); // current id

        this_k.checkbox = $("#k"+this_k.id+"val").attr("type") == "checkbox" ? 1 : 0;
        setAdvFlexValue(this_k);
    }
}

function setAdvFlexValue(k)
{
  if (k.typ == "R" && k.val != null && typeof k.val == "object" && k.val.length > 1)
    $("#k" + k.id + "val").multiSelectToggle({ advanced: true }).prev().click();

  if (k.typ == "S")
  {
    if (typeof k.val == "object") // multiSuggest
      $("#Suggestk" + k.id + "_show").val(k.val);
    else
      $("#Suggestk" + k.id + "_show").val(k.sug);
  }

  if ((k.typ == "N" || k.typ == "V") && k.checkbox)
      $("#k"+k.id+"val").prop("checked", k.val == 1);
  else
      $("#k"+k.id+"val").val(k.val);

  $("#k"+k.id+"key").val(k.key);
  $("#k"+k.id+"t")  .val(k.typ);
  $("#ko"+k.id)     .val(k.op);
}

function showKenmerkModal(purl, ptitle, init, pdata)
{
  // ***** START INTERNE FUNCTIES *****
  function _doOk()
  {
    var kenmerkArray = new Array();
    kenmerk_waarden.length = 0;
    var aantal_kenm = $("#k_all").val();
    // Ingevulde waarden van de kenmerken bewaren.
    for (var n = 1; n <= aantal_kenm; n++)
    {
      kenmerkArray[kenmerkArray.length] = new kenmerkValues(n);
    }
    kenmerk_waarden = kenmerkArray;

    $('div#dkenmmodal').dialog("close");
    // Als dialog scherm gesloten is kunnen we nog bij de kenmerken.
    // Alleen de waarden worden niet meegenomen met de submit, omdat dialog buiten het formulier (<form>) wordt gehouden.
    // Alle velden van dkenmmodal kopiëren naar dkenmmodal2. (Binnen div zetten).
    // Als nu discipline/objectsoort wordt aangepast dan dkenmmodal2 leeg maken.
    // Daarom voor elke catalogus de html van de kenmerken opslaan, zodat later de kenmerken naar modal2 gekopieerd kunnen worden.
    kenmerk_html = $('div#dkenmmodal').formhtml();

    // dkenmmodal leeg maken
    $('div#dkenmmodal').formhtml("");

    // Doorloop kenmerk_waarden om te kijken of er kenmerk waarden zijn ingevuld. Dan op "Geavanceerd.." button een class zetten
    var toggle = false;
    for (var m = 0; m < kenmerk_waarden.length; m++)
    {
      if ((kenmerk_waarden[m].val) || (kenmerk_waarden[m].op == "IS NOT NULL") || (kenmerk_waarden[m].op == "IS NULL")) toggle = true;
    }

    if (toggle){
      $("li:contains('" + L("lcl_advanced") + "')").find("i").addClass("fas");
      $("li:contains('" + L("lcl_shared_advanced") + "')").find("i").addClass("fas");
    }
    else
    {
      $("li:contains('" + L("lcl_advanced") + "')").find("i").removeClass("fas");
      $("li:contains('" + L("lcl_shared_advanced") + "')").find("i").removeClass("fas");
      kenmerk_html = ""; // Er is geen geavanceerde selectie ingesteld, dus hidden velden voor kenmerken verwijderen.
    }
  }

  function _doReset()
  {
    var aantal_kenm = $("#k_all").val();
    for (i = 1; i <= aantal_kenm; i++)
    {
      $('#ko' + i).val("=");
      if ($('#k' + i + 'val').is(':checkbox'))
        $('#k' + i + 'val').prop('checked', false);
      else
        $('#k' + i + 'val').val("");
      $('#Suggest' + "k" + i + '_show').val(""); // Mocht het een Suggestbox zijn dan text ook legen
    }
    // Alle multiSelects en multiSuggests dichtklappen.
    $("select.advMultiSuggest").prev("span.multi_suggest_toggle").click();
    $("select[advmulti][multiple]").prev("span.multi_select_toggle").click();
  }

  function loadKenmerk(data)
  {
    $("#dkenmmodal").html(data);
    if (init)
    {
        $("div#dkenmmodal").dialog(params).dialog("open");
        setAdvFlexValues(init);
        _doOk();
    }
    else if (sameurl)
    { // Zet de geselecteerde waarden
      for (var n = 0; n < kenmerk_waarden.length; n++)
        setAdvFlexValue(kenmerk_waarden[n]);
    }
    $("#dkenmmodal .flddate").not("[readonly]").datepicker({
            // buttonImage: "../pictures/calendar2.png",
            // buttonImageOnly: true,
            showOn: "none",
            duration: 'fast',
            dateFormat: 'dd-mm-yy', // zo verwacht de flex-code het.
            changeYear: true,
            changeMonth: true,
            beforeShow: function(input, inst) { setTimeout("FcltMgr.resized(window)", 100) },
            dayNames: calendar_names.days,
            dayNamesMin: calendar_names.daysMin,
            dayNamesShort: calendar_names.daysMin,
            firstDay: 1,
            monthNamesShort: calendar_names.monthsShort,
            monthNames: calendar_names.months,
            showWeek: true
    });
    var touchdevice = (typeof window.orientation !== "undefined") || (typeof window.ontouchstart !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
    if (typeof Modernizr == "undefined" || !Modernizr.inputtypes.time || !touchdevice)
    { // timepicker
      $("#dkenmmodal .fldtime").not("[readonly]").each(function() {
        $(this).timePicker({
            step: 15,
            startTime : "00:00",
            endTime   : "23:59",
            columns   : 4,
            onChange  : function () {
              $timeInput = $(this).parents("div.time-holder").prev("input.fldtime")
              $timeInput.removeClass("bad");
              $timeInput.trigger("change");
            }
          });
      });
    }
    else
    { // Native timepicker
      $("#dkenmmodal .fldtime").not("[readonly]").each(function() {
          $(this).attr("type", "time");
      });
    }
    $("div.time-holder").each(function() { $(this).css({top: "", left: "", zIndex: 101}); });
  }

  // ***** EINDE INTERNE FUNCTIES *****

  // Open dialog scherm met de kenmerken
  params = { buttons: [ { "text": "Ok!",   "icon": "fal fa-check",    "click": _doOk, "class": "advOk" },
                        { "text": "Reset", "icon": "fal fa-undo", "click": _doReset, "class": "advReset" }
                      ],
             xheight: 600,
             closeOnEscape: true,
             modal: false,
             resizable: false,
             bgiframe: true, /* IE6 */
             title: ptitle,
             width: 725,
             create: FcltMgr.fnCreateCloseButton("div#dkenmmodal")
           };
  if (!init) {
    var loader_html = "<style>"
                    + "    #dkenmmodal {"
                    + "        display: flex;"
                    + "        justify-content: center;"
                    + "        align-items: center;"
                    + "        overflow-y: hidden;"
                    + "        padding-top: 1em;"
                    + "    }"
                    + "    .loading.loader {"
                    + "        width: 48px;"
                    + "        height: 48px;"
                    + "        border: 5px solid rgba(0, 0, 0, 0.1);"
                    + "        border-radius: 50%;"
                    + "        border-top-color: #1770f6;"
                    + "        animation: spin 2s linear infinite;"
                    + "    }"
                    + "    "
                    + "    @keyframes spin {"
                    + "        0% { transform: rotate(0deg); }"
                    + "        100% { transform: rotate(360deg); }"
                    + "    }"
                    + "</style>"
                    + "<script>"
                    + "  window.setTimeout("
                    + "     _ => { document.querySelector('.loader')?.classList?.add('loading'); }"
                    + " , 2000);"
                    + "</script>"
                    + "<div class='loader'></div>";
    $("div#dkenmmodal").dialog(params).dialog("open");
    $("div#dkenmmodal").html(loader_html);
  }
  if (lasturl == purl)
    sameurl = true;
  else
  {
    sameurl = false;
    kenmerk_waarden.length = 0;
  }
  lasturl = purl;

  // Nu div vullen met html code uit de purl
  // Als de parameters via pdata (json) zijn meegegeven doen we een post anders een get.
  if (pdata)
    // Parameters via de body meegeven (pdata).
    return $.when(
      $.post(purl,
             pdata,
             loadKenmerk)
    );
  else
    // Parameters via de querystring meegeven (url).
    return $.when(
      $.get(purl,
            loadKenmerk)
    );
}

function resetFilter()
{
    $("li:contains('" + L("lcl_advanced") + "')").removeClass("selected");
    kenmerk_html = ""; // Er is geen geavanceerde selectie ingesteld, dus hidden velden voor kenmerken verwijderen.
}

