{extends "../window.tpl"}

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

{block tabs}
   {windowTab id='flapReplacement' label="{'header'|translate}"}
{/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">
      {if $body.existingReturnIds }
         <div class="row">
            <div class="col-xs-6">
               <div class="alert alert-warning">
                  Objednávka má již tuto {foreach $body.existingReturnIds as $return}<a href="javascript:nw('Returns', '{$return.id_return}');"><strong>vratku</strong></a> {/foreach}.
               </div>
            </div>
         </div>
      {/if}

      <div id="products">
         <div class="panel-group panel-group-lists">
            <div class="row bottom-space">
               <div class="col-md-5">
                   {if $body.data.date_handle == null}
                       <strong>Objednávka není ve stavu vyřízena</strong>
                   {/if}
                  <h4 class="no-margin"><strong>{'order'|translate} {$body.data.order_no}</strong></h4>
                  <input type="hidden" name="data[order_no]" value="{$body.data.order_no}">
               </div>
               <div class="col-md-2">
                  {if $body.price_level}
                     <a href="javascript:nw('pricelevel', {$body.price_level->id})" title="{'changePriceLevel'|translate}">
                        <span class="badge badge badge-info" title="{'priceLevel'|translate}">{$body.price_level->name}</span>
                     </a>
                  {/if}
               </div>
               <div class="col-md-3">
                  <a href="launch.php?s={$type}.php&amp;acn=returnAll&amp;ID={$body.data.id}&amp;order_no={$body.data.order_no}" id="buttonDelete"
                     class="btn btn-block btn-primary confirm" title="{'return/create-title'|translate}" >{'return/create'|translate}</a>
               </div>
               <div class="col-md-2 text-right">
                  <a href="javascript:help('replacement');" class="btn btn-warning"><i class="bi bi-question-circle"></i> {'help'|translate:'menulinks'}</a>
               </div>
            </div>
            <div class="row bottom-space">
               {block 'custom-fields'}{/block}
            </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">{'origPcs'|translate}</th>
                     <th scope="col">{'returned'|translate}</th>
                  </tr>
                  </thead>
                  <tbody>
                  {foreach from=$products item=item key=key}
                     {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">
                              <a type="button" href="#" copy-item title="{'copyProduct'|translate}">
                                 <span class="badge badge-default pull-left">
                                    <span class="glyphicon glyphicon-chevron-down"></span>
                                 </span>
                              </a>
                              <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>
                           {$item.pieces}
                           <input type="hidden" id="pcs" value="{$item.pieces}">
                        </td>
                        <td>
                           <input type="text" class="form-control input-sm" style="max-width:80px;" name="data[items][{$item.id}][pieces]" size="10" maxlength="20" value="" />

                           <input type="hidden" name="data[items][{$item.id}][id_product]" id="prod_id_product" value="{$item.id_product}">
                           <input type="hidden" name="data[items][{$item.id}][id_variation]" id="prod_id_variation"  value="{$item.id_variation}">
                           <input type="hidden" name="data[items][{$item.id}][piece_price]" value="{$item.piece_price}">
                           <input type="hidden" name="data[items][{$item.id}][title]" value="{$item.descr}">
                           <input type="hidden" name="data[items][{$item.id}][tax]" value="{$item.tax}">

                           <input type="hidden" id="product_title" value="{$item.product_title}">
                           <input type="hidden" id="variation_title" value="{$item.variation_title}">
                        </td>
                     </tr>
                  {/foreach}
                  </tbody>
               </table>
            </div>

            <div class="row" style=" margin-top: 5px;">
               <div class="col-md-3">
                  <a href="#" data-form-add class="btn btn-success btn-block btn-sm"><span class="glyphicon glyphicon-plus"></span>&nbsp;{'addReturningProduct'|translate}</a>
               </div>
            </div>

            <div class="panel panel-body" data-form-new style="display:none">
               <div class="form-group">
                  <div class="col-md-2 control-label">
                     <label>{'item'|translate:'orders'}</label>
                  </div>
                  <div class="col-md-5">
                     <input type="text" class="form-control input-sm" name="data[products][0][id_product]" value="{$body.descr}" size="2" maxlength="255" onkeypress="checkInputData('int');" />
                  </div>
                  <div class="col-md-4">
                     <select  class="selecter" name="data[products][0][id_variation]">
                        <option value=""></option>
                     </select>
                  </div>
                  <div class="col-md-1 text-right">
                     <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>
               <div class="form-group">
                  <div class="col-md-2 control-label">
                     <label>{'countPieces'|translate:'orders'}</label>
                  </div>
                  <div class="col-md-2">
                     <div class="input-group">
                        <input type="text" class="form-control input-sm" name="data[products][0][pieces]" size="5" maxlength="11" onkeydown="checkInputData('int-signed', event);" data-calculate='pieces' value="1" />
                        <span class="input-group-addon">{'piecesUnit'|translate:'orders'}</span>
                     </div>
                  </div>
                   <div class="col-md-3 control-label">
                       <label>{'origPrice'|translate}</label>
                   </div>
                   <div class="col-md-2">
                        <input type="text" class="form-control input-sm" name="data[products][0][piece_price]" size="5" maxlength="11" onkeydown="checkInputData('int-signed', event);"/>
                   </div>
                   <div class="col-md-1 control-label">
                       <label>{'origTax'|translate}</label>
                   </div>
                   <div class="col-md-2">
                       <div class="input-group">
                           <input type="text" class="form-control input-sm" name="data[products][0][tax]" size="5" maxlength="11" onkeydown="checkInputData('int-signed', event);"  />
                           <span class="input-group-addon">%</span>
                       </div>
                   </div>
               </div>
            </div>
         </div>


      </div>

      <div id="items">
            <div class="row bottom-space" style="margin-top: 20px;">
               <div class="col-md-3">
                  <h4 class="no-margin  main-panel-title"><strong>{'changeForProducts'|translate}</strong></h4>
               </div>
               <div class="col-md-3">
                  <a href="#" data-form-add class="btn btn-success btn-block"><span class="glyphicon glyphicon-plus"></span>&nbsp;{'addProduct'|translate}</a>
               </div>
               <div class="col-md-2 col-md-offset-4">
                  <a href="#" class="btn btn-primary btn-block" onclick="printCodes(event)"><i class="glyphicon glyphicon-print"></i> {'printLabels'|translate}</a>
               </div>
            </div>

            <div class="panel panel-body" data-form-new style="display:none">
               <div class="form-group">
                  <div class="col-md-2 control-label">
                     <label>{'item'|translate:'orders'}</label>
                  </div>
                  <div class="col-md-5">
                     <input type="text" class="form-control input-sm" name="data[items][0][id_product]" value="{$body.descr}" size="2" maxlength="255" onkeypress="checkInputData('int');" />
                  </div>
                  <div class="col-md-4">
                     <select  class="selecter" name="data[items][0][id_variation]">
                        <option value=""></option>
                     </select>
                  </div>
                  <div class="col-md-1 text-right">
                     <a class="btn-sm btn btn-danger" data-form-delete>
                        <input class="hidden" type="checkbox" name="data[items][0][delete]" />
                        <span class="glyphicon glyphicon-remove"></span>
                     </a>
                  </div>
               </div>
               <div class="form-group">
                  <div class="col-md-2 control-label">
                     <label>{'countPieces'|translate:'orders'}</label>
                  </div>
                  <div class="col-md-2">
                     <div class="input-group">
                        <input type="text" class="form-control input-sm" name="data[items][0][pieces]" size="5" maxlength="11" onkeydown="checkInputData('int-signed', event);" data-calculate='pieces' value="1" />
                        <span class="input-group-addon">{'piecesUnit'|translate:'orders'}</span>
                     </div>
                  </div>
               </div>
            </div>
         </div>
   </div>
{/block}
<script type="text/javascript">
   {block onready append}
   //calcPrices('form');

   $("form").on("click", ".btn-danger", function(e)
   {
      $this =  $(this);
      $panel = $this.closest(".panel, .well");
      $panel.find(":input[name*=delete]").val("1");
      $panel.slideUp();
   });

   initForm({
      selector: '#products',
      beforeAdd: function(original){
         var $form = original();
         createAutocomplete($form);
      }
   });

   initForm({
      selector: '#items',
      beforeAdd: function(original){
         var $form = original();
         createAutocomplete($form);
      }
   });

   $('[copy-item]').on("click", function(){
      $('#items [data-form-add]').click();
      var tr = $(this).closest('tr');
      var id_product = tr.find('#prod_id_product').val();
      var id_variation = tr.find('#prod_id_variation').val();
      var product_title = tr.find('#product_title').val();
      var pcs = tr.find('#pcs').val();

      var new_form = $('#items [data-form-item]:first');
      new_form.find('[name*=id_product_text]').val(product_title);
      new_form.find('[data-calculate=pieces]').val(pcs);

      window.autocompl.inputProduct.val(id_product);
      window.autocompl.setProduct(id_product, id_variation);
   });

   function selectVariation(id_product, id_variation)
   {
      $.getJSON('launch.php?s=ajax.php&type=product_of_suppliers_info&id_product='+id_product+"&id_variation="+id_variation+"&id_supplier={$body.data.id_supplier}", function(data) {
         console.log(data);
         if(data.length > 0)
            data = data[0];
         else
            data = { 'code': '' };
         $('.input[name*=supplier_code]').val(data['code']);
      });
   }

   function createAutocomplete($form)
   {
      window.autocompl = new $.wpjAutoCompleteVariation({
         inputProduct: $form.find(":input[name*=id_product]"),
         inputVariation: $form.find(":input[name*=id_variation]"),
         inputFields: {
            'vat': $form.find(":input[name*=tax]"),
            'price': $form.find(":input[name*=piece_price]")
         },
         callbacks: {
            'selectVariation': selectVariation
         },
         productOptions: {
            params: '{if $body.order.id_user}&user_id={$body.order.id_user}{/if}&supplier=*'
         }
      });

      $form.find(":input[name*=id_product_text]").focus();
   }

   function printCodes(e) {
      e.preventDefault();

      var data = [];
      $('table tr.row-green').each(function() {
         var $this = $(this),
            $pieces = $this.find('[name$="[pieces]"]');
         if (Number($pieces.val()) > 0) {
            console.log($this);
            data.push({
               idv: $this.find('[name$="[id_variation]"]').val(),
               idp: $this.find('[name$="[id_product]"]').val(),
               pcs: $pieces.val()
            });
         }
      });

      $.redirectPost({ url:"launch.php?s=printCenter.php&type=product&template_type=zebra", data: { JSON_IDs: JSON.stringify(data)}, target:"Vytisknutí štítků" });
   }
   {/block}
</script>
{block buttonsLeft}
{/block}

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