{extends "actions/action.tpl"}

{block "action"}
   {$upsellAutocompleteIdentifier = "upsell[{$id_action}]"}
   {$upsellTemplateIdentifier = "multiselectAutocomplete_upsell_{$id_action}_template"}

   <div class="form-group">
      <div class="col-md-2 control-label"><label>Popis</label></div>
      <div class="col-md-10">
         <input type="text" class="form-control input-sm" name="{$name}[data][description]" placeholder="Krátký popis do košíku" value="{$data.description}">
      </div>
   </div>

   <div class="form-group">
      <div class="col-md-2 control-label"><label>{'product'|translate:'products'}</label></div>
      <div class="col-md-10">
         <div class="row">
            <div class="col-xs-12">
               <input type="text" data-autocomplete-search="{$upsellAutocompleteIdentifier}" autocomplete="off"
                      class="form-control input-sm autocomplete-control" name="addProduct" placeholder="Vyhledat produkt">
            </div>
         </div>
         <div data-related="sortable" data-autocomplete-items="{$upsellAutocompleteIdentifier}" class="panel-group panel-group-lists">
            <script id="{$upsellTemplateIdentifier}" type="text/x-dot-template">
               {literal}
                  {{~it.items :item :index}}
                  <div class="panel autocomplete-results" data-form-item="{{=item.id_product}}" style="display:none">
                     <div class="panel-body">
                        <div class="col-md-1">
                           <span class="drag-drop-mover pull-right">
                              <i class="bi bi-arrows-move handle"></i>
                           </span>
                        </div>
                        <div class="col-md-2">
                           <input type="hidden" class="form-control input-sm"
                                  name="{/literal}{$name}{literal}[data][upsell][{{? item.index }}-{{=item.index}}{{??}}{{=index + 1}}{{?}}][id_product]"
                                  value="{{=item.id}}">
                           {{? item.image}}
                           <img src="{{=item.image.src}}" alt="{{=item.image.descr}}">
                           {{?}}
                        </div>
                        <div class="col-md-9">
                           <p class="product-title">
                              <a href="javascript:nw('product', '{{=item.id}}')">{{=item.title}}</a><br>
                              <small>Kód: {{? item.code}}{{=item.code}}{{?}} | Skladem: {{=item.in_store}} ks</small>
                           </p>
                           {{? item.variations}}
                           <p>
                              <select class="selecter" multiple
                                      name="{/literal}{$name}{literal}[data][upsell][{{? item.index }}-{{=item.index}}{{??}}{{=index + 1}}{{?}}][id_variation][]"
                                      data-placeholder="Vyberte varianty...">
                                 {{~item.variations :variation :varIndex}}
                                 <option value="{{=variation.value}}" {{? variation.selected}}selected="selected"{{?}}>
                                    {{=variation.label}} | <small>Kód: {{? variation.code}}{{=variation.code}}{{?}} | Skladem: {{=variation.in_store}} ks</small>
                                 </option>
                                 {{~}}
                                 </select>
                           </p>
                           {{?}}
                        </div>

                        <div class="col-md-1">
                           <a class="btn-sm btn btn-danger" data-form-delete>
                              <input class="hidden" type="checkbox"
                                     name="{/literal}{$name}{literal}[data][upsell][{{? item.index }}-{{=item.index}}{{??}}{{=index + 1}}{{?}}][delete]"/>
                              <span class="glyphicon glyphicon-remove"></span>
                           </a>
                        </div>
                     </div>
                  </div>
                  {{~}}
               {/literal}
            </script>
         </div>
      </div>
      <script type="application/javascript">
         $('[data-autocomplete-search="{$upsellAutocompleteIdentifier}"]').multiSelectAutoComplete({
            formTemplate: "#{$upsellTemplateIdentifier}",
            formWrapper: "{$upsellAutocompleteIdentifier}",
            variations: { product_field: 'id_rel_product' },
            afterSelect: function () {
               $('[data-related=sortable]').sortable('refresh');
               $('[data-related=sortable]').data('uiSortable')._trigger('update');
            }
         }).multiSelectAutoComplete('addItems', {
            "items": {$upsell|json_encode nofilter}
         });

         $('[data-related=sortable]').sortable({
            helper: function (e, row) {
               var $row = $(row);
               var $helper = $row.clone().addClass('drag-drop');
               return $helper[0];
            },
            update: function (event, ui) {
               $(this).children().each(function (index, item) {
                  $(item).find('[data-sort]').val($(item).index()).change();
               });
            },
            handle: '.handle',
            placeholder: 'placeholder',
         });
      </script>
   </div>
{/block}
