#LOCAL("GlobalValueDiscounts", "")
#LOCAL("PriceListID", "")
#LOCAL("LocalCurrencySymbol", "")

#LOOP(#PriceLists, 1, 1)
  #SET("GlobalValueDiscounts", #GlobalValueDiscounts)
  #SET("PriceListID", #ID)
  #IF(#DEFINED(#CurrencyID))#LOCAL("LocalCurrency", #FUNCTION("CURRENCY", #CurrencyID))#SET("LocalCurrencySymbol", #LocalCurrency.Symbol)#ENDLOCAL#ENDIF
#ENDLOOP

<h1>
  <span class="BreadcrumbItem"><a href="?ViewAction=MBO-ViewCustomerGroups&amp;ObjectID=#Shop.ID">{CustomerGroups}</a></span>
  <span class="BreadcrumbLastItem">#NameOrAlias</span>
</h1>

<div class="Dialog container-fluid ui-helper-clearfix">
  <form
    id="CustomerGroupForm"
    action="?ViewAction=UnityMBO-ViewCustomerGroupDetail&amp;ObjectID=#ID"
    method="post"
    class="ep-bulkprices-form ep-js"
    data-js=".uiForm({showSaveWarn:true})"
  >
    <input type="hidden" name="ViewObjectID" value="#ID">
    <input type="hidden" name="ErrorObjectID" value="#ID">
    #WITH_ERROR(#FormError AND (#DEFINED(#FormErrors.Form.SaveGlobalValueDiscounts) OR #DEFINED(#FormErrors.Form.NewGlobalValueDiscounts)))
      #IF(#FormError)
        <div class="ep-notification-warning BottomMarginWide">
          <h3>{InputError}</h3>
          #IF(#FormErrors.Reason.INTERVAL_EXISTS)
            <p>{IntervalExists}</p>
          #ELSE
            <p>{PleaseCorrectErrors}</p>
          #ENDIF
        </div>
      #ENDIF

      #IF(#DELETE)
        <input type="hidden" name="ACCEPT" value="1" />
        <div class="ep-notification-danger BottomMarginWide">
          <h3>{AcceptAction}</h3>
        </div>
        #LOOP(#DeleteObjects)<input type="hidden" name="ListObjectID" value="#ID" />#ENDLOOP
      #ELSE
        #IF(#Shop.FeatureMaxValue.BasketDiscount AND #Shop.FeatureMaxValue.PriceLists)
          <div class="ep-notification-info BottomMarginWide">
            <p>{CustomerGroupsNotification}</p>
            <p>{CustomerGroupsNotification2}</p>
            <p>{CustomerGroupsNotification3}</p>
          </div>
        #ENDIF

        <div class="row">
          <div class="col-xs-6">
            <div class="row">
              <div class="col-xs-12 BottomMarginWide">
                <h4 class="NoMargin">{GeneralSettings}</h4>
              </div>#REM <!-- .col-xs-12 --> #ENDREM
            </div>#REM <!-- .row --> #ENDREM
            <div class="row">
              <div class="col-xs-12">
                <div class="row">
                  <div class="col-xs-12">
                    <label class="ep-label" for="NameNative">{Name}</label>
                  </div>#REM <!-- .col-xs-12 --> #ENDREM
                </div>#REM <!-- .row --> #ENDREM
              </div>#REM <!-- .col-xs-12 --> #ENDREM
            </div>#REM <!-- .row --> #ENDREM
            <div class="row">
              <div class="col-xs-12 BottomWidePadding">
                <input type="text" name="Name" class="Unit" value="#NameOrAlias" />
              </div>#REM <!-- .col-xs-12 --> #ENDREM
            </div>#REM <!-- .row --> #ENDREM
          </div>#REM <!-- .col-xs-6 --> #ENDREM
        </div>#REM <!-- .row --> #ENDREM
      #ENDIF #REM <!-- IF(DELETE) --> #ENDREM

      #IF(#Shop.FeatureMaxValue.BasketDiscount AND #Shop.FeatureMaxValue.PriceLists)
        <div class="row">
          <div class="col-xs-12">
            #IF(NOT #DELETE)
              <div class="row">
                <div class="col-xs-12 BottomMarginWide">
                  <h4 class="NoMargin">{UnityGlobalValueDiscount}</h4>
                </div>#REM <!-- .col-xs-6 --> #ENDREM
              </div>#REM <!-- .row --> #ENDREM
            #ENDIF
            <div class="row">
              <div class="col-xs-12">
                #IF(NOT #DELETE)
                  #SNIPPET("INC-BatchActions", "BatchActions", "BatchActions")
                #ENDIF

                #LOCAL("SelectedGlobalValueDiscountsID", 0)
                #LOCAL("CustomerGroupsCounter", 0)

                #LOOP(#GlobalValueDiscounts)
                  #SET("SelectedGlobalValueDiscountsID", #ID)
                  <input type="hidden" name="SelectedGlobalValueDiscountsID" value="#IF(#DEFINED(SelectedGlobalValueDiscountsID))#SelectedGlobalValueDiscountsID#ENDIF" />
                #ENDLOOP
                <table class="ep-bulkprices-table ep-bulkprices-table_#CustomerGroupsCounter ContentList">
                  <thead>
                    <tr>
                      <td class="Checkbox">
                        <input
                          type="checkbox"
                          class="visually-hidden ep-js"
                          data-js=".uiInput()"
                          name="selector"
                          value="Checkbox"
                          onclick="OnCheckAll(this.form, 'ListObjectID', this.checked)"
                          #IF(#DELETE) disabled="disabled" #ENDIF
                        />
                      </td>
                      <td>{ValueCurrency}</td>
                      <td>{FixValue}</td>
                      <td>{PercentalDiscount}</td>
                    </tr>
                  </thead>
                  <tfoot>
                    <tr>
                      <td colspan="3"></td>
                    </tr>
                  </tfoot>
                  <tbody>
                    #IF(#DELETE)
                      #LOOP(#DeleteObjects)
                      <tr>
                        <input type="hidden" name="GlobalValueDiscountID" value="#ID" />
                        <td class="Checkbox">
                          <input type="checkbox" class="RunButtonTrigger ep-js" data-js=".uiInput({})" name="ListObjectID" value="#ID" disabled="disabled" checked="checked" />
                        </td>
                        <td><span>#Value[money]</span></td>
                        <td><span>#IF(#DEFINED(#DiscountAbsolute))#DiscountAbsolute[money]#ENDIF</span></td>
                        <td><span>#IF(#DEFINED(#Discount))#Discount[float]#ENDIF</span></td>
                      </tr>
                      #ENDLOOP #REM <!-- LOOP(DeleteObjects) --> #ENDREM
                    #ELSE
                      #LOCAL("TableRowCount", 0)
                        #LOOP(#GlobalValueDiscounts)
                          <tr class="ep-bulkprices-existingentry-row">
                            #WITH_ERROR(#FormError AND (#DEFINED(#FormErrors.Form.SaveGlobalValueDiscounts)))
                            <td class="Checkbox">
                              <input type="checkbox" class="ep-js" data-js=".uiInput({})" name="ListObjectID" value="#ID" />
                              <input type="hidden" name="GlobalValueDiscountID" value="#ID" />
                            </td>
                            <td class="ep-bulkprices-clickcell#IF(#FormError_Value) DialogError#ENDIF">
                              #REM <!-- leave single quotes here - otherwise jquery wont be able to parse attribute as object --> #ENDREM
                              <span
                                data-item='{"name": "Value", "value": "#Value[money]"}'
                                class="ep-js"
                                data-js="#BLOCK("NewLineReplace","")
                                  .uiTextedit({
                                    name: 'Value',
                                    validate: {
                                      required: true,
                                      min: 1,
                                      type: 'unique',
                                      formatValue: $.fn.uniqueValueFormatter,
                                      additionalValidator: 'number',
                                      format: 'c2',
                                      region: $.i18n.settings.region,
                                      currency: $.i18n.settings.currency,
                                      getCompareData: function(){
                                        return ep('.ep-bulkprices-table_#CustomerGroupsCounter').presentationUiPriceTableData('getIndexFilteredDataByName', #TableRowCount, 'Value', $.fn.uniqueValueFormatter);
                                      }
                                    },
                                    setAttr: {
                                      name: true,
                                      value: &quot;#IF(#DEFINED(#DiscountAbsolute))#Value[money]#ENDIF&quot;
                                    },
                                    buildInstantly: true,
                                    trimContent: true,
                                    formatOnWriteBack: function(input, evt, error){
                                      var val = $.fn.parseAndFormatCallback(input.val(), {
                                          pattern: 'c2',
                                          region: $.i18n.settings.region,
                                          currency: $.i18n.settings.currency,
                                          parser: $.i18n.parseNumber,
                                          formatter: $.i18n.formatNumber
                                        });

                                      input.val(val);

                                      /* input.val($.i18n.formatNumber($.i18n.parseNumber(input.val()), 'c2', {region: $.i18n.settings.region, currency: $.i18n.settings.currency})); */
                                    },
                                    onAfterClose: function(input){
                                      setTimeout(function() {
                                        input.closest('.ep-bulkprices-clickcell').one('click.openTextedit', function(evt) {
                                          (evt.target.nodeName.toUpperCase() === 'TD') && $(evt.target).find('span').uiTextedit('open');
                                        });
                                      }, 300);
                                    }
                                  })
                                  #ENDBLOCK">
                                  #Value[money]
                                </span>
                            </td>
                            <td class="ep-bulkprices-clickcell#IF(#FormError_DiscountAbsolute) DialogError#ENDIF">
                              #REM <!-- leave single quotes here - otherwise jquery wont be able to parse attribute as object --> #ENDREM
                              <span
                                data-item='{"name": "DiscountAbsolute" #IF(#DEFINED(#DiscountAbsolute)), "value": "#DiscountAbsolute[money]"#ENDIF}'
                                class="ep-js"
                                data-js="#BLOCK("NewLineReplace","")
                                  .uiTextedit({
                                    name: 'DiscountAbsolute',
                                    validate: {
                                      required: false,
                                      min: 0,
                                      type: 'number',
                                      format: 'c2',
                                      region: $.i18n.settings.region,
                                      currency: $.i18n.settings.currency
                                    },
                                    setAttr: {
                                      name: true,
                                      value: &quot;#IF(#DEFINED(#DiscountAbsolute))#DiscountAbsolute[money]#ENDIF&quot;
                                    },
                                    buildInstantly: true,
                                    trimContent: true,
                                    formatContentOnAfterWriteBack: function(widget) {
                                      widget.content = $.fn.parseAndFormatCallback(widget.uiInput.val(), {
                                        pattern: 'c2',
                                        region: $.i18n.settings.region,
                                        currency: $.i18n.settings.currency,
                                        parser: $.i18n.parseNumber,
                                        formatter: $.i18n.formatNumber
                                      });

                                      /* widget.content=widget.uiInput.val() === '' ? '' : $.i18n.formatNumber($.i18n.parseNumber(widget.uiInput.val()), 'c2', {region: $.i18n.settings.region, currency: $.i18n.settings.currency}); */
                                    },
                                    formatOnWriteBack: function(input, evt, error){
                                      var val = $.fn.parseAndFormatCallback(input.val(), {
                                          pattern: 'c2',
                                          region: $.i18n.settings.region,
                                          currency: $.i18n.settings.currency,
                                          parser: $.i18n.parseNumber,
                                          formatter: $.i18n.formatNumber
                                        });

                                      input.val(val);

                                      /* input.val()!=='' && input.val($.i18n.formatNumber($.i18n.parseNumber(input.val()), 'c2', {region: $.i18n.settings.region, currency: $.i18n.settings.currency})); */
                                    },
                                    onAfterClose: function(input){
                                      setTimeout(function() {
                                        input.closest('.ep-bulkprices-clickcell').one('click.openTextedit', function(evt) {
                                          (evt.target.nodeName.toUpperCase() === 'TD') && $(evt.target).find('span').uiTextedit('open');
                                        });
                                      }, 300);
                                    }
                                  })
                                  #ENDBLOCK">
                                  #IF(#DEFINED(#DiscountAbsolute))#DiscountAbsolute[money]#ENDIF
                                </span>
                            </td>
                            <td class="ep-bulkprices-clickcell#IF(#FormError_Discount) DialogError#ENDIF">
                              #REM <!-- leave single quotes here - otherwise jquery wont be able to parse attribute as object --> #ENDREM
                              <span
                                data-item='{"name": "Discount"#IF(#DEFINED(#Discount)), "value": "#Discount[float]"#ENDIF}'
                                class="ep-js"
                                data-js="#BLOCK("NewLineReplace","")
                                  .uiTextedit({
                                    name: 'Discount',
                                    validate: {
                                      required: false,
                                      min: 0,
                                      max: 100,
                                      type: 'number',
                                      format: 'p1',
                                      region: $.i18n.settings.region
                                    },
                                    setAttr: {
                                      name: true,
                                      value: &quot;#IF(#DEFINED(#Discount))#Discount[float]#ENDIF&quot;
                                    },
                                    buildInstantly: true,
                                    trimContent: true,
                                    onBeforeOpen: function(input){
                                      input.val() !== '' && input.val(parseFloat(input.val()));
                                    },
                                    formatContentOnAfterWriteBack: function(widget) {
                                      widget.content = $.fn.parseAndFormatCallback(widget.uiInput.val(), {
                                        pattern: 'p1',
                                        region: $.i18n.settings.region,
                                        parser: $.i18n.parseNumber,
                                        formatter: $.i18n.formatNumber
                                      });

                                      /* widget.content = widget.uiInput.val() === '' ? '' : $.i18n.formatNumber($.i18n.parseNumber(widget.uiInput.val()), 'p1', {region: $.i18n.settings.region}); */
                                    },
                                    formatOnWriteBack: function(input, evt, error){
                                      var val = $.fn.parseAndFormatCallback(input.val(), {
                                          pattern: 'n1',
                                          region: $.i18n.settings.region,
                                          parser: $.i18n.parseNumber,
                                          formatter: $.i18n.formatNumber
                                        });

                                      input.val(val);

                                      /* input.val() !== '' && input.val($.i18n.formatNumber($.i18n.parseNumber(input.val()), 'n1', {region: $.i18n.settings.region})); */
                                    },
                                    onAfterClose: function(input){
                                      setTimeout(function() {
                                        input.closest('.ep-bulkprices-clickcell').one('click.openTextedit', function(evt) {
                                          (evt.target.nodeName.toUpperCase() === 'TD') && $(evt.target).find('span').uiTextedit('open');
                                        });
                                      }, 300);
                                    }
                                  })
                                  #ENDBLOCK">
                                  #IF(#DEFINED(#Discount))#Discount[float] %#ENDIF
                                </span>
                            </td>
                            #ENDWITH_ERROR
                          </tr>
                          #SET("TableRowCount", #TableRowCount + 1)
                        #ENDLOOP #REM <!-- LOOP(GlobalValueDiscounts) --> #ENDREM

                        #REM <!-- Display (all) unsaved values if there was any form error --> #ENDREM
                        #IF(#FormErrors)
                          #LOCAL("NewEntryError", 0)
                            #LOOP(#SORT(#FROMHASH(#FormErrors.Value.NewGlobalValueDiscountID), "Key"))
                              #IF(#GET("FormErrors.Value.NewValue.".#Key,"html") NE "" OR #GET("FormErrors.Value.NewDiscount".#Key,"html") NE "")
                                <tr class="NewEntry ep-bulkprices-newentry-error">
                                  <td class="Checkbox">
                                    <input type="hidden" name="NewGlobalValueDiscountID" value="dummy" />
                                  </td>
                                  <td class="#IF(#GET("FormErrors.Error.NewValue.".#Key,"html"))DialogError#ENDIF">
                                    #SET("NewEntryError", #GET("FormErrors.Value.NewValue.".#Key))
                                    #REM <!-- leave single quotes here - otherwise jquery wont be able to parse attribute as object --> #ENDREM
                                  <input
                                    data-item='{"name": "Value", "value": "#NewEntryError[money]"}'
                                    type="text"
                                    name="NewValue"
                                    class="ep-bulkprices-newentry-field ep-js ep-uiInput ep-uiInput-text ep-uiValidate"
                                    data-js="#BLOCK("NewLineReplace","")
                                      .uiValidate({
                                        required: true,
                                        min: 1,
                                        max: 2147483647,
                                        type: 'unique',
                                        formatValue: $.fn.uniqueValueFormatter,
                                        additionalValidator: 'number',
                                        format: 'c2',
                                        region: $.i18n.settings.region,
                                        currency: $.i18n.settings.currency,
                                        getCompareData: function(){
                                          return ep('.ep-bulkprices-table_#CustomerGroupsCounter').presentationUiPriceTableData('getIndexFilteredDataByName', #TableRowCount, 'Value', $.fn.uniqueValueFormatter);
                                        }
                                      })
                                    #ENDBLOCK" value="#NewEntryError[html]" size="4"
                                  />
                                  </td>
                                  <td>
                                    <div class="ep-flex ep-flex-align-center #IF(#GET("FormErrors.Error.NewDiscountAbsolute.".#Key,"html"))DialogError#ENDIF">
                                      #SET("NewEntryError", #GET("FormErrors.Value.NewDiscountAbsolute.".#Key))
                                      #REM <!-- leave single quotes here - otherwise jquery wont be able to parse attribute as object --> #ENDREM
                                      <input
                                        data-item='{"name": "DiscountAbsolute"#IF(#DEFINED(#NewEntryError)), "value": "#NewEntryError[money]"#ENDIF}'
                                        type="text"
                                        name="NewDiscountAbsolute"
                                        class="ep-bulkprices-newentry-field ep-js ep-uiInput ep-uiInput-text ep-uiValidate"
                                        data-js="#BLOCK("NewLineReplace","")
                                          .uiValidate({
                                            required: true,
                                            min: 0,
                                            type: 'number',
                                            format: 'c2',
                                            region: $.i18n.settings.region,
                                            currency: $.i18n.settings.currency
                                          })
                                        #ENDBLOCK"
                                        value="#IF(#DEFINED(#NewEntryError) AND #NewEntryError != "")#NewEntryError[html]#ELSE#SPACE[0]0#ENDIF"
                                      />
                                      <span class="ep-bulkprices-newentry-currency">#Currency.Symbol</span>
                                    </div>
                                  </td>
                                  <td>
                                    <div class="ep-flex ep-flex-align-center #IF(#GET("FormErrors.Error.NewDiscount.".#Key,"html"))DialogError#ENDIF">
                                      #SET("NewEntryError", #GET("FormErrors.Value.NewDiscount.".#Key))
                                      #REM <!-- leave single quotes here - otherwise jquery wont be able to parse attribute as object --> #ENDREM
                                      <input
                                        data-item='{"name": "Discount"#IF(#DEFINED(#NewEntryError)), "value": #NewEntryError[float]#ENDIF}'
                                        type="text"
                                        name="NewDiscount"
                                        class="ep-bulkprices-newentry-field ep-js ep-uiInput ep-uiInput-text ep-uiValidate"
                                        data-js="#BLOCK("NewLineReplace","")
                                          .uiValidate({
                                            required: true,
                                            min: 0,
                                            max: 99,
                                            type: 'number',
                                            format: 'p1',
                                            region: $.i18n.settings.region
                                          })
                                        #ENDBLOCK"
                                        value="#IF(#DEFINED(#NewEntryError) AND #NewEntryError != "")#NewEntryError[html]#ELSE#SPACE[0]0#ENDIF"
                                      />
                                    </div>
                                  </td>
                                </tr>
                                #SET("TableRowCount", #TableRowCount + 1)
                              #ENDIF
                            #ENDLOOP #REM <!-- LOOP(#SORT(#FROMHASH(#FormErrors.Value.NewPriceListID), "Key")) --> #ENDREM
                          #ENDLOCAL #REM <!-- LOCAL("NewEntryError") --> #ENDREM
                        #ENDIF #REM <!-- IF(FormErrors) --> #ENDREM
                      #ENDLOCAL #REM <!-- LOCAL("TableRowCount", 0) --> #ENDREM

                      #REM <!-- Display input fields for new entries --> #ENDREM
                      <tr id="ep-bulkprices-newentry_#CustomerGroupsCounter" class="ep-bulkprices-newentry">
                        <td class="Checkbox">
                          <button class="ep-button ep-button-add-row ep-bulkprices-addbutton" disabled="true" title="{Apply}">
                            <i class="fa fa-plus-square-o fa-lg"></i>
                          </button>
                          <input type="hidden" name="NewGlobalValueDiscountID" value="#IF(#DEFINED(#SelectedGlobalValueDiscountsID))#SelectedGlobalValueDiscountsID#ENDIF" />
                        </td>
                        <td>
                          <input
                            type="text"
                            name="NewValue"
                            class="ep-bulkprices-newentry-field ep-js"
                            data-js=".uiValidate({type: 'unique', formatValue: $.fn.uniqueValueFormatter, additionalValidator: 'number', format: 'c2', region: $.i18n.settings.region, min: 1, max: 2147483647, currency: $.i18n.settings.currency, getCompareData: function(){ return ep('.ep-bulkprices-table_#CustomerGroupsCounter').presentationUiPriceTableData('getDataByName', 'Value', $.fn.uniqueValueFormatter); }})"
                            value="#IF(#DEFINED(#NewValue[money]))#NewValue[money]#ENDIF"
                            size="4"
                          />
                          <span class="ep-bulkprices-newentry-currency">#LOCAL("ShopCurrency", #CURRENCY(#Shop.CurrencyID))#ShopCurrency.Symbol#ENDLOCAL</span>
                        </td>
                        <td>
                          <div class="ep-flex ep-flex-align-center">
                            <input
                              type="text"
                              name="NewDiscountAbsolute"
                              class="ep-bulkprices-newentry-field ep-js"
                              data-js=".uiValidate({type: 'number', format: 'c2', region: $.i18n.settings.region, min: 0, currency: $.i18n.settings.currency})"
                              value="#IF(#DEFINED(#NewDiscountAbsolute))#NewDiscountAbsolute[money]#ENDIF"
                              placeholder="0"
                            />
                            <span class="ep-bulkprices-newentry-currency">#LOCAL("ShopCurrency", #CURRENCY(#Shop.CurrencyID))#ShopCurrency.Symbol#ENDLOCAL</span>
                          </div>
                        </td>
                        <td>
                          <div class="ep-flex ep-flex-align-center">
                            <input
                              type="text"
                              name="NewDiscount"
                              class="ep-bulkprices-newentry-field ep-js"
                              data-js=".uiValidate({type: 'number',  format: 'p1', region: $.i18n.settings.region, min: 0, max: 99})"
                              value="#IF(#DEFINED(#NewDiscount))#NewDiscount[float]#ENDIF"
                              placeholder="0"
                            />
                            <span class="ep-bulkprices-newentry">
                              <span class="ep-bulkprices-newentry-currency">&nbsp;%</span>
                            </span>
                          </div>
                        </td>
                      </tr>
                    #ENDIF #REM <!-- IF(DELETE) --> #ENDREM
                  </tbody>
                </table>
                #IF(NOT #DELETE)
                <script id="ep-bulkprices-template_#CustomerGroupsCounter" type="text/x-jquery-tmpl">
                    <tr class="ep-bulkprices-notsaved">
                      <td class="Checkbox">
                        <input type="hidden" name="NewGlobalValueDiscountID" value="#IF(#DEFINED(#SelectedGlobalValueDiscountsID))#SelectedGlobalValueDiscountsID#ENDIF" />
                      </td>
                      <td class="ep-bulkprices-clickcell">
                        <span
                          data-item='{"name": "Value", "value": "${value}" }'
                          class="ep-js"
                          data-js="#BLOCK("NewLineReplace","")
                            .uiTextedit({
                              name: 'NewValue',
                              validate: {
                                required: true,
                                min: 1,
                                max: 2147483647,
                                type: 'unique',
                                formatValue: $.fn.uniqueValueFormatter,
                                additionalValidator: 'number',
                                format: 'c2',
                                region: $.i18n.settings.region,
                                currency: $.i18n.settings.currency,
                                getCompareData: function(){
                                  return ep('.ep-bulkprices-table_${tableIndex}').presentationUiPriceTableData('getIndexFilteredDataByName', ${rowIndex}, 'Value', $.fn.uniqueValueFormatter);
                                }
                              },
                              setAttr: {
                                name: true,
                                value: &quot;${value}&quot;
                              },
                              buildInstantly: true,
                              trimContent: true,
                              formatOnWriteBack: function(input, evt, error){
                                var val = $.fn.parseAndFormatCallback(input.val(), {
                                    pattern: 'c2',
                                    region: $.i18n.settings.region,
                                    currency: $.i18n.settings.currency,
                                    parser: $.i18n.parseNumber,
                                    formatter: $.i18n.formatNumber
                                  });

                                input.val(val);

                                /* input.val($.i18n.formatNumber($.i18n.parseNumber(input.val()), 'c2', {region: $.i18n.settings.region, currency: $.i18n.settings.currency})); */
                              },
                              onAfterClose: function(input){
                                setTimeout(function() {
                                  input.closest('.ep-bulkprices-clickcell').one('click.openTextedit', function(evt) {
                                    (evt.target.nodeName.toUpperCase() === 'TD') && $(evt.target).find('span').uiTextedit('open');
                                  });
                                }, 300);
                              }
                            })
                            #ENDBLOCK">
                            ${value}
                          </span>
                      </td>
                      <td class="ep-bulkprices-clickcell">
                        <span
                          data-item='{"name": "DiscountAbsolute"{{if discountAbsolute && discountAbsolute !== ""}}, "value": "${discountAbsolute}"{{/if}} }'
                          class="ep-js"
                          data-js="#BLOCK("NewLineReplace","")
                            .uiTextedit({
                              name: 'NewDiscountAbsolute',
                              validate: {
                                required: false,
                                min: 0,
                                max: 2147483647,
                                type: 'number',
                                format: 'c2',
                                region: $.i18n.settings.region,
                                currency: $.i18n.settings.currency
                              },
                              setAttr: {
                                name: true,
                                value: &quot;${discountAbsolute}&quot;
                              },
                              buildInstantly: true,
                              trimContent: true,
                              formatOnWriteBack: function(input, evt, error){
                                var val = $.fn.parseAndFormatCallback(input.val(), {
                                    pattern: 'c2',
                                    region: $.i18n.settings.region,
                                    currency: $.i18n.settings.currency,
                                    parser: $.i18n.parseNumber,
                                    formatter: $.i18n.formatNumber
                                  });

                                input.val(val);

                                /* if(input.val() !== ''){
                                  input.val($.i18n.formatNumber($.i18n.parseNumber(input.val()), 'c2', {region: $.i18n.settings.region, currency: $.i18n.settings.currency}));
                                } */
                              },
                              onAfterClose: function(input){
                                setTimeout(function() {
                                  input.closest('.ep-bulkprices-clickcell').one('click.openTextedit', function(evt) {
                                    (evt.target.nodeName.toUpperCase() === 'TD') && $(evt.target).find('span').uiTextedit('open');
                                  });
                                }, 300);
                              }
                            })
                            #ENDBLOCK">
                            ${discountAbsolute}
                          </span>
                      </td>
                      <td class="ep-bulkprices-clickcell">
                        <span
                        data-item='{"name": "Discount"{{if discount}}, "value": "${discount}"{{/if}} }'
                        class="ep-js"
                        data-js="#BLOCK("NewLineReplace","")
                          .uiTextedit({
                            name: 'NewDiscount',
                            validate: {
                              required: false,
                              min: 0,
                              max: 99,
                              type: 'number',
                              format: 'p1',
                              region: $.i18n.settings.region
                            },
                            setAttr: {
                              name: true,
                              value: '${discount}'
                            },
                            buildInstantly: true,
                            trimContent: true,
                            onBeforeOpen: function(input){
                              input.val() !== '' && input.val(parseFloat(input.val()));
                            },
                            formatContentOnAfterWriteBack: function(widget) {
                              widget.content = $.fn.parseAndFormatCallback(widget.uiInput.val(), {
                                pattern: 'p1',
                                region: $.i18n.settings.region,
                                parser: $.i18n.parseNumber,
                                formatter: $.i18n.formatNumber
                              });

                              /* widget.content=widget.uiInput.val() === '' ? '' : $.i18n.formatNumber($.i18n.parseNumber(widget.uiInput.val()), 'p1', {region: $.i18n.settings.region}); */
                            },
                            formatOnWriteBack: function(input, evt, error){
                              var val = $.fn.parseAndFormatCallback(input.val(), {
                                  pattern: 'n1',
                                  region: $.i18n.settings.region,
                                  parser: $.i18n.parseNumber,
                                  formatter: $.i18n.formatNumber
                                });

                              input.val(val);

                              /* input.val()!=='' &&  input.val($.i18n.formatNumber($.i18n.parseNumber(input.val()), 'n1', {region: $.i18n.settings.region})); */
                            },
                            onAfterClose: function(input){
                              setTimeout(function() {
                                input.closest('.ep-bulkprices-clickcell').one('click.openTextedit', function(evt) {
                                  (evt.target.nodeName.toUpperCase() === 'TD') && $(evt.target).find('span').uiTextedit('open');
                                });
                              }, 300);
                            }
                          })
                          #ENDBLOCK">
                          ${(discount !== undefined && discount !== "") ? discount + "&nbsp;%" : 0}
                        </span>
                      </td>
                    </tr>
                  </script>
                #ENDIF #REM <!-- IF(NOT #DELETE) --> #ENDREM

                <script>
                  require([
                    'jquery',
                    'ep',

                    'de_epages/presentation/ui/pricetabledata',
                    '$ready!'
                  ], function($, ep) {
                    $('.ep-bulkprices-table_#CustomerGroupsCounter').presentationUiPriceTableData();
                  });
                </script>
                #ENDLOCAL #REM <!-- LOCAL("CustomerGroupsCounter") --> #ENDREM
                #ENDLOCAL #REM <!-- LOCAL("SelectedGlobalValueDiscountsID") --> #ENDREM
              </div>#REM <!-- .col-xs-12 --> #ENDREM
            </div>#REM <!-- .row --> #ENDREM
          </div>#REM <!-- .col-xs-12 --> #ENDREM
        </div>#REM <!-- .row --> #ENDREM
      #ENDIF #REM <!-- IF(Shop.FeatureMaxValue.BasketDiscount AND Shop.FeatureMaxValue.PriceLists) --> #ENDREM

      <div class="row">
        <div class="col-xs-12">
          #IF(#Shop.FeatureMaxValue.BasketDiscount AND #Shop.FeatureMaxValue.PriceLists)
            <div class="DialogButtonbar ep-js" data-js=".holdOnTop('bottom', {inheritDimensions: true})">
              #IF(#DELETE)
                <input type="hidden" name="ChangeAction" value="UnityCustomerGroupDeleteGlobalValueDiscounts" />
                <input type="hidden" name="ChangeObjectID" value="#ID">
                <button type="submit" class="ep-button ep-button-delete"name="Delete">{Delete}</button>
                <button type="button" class="ep-button ep-button-cancel"name="Cancel" onclick="window.location.href='?ViewAction=UnityMBO-ViewCustomerGroupDetail&amp;ObjectID=#ID'">{Cancel}</button>
              #ELSE
                <input type="hidden" name="ChangeAction" value="Save" />
                <input type="hidden" name="ChangeObjectID" value="#ID">
                <input type="hidden" name="ChangeAction" value="UnityCustomerGroupSaveGlobalValueDiscounts" />
                <input type="hidden" name="ChangeObjectID" value="#ID">
                <button type="submit" class="ep-button ep-button-save" name="new">{Save}</button>
              #ENDIF #REM <!-- IF(DELETE) --> #ENDREM
            </div>
          #ELSE
            <div class="DialogButtonbar ep-js" data-js=".holdOnTop('bottom', {inheritDimensions: true})">
              <input type="hidden" name="ChangeAction" value="Save" />
              <input type="hidden" name="ChangeObjectID" value="#ID">
              <button type="submit" class="ep-button ep-button-save" name="new">{Save}</button>
            </div>
          #ENDIF #REM <!-- IF(Shop.FeatureMaxValue.BasketDiscount AND Shop.FeatureMaxValue.PriceLists) --> #ENDREM
        </div>#REM <!-- .col-xs-12 --> #ENDREM
      </div>#REM <!-- .row --> #ENDREM

    #ENDWITH_ERROR
  </form>
</div>
#ENDLOCAL #REM <!-- LOCAL("LocalCurrencySymbol" --> #ENDREM
#ENDLOCAL #REM <!-- LOCAL("PriceListID" --> #ENDREM
#ENDLOCAL #REM <!-- LOCAL("GlobalValueDiscounts" --> #ENDREM

#REM <!-- register a formatter function to compare currency values --> #ENDREM
<script>
  require([
    'jquery',

    'jquery/i18n'
  ], function($) {
    var options = {
        region: $.i18n.settings.region
      };

    // this method is used for the *unique* validator (see data-items)
    $.fn.uniqueValueFormatter = function(val) {
      // format number using the current region
      return $.i18n.formatNumber(
        // first parse a number from the value using to the current region
        $.i18n.parseNumber(
          val,
          10,
          options
        ),
        'n2',
        options
      );
    };

    // this method first parses *val*, than formats *val* with the given options (see data-items)
    // @returns - parsed and formatted *val*
    $.fn.parseAndFormatCallback = function(val, options) {
      var settings = $.extend({
          pattern: 'n1',
          region: $.i18n.settings.region,
          currency: $.i18n.settings.currency,
          parser: $.i18n.parseNumber,
          formatter: $.i18n.formatNumber
        }, options);

      // set value to zero if value is empty
      if (val.trim().length === 0) {
        val = 0;
      }

      // first parse value than format and return it
      return settings.formatter(
          settings.parser(val, 10, {region: settings.region, currency: settings.currency}),
          settings.pattern,
          {region: settings.region, currency: settings.currency}
        );
    };
  });
</script>

<script>
  require([
    'jquery',
    'ep',

    'jquery/i18n',
    'jquery/metaparse',
    'jquery/tmpl',
    '$ready!'
  ], function($) {
    var bulkpriceTable = function(index) {

      var table = $('.ep-bulkprices-table_' + index),
        newEntryRow = $('#ep-bulkprices-newentry_' + index),
        addRowButton = newEntryRow.find('.ep-bulkprices-addbutton'),
        newValue = newEntryRow.find('input[name=NewValue]'),
        newDiscountAbsolute = newEntryRow.find('input[name=NewDiscountAbsolute]'),
        newDiscount = newEntryRow.find('input[name=NewDiscount]'),

        // declare input map
        newInputFields = {
          'Value': {
            node: newValue,
            parser: $.i18n.parseNumber,
            placeholder: false
          },
          'DiscountAbsolute': {
            node: newDiscountAbsolute,
            parser: parseFloat,
            placeholder: true
          },
          'Discount': {
            node: newDiscount,
            parser: $.i18n.parseNumber,
            placeholder: true
          }
        },

        // declare data item variables
        dataKey = 'item',

        // declare validators
        valueValidator = {
          format: 'c2',
          region: $.i18n.settings.region,     // region string
          currency: $.i18n.settings.currency, // currency acronym,
          getCompareData: function() {
            return table.presentationUiPriceTableData('getDataByName', 'Value', $.fn.uniqueValueFormatter);
          },
          additionalValidator: 'number',
          formatValue: $.fn.uniqueValueFormatter,
          min: 1,
          max: 2147483647
        },
        discountValidator = {
          format: 'p1',
          region: $.i18n.settings.region,
          min: 0,
          max: 99
        },
        absoluteDiscountValidator = {
          format: 'c2',
          region: $.i18n.settings.region,     // region string
          currency: $.i18n.settings.currency, // currency acronym,
          min: 0
        },

        // declare template variable object
        tmplVars = {
          value: undefined,
          discountAbsolute: undefined,
          discount: undefined
        },

        // declare timer variables
        delay = 100,
        hTimer,

        rowIndex = table.find('tbody .ep-bulkprices-existingentry-row, tbody .ep-bulkprices-newentry-error, tbody .ep-bulkprices-notsaved').length,
        newRowTmpl = $('#ep-bulkprices-template_' + index),

        /*
         * Registers a click event to the handed over element.
         * If this event is triggered, a span will be searched and
         * the corresponding textedit field is displayed.
         */
        registerCellClick = function(cell) {
          cell.one('click.openTextedit', function(evt) {
            (evt.target.nodeName.toUpperCase() === "TD") && $(evt.target).find('span').uiTextedit('open');
          });
        },

        /*
         * Prepares template for new row with quantity and prices.
         */
        prepareTmpl = function(opts) {
          var renderedTmpl,
            tmplOpts = {
              value: 1,
              discountAbsolute: 1,
              discount: 1,
              tableIndex: index,
              rowIndex: rowIndex
            };

          // prepare template options
          tmplOpts.value = opts.value;
          tmplOpts.discountAbsolute = opts.discountAbsolute;
          tmplOpts.discount = opts.discount;

          // render template and execute metaparse
          renderedTmpl = newRowTmpl.tmpl([tmplOpts]);
          renderedTmpl.find('.ep-js').metaparse();

          // register cell click once
          // => is registered again in onAfterClose callback of corresponding uiTextedit element
          registerCellClick(renderedTmpl.find('.ep-bulkprices-clickcell'));

          return renderedTmpl;
        },

        /*
         * Reset value of input fields, set focus to quantity field, removes DialogError classes.
         */
        resetNewEntryRow = function() {
          var dataItems,
            accordionContent,
            accordionContentNext;

          newEntryRow.find('.DialogError').removeClass('DialogError');
          newDiscountAbsolute.val('');
          newDiscount.val('');
          newValue
            .val('')
            .trigger('focus');

          // get data items from the last row
          dataItems = getLastRowDataItems();
          setPlaceholder(dataItems);

          // scroll new entry row into view
          newEntryRow.closest('.Dialog.container-fluid.ui-helper-clearfix')[0].scrollIntoView({
            block: 'end',
            behavior: 'smooth'
          });
        },

        /*
         * Execute validation of new quantity and new prices. If content is valid
         * a new row will be rendered and inserted before the "new entry row".
         */
        cloneRow = function(opts) {
          var values = {
              valid: true,
              length: true, // length === true => all price fields contain values
              empty: true,  // empty === true  => all price fields are empty
              values: []
            },
            discountsAbsolute = {
              valid: true,
              length: true, // length === true => all price fields contain values
              empty: true,  // empty === true  => all price fields are empty
              values: []
            },
            discounts = {
              valid: true,
              length: true, // length === true => all price fields contain values
              empty: true,  // empty === true  => all price fields are empty
              values: []
            };

          // get value validations (correct format and value length)
          newValue.each(function(index, elem) {
            var $elem = $(elem),
              val = $elem.val(),
              blnLength = (val.length !== 0);

            // all price fields are valid?
            values.valid = values.valid && ((ep.validate.number(val, valueValidator) === true) ? true : false);
            // all price fields contain values?
            values.length = values.length && blnLength;
            // all price fields are empty?
            values.empty = values.empty && !blnLength;
            // add value
            values.values.push($.i18n.formatNumber($.i18n.parseNumber(val), "c2", {min:1, currency: valueValidator.currency, region: valueValidator.region}));
          });

          // get discountAbsolute validations (correct format and value length)
          newDiscountAbsolute.each(function(index, elem) {
            var $elem = $(elem),
              val = $elem.val(),
              blnLength = (val.length !== 0);

            // all price fields are valid?
            discountsAbsolute.valid = discountsAbsolute.valid && ((ep.validate.number(val, absoluteDiscountValidator) === true) ? true : false);
            // all price fields contain values?
            discountsAbsolute.length = discountsAbsolute.length && blnLength;
            // all price fields are empty?
            discountsAbsolute.empty = discountsAbsolute.empty && !blnLength;
            // add value
            discountsAbsolute.values.push($.i18n.formatNumber($.i18n.parseNumber(val), "c2", absoluteDiscountValidator));
          });

          // get discount validations (correct format and value length)
          newDiscount.each(function(index, elem) {
            var $elem = $(elem),
              val = $elem.val(),
              blnLength = (val.length !== 0);

            // all price fields are valid?
            discounts.valid = discounts.valid && ((ep.validate.number(val, discountValidator) === true) ? true : false);
            // all price fields contain values?
            discounts.length = discounts.length && blnLength;
            // all price fields are empty?
            discounts.empty = discounts.empty && !blnLength;
            // add value
            discounts.values.push($.i18n.formatNumber($.i18n.parseNumber(val),"n1", discountValidator));
          });

          // if all fields contain valid values
          if (
            (ep.validate.unique(newValue.val(), valueValidator) === true)
            &&
            discountsAbsolute.valid
            &&
            discounts.valid
          ) {
            // set template variable
            tmplVars = {
              value: (values.length === true) ? values.values[0] : '',
              discountAbsolute: (discountsAbsolute.length === true) ? discountsAbsolute.values[0] : [newDiscountAbsolute.prop('placeholder')],
              discount: (discounts.length === true) ? discounts.values[0] : [newDiscount.prop('placeholder')]
            };

            // if *enter* was pressed
            if (opts.enterKey !== undefined && opts.enterKey === true) {
              addNewRow();
            } else {
              // enable add row button
              addRowButton.prop('disabled', false);
            }
          } else {
            // reset template variables
            tmplVars = {};
            // disable add button
            addRowButton.prop('disabled', true);
          }
        },

        /*
        * Get elements from the last row containing a data-item attribute.
        */
        getLastRowDataItems = function(options) {
          var lastExistingRow = table.find('tbody .ep-bulkprices-existingentry-row, tbody .ep-bulkprices-notsaved').last(),
            dataItems = [],
            selector = options && options.selector ? options.selector : 'input';

          if (lastExistingRow.length > 0) {
            // filter and map data items
            dataItems = $.makeArray(
              lastExistingRow.find(selector)
                .filter(function() {
                  return $(this).data(dataKey) !== undefined;
                })
                .map(function(index, item) {
                  return $(item).data(dataKey);
                })
            );
          }

          return dataItems;
        },

        /*
        * Sets the placeholder of the input elements (newInputFields) inside the row
        * for new entries.
        */
        setPlaceholder = function(dataItems) {
          // if data items are available
          if (dataItems.length > 0) {
            // iterate over data items
            dataItems.forEach(function(data) {
              // add data.value to the corresponding input value
              if (newInputFields[data.name]) {
                var val = data.value ? data.value : 0;

                newInputFields[data.name].node.attr('placeholder', newInputFields[data.name].placeholder ? val : null);
              }
            });
          }
        },

        /*
        * Initializes the table.
        */
        initTable = function() {
          // get data items from the last row
          var dataItems = getLastRowDataItems({
            selector: 'input, span'
          });

          setPlaceholder(dataItems);
        },

        /*
        * Adds a new row if all values are valid and does some clean up and update work.
        */
        addNewRow = function() {
          // add variable for template rendering
          prepareTmpl({
              value: tmplVars.value,
              discountAbsolute: tmplVars.discountAbsolute,
              discount: tmplVars.discount
          }).insertBefore(newEntryRow);

          resetNewEntryRow();

          // update row values
          table.presentationUiPriceTableData('updateData');

          // disable add button
          addRowButton.prop('disabled', true);
        };

        // handle button to add new row
        addRowButton.on('click.addNewRow', function(evt) {
          evt.preventDefault();

          addNewRow();
        });

        // register events for input fields
        [
          {node: newValue, nameSpace: 'newValue'},
          {node: newDiscountAbsolute, nameSpace: 'newDiscountAbsolute'},
          {node: newDiscount, nameSpace: 'newDiscount'}
        ].forEach(function(item) {
          // handle enter key
          item.node.on('keydown.' + item.nameSpace, function(evt) {
            // if enter was pressed
            if (evt.which === 13){
              // prevent form to be submitted
              evt.preventDefault();
              // clear running timeout
              window.clearTimeout(hTimer);
              // handle insertion of new row
              cloneRow({
                target: evt.target,
                enterKey: true
              });
            }
          });

          // handle input in new quantity field
          item.node.on('input.' + item.nameSpace, function(evt) {
            if (hTimer) {
              window.clearTimeout(hTimer);
            }

            hTimer = window.setTimeout(function() {
                cloneRow({
                  target: evt.target
                });
            }, delay);
          });
        });

        // register cell click once
        // => is registered again in onAfterClose callback of corresponding uiTextedit element
        registerCellClick(ep('.ep-bulkprices-table_' + index + ' .ep-bulkprices-clickcell'));

        // initialize table
        initTable();
    }

    // Initialize bulkprice table
    bulkpriceTable(0);

    /*
     * Handle form submit for incomplete rows
     */
    $('.ep-bulkprices-form').on('submit', function(evt) {
      // check last rows which are valid but values are missing
      // => trigger add button to make sure all fields are filled
      $('tr.ep-bulkprices-newentry .ep-bulkprices-addbutton').each(function(index, button) {
        var $button = $(button);

        if ($(button).prop('disabled') === false) {
          $button.trigger('click');
        }
      });
    });
  });
</script>