{extends "../window.tpl"}

{block title}
    {'header'|translate}
{/block}

{block tabs}
    {windowTab id='flapReplacement' label="{'header'|translate}"}
{/block}

{block size}
   width = 1220;
   height = 900;
{/block}

{block tabsContent}
   <style type="text/css">
      .table-collapsed .input-sm {
         height: 25px;
         margin-bottom: -3px;
         margin-top: -3px;
      }
   </style>
   <div id="flapOrder" class="tab-pane fade active in boxStatic">
      <div id="products">
         <div class="panel-group panel-group-lists">
            <div class="row bottom-space">
               <div class="col-md-6">
                  <h4 class="no-margin"><strong>{'order'|translate} {$order.order_no}</strong></h4>
               </div>
               {if false}
               <div class="col-md-2 col-md-offset-4 text-right">
                  <a href="javascript:help('SplitOrder');" class="btn btn-warning"><i class="bi bi-question-circle"></i> {'help'|translate:'menulinks'}</a>
               </div>
               {/if}
            </div>
            <div class="panel panel-default panel-sm no-margin">
               <table xmlns="http://www.w3.org/1999/xhtml" class="table table-collapsed table-striped">
                  <thead>
                  <tr>
                     <th scope="col" style="min-width:300px;">{'prodFromOrders'|translate}</th>
                     <th scope="col">{'code'|translate}</th>
                     <th scope="col">{'ean'|translate}</th>
                     <th scope="col" colspan="2">{'origPcs'|translate}</th>
                     <th scope="col">{'newOrderPcs'|translate}</th>
                  </tr>
                  </thead>
                  <tbody>
                  {foreach $products as $key => $item}
                      {if empty($item.id_product) || $item.in_store + $item.piecesOrdered >= 0}
                          {$class="row-green"}
                      {else}
                          {if $item.in_store + $item.piecesOrdered + $item.piecesInSuppliers >= 0}
                              {$class="row-orange"}
                          {else}
                              {$class="row-red"}
                          {/if}
                      {/if}
                     <tr class="{$class} {$item.class}">
                        <td>
                           <div class="list_item">
                              <span class="productname" data-id='{$item.id_product}'>
                                  {if $item.id_product > 0}
                                     <a href="javascript:nw('product', '{$item.id_product}');"><strong>{$item.descr}</strong></a>

{else}

                                     <strong>{$item.descr}</strong>
                                  {/if}
                                  {$item.variation_title}
                                  {if $item.item_note}
                                     <small>{$item.item_note}</small>
                                  {/if}
                               </span>
                           </div>
                        </td>
                        <td>
                            {$item.code}
                        </td>
                        <td>
                            {$item.ean}
                        </td>
                        <td>
                           <span data-original-pcs="{$item.pieces}" id="old-pcs-{$item.id}">{$item.pieces}</span> ({'of'|translate} {$item.pieces})
                           <input type="hidden" id="pcs" value="{$item.pieces}" name="data[items][{$item.id}][pieces_old]">
                        </td>
                        <td class="text-center">
                           <button type="button" onclick="splitOrder.allToOldOrder({$item.id})" class="btn btn-default btn-xs"><i class="glyphicon glyphicon-backward"></i></button>
                           <button type="button" onclick="splitOrder.oneToOldOrder({$item.id})" class="btn btn-default btn-xs"><i class="glyphicon glyphicon-chevron-left"></i>
                           </button>
                           <button type="button" onclick="splitOrder.oneToNewOrder({$item.id})" class="btn btn-default btn-xs"><i class="glyphicon glyphicon-chevron-right"></i>
                           </button>
                           <button type="button" onclick="splitOrder.allToNewOrder({$item.id})" class="btn btn-default btn-xs"><i class="glyphicon glyphicon-forward"></i></button>
                        </td>
                        <td>
                           <input type="number" id="new-pcs-{$item.id}" onchange="splitOrder.changed({$item.id})" min="0" max="{$item.pieces}" class="form-control input-sm"
                                  style="max-width:80px;" name="data[items][{$item.id}][pieces_new]" size="10" maxlength="20" value=""/>
                        </td>
                     </tr>
                  {/foreach}
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </div>
{/block}
<script type="text/javascript">
    {block onready append}
    var splitOrder = {
       oldOrderPcsSelector: 'old-pcs-',
       newOrderPcsSelector: 'new-pcs-',
       changed: function(itemId) {
          var newPcs = document.getElementById(this.newOrderPcsSelector + itemId),
             oldPcs = document.getElementById(this.oldOrderPcsSelector + itemId),
             oldVal = Number(oldPcs.dataset.originalPcs) - Number(newPcs.value);

          if (oldVal < 0) {
             newPcs.value = Number(oldPcs.dataset.originalPcs);
             oldPcs.innerText = 0;
          } else {
             oldPcs.innerText = oldVal;
          }
       },
       allToNewOrder: function(itemId) {
          var newPcs = document.getElementById(this.newOrderPcsSelector + itemId),
             oldPcs = document.getElementById(this.oldOrderPcsSelector + itemId);
          newPcs.value = Number(oldPcs.dataset.originalPcs);
          oldPcs.innerText = 0;
       },
       allToOldOrder: function(itemId) {
          var newPcs = document.getElementById(this.newOrderPcsSelector + itemId),
             oldPcs = document.getElementById(this.oldOrderPcsSelector + itemId);
          newPcs.value = 0;
          oldPcs.innerText = Number(oldPcs.dataset.originalPcs);
       },
       oneToNewOrder: function(itemId) {
          var newPcs = document.getElementById(this.newOrderPcsSelector + itemId),
             oldPcs = document.getElementById(this.oldOrderPcsSelector + itemId),
             newPcsValue = Number(newPcs.value) + 1,
             originalPcsValue = Number(oldPcs.dataset.originalPcs);
          if (newPcsValue <= originalPcsValue) {
             newPcs.value = newPcsValue;
             oldPcs.innerText = originalPcsValue - newPcsValue;
          }
       },
       oneToOldOrder: function(itemId) {
          var newPcs = document.getElementById(this.newOrderPcsSelector + itemId),
             oldPcs = document.getElementById(this.oldOrderPcsSelector + itemId),
             newPcsValue = Number(newPcs.value) - 1,
             originalPcsValue = Number(oldPcs.dataset.originalPcs);
          if (newPcsValue >= 0) {
             newPcs.value = newPcsValue;
             oldPcs.innerText = originalPcsValue - newPcsValue;
          }
       },
    };
    {/block}
</script>
{block buttonsLeft}
{/block}

{block buttonsRight}
   <div class="col-md-3 col-md-offset-7">
      <input type="submit" name="Submit" class="btn btn-primary btn-block" value="{'split'|translate}"/>
   </div>
   <div class="col-md-2">
      <input type="button" class="btn btn-primary btn-block" onClick="closeWindow();" value="{'windowCancel'|translate:'button'}"/>
   </div>
{/block}