<!-- layouts/_form.html.erb Start -->

<div class="form-create">
  <% unless controller.class::LINK.nil? %>
    <a href="<%= controller.class::LINK %>" title="Zur Online-Dokumentation" target="_BLANK">
      <i class="fa fa-question-circle-o" aria-hidden="true" alt="Zur Onlinedokumentation" title="Zur Online-Dokumentation"></i>
      Zur Online-Dokumentation
    </a>
  <% end %>
  <% unless @map_urls.nil? %>
    <h2>Die <%= controller.class::NAME %> auf einer Karte anzeigen:</h2>
    <i class="fa fa-map"></i> <%= @map_urls %>
  <% end %>

  <h2>Legende:</h2>
  <div class="form-create__key">
    <span class="key predefined">    <span class="fw-800">***</span> <span>Vorgegebenes Feld</span></span>
    <span class="key key_required">  <span class="fw-800">**</span> <span>Schlüsselfeld: Muss zum Erstellen des Objekts ausgefüllt werden und kann danach nicht mehr verändert werden.</span></span>
    <span class="key required">      <span class="fw-800">*</span> <span>Pflichtfeld: Muss ausgefüllt werden, um dieses Objekt zu berichten.</span></span>
    <span class="key cond_required"><span class="fw-800">&nbsp;</span> <span>Abhängiges Pflichtfeld: siehe Online-Dokumentation (durch Klick auf das blaue Fragezeichen), um zu erfahren,
        unter welchen Bedingungen dieses Feld ausgefüllt werden muss.</span></span>

    <span><span class="fw-800">Hinweis:</span> Die farbliche Vollmarkierung eines Feldes findet nur statt, wenn dieses nicht ausgefüllt ist.</span>
  </div>
  <div class="report-links">
    <% unless @prevReport.nil? %>
    <a id="prev-report" href="<%= url_for :controller => controller.controller_name, :action => 'edit', :id => @prevReport['id'] %>" ><< Vorperiode (<%= @prevReport['rep_code'] %>)</a>
    <% end %>
    <% unless @prevReport.nil? or @nextReport.nil? %>
     |
    <% end %>
    <% unless @nextReport.nil? %>
      <a id="next-report" href="<%= url_for :controller => controller.controller_name, :action => 'edit', :id => @nextReport['id'] %>" >Folgeperiode (<%= @nextReport['rep_code'] %>) >></a>
    <% end %>
  </div>
  <h2>Formular</h2>
  <table style="white-space: nowrap" class="form-create__main">
    <% @gen.columns_for_form.each do |row| #holt alle Zeilen, die in Form ausgegeben werden sollen            %>
      <% zeile %>
      <tr class="<%= get_error_class(row, @data) %>">
        <%= name_for(row, @data) %>
        <%= data_for(row, @data) %>
      </tr>
    <% end %>
  </table>
</div>

