{extends "../window.tpl"}

{block tabs}
   {windowTab id='flapParameter'}
   {if $body.data.id && {find_module name="products_sections"}}
      {windowTab id='flapRelation'}
   {/if}
   {if $body.data.id && {find_module name="producers"}}
      {windowTab id='flapProducer'}
   {/if}
{/block}

{block tabsContent}
   <div id="flapParameter" class="tab-pane fade active in boxStatic">
      <div class="wpj-main-panel-title">
         <h4>{'sectionParameter'|translate}</h4>
      </div>

      <div class="row wpj-form-group-flex">
         <div class="{if $cfg.Modules.components && isSuperuser()}col-xs-8{elseif $cfg.Modules.X.parameters_figure || $cfg.Modules.components || isSuperuser()}col-xs-10{else}col-xs-12{/if}">
            <div class="wpj-form-group">
               <label>{'name'|translate}</label>
               <input type="text" class="form-control" name="data[name]" size="20" maxlength="50" value="{$body.data.name}"/>
            </div>
         </div>
          {if $cfg.Modules.X.parameters_figure || $cfg.Modules.components || isSuperuser()}
             <div class="row">
                <div class="col-xs-2 d-flex align-items-center">
                    {print_toggle name="figure" value=$body.data.figure}
                   <label>{'visible'|translate}
                       {if !$cfg.Modules.X.parameters_figure && !$cfg.Modules.components}
                          <span class="glyphicon glyphicon-flash" style="color:#AAB2BD;" title="Vidí pouze superadmin"></span>
                       {/if}
                   </label>
                </div>
                {if $cfg.Modules.components && isSuperuser()}
                   <div class="col-xs-2 d-flex align-items-center">
                      {print_toggle name="catalog_figure" value=$body.data.catalog_figure}
                      <label>{'catalog_figure'|translate}
                         <span class="glyphicon glyphicon-flash" style="color:#AAB2BD;" title="Vidí pouze superadmin"></span>
                      </label>
                   </div>
                {/if}
             </div>
          {/if}
      </div>

      <div class="row wpj-form-group-flex">
         <div class="col-xs-12">
            <div class="wpj-form-group">
               <label>{'name_frontend'|translate}</label>
               <input type="text" class="form-control" name="data[name_frontend]" size="20" maxlength="50" value="{$body.data.name_frontend}"/>
            </div>
         </div>
      </div>

      <div class="row">
         <div class="col-xs-12">
            <div class="wpj-form-group">
               <label>{'description'|translate}</label>
               <textarea name="data[descr]" rows="3" cols="30" class="input inputFullWidth">{$body.data.descr}</textarea>
                {insert_wysiwyg target="data[descr]" config='height: "50"'}
            </div>
         </div>
      </div>

      <div class="row">
         <div class="col-xs-4">
            <div class="wpj-form-group">
               <label>{'type'|translate}</label>
               <select name="data[value_type]" class="selecter" onchange="valueTbl(this.options[this.selectedIndex].value)">
                  <option value="float" {if $body.data.value_type == "float"}selected{/if}>{'type1'|translate}</option>
                  <option value="char" {if $body.data.value_type == "char"}selected{/if}>{'type2'|translate}</option>
                  <option value="list" {if $body.data.value_type == "list"}selected{/if}>{'type3'|translate}</option>
               </select>
            </div>
         </div>
         <div class="col-xs-4">
            <div class="wpj-form-group">
               <label>{'unit'|translate}</label>
               <input type="text" class="form-control" name="data[unit]" size="20" maxlength="50" value="{$body.data.unit}"/>
               <span class="help-block">{'unit_note'|translate nofilter}</span>
            </div>
         </div>
         <div class="col-xs-4" style="display: none" data-value-meaning>
            <label>{'value_meaning'|translate}</label>
            <select name="data[value_meaning]" class="selecter">
               <option value="text" {if $body.data.value_meaning == "text"}selected{/if}>{'text'|translate}</option>
               <option value="color" {if $body.data.value_meaning == "color"}selected{/if}>{'color'|translate}</option>
               <option value="image" {if $body.data.value_meaning == "image"}selected{/if}>{'image'|translate}</option>
               <option value="progress" {if $body.data.value_meaning == "progress"}selected{/if}>{'progress'|translate}</option>
            </select>
         </div>
      </div>

      {if $body.acn != "add"}
         {include 'window/parameters.values.tpl'}
      {/if}

      <script type="text/javascript">
         valueTbl('{$body.data.value_type}');
      </script>
   </div>
   {if {find_module name="products_sections"}}
      <div id="flapRelation" class="tab-pane fade boxFlex">
         <div class="wpj-main-panel-title">
            <h4>{'sectionSearch'|translate}</h4>
         </div>
         <input type="hidden" name="secloaded" value="1">
         {include file='../parametersTree.tpl'}
         <div class="tree tree-param">
            <ul>
               <li>
                  {parametersMenu data=$body.tree category0=$body.category0 selected=$body.selected opened=$body.opened}
               </li>
            </ul>
         </div>


         <script>
            $('#flapRelation').on('click', 'input[type=checkbox]', function(e) {
               var type = $(e.target).data('type');
               var children = $(e.target).closest('li').find('input[data-type='+ type +']');
               var checked = $(e.target).prop('checked');
               // Zaskrnout oba inputy (enable i required) v pripade, ze zaskrtnu enable
               if (type === 'filter' && checked) {
                  children = $(e.target).closest('li').find('input');
               }
               children.prop('checked', checked);
            });
         </script>
      </div>
   {/if}

   {if {find_module name="producers"}}
      <div id="flapProducer" class="tab-pane fade boxFlex">
         <div class="wpj-main-panel-title">
            <h4>{'Producers'|translate}</h4>
         </div>
         <div class="form-group" id="hMenuLeft">
            {if !empty($body.producers)}
                {$isCheckedAll = true}
                {foreach $body.producers as $producerId => $producer}
                    {if $body.producersSel[$producerId] != true}
                        {$isCheckedAll = false}
                        {break}
                    {/if}
                {/foreach}
                <div class="col-md-12">
                  <div class="checkbox">
                     <input data-producers="check-all" type="checkbox" class="check" name="producers_check_all"
                            id="prodCheckAll" value="1" {if $isCheckedAll}checked{/if}/>
                     <label for="prodCheckAll">{'selectAll'|translate}</label>
                  </div>
                  <hr />
               </div>
            {/if}
            {foreach from=$body.producers key=IDprod item=producer}
               <div class="col-md-10">
                  <div class="checkbox">
                     <input type="checkbox" class="check" name="producers[]" id="prod{$IDprod}" value="{$IDprod}"
                            data-producers="{$IDprod}"
                            {if $body.producersSel[$IDprod] == true}checked{/if} />
                     <label for="prod{$IDprod}">{$producer.name}</label>
                  </div>
               </div>
            {/foreach}
         </div>
      </div>
   {/if}
   {block "custom-data"}{/block}
{/block}

{block js append}
   <script>
      function valueTbl(id) {
         $('[data-values=wrap]').toggle(id === 'list');

         var $valueMeaning = $('[data-value-meaning]');
         $valueMeaning.hide();
         if (id && id !== 'float') {
            $valueMeaning.show();
         }
      }
   </script>
{/block}

{block "js-onready" append}
    <script>
      $('[data-producers="check-all"]').on('change', function () {
         if ($(this).is(':checked')) {
            $('[data-producers]').prop('checked', true);
         } else {
            $('[data-producers]').prop('checked', false);
         }
      });
    </script>
{/block}