{extends "focus/focus.base.tpl"}

{block "focus-title"}
   {if $onlyCreate}
      {t}Vytvořit nový seznam{/t}
   {else}
      {t}Přidat do seznamu{/t}
   {/if}
{/block}

{block "focus-content"}
   {if $body.product.variations.variations|count and !$product.variationId}
      <div class="alert alert-danger">{t}Nejprve vyberte variantu produktu.{/t}</div>
   {elseif $onlyCreate}
      <form action="{path('kupshop_shoppinglist_shoppinglist_createshoppinglist')}" method="post" data-shopping-list-form>
         <div class="form-group">
            <input type="text" name="newListName" class="form-control" placeholder="{t}Název seznamu{/t}">
         </div>
         <button class="btn btn-primary btn-block" type="submit" disabled>{t}Vytvořit{/t}</button>
      </form>
   {else}
      <form action="{path('kupshop_shoppinglist_shoppinglist_addproducttoshoppinglist')}" method="post" data-shopping-list-form>
         {get_shopping_lists assign='shoppingLists'}
         {if $shoppingLists|count}
            <div class="form-group">
               <label>{t}Nákupní seznam{/t}</label>
               <select name="shoppingListId" class="form-control input-sm">
                  <option value="">{t}Nevybráno{/t}</option>
                  {foreach $shoppingLists as $value}
                     <option value="{$value.id}">
                        {$value.name}
                     </option>
                  {/foreach}
               </select>
            </div>
            <p>{t}nebo{/t}</p>
         {/if}
         <div class="form-group">
            <input type="text" name="newListName" class="form-control input-sm" placeholder="{t}Vytvořit nový seznam{/t}">
         </div>
         {if $cart}
            <input type="hidden" name="addFromCart" value="1">
         {else}
            {if $product.variationId}
               <input type="hidden" name="products[{$product.id}][variationId]" value="{$product.variationId}">
            {/if}
            <input type="hidden" name="products[{$body.product.id|default:$product.id}][productId]"
                   value="{$body.product.id|default:$product.id}">
            <input type="hidden" name="products[{$body.product.id|default:$product.id}][pieces]" value="1">
         {/if}
         <button class="btn btn-primary btn-block" type="submit" disabled>{t}Uložit{/t}</button>
      </form>
   {/if}

   {if !($body.product.variations.variations|count and !$product.variationId)}
      <script>
         wpj.onReady.push(function () {
            const $selectList = $('[name="shoppingListId"]');
            const $newList = $('[name="newListName"]');
            const $submitBtn = $('[data-shopping-list-form] button[type="submit"]');

            const toggleSubmitBtn = () => {
               const isEnabled = !!$selectList.val() || !!$newList.val();
               $submitBtn.attr('disabled', () => isEnabled ? null : 'disabled');
            };

            toggleSubmitBtn();
            $newList.on('input', toggleSubmitBtn);

            if ($selectList.length > 0) {
               $selectList.on('change', toggleSubmitBtn);
            }
         });
      </script>
   {/if}
{/block}
