<?xml version="1.0" encoding="UTF-8"?>

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://xmlns.jcp.org/jsp/jstl/core" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:p="http://primefaces.org/ui" xmlns:e="http://www.ivu.de/elect/tags">

    <!--@elvariable id="msgs" type="de.ivu.elect.business.lokalisierung.control.LokalisierungResourceBundle"-->
    <!--@elvariable id="erfassenView" type="de.ivu.elect.presentation.stimmeingabe.AbstractStimmeingabeErfassenView"-->

    <h:outputStylesheet library="css" name="stimmeingabe.css" />

    <!-- 
         - highlight the whole table row on input field focus
         - ELECTKOM-98, optionales Befüllen mit 0 wenn keine Eingabe
         - ELECTKOM-537, Wechsel des Feldes per Enter
         -->

    <e:cdata rendered="#{not erfassenView.erfassungGesperrt}"><h:outputScript>/* <![CDATA[ */
        jQuery(document).ready(function($) {
            var SELECTOR_INPUT_NUMBER = "#frmCreate input.ui-inputtext-number";
            var SELECTOR_INPUT_CHECKBOX = "#frmCreate input:checkbox";

            function handleInputOnKeydown($e, input) { // ELECTKOM-537
              var $input = $(input);

              var tabByEnterDefaultEnabled = "#{erfassenView.stimmeingabeErfassenTabKeys.enterDefaultIncluded}" === "true";
              var tabByEnterNumpadEnabled = "#{erfassenView.stimmeingabeErfassenTabKeys.enterNumpadIncluded}" === "true";

              var tabByEnterRequired = false;

              var keyCode = $.ui.keyCode;

              switch ($e.which) {
                  case keyCode.ENTER:
                    if($e.originalEvent && $e.originalEvent.location === 3) { // == keyCode.NUMPAD_ENTER
                        tabByEnterRequired = tabByEnterNumpadEnabled;
                    } else {
                        tabByEnterRequired = tabByEnterDefaultEnabled;
                    }

                    break;
                  case keyCode.NUMPAD_ENTER:
                    tabByEnterRequired = tabByEnterNumpadEnabled;

                    break;
              }

              if (tabByEnterRequired) {
                var $inputsTabbable = $(SELECTOR_INPUT_NUMBER + ":tabbable" + ", " + SELECTOR_INPUT_CHECKBOX + ":tabbable").sort(function(one, another) {
                        var tabIndexOfOne = $(one).attr('tabindex');
                        var tabIndexOfAnother = $(another).attr('tabindex');

                        return ($.isNumeric(tabIndexOfOne) ? tabIndexOfOne : 0) - ($.isNumeric(tabIndexOfAnother) ? tabIndexOfAnother : 0);
                    });

                var inputIndex = $inputsTabbable.index($input);

                if (inputIndex >= 0) {
                  var inputFocusedIndex = inputIndex + ($e.shiftKey === true ? -1 : 1);
                  var $inputFocused = $inputsTabbable.get(inputFocusedIndex);

                  if($inputFocused || inputFocusedIndex < 0) {
                      $e.preventDefault();

                      if ($inputFocused) {
                        $inputFocused.focus();

                        return false;
                      }
                  }
                }
              }

              return true;
            }

            $(SELECTOR_INPUT_NUMBER).on({
                focus: function($e) {
                    var $input = $(this);
                    $input.select(); // Immer alles auswählen...

                    $input.closest("tr").addClass("ui-state-focus");
                },

                blur: function($e) {
                    var $input = $(this);

                    if("#{erfassenView.stimmeingabeErfassenAnzahlDefaultRequired}" === "true" && !$input.val()) { // ELECTKOM-98
                        $input.val("#{erfassenView.stimmeingabeErfassenAnzahlDefault}");
                    }

                    $input.closest("tr").removeClass("ui-state-focus");
                },

                keydown: function($e) {
                  return handleInputOnKeydown($e, this);
                }
            });

            $(SELECTOR_INPUT_CHECKBOX).on({
                keydown: function($e) {
                  return handleInputOnKeydown($e, this);
                }
            });
        });
    /* ]]> */</h:outputScript></e:cdata>

    <!-- Wenn keine Stimmeingabe möglich ist, setze den Eingabecursor (Fokus) auf das Gebietsbaum Such-Eingabefeld (ist vor allem als 
         Shortcut für Erfasser gedacht, die nach dem Absenden/Speichern eines gültigen Ergebniseingangs schnell zum nächsten Gebiet
         navigieren möchten), cf. ELECTMUC-189. -->

    <e:cdata rendered="#{erfassenView.erfassungGesperrt}"><h:outputScript>/* <![CDATA[ */
        jQuery(document).ready(function($) {
            $("#frmTree .ui-autocomplete-input").focus();
        });
    /* ]]> */</h:outputScript></e:cdata>

    <!-- Cf. /elect-base-war/src/main/webapp/resources/js/common/FloatingJumpLinks.js! -->
    <e:cdata><h:outputScript>/* <![CDATA[ */
      if (window) {
        if (!window.__elect_common__) {
          window.__elect_common__ = {};
        }

        window.__elect_common__.jumpLinkContainerScrollUpInitiallyRendered = "#{erfassenView.btnScrollUpInitiallyRendered}" === "true";
        window.__elect_common__.jumpLinkContainerScrollDownInitiallyRendered = "#{erfassenView.btnScrollDownInitiallyRendered}" === "true";
      }
    /* ]]> */</h:outputScript></e:cdata>

    <!-- Cf. <p:commandButton rendered="#{erfassenView.btnSeiteDruckenRendered}" onclick="..." />!  -->
    <e:cdata><h:outputScript>/* <![CDATA[ */
        function enableAfterTimeout(that, oldClassName) {
            that.disabled = false;
            that.className = oldClassName;
        }
    /* ]]> */</h:outputScript></e:cdata>

    <!-- ELECT-9262 <p:keyboard ondblclick="..." />, cf. in /elect-base-jar/src/main/resources/META-INF/contracts/elect/WEB-INF/tags/inputNumberKeyboard.xhtml!  -->
    <e:cdata><h:outputScript>/* <![CDATA[ */
        function handleInputDblclick(that, event) {
            if(event && event['stopPropagation'])  {
                event.stopPropagation();

                return false;
            }

           return true;
        }
    /* ]]> */</h:outputScript></e:cdata>

    <!-- NOTE, dass dadurch seitenspezifische FacesMessages angezeigt werden. -->
    #{erfassenView.preRenderView()}

    <!-- ID des Formulares NICHT beliebig ÄNDERN, da diese in CSS und JavaScript (JQuery-Selector) verwendet wird!!! -->
    <e:form id="frmCreate">
        <!-- ELECT-2918 (Änderungen des Gebiets feststellen) -->
        <h:inputHidden value="#{erfassenView.gebietInView}" />

        <ui:fragment rendered="#{erfassenView.seiteDruckenHeaderRendered}">
            <div class="ui-header print-only">
                <ui:repeat value="#{erfassenView.seiteDruckenHeader}" var="value">
                    <h:outputText rendered="#{not empty value}" value="#{value}" styleClass="ui-header-entry print-only" escape="false" />
                </ui:repeat>
            </div>
        </ui:fragment>

        <!--@elvariable id="fehler" type="de.ivu.elect.presentation.stimmeingabe.StimmeingabePlausiFehler"-->
        <p:panel id="pnlStimmeingabePlausiFehler" rendered="#{erfassenView.hasStimmeingabePlausiFehler()}" style="background:none; background-color:##{not empty layoutComponentsContext.selected ? layoutComponentsContext.farbe : 'ffffff'};">
            <p:dataTable id="tblStimmeingabePlausiFehler" value="#{erfassenView.stimmeingabenPlausiFehler}" var="fehler" rowStyleClass="#{fehler.rowStyleClass}" styleClass="ui-datatable-plausi-fehler">
                <ui:param name="stimmeingabeBezugId" value="#{fehler.stimmeingabeBezugId}" />
                <ui:param name="stimmeingabeLinked" value="#{not empty stimmeingabeBezugId}" />

                <!-- NOTE, dass bewusst NICHT <h:link /> oder <h:outputLink /> für die Anker-Links verwendet werden, da diese NICHT alle URL-Parameter, bspw. 'elect_wid', beinhalten!!! -->

                <p:column headerText="#{msgs['entity.einzahl.STIMMEINGABEFEHLER.FEHLERART']}" styleClass="#{(fehler.mussFehler) ? 'ui-state-error' : fehler.kannFehler ? 'ui-state-warn' : ''}">
                    <e:outputIcon value="#{(fehler.mussFehler) ? icons.iconAlert : icons.iconNotice}" />

                    <h:outputText rendered="#{not stimmeingabeLinked}" value="#{fehler.fehlerartName}" />
                    <ui:fragment rendered="#{stimmeingabeLinked}"><a href="##{stimmeingabeBezugId}"><h:outputText value="#{fehler.fehlerartName}" /></a></ui:fragment>
                </p:column>

                <p:column headerText="#{msgs['entity.einzahl.STIMMEINGABEFEHLER.STIMMEINGABE_ID']}">
                    <h:outputText rendered="#{not stimmeingabeLinked}" value="#{fehler.stimmeingabeBezug}" />
                    <ui:fragment rendered="#{stimmeingabeLinked}"><a href="##{stimmeingabeBezugId}"><h:outputText value="#{fehler.stimmeingabeBezug}" /></a></ui:fragment>
                </p:column>

                <p:column headerText="#{msgs['entity.einzahl.STIMMEINGABEFEHLER.BESCHREIBUNG']}">
                    <h:outputText rendered="#{not stimmeingabeLinked}" value="#{fehler.beschreibung}" />
                    <ui:fragment rendered="#{stimmeingabeLinked}"><a href="##{stimmeingabeBezugId}"><h:outputText value="#{fehler.beschreibung}" /></a></ui:fragment>
                </p:column>

                <p:column headerText="#{stimmeingabeKopfzahlMeta.stimmeingabeAnzahlEingabeEinzahlMessage}" styleClass="ui-dt-td-numeric">
                    <ui:fragment rendered="#{fehler.hasStimmeingabeAnzahlEingabe()}">
                        <e:outputLong rendered="#{fehler.hasStimmeingabeAnzahl()}" value="#{fehler.stimmeingabeAnzahl}" />
                        <h:outputText rendered="#{not fehler.hasStimmeingabeAnzahl()}" value="#{fehler.stimmeingabeAnzahlEingabe}" styleClass="ui-dt-c-numeric" />
                    </ui:fragment>
                </p:column>
            </p:dataTable>

            <c:if test="#{erfassenView.stimmeingabePlausiFehlerBtnPanelRendered}">
              <f:facet name="footer">
                <!-- NOTE "The f:subview will create another naming container context.", der erforderlich ist, da fixe IDs im Template hinterlegt sind!!! Diese fixen
                     IDs (im unteren Footer) MÜSSEN erhalten bleiben, da sie in den JMeter-Tests referenziert werden... -->
                <f:subview id="btnPanelTop">
                  <ui:include src="/WEB-INF/templates/stimmeingabe/stimmeingabe-erfassen-page-buttons.xhtml" />
                </f:subview>
              </f:facet>
            </c:if>
        </p:panel>

        <p:panel id="pnlStimmeingaben" style="background:none; background-color:##{not empty layoutComponentsContext.selected ? layoutComponentsContext.farbe : 'ffffff'};">
            <p:outputPanel id="tblStimmeingabeContent">
            	<ui:insert/>
            </p:outputPanel>

            <!-- ELECTKOM-2773 -->
            <c:if test="#{erfassenView.stimmeingabeErfassenBtnPanelRendered}">
              <f:facet name="footer">
                <c:if test="#{not empty erfassenView.stimmeingabeErfassenBtnPanelMessages}">
                  <div id="ctnMessagesBtnPanel" class="ui-messages ui-widget" aria-live="polite">
                    <div class="ui-messages-info ui-corner-all">
                      <span class="ui-messages-info-icon"></span>
                      <ul>
                        <c:forEach var="messageBtnPanel" items="#{erfassenView.stimmeingabeErfassenBtnPanelMessages}">
                          <li role="alert" aria-atomic="true">
                            <span class="ui-messages-info-summary"><h:outputText value="#{messageBtnPanel}" /></span>
                          </li>
                        </c:forEach>
                      </ul>
                    </div>
                  </div>
                </c:if>

                <ui:include src="/WEB-INF/templates/stimmeingabe/stimmeingabe-erfassen-page-buttons.xhtml" />
              </f:facet>
            </c:if>
        </p:panel>

        <p:fieldset rendered="#{not erfassenView.letzterErgebniseingangAktuellVorhanden}" legend="#{msgs['stimmeingabe.erfassen.letzter.ergebniseingang']}" styleClass="print-hidden">
            <h:outputText value="#{msgs['stimmeingabe.erfassen.view.kein.ergebnis.eingegangen']}" />
        </p:fieldset>

        <c:forEach var="modelPerHeader" items="#{erfassenView.modelsLetzteErgebniseingaenge}">
            <p:fieldset legend="#{modelPerHeader.key}" styleClass="print-hidden">
                <ui:decorate template="/WEB-INF/templates/dyna-form.xhtml">
                    <ui:param name="model" value="#{modelPerHeader.value}" />
                </ui:decorate>
            </p:fieldset>
        </c:forEach>

        <p:fieldset legend="#{msgs['stimmeingabe.erfassen.erfassungshinweise.header']}" toggleable="true" collapsed="true" styleClass="ui-legend print-hidden">
            <c:forEach var="entriesPerHeader" items="#{erfassenView.erfassungshinweise}">
                <h3><h:outputText value="#{entriesPerHeader.key}" /></h3>

                <c:forEach var="valuePerLabel" items="#{entriesPerHeader.value}">
                    <dl>
                        <dt><h:outputText value="#{valuePerLabel.key}" />:</dt>
                        <dd><h:outputText value="#{valuePerLabel.value}" /></dd>
                    </dl>
                </c:forEach>
            </c:forEach>

            <h3><h:outputText value="#{msgs['stimmeingabe.erfassen.erfassungshinweise.navigation.header']}" /></h3>
            <dl>
                <dt><h:outputText value="#{msgs['stimmeingabe.erfassen.erfassungshinweise.navigation.feld.vor']}" />:</dt>
                <dd>
                    <kbd>↹ <h:outputText value="#{msgs['stimmeingabe.erfassen.erfassungshinweise.navigation.key.tab']}" /></kbd>
                    <ui:fragment rendered="#{erfassenView.stimmeingabeErfassenTabKeys.enterIncluded}">
                        <h:outputText value="&#160;#{msgs['stimmeingabe.erfassen.erfassungshinweise.navigation.oder']}&#160;" />
                        <ui:fragment rendered="#{not erfassenView.stimmeingabeErfassenTabKeys.enterDefaultIncluded}"><kbd><h:outputText value="#{msgs['stimmeingabe.erfassen.erfassungshinweise.navigation.key.enter']}" /></kbd> (<h:outputText value="#{msgs['stimmeingabe.erfassen.erfassungshinweise.navigation.numpad.only']}" />)</ui:fragment>
                        <ui:fragment rendered="#{erfassenView.stimmeingabeErfassenTabKeys.enterDefaultIncluded}"><kbd>⏎ <h:outputText value="#{msgs['stimmeingabe.erfassen.erfassungshinweise.navigation.key.enter']}" /></kbd></ui:fragment>
                    </ui:fragment>
                </dd>
            </dl>
            <dl>
                <dt><h:outputText value="#{msgs['stimmeingabe.erfassen.erfassungshinweise.navigation.feld.zurueck']}" />:</dt>
                <dd>
                    <kbd>⇧ <h:outputText value="#{msgs['stimmeingabe.erfassen.erfassungshinweise.navigation.key.shift']}" /></kbd> + <kbd>↹ <h:outputText value="#{msgs['stimmeingabe.erfassen.erfassungshinweise.navigation.key.tab']}" /></kbd>
                    <ui:fragment rendered="#{erfassenView.stimmeingabeErfassenTabKeys.enterIncluded}">
                        <h:outputText value="&#160;#{msgs['stimmeingabe.erfassen.erfassungshinweise.navigation.oder']}&#160;" /><kbd>⇧ <h:outputText value="#{msgs['stimmeingabe.erfassen.erfassungshinweise.navigation.key.shift']}" /></kbd> + 
                        <ui:fragment rendered="#{not erfassenView.stimmeingabeErfassenTabKeys.enterDefaultIncluded}"><kbd><h:outputText value="#{msgs['stimmeingabe.erfassen.erfassungshinweise.navigation.key.enter']}" /></kbd> (<h:outputText value="#{msgs['stimmeingabe.erfassen.erfassungshinweise.navigation.numpad.only']}" />)</ui:fragment>
                        <ui:fragment rendered="#{erfassenView.stimmeingabeErfassenTabKeys.enterDefaultIncluded}"><kbd>⏎ <h:outputText value="#{msgs['stimmeingabe.erfassen.erfassungshinweise.navigation.key.enter']}" /></kbd></ui:fragment>
                    </ui:fragment>
                </dd>
            </dl>
            <dl>
                <dt><h:outputText value="#{msgs['stimmeingabe.erfassen.erfassungshinweise.navigation.ausklappen']}" />:</dt>
                <dd>
                    <kbd><h:outputText value="#{msgs['stimmeingabe.erfassen.erfassungshinweise.navigation.key.spacebar']}" /></kbd>
                </dd>
            </dl>
        </p:fieldset>
    </e:form>

    <!-- cf. ELECTBB-343 Dauerhaft gedrückte Enter-Taste führt zu Fehler auf Erfassungsmaske -->
    <e:cdata><h:outputScript>/* <![CDATA[ */
        $('#frmCreate')
          .on('submit', function(event){
              /* speichere am Formular, dass es gerade submitted wurde */
              this.__isSubmitted__ = true;
          })
          .on('keypress', function(event){
              /* wenn die Enter-Taste gedrückt wird und das Formular gerade submitted wurde, blockiere die Enter-Taste */
              if (event.keyCode == 13 && this.__isSubmitted__) {
                  return false;
              }
        });
    /* ]]> */</h:outputScript></e:cdata>

    <e:modalDialogDelete dialogName="EingaengeLoeschen" rendered="#{erfassenView.btnEingaengeLoeschenRendered}">
        <h:outputText value="#{erfassenView.eingaengeLoeschenConfirmMessage}" />

        <ui:define name="btnDelete">
            <p:commandButton id="btnDelete" rendered="#{erfassenView.btnEingaengeLoeschenRendered}"
                    action="#{erfassenView.eingaengeLoeschen}" ajax="false" immediate="true" value="#{erfassenView.btnEingaengeLoeschenLabel}" />
        </ui:define>
    </e:modalDialogDelete>
</ui:composition>
