{extends "../windowFrame.tpl"}

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

{block content}
    <style type="text/css">
        .input-height {
            margin-bottom: 0px;
        }
        .panel-body > .form-group:last-of-type {
            margin-bottom: 0px;
        }
        .panel-title.two-lines > p {
            padding-left: 5px;
            padding-top: 2px;
            padding-bottom: 0px;
        }
        .panel-title .help-block {
            margin-top: 1px;
        }

        .disable-animations *,
        .disable-animations *:after,
        .disable-animations *:before {
            transition: none !important;
        }

        .panel-group-lists .panel-title a {
            padding-bottom: 0px;
        }
    </style>
{$finished = $body.data.inventory.finished == "1" && !findRight('ALL_RIGHTS')}
{$disabled = $finished}
<div class="container-fluid">
    <form name="editform" method="post" action="launch.php?s=inventoryItems.php&amp;ID={$body.data.inventory.id}" class="form-horizontal">
        <div id="items">
             {if !$disabled}
                <div class="row bottom-space">
                    <div class="col-md-4">
                        <a href="#" data-form-add class="btn btn-success btn-block">
                        <span class="glyphicon glyphicon-plus"></span>&nbsp;Přidat položku na pozici "{$body.data.inventory.name}"</a>
                    </div>
                    <div class="col-md-2 col-md-offset-6">
                            <input type="submit" name="Submit" class="btn btn-primary btn-block" value="Uložit" />
                    </div>
                </div>
             {/if}

            <div class="panel-group panel-group-lists">
                    <div class="panel panel-body" data-form-new style="display:none">
                            <div class="form-group">
                                 <div class="col-md-2 control-label">
                                    <label>{'productItem'|translate:'orders'}</label>
                                 </div>
                                 <div class="col-md-5">
                                    <input type="hidden" class="form-control" name="data[items][0][id_product]" value="">
                                    <input type="hidden" class="form-control" name="data[items][0][id_product_text]" value="">
                                    <input type="hidden" class="form-control" name="data[items][0][id_variation]" value="">
                                    <input id="autocomplete-input" type="text" class="form-control input-sm" value="" size="2" maxlength="255" autocomplete="off">
                                 </div>
                                 <span class="col-md-4"></span>
                                 <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-1 control-label"><label>Skladem<label></div>
                                <div class="col-md-1">
                                    <input type="text" class="form-control input-sm" name="data[items][0][quantity]" maxlength="100" value=""  tabindex="3" data-type="quantity"/>
                                </div>
                                <div class="col-md-1 control-label"><label>Kod<label></div>
                                <div class="col-md-2">
                                    <input type="text" class="form-control input-sm" name="data[items][0][code]"   maxlength="100" value=""  tabindex="4" data-type="code"/>
                                </div>
                                <div class="col-md-1 control-label"><label>EAN<label></div>
                                <div class="col-md-3">
                                    <input type="text" class="form-control input-sm" name="data[items][0][ean]"  maxlength="100" value=""  tabindex="5" data-type="ean"/>
                                </div>
                               {if findModule('products', 'weight')}
                                  <div class="col-md-1 control-label"><label>Hmotnost<label></div>
                                  <div class="col-md-2">
                                     <div class="input-group">
                                        <input type="text" class="form-control input-sm" name="data[items][0][weight]"   maxlength="10" value=""  tabindex="6" data-type="weight"/>
                                        <span class="input-group-addon">Kg</span>
                                    </div>
                                  </div>
                               {/if}
                            </div>
                    </div>
            </div>
            <div class="row">
                <div class="col-md-11">
                <h1 class="h4 main-panel-title">Seznam položek na pozici "<strong>{$body.data.inventory.name}</strong>"
                </h1>
                </div>
                {if $body.data.items}
                    <div class="col-md-1 text-right" data-form-mass-open>
                        <a class="btn btn-sm" style="margin-right: 15px">
                            <i class="glyphicon glyphicon-plus-sign"></i>
                        </a>
                    </div>
                {/if}
            </div>

            <div class="panel-group panel-group-lists collapse in" id="items">
            {if !empty($body.data.items)}
            <div class="panel">
                <div class="panel-heading" style="padding-bottom:4px">
                    <div class="row">
                        <div class="col-md-6">
                            <p class="input-height">
                                <small><strong>Název produktu</strong></small>
                            </p>
                        </div>
                        <div class="col-md-2 text-center">
                            <p class="input-height">
                                <small><strong>Kód /</strong></small>
                                <small><strong>EAN</strong></small>
                            </p>
                        </div>
                        <div class="col-md-2 text-right">
                            <p class="input-height">
                                <small><strong>Celkem ks</strong></small>
                            </p>
                        </div>
                        <div class="col-md-2">
                            <p class="input-height">
                                <small><strong>Má být celkem</strong></small>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            {/if}

                {foreach $body.data.items as $key => $item}
                    <div class="panel" data-form-item>
                        <div class="panel-heading" style="background-color: {$item.color}" {if $disabled}disabled{/if} data-toggle="collapse" data-target="#collapse_{$key}">
                            <div class="row">
                                <div class="col-md-6">
                                    <h4 class="panel-title two-lines">
                                        <p class="pull-left">
                                            <strong><a href="javascript:nw('product', '{$item.id_product}');">{$item.product_title}</a></strong>
                                            {if $item.id_variation}
                                                <span class="help-block" style="margin-left:15px;">{$item.variation_title}</span>
                                            {/if}
                                        </p>
                                    </h4>
                                </div>
                                <div class="col-md-2">
                                    <p class="input-height">
                                        {$item.code} /
                                        {$item.ean}
                                    </p>
                                </div>
                                <div class="col-md-2">
                                    <p class="input-height pull-right">
                                        {if $item.inventory}
                                            {$item.quantity}
                                            {foreach $item.inventory as $key2 => $rowInventory}
                                                + {$rowInventory.quantity}x{$rowInventory.name}
                                            {/foreach}
                                            =
                                        {/if}{$item.in_store}
                                    </p>
                                </div>

                                <div class="col-md-1">
                                    <p class="input-height text-center">{$item.web_in_store}</p>
                                </div>

                               {if !$disabled}
                                   <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][{$key}][delete]" />
                                           <span class="glyphicon glyphicon-remove"></span>
                                       </a>
                                   </div>
                               {/if}
                            </div>
                            </div>
                        <div id="collapse_{$key}" class="panel-collapse collapse">
                            <div class="panel-body">
                            <div class="form-group no-margin">
                                <div class="col-md-1 control-label"><label>Kód<label></div>
                                <div class="col-md-2">
                                    <input type="text" {if $disabled}disabled{/if} class="form-control input-sm" name="data[items][{$key}][code]"  maxlength="100" value="{$item.code}" tabindex="3" />
                                </div>
                                <div class="col-md-1 control-label"><label>EAN<label></div>
                                <div class="col-md-2">
                                    <input type="text" {if $disabled}disabled{/if} class="form-control input-sm" name="data[items][{$key}][ean]"  maxlength="100" value="{$item.ean}" tabindex="3" />
                                </div>
                                <div class="col-md-1 control-label"><label>Skladem<label></div>
                                <div class="col-md-1">
                                    <input type="text" {if $disabled}disabled{/if} class="form-control input-sm" name="data[items][{$key}][quantity]"  maxlength="100" value="{$item.quantity}"  />
                                </div>
                               {if findModule('products', 'weight')}
                                  <div class="col-md-1 control-label"><label>Hmotnost<label></div>
                                  <div class="col-md-2">
                                     <div class="input-group">
                                        <input type="text" {if $disabled}disabled{/if} class="form-control input-sm" name="data[items][{$key}][weight]"   maxlength="10" value="{$item.weight}"  tabindex="3" />
                                        <span class="input-group-addon">kg</span>
                                     </div>
                                  </div>
                               {/if}

                                <input type="hidden" name="data[items][{$key}][item_id]" value="{$item.id}">
                                <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>
                            </div>
                    </div>
                {/foreach}
            </div>
        </div>
    </form>