<script type="text/javascript" language="javascript">
    // function obsolet?
    function move_option(src, trg) {
        // options = $$("#" + src + " option");
        options = $("#" + src + " option");
        options.each(function (o) {
            if (o.selected) {
                $(trg).insert(o.remove());
            }
        });
    };

    // function obsolet?
    function select_all_options(id) {
        //options = $$("#" + id + " option");
        options = $("#" + id + " option");
        options.each(function (o) {
            o.selected = true;
        });
    };

    // function obsolet?
    function check_all() {
        // bla = $$("select");
        bla = $("select");
        bla.each(function (o) {
            if (o.multiple == true) {
                select_all_options(o.id);
            }
        });
    }

    // Filter data in Modal window for edit form selects
    var FilterModal = (function () {
        var INSTANCE = null,
            typingTimeOut = 300,
            typingTimer = 0;

        function init() {
            var modalBox = {
                container: document.getElementById('schleier'),
                box: document.getElementById('filterBox'),
                closeBtn: document.querySelector('#filterBox .filterBox-close'),
                caption: document.getElementById('filterBoxCaption'),
                txt: document.getElementById('filterText'),
                table: document.getElementById('filterBoxTable'),
                loading_img: document.getElementById('filterBoxLoadingImg'),
                warning_img: document.getElementById('filterBoxWarningImg'),
                url: '',
                select_id: '',
                currentText: ''
            };

            addCloseListener();

            function show(url, select_id, title) {

                // console.log(modalBox)

                modalBox.url = url;
                modalBox.select_id = select_id;
                modalBox.caption.innerText = title;
                modalBox.txt.value = "";
                modalBox.loading_img.style.display = "none";
                modalBox.warning_img.style.display = "none";
                modalBox.container.classList.add('is-visible');
                modalBox.txt.focus();
                updateData('');
            }

            function addCloseListener() {
                // add close handler for close button
                modalBox.closeBtn.addEventListener("click", function (evt) {
                    evt.preventDefault();
                    modalBox.container.classList.remove('is-visible')
                });

                // add close handler for esc key
                modalBox.container.addEventListener("keydown", function (evt) {
                    if (evt.key === 'Escape') {
                        modalBox.container.classList.remove('is-visible')
                    }
                });
            }

            function addContent(data) {
                modalBox.table.innerHTML = data;
                modalBox.loading_img.style.display = "none";
            }

            function updateData(last_value) {
                modalBox.loading_img.style.display = "block";
                $.ajax({
                    method: "GET",
                    url: modalBox.url + '&filter_text=' + last_value,
                    context: document.body
                }).done(function (request) {
                    addContent(request)
                }).fail(function () {
                    modalBox.loading_img.style.display = "none";
                    modalBox.warning_img.style.display = "block";
                });
            }

            function filterResult() {
                var rows = modalBox.table.rows,
                    input = modalBox.txt.value,
                    data_key = '',
                    data_name = '',
                    re = new RegExp(input, "ig");

                for (var i = 0; i < rows.length; i++) {
                    data_key = rows[i].getElementsByTagName("td")[0];
                    data_name = rows[i].getElementsByTagName("td")[1];

                    if (data_key || data_name) {
                        if (re.test(data_key.innerHTML) || re.test(data_name.innerHTML)) {
                            rows[i].style.display = ""; // display row
                        }
                        else {
                            rows[i].style.display = "none";  // hide row
                        }
                    }
                }
            }

            function update(url, col_name) {
                // if visible and correct button is pressed
                if (modalBox.container.classList.contains('is-visible') && col_name === modalBox.select_id){
                    modalBox.url = url;
                    updateData('')
                }
            }

            // function is called by click on table row
            // given by ajax data request (DIRTY!)
            function select(id) {
                document.getElementById(modalBox.select_id).value = id;
                modalBox.container.classList.remove('is-visible')
            }

            /*publicize functions to instance holder*/
            return {
                show: show,
                filters: filterResult,
                select: select,
                update: update
            };
        }

        return {
            getInstance: function () {
                if (!INSTANCE) {
                    INSTANCE = init();
                }
                return INSTANCE;
            },
            show: function (url, select_id, title) {
                return this.getInstance().show(url, select_id, title);
            },
            filter: function () {

                // wait of input timeout
                window.clearTimeout(typingTimer);
                waitForInput(this);
                function waitForInput(that) {
                    typingTimer = setTimeout(function () {
                        return that.getInstance().filters(); // call filterInput after 300ms input timeout
                    }, typingTimeOut);
                }
                return
            },
            select: function(id) {
                return this.getInstance().select(id)
            },
            update: function (url, col_name) {
                return this.getInstance().update(url, col_name);
            }
        };
    }());


</script>

<script type="text/javascript" language="javascript">
    window.addEventListener('load', function () {
        FilterModal.getInstance()
    })
</script>

<!--<div id="schleier" style="position: absolute; top: 0pt; left: 0pt; bottom: 0pt; width: 100%; z-index: 1; background-color: black; opacity: 0.0; display: none" onclick="FilterModal.hide()"></div>-->
<div id="schleier" tabindex="-1">
  <div id="filterBox">
    <div class="head-region">
      <!--      <a class="filterBox-close" title="Dialogbox schließen" href="javascript:FilterModal.hide();">-->
      <a class="filterBox-close" title="Dialogbox schließen">
        <i class="fa fa-times"></i>
      </a>
      <h2 class="head" id="filterBoxCaption"></h2>
      <input type="text" placeholder="Suche: Schlüssel / Name" id="filterText" onkeyup="FilterModal.filter()"/>
      <%= image_tag '16-ajax-loader.gif', :id => 'filterBoxLoadingImg', :title => 'Lade...' %>
      <%= image_tag '16-warning.png', :id => 'filterBoxWarningImg', :title => 'Fehler: Es ist ein Fehler beim Laden aufgetreten. Bitte schließen Sie dieses Fenster' %>
    </div>
    <div class="content-region">
      <table id="filterBoxTable">
      </table>
    </div>
  </div>

</div>

<!-- layouts/_form.html.erb Ende -->
