{block "tpl-vars-gift"}
   {$tpl_vars.gift_img_size = 4}
   {$tpl_vars.gift_col = "col-xxs-12 col-xs-12 col-sm-6"}
   {$tpl_vars.gift_preselect_first = false} {* zaskrtnuti prvni moznosti pri prvnim prichodu do kosiku *}
   {$tpl_vars.gift_show_free_price = true}
{/block}

{if count($products)}
<div class="cart-gift" data-gift="{$id_action}">
   {block "gift-list"}
      <p class="cart-gift-title">{$title}</p>
      <div class="cart-gift-row row">
          {$giftPreselected = false}
          {foreach $products as $product}
              {$product->fetchImages($tpl_vars.gift_img_size)}
              {$variations = $product->variations}
              {$gift_preselect = false}
              {if ($data.preselect_first == 1 || $tpl_vars.gift_preselect_first) && $frontend_data.gift === null && $product@first}
                 {$gift_preselect = true}
                 {$giftPreselected = true}
              {/if}
             <div class="{$tpl_vars.gift_col}">
                <div class="cart-gift-item custom-control custom-radio c-input c-radio" data-gift-item="{$id_action}">
                    {if $variations}
                       <input type="radio" name="{$name}[id_product]" value="{$product.id}" class="custom-control-input"
                              data-gift-product {if ($frontend_data.id_product==$product.id) or $gift_preselect}checked{/if}>
                    {else}
                       <input type="radio" name="{$name}[gift]" value="{$product.id}" class="custom-control-input"
                              data-gift-product {if $product.id == $frontend_data.gift or $gift_preselect}checked{/if}>
                    {/if}

                   <span class="custom-control-indicator c-indicator"></span>

                   <img src="{get_photo photo=$product.image size=$tpl_vars.gift_img_size}"
                        alt="{$discount.product.title}">

                   <div class="text">
                      <strong>{$product.title}</strong>

                       {if $variations}
                          <div class="cart-gift-variations">
                              {if count($variations) > 1}
                                 {t}Vyberte variantu{/t}<br>
                              {/if}
                              {foreach $variations as $variation}
                                 <label>
                                    <input type="radio" name="{$name}[gift]" value="{$variation.id}"
                                           data-gift-variation {if $variation.id == $frontend_data.gift
                                           or ($gift_preselect and $variation@first)}checked{/if}>
                                    <span class="var-title">{$variation.title}</span>
                                 </label>
                              {/foreach}
                          </div>
                       {/if}
                   </div>
                   {if $tpl_vars.gift_show_free_price == true or $price->getPriceWithVat()->isPositive()}
                     <div><strong>{if $price->getPriceWithVat()->isZero()}{t}zdarma{/t}{else}{$price|format_price}{/if}</strong></div>
                   {/if}
                </div>
             </div>
          {/foreach}
         {block "unwanted-gift"}
         <div class="{$tpl_vars.gift_col}">
            <label class="cart-gift-item custom-control custom-radio c-input c-radio no-gift">
               <input type="radio" name="{$name}[gift]" value="0" class="custom-control-input" data-gift-product
                      {if  (!$giftPreselected && $frontend_data.gift === null) || ($frontend_data.gift !== null && $frontend_data.gift == 0)}checked{/if}>
               <span class="custom-control-indicator c-indicator"></span>
               <strong>{t}Nechci dárek{/t}</strong>
            </label>
         </div>
         {/block}
      </div>
   {/block}

   <script>
      wpj.onReady.push(function() {
         var $gifts = $('[data-gift]');

         $gifts.on('click', '[data-gift-item]', function() {
            var $input = $(this).find('[data-gift-product]');
            if (!$input.is(':checked')) {
               $input.prop('checked', true).trigger('change');
            }
         });

         $gifts.on('change', '[data-gift-variation]', function() {
            var $row = $(this).closest('[data-gift-item]');
            $row.find('[data-gift-product]').prop('checked', true).trigger('change');
         });

         $gifts.on('change', '[data-gift-product]', function() {
            var $giftsRow = $(this).closest('[data-gift]');
            var value = $(this).val();
            var $variations = $(this).closest('[data-gift-item]').find('[data-gift-variation]');

            $giftsRow.find('[data-gift-product]').each(function() {
               if ($(this).val() !== value) {
                  $(this).prop('checked', false);
               }
            });

            if ($variations.length && !$variations.filter(':checked').length) {
               $variations.first().prop('checked', true).trigger('change');
            }
         });
      });
   </script>
</div>
{/if}
