{if $product_combinations}
  <div id="pdproductattributeslist" class="products 2">

    {if $block_heading}
      <h3 class="idTabHrefShort page-product-heading">{l s='Select product combination' mod='pdproductattributeslist'}</h3>
    {/if}
    <table id="pdproductattributeslist_table" class="table table-striped table-bordered table-labeled tablesorter" width="100%">
      <thead>
        <tr>
          <th class="product_image sorter-false filter-false">{l s='Image' mod='pdproductattributeslist'}</th>
          <th class="product_infos sorter-false filter-false">{l s='Product informations' mod='pdproductattributeslist'}</th>
          {if $show_prices}
            <th class="product_price">{l s='Price (tax incl.)' mod='pdproductattributeslist'}</th>
            <th class="product_price">{l s='Price (tax excl.)' mod='pdproductattributeslist'}</th>
          {/if}
          <th class="product_qty">{l s='Quantity in stock' mod='pdproductattributeslist'}</th>
          <th class="product_variant">{l s='Variant' mod='pdproductattributeslist'}</th>
          {if !$is_catalog}
            <th class="product_btn sorter-false filter-false">{l s='Select quantity' mod='pdproductattributeslist'}</th>
          {/if}
        </tr>
      </thead>
      <tbody>
        {foreach from=$product_combinations item=$combination}
          <tr class="product_combination_{if ($combination@index % 2)}alternate_{/if}item">
            <td data-column="{l s='Image' mod='pdproductattributeslist'}" class="option_image">


              {foreach from=$combination.images item=$img}
                <a href="{$img.large_default}" rel="group_{$combination.id_product_attribute}" class="{if ($img@index > 0)}hidden {/if}fancybox">
                  <img class="img img-fluid img-responsive" src="{$img.home_default}" alt="{$combination.attribute_name}" title="{$combination.attribute_name}" />
                </a>
              {/foreach}

            </td>

            <td data-column="{l s='Informations' mod='pdproductattributeslist'}" class="option_infos  text-xs-left">

              {if isset($combination.reference) AND $combination.reference}
                <b>{$combination.reference}</b>
              {/if}
              {if !empty($combination.ean13)}
                <br /><b>{$combination.ean13}</b>
              {/if}

            </td>

            {if $show_prices}
              <td data-column="{l s='Price tax incl.' mod='pdproductattributeslist'}" class="option_price">
                <span class="price product-price">
                  {Tools::displayPrice($combination.price)}
                </span>
                {if $combination.price != $combination.price_old}
                  <br />
                  <span class="old_price">
                    {Tools::displayPrice($combination.price_old)}
                  </span>
                {/if}
              </td>

              <td data-column="{l s='Price tax excl.' mod='pdproductattributeslist'}" class="option_price">
                <span class="price product-price">
                  {Tools::displayPrice($combination.price_tax_excl)}
                </span>
                <br />
                {if $combination.price_tax_excl != $combination.price_old_tax_excl}
                  <span class="old_price">
                    {Tools::displayPrice($combination.price_old_tax_excl)}
                  </span>
                {/if}
              </td>
            {/if}

            <td data-column="{l s='Quantity on stock' mod='pdproductattributeslist'}" class="option_price _price">
              <b>{if $combination.quantity <= 10 }{$combination.quantity}{else}>10{/if}</b> {l s='pcs' mod='pdproductattributeslist'}
            </td>


            <td data-column="{l s='Product variant' mod='pdproductattributeslist'}" class="option_variant _variant">
              {$combination.attribute_name_html nofilter}
            </td>

            {if !$is_catalog}
              <td data-id-product="{$combination.id_product|intval}" data-id-product-attribute="{$combination.id_product_attribute|intval}" data-column="{l s='Select quantity' mod='pdproductattributeslist'}" class="option_gty">
                <div class="row extra-small-gutters product-quantity">
                  <input type="number" name="qty" inputmode="numeric" pattern="[0-9]*" class="quantity input-group form-control" min="0" value="0" alert_max="{$combination.quantity}" />
                </div>
              </td>
            {/if}
          </tr>
        {/foreach}


      </tbody>
    </table>
    <div class="footer_actions">

      <button class="btn btn-lg btn-primary add-to-cart-pdproductattributeslist pull-right" type="button">
        {l s='Add selected to cart' mod='pdproductattributeslist'}
      </button>

    </div>
  </div>
{/if}
{literal}
<!-- wklej tuż przed zamknięciem </body> lub w zewnętrznym pliku JS załadowanym po tabeli -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('td.option_gty').forEach(td => {
    const input = td.querySelector('input.quantity');
    if (!input) return;

    const max = parseInt(input.getAttribute('alert_max'), 10) || 0;

    // funkcja tworząca/usuń alert
    function checkQty() {
      const val = parseInt(input.value, 10) || 0;
      const existing = td.querySelector('.alert-max-exceeded');

      const _lang = document.querySelector('html').getAttribute('lang');

      if (val > max) {
        if (!existing) {
          const msg = document.createElement('div');
          msg.className = 'alert-max-exceeded text-danger';
          msg.style.marginTop = '4px';
          msg.style.fontSize = '0.9em';
          if(_lang == 'pl') {
            msg.innerHTML = 'Przekroczono stan,<br>braki trafią do back order.';
          } else {
            msg.innerHTML = 'Stock exceeded,<br>shortages will go to back order.';
          }

          td.querySelector('.product-quantity')
            .insertAdjacentElement('afterend', msg);
        }
      } else {
        if (existing) existing.remove();
      }
    }

    // od razu sprawdź raz przy starcie
    checkQty();

    // łapiemy ręczne wpisywanie…
    input.addEventListener('input', checkQty);

    // …i wszelkie inne zmiany przez polling w tle
    (function monitor(prevValue = input.value) {
      const curr = input.value;
      if (curr !== prevValue) {
        checkQty();
        prevValue = curr;
      }
      requestAnimationFrame(() => monitor(prevValue));
    })();
  });
});
</script>

{/literal}