<h2>{{ title }}</h2>
<div class="submit-bt"> <button class="button-primary" onclick="window.location.href='/products/newproduct/'">Create New Product</button></div>

<div>
   <h3>Choose Categrory</h3>
   <div class="category-buttons">
   {{#each categories as |val key|}}
   <button onclick="window.location.href='/products/category/{{val.id}}'">{{ val.title}}</button>


   {{/each}}
   </div>


</div>
<div class="form-group">
   <form action="/products/search" method="POST">
      <input type="text" name="term" id="term" placeholder="Search..."><button type="submit" name="submit">
         Search
      </button>
   </form>
</div>
<div class="item-row-top">
   <div class="column-4"><span class="menutitle">Preview</span></div>
   <div class="column-4"><span class="menutitle">Title</span></div>
   <div class="column-4"><span class="menutitle">SKU</span></div>
    <div class="column-4"><span class="menutitle">Design Tool</span></div>

</div><br>
{{# each products as |val key|}}
<div class="dragger" draggable="true">
   <div class="item-row" onclick="window.location.href='/products/editProduct/{{val.id}}'">
      <div class="column-4"><img class="list-preview" src="/thumbs/products/{{val.id}}.png" /></div>
      <div class="column-4"> {{ val.title }}</div>
      <div class="column-4"> {{ val.sku }}</div>
      <div class="column-4"><a href="/clients/designTool/{{val.id}}">Open</a></div>
       <div style="display:none" id="id_holder">{{val.id}}</div>

     
   </div>
</div>
{{/each}}

<div class="pagination">
   <a href="/products/page/{{prevpage}}">PREVIOUS</a>
   <a href="/products/page/{{nextpage}}">NEXT</a>
</div>

<script>
   function startup() {
      assignDraggable();
   };
</script>
<script>
   let items;
   function assignDraggable(e) {
      console.log("make draggable");
      items = document.querySelectorAll('.dragger');

      items.forEach(function (item) {
         item.draggable = true;
         item.addEventListener('dragstart', handleDragStart, false);
         item.addEventListener('dragenter', handleDragEnter, false);
         item.addEventListener('dragover', handleDragOver, false);
         item.addEventListener('dragleave', handleDragLeave, false);
         item.addEventListener('drop', handleDrop, false);
         item.addEventListener('dragend', handleDragEnd, false);
      });
   }
   var dragSrcEl = null;

   function handleDragStart(e) {
      this.style.opacity = '0.4';

      dragSrcEl = this;

      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setData('text/html', this.innerHTML);
   }

   function handleDragOver(e) {
      if (e.preventDefault) {
         e.preventDefault();
      }

      e.dataTransfer.dropEffect = 'move';

      return false;
   }

   function handleDragEnter(e) {
      this.classList.add('over');
   }

   function handleDragLeave(e) {
      this.classList.remove('over');
   }

   function handleDrop(e) {
      if (e.stopPropagation) {
         e.stopPropagation(); // stops the browser from redirecting.
      }
      //SWAP
      /*if (dragSrcEl != this) {
         dragSrcEl.innerHTML = this.innerHTML;
         this.innerHTML = e.dataTransfer.getData('text/html');
      }*/
      //INSERT ABOVE! :)
      if (dragSrcEl != this){
        let main = document.getElementById('main');
        main.insertBefore(dragSrcEl, this);
      }
      reorderList();
      return false;
   }

   function handleDragEnd(e) {
      this.style.opacity = '1';

      items.forEach(function (item) {
         item.classList.remove('over');
      });
   }
   function reorderList() {
      console.log("reorder list");
      //get newest postions
      let orderList = [];
      let ids = document.querySelectorAll('#id_holder');
      ids.forEach(function (item) {
         orderList.push(item.innerHTML);
      })
      console.log("list", orderList);
      $.ajax({
         type: "POST",
         url: "/products/reorder",
         data: {
            list: orderList
         }
      }).done(function (o) {
         console.log('saved', o);
         return true;
      });

   }

</script>