<div id="flapGifts" class="tab-pane fade in boxFlex">
      <div id="gifts">
         <div class="row">
            <div class="form-group">
               <div class="col-md-2 control-label"><label>{'productGiftsSelectOption'|translate}</label></div>
               <div class="col-md-1">
                  <input
                     type="number"
                     class="form-control input-sm autocomplete-control"
                     name="data[data][gifts_settings][select_count]"
                     placeholder="1"
                     value="{$body.data.data.gifts_settings.select_count}">
               </div>
               <div class="col-md-1">
                  {print_toggle name="data][gifts_settings][select_active]" value=$body.data.data.gifts_settings.select_active}
               </div>
            </div>
         </div>

         <div class="row">
            <div class="col-md-11">
               <h1 class="h4 main-panel-title">{'productGifts'|translate:'products'}</h1>
            </div>
            <div class="col-md-1">
               <a href="javascript:help('gifts');"><i class="btn btn-info bi bi-question-circle"></i></a>
            </div>
         </div>

         <div class="row bottom-space">
            <div class="col-md-4">
               <input type="text" data-autocomplete-search="products_gifts" autocomplete="off" class="form-control input-sm autocomplete-control" name="addProduct"
                      placeholder="{'addGiftsProduct'|translate}">
            </div>
         </div>

         <div data-autocomplete-items="products_gifts" class="panel-group panel-group-lists" id="gifts">

            <script id="multiselectAutocomplete_gifts" type="text/x-dot-template">
               {literal}
                  {{~it.items :item :index}}
                  <div class="panel autocomplete-results" data-form-item="{{=item.id}}" style="display:none">
                     <div class="panel-body">
                        <input type="hidden" class="form-control input-sm" name="{/literal}{$tab.prefix}{literal}[gifts][{{? item.index }}-{{=item.index}}{{??}}{{=index + 1}}{{?}}][id_product_gift]"
                               value="{{=item.id}}">
                        {{? item.image}}
                        <img src="{{=item.image.src}}" alt="{{=item.image.descr}}">
                        {{?}}
                        <p class="product-title">
                           <a href="javascript:nw('product', '{{=item.id}}')">{{=item.title}}</a><br>
                           <small>Kód: {{=item.code}} | Skladem: {{=item.inStore}} ks</small>
                        </p>
                        <p>
                           {{? item.variations}}
                           <select class="selecter" name="{/literal}{$tab.prefix}{literal}[gifts][{{? item.index }}-{{=item.index}}{{??}}{{=index + 1}}{{?}}][id_variation_gift]">
                              <option value="">Neurčovat variantu</option>
                              {{~item.variations :variation :indexVariation}}
                              <option value="{{=variation.value}}" {{? variation.selected}}selected{{?}}>{{=variation.label}}</option>
                              {{~}}
                           </select>
                           {{?}}
                        </p>
                        <p>
                        <div class="input-group" style="width:150px">
                           <input class="form-control input-sm" name="{/literal}{$tab.prefix}{literal}[gifts][{{? item.index }}-{{=item.index}}{{??}}{{=index + 1}}{{?}}][pieces]"
                                  value="{{? item.gift_pieces}}{{=item.gift_pieces}}{{??}}1{{?}}" type="text">
                           <span class="input-group-addon">ks</span>
                        </div>
                        </p>
                        <a class="btn-sm btn btn-danger" data-form-delete>
                           <input class="hidden" type="checkbox" name="{/literal}{$tab.prefix}{literal}[gifts][{{? item.index }}-{{=item.index}}{{??}}{{=index + 1}}{{?}}][delete]"/>
                           <span class="glyphicon glyphicon-remove"></span>
                        </a>
                     </div>
                  </div>
                  {{~}}
               {/literal}
            </script>
         </div>
      </div>
      <script type="application/javascript">
         $('[data-autocomplete-search="products_gifts"]').multiSelectAutoComplete({
            formTemplate: '#multiselectAutocomplete_gifts',
            formWrapper: 'products_gifts',
            parameters: 'except_product={$body.data.id}',
            variations: {
               product_field: 'id_rel_product',
            },
         }).multiSelectAutoComplete('addItems', {$body.product.gifts|array_values|json_encode nofilter});

         initForm({
            selector: '#gifts',
            beforeAdd: function(callback) {
               var $item = callback();
               return false;
            },
         });
      </script>
</div>
