{extends file="actions/action.tpl"}
{block "action"}
   <div class="form-group">
      <div class="col-md-4 control-label">
         <label><strong>{'pointsCalcType'|translate:'bonus_program'}</strong></label>
      </div>
      <div class="col-md-6">
         <div class="radio" style="margin-right: 15px">
            <input type="radio" class="check" name="{$name}[data][points_calculation_type]" value="perc" data-calculation-type-select
                   {if $data.points_calculation_type == "perc"}checked="checked"{/if} id="type_percentage"/>
            <label for="type_percentage">{'pointsCalcType_perc'|translate:'bonus_program'}</label>
         </div>
         <div class="radio">
            <input type="radio" class="check" name="{$name}[data][points_calculation_type]" value="price" data-calculation-type-select
                   {if $data.points_calculation_type == "price"}checked="checked"{/if} id="type_price"/>
            <label for="type_price">{'pointsCalcType_price'|translate:'bonus_program'}</label>
         </div>
      </div>
   </div>

   <hr>

   <div class="form-group" data-calculation-type="perc" style="display: none">
      <div class="col-md-4 control-label">
         <label>{'pointsFromPrice'|translate:'bonus_program'}</label>
         <a class="help-tip" data-toggle="tooltip" title="{'pointsFromPriceHelp'|translate:'bonus_program'}"><i class="bi bi-question-circle"></i></a>
      </div>
      <div class="col-md-3">
         <div class="input-group">
            <input type="number" class="form-control input-sm"
                   name="{$name}[data][points_from_price_percent]"
                   value="{$data.points_from_price_percent}"
                   maxlength="2" min="0" max="100" step="0.0001" style="min-width: 55px;">
            <span class="input-group-addon">%</span>
         </div>
      </div>
   </div>

   <div class="form-group" data-calculation-type="price" style="display: none">
      <div class="col-md-4 control-label">
         <label>{'pointPerPrice'|translate:'bonus_program'}</label>
      </div>
      <div class="col-md-3">
         <div class="input-group">
            <input type="number" class="form-control input-sm"
                   name="{$name}[data][points_from_price_value]"
                   value="{$data.points_from_price_value}"
                   style="min-width: 55px;">
            <span class="input-group-addon" style="padding: 0px; border: 0px; min-width: 50px;">
               {get_contexts currency=1 assign='contexts'}
               <select class="selecter" name="{$name}[data][points_from_price_currency]">
                  {foreach $contexts.currency->getAll() as $currency}
                     <option value="{$currency->getId()}" {if $data.points_from_price_currency == $currency->getId()}selected{/if}>{$currency->getId()}</option>
                  {/foreach}
               </select>
            </span>
            <span class="input-group-addon">{'earnOnePoint'|translate:'bonus_program'}</span>
         </div>
      </div>
   </div>

   <div class="form-group">
      <div class="col-md-4 control-label">
         <label>{'pointsRounding'|translate:'bonus_program'}</label>
      </div>
      <div class="col-md-4">
         {$selected = $data.points_round_direction|default:'round'}
         {print_select
            name="{$name}[data][points_round_direction]" selected=$selected
            var=[
               'round' => translate('Mathematically', 'settings'),
               'ceil' => translate('WayUp', 'settings'),
               'floor' => translate('WayDown', 'settings')
            ]}
      </div>
      <div class="col-md-2 control-label" style="padding-left: 0px;">
         <label style="white-space: nowrap;">{'pointsPrecision'|translate:'bonus_program'}</label>
      </div>
      <div class="col-md-2">
         {$selected = $data.points_precision|default:0}
         {print_select name="{$name}[data][points_precision]" var=[0 => 0, 1 => 1, 2 => 2] selected=$selected}
      </div>
   </div>

    <div class="form-group">
       <div class="col-md-8 col-md-offset-1">
          <input type="hidden" name="{$name}[data][points_sum_rounding]" value="N">
          <div class="checkbox">
             <input id="{$name}[data][points_sum_rounding]" class="check" type="checkbox" name="{$name}[data][points_sum_rounding]"
                       value="Y" {if $data.points_sum_rounding == 'Y'}checked{/if} />
             <label for="{$name}[data][points_sum_rounding]">
                 {'pointsSumRounding'|translate:'bonus_program'}
                <a class="help-tip" data-toggle="tooltip" title="{'pointsSumRoundingHelp'|translate:'bonus_program'}"><i class="bi bi-question-circle"></i></a>
             </label>
          </div>
       </div>
    </div>

   {include 'block.productsFilter.tpl' filter_size=2 filterName=$name filterInputName=$name|cat:'[data][filter]'
                                       filter=$data.filter filterEnabled=!empty($data.filter)}

   <script>
      $(document).ready(function () {
         switchCalculationType('{$data.points_calculation_type}');
      });

      $('[data-calculation-type-select]').on('change', function () {
         switchCalculationType($(this).val());
      });

      function switchCalculationType(type) {
         // Get all elements with the data-calculation-type attribute
         const elements = document.querySelectorAll('[data-calculation-type]');

         // Iterate over the elements and hide/show based on the type
         elements.forEach(element => {
            if (element.getAttribute('data-calculation-type') === type) {
               element.style.display = 'block';
            } else {
               element.style.display = 'none';
            }
         });
      }
   </script>
{/block}
