{extends "../windowFrame.tpl"}

{block body_class}class="panel_frame"{/block}

{block css append}
   <link href="./static/js/jquery.tree-drag-drop.css?t={$header.date}" rel="stylesheet" media="screen">
{/block}

{block js append}
   <script src="./static/js/jquery.tree-drag-drop.js?t={$header.date}"></script>
{/block}

{block content}
<form name="editform" method="post" action="launch.php?s=sections.products.php&amp;ID={$body.ID}" class="form-horizontal" style="padding-top: 15px;">
   <div class="container-fluid" id="section_products">
      <h1 class="h4 main-panel-title">Top produkty</h1>
      <div id="topProducts">
         <div class="row bottom-space">
            <div class="col-md-6">
               <input type="text" data-autocomplete-search="section_top_products" autocomplete="off" class="form-control input-sm autocomplete-control" name="addTopProduct" placeholder="Přidat top produkt...">
            </div>
            <div class="col-md-2 col-md-offset-4">
               <input type="submit" name="submitUpdateVariation" class="btn btn-primary btn-block" value="Uložit" />
            </div>
         </div>

         <div data-autocomplete-items="section_top_products" class="panel-group panel-group-lists">

            <script id="multiselectAutocomplete_topProducts" 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" name="data[topPro][{{? item.index }}-{{=item.index}}{{??}}{{=index + 1}}{{?}}][id]"
                                value="{{? item.id_position }}{{=item.id_position}}{{?}}">
                         <span class="drag-drop-mover pull-right">
                           <i class="bi bi-arrows-move handle"></i>
                         </span>
                         <input type="hidden" class="form-control input-sm" name="data[topPro][{{? item.index }}-{{=item.index}}{{??}}{{=index + 1}}{{?}}][id_top_product]"
                                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.in_store}} ks</small></p>
                         <a class="btn-sm btn btn-danger" data-form-delete>
                            <input class="hidden" type="checkbox" name="data[topPro][{{? item.index }}-{{=item.index}}{{??}}{{=index + 1}}{{?}}][delete]"/>
                            <span class="glyphicon glyphicon-remove"></span>
                         </a>
                         <input type="hidden" data-sort name="data[topPro][{{? item.index }}-{{=item.index}}{{??}}{{=index + 1}}{{?}}][position]" value="{{? item.position}}{{=item.position}}{{??}}{{=0}}{{?}}">
                      </div>
                   </div>
                   {{~}}
                {/literal}
            </script>

         </div>

         <script>
             $('[data-autocomplete-search="section_top_products"]')
                 .multiSelectAutoComplete({
                    formTemplate: '#multiselectAutocomplete_topProducts',
                    formWrapper: 'section_top_products',
                    type: 'productId',
                    append: false,
                    parameters: '&section={$body.ID nofilter}',
                    afterSelect: function (e, $item) {
                       $("[data-autocomplete-items=section_top_products]").data('uiSortable')._trigger('update');
                    }
                 })
                 .multiSelectAutoComplete('addItems', {$body.top_products|json_encode nofilter});

             $("[data-autocomplete-items=section_top_products]").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>


      <h1 class="h4 main-panel-title">Produkty zařazené v této sekci <span class="help-block small pull-right">Počet produktů: {$body.productsTotalCount}</span></h1>
      <div id="addItem">
         <div class="row bottom-space">
            <div class="col-md-3">
               <a href="#" data-form-add class="btn btn-success btn-block"><span class="glyphicon glyphicon-plus"></span>&nbsp;Přidat produkt do sekce</a>
            </div>
         </div>


         <ul class="list-group" id="items">
            <li class="list-group-item" data-form-new style="display: none;" id="stockin">

               <div class="row">
                  <div class="col-md-2 control-label">
                     <label>Název produktu</label>
                  </div>
                  <div class="col-md-5">
                     <input type="text" class="product-id form-control input-sm" name="data[products][0][id_product]" size="5" maxlength="100" value=""/>
                  </div>
                  <div class="col-md-2">
                     <a class="btn-sm btn btn-danger" data-form-delete>
                        <input class="hidden" type="checkbox" name="data[products][0][delete]" />
                        <span class="glyphicon glyphicon-remove"></span>
                     </a>
                  </div>
               </div>
            </li>
         </ul>
      </div>


      {if $body.products}
          <div class="panel panel-default">
            <div class="panel-heading" style="padding-bottom:4px">
               <div class="row">
                  <div class="col-md-5">
                     <small><strong>Název produktu</strong></small>
                  </div>
                  <div class="col-md-1 col-md-offset-6 text-right">
                     <small><strong>Akce</strong></small>
                  </div>
               </div>
            </div>

            <ul class="list-group" id="items">
                  {foreach $body.products as $key => $product}
                     <li class="list-group-item" data-form-item>
                           <div class="row">
                              <div class="col-md-5">
                                 <a href="javascript:nw('product', '{$product.id_product}');" title="Detail produktu">
                                    <strong>{$product.title}</strong>
                                 </a>
                              </div>
                              <div class="col-md-2 col-md-offset-5">
                                 {if array_search($product.id_product, array_column($body.top_products, 'id')) === false}
                                 <button data-toggle="tooltip" title="Přidat do TOP produktů" class="btn-sm btn btn-default col-md-offset-4" data-top-product-add="{$key}">
                                    <span class="glyphicon glyphicon-plus"></span>
                                 </button>
                                 {/if}
                                 <a class="btn-sm btn btn-danger pull-right" data-form-delete>
                                    <input class="hidden" type="checkbox" name="data[products][{$product.id_product}][delete]" />
                                    <span class="glyphicon glyphicon-remove"></span>
                                 </a>
                              </div>
                           </div>
                     </li>
                  {/foreach}
            </ul>
             {if $body.productsTotalCount > 100}
             <div>
                <span class="help-block small pull-left">Zobrazeno prvních {count($body.products)} produktů z celkového počtu {$body.productsTotalCount}</span>
             </div>
             {/if}
          </div>
      {/if}
   </div>
</form>
{/block}

<script type="text/javascript">
   {block onready append}
      initForm({
         selector: '#section_products',
         beforeAdd: function(original){
            var $item = original();
            var autocomplete = new $.wpjAutoComplete({ input:$item.find('.product-id'), type:'product_id', input_name:"" });
            autocomplete.inputHidden.focus();
            autocomplete.inputHidden.change();
            return false;
         }
      });

      $("[data-top-product-add]").click(function () {
          var items = {$body.products|json_encode nofilter};
          var product = $(this).data('top-product-add');
          items[product]['index'] = product + 1;

          $('[data-autocomplete-search="section_top_products"]').multiSelectAutoComplete('addItems', [items[product]]);
          $("[data-autocomplete-items=section_top_products]").data('uiSortable')._trigger('update');

          $(this).hide();
          return false;
      });
   {/block}
</script>

