{extends "../window.tpl"}

{block title}
   {'orderOfSupplier'|translate} {$body.data.supplier.name}
{/block}

{block tabs}
        {windowTab id='flapOrder' label={'orderToSupplier'|translate}|cat:" "|cat:$body.data.supplier.name}
{/block}

{block tabsContent}
<div id="flapOrder" class="tab-pane fade active in boxStatic">

    {if $body.acn == "add"}
    <div class="form-group">
        <div class="col-md-2 control-label">
            <label>{'supplier'|translate}</label>
        </div>
        <div class="col-md-4">
            <select class="form-control input-sm selecter" name="data[id_supplier]">
                {foreach $suppliers as $id => $supplier}
                    <option value="{$id}">{$supplier.name}</option>
                {/foreach}
            </select>
        </div>
    </div>
    {/if}

    <div id="items">
        <div class="form-group">
            <div class="col-md-3 pull-right">
                <a href="#" data-form-add class="btn btn-success btn-block"><span class="glyphicon glyphicon-plus"></span>&nbsp;{'addItem'|translate}</a>
            </div>
        </div>

        <div class="panel-group panel-group-lists" id="stockin">
            <div class="panel panel-body" data-form-new style="display: none;" id="stockin" >
                <div class="row">
                    <div class="col-md-1 control-label"><label>{'product'|translate}</label></div>
                   <div class="col-md-3">
                      <div class="input-group">
                      <input type="text" class="form-control input-sm"  name="data[items][0][id_product]" value="">
                         <div class="input-group-btn">
                            <button class="btn btn-primary btn-sm addProduct" tabindex="-1" title="Přidat nový produkt" type="button">
                               <i class="glyphicon glyphicon-plus"></i>
                            </button>
                         </div>
                      </div>
                    </div>

                   <div class="col-md-1 control-label"><label>{'variation'|translate}</label></div>
                    <div class="col-md-3">
                        <select class="form-control input-sm selecter" name="data[items][0][id_variation]">
                            <option value=""></option>
                        </select>
                    </div>
                    <div class="col-md-1 control-label"><label>{'pieces'|translate}</label></div>
                    <div class="col-md-1"><input type="text" name="data[items][0][pieces]" value=""></div>

                    <div class="col-md-1 pull-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>

            <div class="panel">
                <div class="panel-body" style="padding-bottom:0px; padding-top:0px">
                    <div class="form-group">
                        <div class="col-md-5">
                            <small><strong>{'product'|translate}</strong></small>
                        </div>
                        <div class="col-md-1 text-center">
                            <small><strong>{'code_ean'|translate}</strong></small>
                        </div>
                        <div class="col-md-2 text-center">
                            <small><strong>{'piecePriceWithoutVat'|translate}</strong></small>
                        </div>
                        <div class="col-md-4">
                            <div class="row">
                                <div class="col-md-4">
                                    <small><strong>{'numOfPieces'|translate}</strong></small>
                                </div>
                                <div class="col-md-6">
                                    <small><strong>{'priceWithoutVat'|translate}</strong></small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



                {foreach $body.data.items as $key => $item}
                    <div class="panel panel-body" data-form-item>
                        <div class="row">
                            <div class="col-md-5">
                                <label><a href="javascript:nw('product', {$item.id_product})">{$item.name}</a></label>
                                {if $item.variation}
                                    <br>{$item.variation}
                                {/if}
                            </div>
                            <div class="col-md-1">{$item.code} / {$item.ean}</div>
                            <div class="col-md-2 text-center">
                                {if $item.price_buy > 0}
                                    <strong>{$item.price_buy|format_price}</strong>
                                {else}
                                    <abbr title="Chybí nákupní cena, zobrazena cena prodejní">{$item.price|format_price}</abbr>
                                {/if}
                            </div>
                            <div class="col-md-1"><input type="text" class="form-control input-sm" name="data[items][{$key}][pieces]" value="{$item.pieces}"></div>
                            <div class="col-md-3">
                                <div class="row">
                                    <div class="col-md-7 col-md-offset-2">
                                        {$item.pieces_price|format_price}
                                    </div>
                                    <div class="col-md-1">
                                        <a class="btn-sm btn btn-danger" data-form-delete>
                                            <input class="hidden" type="checkbox" name="data[items][{$key}][delete]" />
                                            <span class="glyphicon glyphicon-remove"></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="data[items][{$key}][id_product]" value="{$item.id_product}">
                            <input type="hidden" name="data[items][{$key}][id_variation]" value="{$item.id_variation}">
                        </div>
                    </div>
                {/foreach}
        </div>

       <script type="text/javascript">
       </script>

        <div class="form-group">
           <div class="col-md-2">
              <a href="launch.php?s={$type}.php&amp;acn=clear&amp;ID={$body.data.id}" class="btn btn-block btn-danger confirm" title="vyčistit list produktů" >{'deleteList'|translate}</a>
           </div>
            <div class="col-md-2 control-label col-md-offset-5"><label>{'totalPrice'|translate}</label></div>
            <div class="col-md-2">
                <p class="input-height">
                    {$body.data.price|format_price}
                </p>
            </div>
        </div>
    </div>
</div>
{/block}

<script type="text/javascript">
{block onready append}
      $("#stockin").on('click', '.addProduct', function(e){
         nw('product', 0, '&data[title]='+$(this).closest('.input-group').find('.ui-autocomplete-input').val())
      });

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

    function createAutocomplete($form)
    {
        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}", function(data) {
                console.log(data);
                if(data.length > 0)
                    data = data[0];
                else
                    data = { 'code': '' };
                $form.find(':input[name*=supplier_code]').val(data['code']);
            });
        }

        new $.wpjAutoCompleteVariation({
            inputProduct: $form.find(":input[name*=id_product]"),
            inputVariation: $form.find(":input[name*=id_variation]"),
            callbacks: {
                'selectVariation': selectVariation
            },
            productOptions: {
               params: '&supplier={$body.data.id}&visible=0'
            }
        });

        $form.find(":input[name*=id_product_text]").focus();
    }
{/block}
</script>

{block buttonsRight}
    <div class="col-md-2">
        <a href="launch.php?s={$type}.php&amp;acn=edit&amp;ID={$body.data.id}&amp;print=1" class="btn btn-block" title="Tisk" >Tisk</a>
    </div>
    <div class="col-md-2">
        <input type="submit" name="Submit" class="btn btn-primary btn-block" value="{'windowSave'|translate:'button'}" />
    </div>
    <div class="col-md-2">
        <input type="button" class="btn btn-primary btn-block" onClick="closeWindow();" value="{'windowCancel'|translate:'button'}" />
    </div>
    <div class="col-md-2">
        <a href="launch.php?s={$type}.php&amp;acn=erase&amp;ID={$body.data.id}" id="buttonDelete" class="btn btn-block btn-danger confirm" title="{'sentBtn'|translate}" >{'sentBtn'|translate}</a>
    </div>
{/block}