{extends "../window.tpl"}

{block title}
   {if $body.acn=='deleteValue'}
      Mazání/přesunutí hodnoty "{$body.Row.value}"
   {else}
      {$smarty.block.parent}
   {/if}
{/block}


{block tabs}
   {if ($body.acn=="edit" && !empty($body.data.id)) || $body.acn=='add'}
      {windowTab id='flapVarLabel'}
      {if $body.product_variations_rights && $body.acn=="edit" && !empty({$body.data.id})}
         {windowTab id='flapVarLabelSections'}
      {/if}
   {/if}

   {if $body.acn=='deleteValue' && isset($body.valueId)  &&  is_numeric($body.valueId)}
      {windowTab id='flapErase' label="Mazání/přesunutí hodnoty"}
   {/if}
{/block}

{block tabsContent}
   {if ($body.acn=="edit" && !empty($body.data.id)) || $body.acn=='add'}
      <div id="flapVarLabel" class="tab-pane fade in boxFlex">
         {block label_definition}
            <div class="wpj-main-panel-title">
               <h4>{'Name'|translate}</h4>
            </div>
            <div class="row">
               <div class="col-xs-12">
                  <div class="wpj-form-group">
                     <input type="text" class="form-control" name="data[label]" maxlength="100" value="{$body.data.label|escape:'html'}"/>
                  </div>
               </div>
            </div>
         {/block}

         {if $body.acn=="edit" && !empty($body.data.id)}
            <div id="prodLabels">
               <div class="wpj-main-panel-title">
                  <h4>{'section2'|translate:'productsVarLabels'} ({$body.SQL_row|count})</h4>
               </div>
               <div class="row">
                  <div class="col-xs-3">
                     <div class="wpj-form-group">
                        <a href="javascript:nw('productsVarLabelsValues', '0', 'id_label={$body.data.id}')" class="btn btn-success btn-block">
                           <span class="bi bi-plus-lg m-r-1"></span>
                           {'buttonAdd'|translate}
                        </a>
                     </div>
                  </div>
                  <div class="col-xs-3">
                        <div class="input-group">
                           <input type="text" class="form-control input-sm" name="searchTerm" maxlength="30" value="{$body.data.searchTerm}">
                           <span class="input-group-btn">
                              <button id="label-search-btn" type="submit" class="btn btn-primary btn-sm">Vyhledat</button>
                           </span>
                        </div>
                     <script>
                        document.querySelector('input[name="searchTerm"]').addEventListener('keydown', function(event) {
                           if (event.key === 'Enter') {
                              event.preventDefault();
                              document.getElementById('label-search-btn').click();
                           }
                        });
                     </script>
                  </div>
                  <div class="col-xs-4 col-xs-offset-2">
                     <div class="wpj-form-group">
                        <a href="launch.php?s=productsVarLabels.php&acn=sortAlphabet&ID={$body.data.id}" type="button" class="btn btn-block confirm" title="seřadit podle abecedy">
                           <span class="bi bi-list-ul m-r-1"></span>{'Sort'|translate}
                        </a>
                     </div>
                  </div>
               </div>

               <div class="wpj-panel wpj-panel-default">
                  <div class="row boxFlex box" style="min-height: 65vh">
                     <iframe class="on-demand boxFlex" src="" data-src="launch.php?s=list.php&type=productsVarLabelsValues&ID={$body.data.id}&searchTerm={$body.data.searchTerm}"></iframe>
                  </div>
               </div>
            </div>
            <script type="application/javascript">
               initForm({
                  selector: '#prodLabels',
               });
            </script>
            <script type="text/javascript">
               $('#prodLabelsValues').on('change', ':input', function() {
                  $(this).closest('.wpj-list-group-item').find('[data-changed]').prop('checked', true);
               }).sortable({
                  helper: function(e, row) {
                     var $row = $(row);
                     var $helper = $row.clone().addClass('drag-drop');
                     return $helper[0];
                  },
                  stop: function(event, ui) {
                     $(this).children().each(function(index, item) {
                        $(item).find('[data-sort]').val($(item).index()).change();
                     });
                  },
                  handle: '.handle',
                  placeholder: 'placeholder',
               });
            </script>
         {/if}
      </div>
      {if $body.product_variations_rights && $body.acn=="edit" && !empty($body.data.id)}
         <div id="flapVarLabelSections" class="tab-pane fade boxStatic">
            <p>{'searchDescription'|translate}</p>

            {include file='../tree.tpl'}
            <div class="tree">
               <ul>
                  <li class="first-branch">
                     {menu data=$body.tree selected=$body.selected opened=$body.opened}
                  </li>
               </ul>
            </div>

            <script type="text/javascript">
               $('#flapVarLabelSections').on('click', 'input[type=checkbox]', function(e) {
                  var children = $(e.target).closest('li').find('input');
                  var checked = $(e.target).prop('checked');
                  children.prop('checked', checked);
               });
            </script>

         </div>
      {/if}

   {/if}

   {if $body.acn=='deleteValue' && isset($body.valueId)  &&  is_numeric($body.valueId)}
      <div id="flapErase" class="tab-pane fade boxStatic">
         <h1 class="h4 main-panel-title">{'AdjustValue'|translate}</h1>
         <div class="form-group">
            <div class="col-md-12">
               <p>
                  {'Decided'|translate} <strong>"{$body.Row.value}"</strong>{'NameTags'|translate} <strong>{$body.data.label}</strong>.
                  {'Influence'|translate}
               </p>
            </div>
         </div>
         <input type="hidden" name="valueId" value="{$body.valueId}">
         <div class="form-group" id="delete_values">
            <div class="col-md-12">
               <div class="radio pull-left">
                  <input type="radio" class="check" name="method" value="delete_values" checked id="dv1"/>
                  <label for="dv1">
                     {'Delete'|translate} <strong>"{$body.Row.value}"</strong>{'Affect'|translate} <strong>{$body.variations_count}</strong> {'Products'|translate}
                  </label>
               </div>
            </div>
         </div>
         <div class="form-group">
            <div class="col-md-12">
               <div class="radio pull-left">
                  <input type="radio" class="check" name="method" value="replace_values" id="rv1"/>
                  <label for="rv1">
                     {'DeleteValue'|translate} <strong>"{$body.Row.value}"</strong>{'AndReplace'|translate}
                  </label>
               </div>
            </div>
            <div class="col-md-offset-1 col-md-4">
               <select disabled name="IDvalSel" class="selecter">
                  {foreach from=$body.SQL_variants item=row}
                     <option value="{$row['id']}">{$row['value']}</option>
                  {/foreach}
               </select>
            </div>
         </div>
         <div class="form-group">
            <div class="col-md-12">
               <div class="radio pull-left">
                  <input type="radio" class="check" name="method" value="move_values" id="mv1"/>
                  <label for="mv1">
                     {'Move'|translate} <strong>"{$body.Row.value}"</strong> {'UnderAnother'|translate}
                  </label>
               </div>
            </div>
            <div class="col-md-offset-1 col-md-4">
               <select disabled name="IDLabelSel" class="selecter">
                  {foreach from=$body.SQL_moves item=row}
                     <option value="{$row['id']}" {if $body.Row.id_label == $row['id']}selected{/if}>{$row['label']}</option>
                  {/foreach}
               </select>
            </div>
         </div>
      </div>
      <script type="text/javascript">
         $(':input[name=method]').on('click ifChecked', function(e) {
            $('select').prop('disabled', true).trigger('chosen:updated');
            $(this).closest('.form-group').find('select').prop('disabled', false).trigger('chosen:updated');
            $('.selecter, .selecter-categories').trigger('chosen:updated');
         });
         //$('#move_values select').removeAttr('disabled', '')
      </script>
   {/if}
{/block}

{block buttonsRight}
   {if $body.acn=='deleteValue'}
      <div class="col-md-3 col-md-offset-1">
         <a href="launch.php?s={$type}.php&amp;acn=edit&amp;ID={$body.data.id}" class="btn" title="Zpět na jmenovku">{'Back'|translate}</a>
      </div>
   {/if}
   <div class="col-md-2 {if $body.acn!= 'deleteValue'}{if $body.acn == 'edit'}col-md-offset-2{else}col-md-offset-1{/if}{/if}">
      <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>
   {if $body.acn !='deleteValue'}
      <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 confirm"
            title="{'windowDelete'|translate:'button'}"
            {if !$view->hasRights('delete')}disabled{/if}>{'windowDelete'|translate:'button'}</a>
      </div>
   {/if}
{/block}
