{extends file="[shared]/window.tpl"}

{block tabs}
   {windowTab id='flap1'}
{/block}

{block tabsContent}
   <div id="flap1" class="tab-pane fade active in boxStatic">
      <div class="form-group">
         <div class="col-md-2 control-label"><label>{'name'|translate}</label></div>
         <div class="col-md-4">
            <input type="text" class="form-control input-sm" name="data[admin_title]" size="30" maxlength="100" value="{$body.data.admin_title}"/>
         </div>
         <div class="col-md-2 control-label">
            <label>{'display_name'|translate}</label>
            <a class="help-tip" data-toggle="tooltip" title="{'display_name_tooltip'|translate}"><i class="glyphicon glyphicon-question-sign"></i></a>
         </div>
         <div class="col-md-4">
            <input type="text" class="form-control input-sm" name="data[title]" size="30" maxlength="100" value="{$body.data.title}"/>
         </div>
      </div>
      <div class="form-group">
         <div class="col-md-2 control-label"><label>{'descr'|translate}</label>
            {insert_llm_button type='product_charges' target="data[descr]"}
         </div>
         <div class="col-md-10">
            <textarea class="form-control input-sm" name="data[descr]">{$body.data.descr}</textarea>
            {insert_wysiwyg target="data[descr]"}
         </div>
      </div>

      <div class="form-group">
         <div class="col-md-2 control-label"><label>{'active'|translate}</label></div>
         <div class="col-md-10">
             {print_toggle name="figure" value=$body.data.figure}
             {include 'utils/translations.figure.tpl' figureData=$body.data.translation_figure parentFigure=$body.data.figure}
         </div>
      </div>

      <div class="form-group">
         <div class="col-md-2 control-label"><label>{'type'|translate}</label></div>
         <div class="col-md-10">
            <div class="radio pull-left">
               <input type="radio" name="data[type]" class="check" value="product" {$body.data.type|checked:'product'} id="t1">
               <label for="t1"> {'type_product'|translate}</label>
               <input type="radio" name="data[type]" class="check" value="order" {$body.data.type|checked:'order'} id="t2">
               <label for="t2"> {'type_order'|translate}</label>
            </div>
         </div>
      </div>
      <hr>
      <div class="form-group">
         <div class="col-md-2 control-label"><label>{'price'|translate}</label></div>
         <div class="col-md-3">
            <div class="input-group" data-price-dropdown>
               <div class="input-group-btn">
                  <select class="selecter" name="data[currency]">
                      {foreach $body.data.currencies as $currencyID => $currency}
                         <option{if $currencyID == $body.data.currency} selected{/if}>{$currencyID}</option>
                      {/foreach}
                  </select>
               </div>

               {* Pouzivam cenu bez DPH primo z DB a cenu s DPH vypocita JS - priceVatDropdown, takze nechci provadet format_editable_price *}
               <input data-price="" type="text" class="form-control input-sm" name="data[price]" id="price"
                      value="{$body.data.price}" />

               <div class="input-group-btn" data-dropdown>
                  <a class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown">
                     <span data-dropdown-state>
                        {'withTax'|translate:'choice'}
                     </span>
                     <span class="caret"></span>
                  </a>
                  <ul class="dropdown-menu">
                     <li><a data-value="1">{'withTax'|translate:'choice'}</a></li>
                     <li><a data-value="0">{'withoutTax'|translate:'choice'}</a></li>
                  </ul>
               </div>
               <input type="hidden" name="data[priceWithVat]" data-price-vat="{$body.data.vatValue}" value="0"/>
               <script type="text/javascript">
                  priceVatDropdown($('[data-price-dropdown]'), {if is_null($body.data.vat)}0{else}1{/if});
               </script>
            </div>
         </div>
         <div class="col-md-1 control-label">
            <label>{'or'|translate:'choice'}</label>
            <a class="help-tip" data-toggle="tooltip" title="{'percentage_tooltip'|translate}"><i class="glyphicon glyphicon-question-sign"></i></a>
         </div>
         <div class="col-md-2">
            <div class="input-group">
               <input type="text" class="form-control input-sm" name="data[percentage]" id="percentage" maxlength="20"
                      value="{$body.data.percentage}"/>
               <span class="input-group-addon">%</span>
            </div>
         </div>
      </div>
      <div class="form-group">
         <div class="col-md-2 control-label"><label>{'vat'|translate}</label></div>
         <div class="col-md-3">
            <select name="data[vat]" class="selecter" id="priceVat">
               <option value="" data-vat="0" {if is_null($body.data.vat)}selected{/if}>{'byProducts'|translate:'vats'}</option>
                {foreach $body.vats as $key => $vat}
                   <option value="{$vat.id}" data-vat="{$vat.vat}" {if $body.data.vat == $vat.id}selected{/if}>
                       {$vat.descr}
                   </option>
                {/foreach}
            </select>
         </div>
      </div>

      <div class="form-group product_autocomplete">
         <div class="col-md-2 control-label"><label>{'product'|translate}</label></div>
         <div class="col-md-6">
            <input type="text" data-autocomplete-search="product" autocomplete="off" name="data[product]"
                   class="form-control input-sm autocomplete-control" placeholder="Vyhledat produkt"
                   data-preload="product_variation" value="{if $body.data.id_product}{$body.data.id_product}{if $body.data.id_variation}-{$body.data.id_variation}{/if}{/if}">
            <input type="hidden" name="data[id_product]" value="{$body.data.id_product}">
            <input type="hidden" name="data[id_variation]" value="{$body.data.id_variation}">
            <script type="application/javascript">
               $('[data-autocomplete-search="product"]').adminVariationAutoComplete({
                  allowSelectProduct: false,
                  select: function (e, item) {
                     let { product, variation } = item;

                     if (variation && typeof variation !== 'string' && variation.id) {
                        variation = variation.id
                     }

                     $('[name="data[id_product]"]').val(product.id);
                     $('[name="data[id_variation]"]').val(variation);

                     return true;
                  }
               });
            </script>
         </div>
         <div class="col-md-4 toggle-wrapper">
            <div class="checkbox">
               {$checked = ''}
               {if $body.data.data.order_not_in_store}
                  {$checked = 'checked'}
               {/if}
               <input type="checkbox" class="check" value="1" id="order_not_in_store"
                      name="data[data][order_not_in_store]" {$checked}>
               <label class="small" for="order_not_in_store">Povolit objednat zboží, které není skladem</label>
            </div>
         </div>
      </div>
      <div class="row form-group">
         <div class="col-md-2"></div>
         <div class="col-md-10 d-flex align-center">
            {print_toggle value=$body.data.required|default:'Y' name="required"}
            <label>{'charge_required'|translate}
               <a class="help-tip" data-toggle="tooltip" title="{'charge_required_help'|translate}"><i
                     class="bi bi-question-circle"></i></a>
            </label>
         </div>
      </div>

      <div class="row form-group">
         <div class="col-md-2"></div>
         <div class="col-md-10 d-flex align-center">
            {print_toggle value=$body.data.checked|default:'N' name="checked"}
            <label>{'charge_checked'|translate}
               <a class="help-tip" data-toggle="tooltip" title="{'charge_checked_help'|translate}"><i
                     class="bi bi-question-circle"></i></a>
            </label>
         </div>
      </div>

      <div class="row form-group">
         <div class="col-md-2"></div>
         <div class="col-md-10 d-flex align-center">
            {print_toggle value=$body.data.included|default:'N' name="included"}
            <label>{'charge_included'|translate}
               <a class="help-tip" data-toggle="tooltip" title="{'charge_included_help'|translate}"><i
                     class="bi bi-question-circle"></i></a>
            </label>
         </div>
      </div>

      <div class="row form-group">
         <div class="col-md-2"></div>
         <div class="col-md-10 d-flex align-center">
            {print_toggle value=$body.data.data.onetime|default:'N' nameRaw="data[data][onetime]"}
            <label>{'charge_onetime'|translate}
               <a class="help-tip" data-toggle="tooltip" title="{'charge_onetime_help'|translate}"><i
                     class="bi bi-question-circle"></i></a>
            </label>
         </div>
      </div>
   </div>
   {block "custom-data"}{/block}
{/block}