</div>
{/block}

<script type="application/javascript">
{block onready append}
    var windowAdmin, windowShop;

    var windowList = { };
    function openWindow(url, name, attribs)
    {
        if(windowList[name] && windowList[name] == url)
            return;

        windowList[name] = url;
        window.open(url, name, attribs);
    }

    function setSelectedProduct(data)
    {
        console.log($('.input[name*=id_product_text]').data('autocomplete')._trigger('select', null, data));
    }

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

    function createAutocomplete($form)
    {
         const fields = {
            $productId: $form.find(':input[name*="id_product"]'),
            $productText: $form.find(':input[name*="id_product_text"]'),
            $variationId: $form.find(':input[name*="id_variation"]'),
            $code: $form.find('[data-type="code"]'),
            $weight: $form.find('[data-type="weight"]'),
            $ean: $form.find('[data-type="ean"]'),
            $in_store: $form.find('[data-type="quantity"]')
         };

       $form.find('#autocomplete-input').adminVariationAutoComplete({
         allowSelectProduct: false,
         $form,

         select: function (e, info) {
            let { product, variation, variations } = info;

            for (const $field of Object.values(fields)) {
               $field.val('');
            }

            fields.$productId.val(product.id);
            fields.$productText.val(product.text);
            fields.$ean.val(product.ean);
            fields.$weight.val(product.weight);

            // shouldn't happen with keyboard navigation!
            // product with variation selected
            if (!variation && Array.isArray(variations) && variations.length > 0) {
               variation = product.variations[0];
            }

            if (variation) {
               fields.$variationId.val(variation.id);
               fields.$code.val(!variation.code ? product.code : variation.code);

               if(variation.ean) {
                  fields.$ean.val(variation.ean);
               }

               if(variation.weight) {
                  fields.$weight.val(variation.weight);
               }

               return false;
            }

            fields.$code.val(product.code);

            $(e.target).closest('[data-form-item]').find('[name*="[quantity]"]').focus();
            return false;
         },
      })

      $form.find("#autocomplete-input").focus();
    }


    $('.input[name=id_product_text]').focus();
    $('.doubleVal').keyup(function(event){
       $(event.target).val($(event.target).val().replace(",", "."));
    });


    $(function() {
        UnsavedOff();
        $('[data-form-add]').click();
        UnsavedOn();
    });
{/block}
</script>