<? global $lang_id, $mdb;?>
<?
  $attributes = (new \Domain\Product\ProductRepository($GLOBALS['mdb']))->getProductAttributes( $this -> product['product_combinations'] );
  $dictionariesRepository = new \Domain\Dictionaries\DictionariesRepository( $mdb );
  $product_images = [];
  if ( is_array( $this -> product ) and is_array( $this -> product['images'] ?? null ) )
    $product_images = $this -> product['images'];
  elseif ( is_object( $this -> product ) and is_array( $this -> product -> images ?? null ) )
    $product_images = $this -> product -> images;
?>
<script class="footer" type="text/javascript">
  function fradio_label_click( element, refresh )
  {
    element.parents( '.fradio' ).siblings().children( 'label' ).removeClass( 'active' );
    element.parents( '.fradio' ).siblings().children( 'input' ).removeAttr( 'checked' );
    element.parents( '.fradio' ).children( 'label' ).addClass( 'active' );
    element.parents( '.fradio' ).children( 'input' ).prop( "checked", true );

    if ( refresh )
      refresh_product_attributes( element.attr( 'for' ), element.attr( 'order' ) );
  }
</script>
<div id="product">
  <div class="product_info_box">

    <!-- //* Left top box -->
    <div class="product_info__image">
      <div class="gallery">
        <div thumbsSlider="" class="swiper mySwiper">
          <div class="swiper-wrapper">
            <? for ( $i = 0; $i < count( $product_images ); $i++ ): if ( file_exists( substr( $product_images[$i]['src'], 1 ) ) ):?>
              <div class="swiper-slide">
                  <img class="nolazy"  src="/thumb/180/0<?= $product_images[$i]['src'];?>" src="" alt="<?= $product_images[$i]['alt'];?>">
              </div>
            <? endif; endfor;?>
          </div>
        </div>
      </div>

      <div id="image-big">
        <? if ( $this -> product['new_to_date'] and $this -> product['new_to_date'] >= date( 'Y-m-d' ) ):?>
          <div class="new"><?= \Shared\Helpers\Helpers::lang( 'nowosc' );?></div>
        <? endif;?>
        <div class="swiper mySwiper2">
          <div class="swiper-wrapper">
          <? for ( $i = 0; $i < count( $product_images ); $i++ ): if ( file_exists( substr( $product_images[$i]['src'], 1 ) ) ):?>
            <div class="swiper-slide">
              <a href="<?= $product_images[$i]['src'];?>" class="item" data-fancybox="product" id="image-<?= $i;?>" i="<?= $i;?>">
                <img class="nolazy" src="/thumb/520/0<?= $product_images[$i]['src'];?>" src="" alt="<?= $product_images[$i]['alt'];?>">
              </a>
            </div>
          <? endif; endfor;?>
          </div>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </div>
      </div>
    </div>

    <!-- //* right box -->
    <div class="product_info__info">
      <div class="product-options" id="product-options">
        <?= \Shared\Tpl\Tpl::view( 'shop-product/_partial/product-warehouse-message', [
              'product' => $this -> product,
              'lang_id' => $this -> lang_id,
              'settings' => $this -> settings
            ] );?>
        <h1><?= $this -> product['language']['name'];?></h1>
        <div id="66bb9a83-faae-47e5-a954-13929becb059"></div>
        <script defer src="https://trustmate.io/widget/api/66bb9a83-faae-47e5-a954-13929becb059/script?product=<?= $this -> product['id'];?>"></script>
        <div class="prices">
          <? if ( $this -> product['price_brutto_promo'] ):?>
            <div class="price">
              <?= \Shared\Helpers\Helpers::shortPrice( $this -> product['price_brutto_promo'] );?> <span class="small">zł</span>
            </div>
            <div class="price-old">
              <?= \Shared\Helpers\Helpers::shortPrice( $this -> product['price_brutto'] );?> <span class="small">zł</span>
            </div>
            <div class="price-minimal">
              Najniższa cena w ciągu ostatnich 30 dni: <strong><?= \Shared\Helpers\Helpers::shortPrice( ( new \Domain\Product\ProductRepository( $GLOBALS['mdb'] ) )->getMinimalPriceCached( (int)$this -> product['id'], $this -> product['price_brutto_promo'] ) );?> zł</strong>
            </div>
            <? if ( $this -> product['weight'] > 0 && $this -> product['product_unit_id'] ):?>
              <div class="price_weight">
                <?= \Shared\Helpers\Helpers::shortPrice( $this -> product['price_brutto_promo'] / $this -> product['wegiht'] * 1 );?> <?= $this -> product['product_unit'];?>
              </div>
            <? endif;?>
          <? else:?>
            <div class="price">
              <?= \Shared\Helpers\Helpers::shortPrice( $this -> product['price_brutto'] );?> <span class="small">zł</span>
            </div>
            <? if ( $this -> product['weight'] > 0 && $this -> product['product_unit_id'] ):?>
              <div class="price_weight">
                <?= \Shared\Helpers\Helpers::shortPrice( $this -> product['price_brutto'] / $this -> product['weight'] );?> <span class="small">zł</span> / <?= $dictionariesRepository -> getUnitNameById( (int)$this -> product['product_unit_id'], $this -> lang_id );?>
              </div>
            <? endif;?>
          <? endif;?>
        </div>
        <form class="product-options" id="product-<?= $this -> product['id'];?>">
          <input type="hidden" name="product-id" value="<?= $this -> product['id'];?>">
          <? if ( \Shared\Helpers\Helpers::is_array_fix( $attributes ) ):?>
            <div id="attributes">
              <div class="title">Opcje produktu</div>
              <? foreach ( $attributes as $key => $val )
                  echo \Shared\Tpl\Tpl::view( 'shop-product/_partial/product-attribute', [
                    'attribute' => $val,
                    'order' => $key,
                    'level' => ++$level,
                    'max_level' => count( $attributes )
                  ] );?>
            </div>
          <? endif;?>
          <? if ( $this -> product['additional_message'] ):?>
            <div class="product-message">
              <textarea class="form-control" name="product-message" <? if ( $this -> product['additional_message_required'] ):?>required="required"<? endif;?> placeholder="<?= $this -> product['additional_message_text'] ? $this -> product['additional_message_text'] : 'Miejsce na dodatkową wiadomość';?>"></textarea>
            </div>
          <? endif;?>
          <?= \Shared\Tpl\Tpl::view( 'shop-product/_partial/product-custom-fields', [
            'custom_fields' => $this -> product['custom_fields']
          ] );?>
          <div class="add-to-basket">
            <div class="quantity-container">
              <a href="#" class="btn-minus">
                <i class="fa fa-minus"></i>
              </a>
              <input type="text" name="quantity" id="quantity" value="1" class="int-format" min="1" max="<?= ( !$this -> product['quantity'] and $this -> product['stock_0_buy'] ) ? 999 : $this -> product['quantity'];?>">
              <a href="#" class="btn-plus">
                <i class="fa fa-plus"></i>
              </a>
            </div>
            <button id="add-to-basket" class="btn btn-success"><?= \Shared\Helpers\Helpers::lang( 'do-koszyka' );?></span>
            </button>
            <div class="alert hidden">Produkt chwilowo niedostępny.</div>
            <?
            if ( !$this -> product['product_combinations'] and !( $this -> product['quantity'] > 0 or $this -> product['stock_0_buy'] ) ):
              ?>
              <script class="footer" type="text/javascript">
                $(function ()
                {
                  $('#product-<?= $this -> product['id'];?> .add-to-basket .quantity-container, #product-<?= $this -> product['id'];?> .add-to-basket #add-to-basket').addClass('hidden');
                  $('#product-<?= $this -> product['id'];?> .add-to-basket .alert').removeClass('hidden');
                });
              </script>
            <? endif;?>
          </div>
        </form>
        <div class="free-delivery">
          <p>Darmowa wysyłka już od <strong>149 zł</strong></p>
        </div>
        <? if ( $this -> product['producer'] and $this -> product['producer']['status'] ):?>
          <div class="product-producer">
            Producent: <a href="/producent/<?= \Shared\Helpers\Helpers::seo( $this -> product['producer']['name'] );?>" title="Produkty marki <?= htmlspecialchars( $this -> product['producer']['name'] );?>"><?= $this -> product['producer']['name'];?></a>
          </div>
        <? endif;?>
        <div class="short-description">
          <?= $this -> product['language']['short_description'];?>
        </div>
      </div>
    </div>

    <!-- //* bottom left -->
    <? if ( $this -> product['language']['description'] or $this -> product['language']['tab_description_1'] or $this -> product['language']['tab_description_2'] or $this -> product['producer'] ):?>
      <div id="description" class="product_info__desc">
        <div class="description_accordion">

          <!-- accordion 1 -->
          <? if ($this -> product['language']['description']) : ?>
            <div class="accordion_tile accordion_active">
              <div class="accordion_title"><p><?= ucfirst( \Shared\Helpers\Helpers::lang( 'opis' ) );?></p></div>
              <div class="accordion_data"><?= $this -> product['language']['description'];?></div>
            </div>
          <? endif; ?>

          <? if ( $this -> product['language']['tab_name_1'] ):?>
          <!-- accordion 2 -->
          <div class="accordion_tile">
            <div class="accordion_title"><p><?= $this -> product['language']['tab_name_1'];?></p></div>
            <div class="accordion_data"><?= $this -> product['language']['tab_description_1'];?></div>
          </div>
          <? endif;?>

          <? if ( $this -> product['language']['tab_name_2'] ):?>
            <!-- accordion 3 -->
            <div class="accordion_tile">
              <div class="accordion_title"><p><?= $this -> product['language']['tab_name_2'];?></p></div>
              <div class="accordion_data" style="display: none;"><?= $this -> product['language']['tab_description_2'];?></div>
            </div>
          <? endif;?>

          <? if ( $this -> product['producer']['data'] or $this -> product['language']['security_information'] ):?>
            <!-- accordion 4 -->
            <div class="accordion_tile">
              <div class="accordion_title"><p>Bezpieczeństwo</p></div>
              <div class="accordion_data" style="display: none;">
                <? if ( $this -> product['producer']['data'] ):?>
                  <p><strong>Producent</strong></p>
                  <?= $this -> product['producer']['data'];?>
                <? endif;?>
                  <br>
                <? if ( $this -> product['language']['security_information'] ):?>
                  <p><strong>Informacje o bezpieczeństwie</strong></p>
                  <?= $this -> product['language']['security_information'];?>
                <? endif;?>
              </div>
            </div>
          <? endif;?>

        </div>
      </div>
    <? endif; ?>
  </div>
  <div class="product-reviews box">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="box-title">Opinie o produkcie</div>
          <div id="2bf0c481-66d6-447c-83e5-76b6bf312513"></div>
          <script defer src="https://trustmate.io/widget/api/2bf0c481-66d6-447c-83e5-76b6bf312513/script?product=<?= $this -> product['id'];?>"></script>
        </div>
      </div>
    </div>
  </div>
  <? if ( \Shared\Helpers\Helpers::is_array_fix( $this -> product['products_sets'] ) ):?>
    <div class="products-sets box">
      <div class="row">
        <div class="col-12">
          <div class="box-title"><?= ucfirst( \Shared\Helpers\Helpers::lang( 'dobierz-do-kompletu' ) );?></div>
          <div class="owl-carousel owl-theme">
            <div class="swiper otherProductsSwiper">
                <div class="swiper-wrapper">
                <?
                  foreach ( $this -> product['products_sets'] as $product_sets_id ):
                    $product = (new \Domain\Product\ProductRepository($GLOBALS['mdb']))->findCached( $product_sets_id, $lang_id );
                    if ( $product and $product['status'] ):
                      echo \Shared\Tpl\Tpl::view( 'shop-product/product-mini', [
                          'product' => $product,
                          'class' => 'item',
                          'product_mini_class' => 'swiper-slide'
                      ] );
                    endif;
                  endforeach;
                ?>
              </div>
            </div>

            <div class="swiper-button-next otherProductsSwiper-next"></div>
            <div class="swiper-button-prev otherProductsSwiper-prev"></div>
          </div>
        </div>
      </div>
    </div>
  <? endif;?>
  <? if ( \Shared\Helpers\Helpers::is_array_fix( $this -> product['products_related'] ) ):?>
    <div class="products-related box">
      <div class="row">
        <div class="col-12">
          <div class="box-title">Często wybierane z tym produktem</div>
          <div class="owl-carousel owl-theme">
            <div class="swiper otherColorsSwiper">
              <div class="swiper-wrapper">
                <?
                  foreach ( $this -> product['products_related'] as $product_related_id ):
                    $product = (new \Domain\Product\ProductRepository($GLOBALS['mdb']))->findCached( $product_related_id, $lang_id );
                    if ( $product and $product['status'] ):
                      echo \Shared\Tpl\Tpl::view( 'shop-product/product-mini', [
                          'product' => $product,
                          'class'   => 'item',
                          'product_mini_class' => 'swiper-slide'
                      ] );
                    endif;
                  endforeach;
                ?>
              </div>
            </div>

            <div class="swiper-button-next otherColorsSwiper-next"></div>
            <div class="swiper-button-prev otherColorsSwiper-prev"></div>
          </div>
        </div>
      </div>
    </div>
  <? endif;?>
  <a href="javascript:history.go(-1)" class="btn btn-success history-back"><?= \Shared\Helpers\Helpers::lang( 'wstecz' );?></a>
</div>
<link class="footer" rel="stylesheet" type="text/css" href="/libraries/fancybox3/css/core.css">
<link class="footer" rel="stylesheet" type="text/css" href="/plugins/swiper/swiper-bundle.min.css">
<script class="footer" type="text/javascript" src="/libraries/fancybox3/js/core.js"></script>
<script class="footer" type="text/javascript" src="/libraries/fancybox3/js/guestures.js"></script>
<script class="footer" type="text/javascript" src="/libraries/fancybox3/js/wheel.js"></script>
<script class="footer" type="text/javascript" src="/plugins/swiper/swiper-bundle.min.js"></script>
<script class="footer" type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<script type="text/javascript">
  $( function() {
    <? if ( $this -> settings['google_tag_manager_id'] ):?>
      dataLayer.push({
        event: "view_item",
        ecommerce: {
          items: [
            {
              item_id: "<?= $this -> product['id'];?>",
              item_name: "<?= str_replace( '"', '', $this -> product['language']['name'] );?>",
              price: '<? if ( $this -> product['price_brutto_promo'] ): echo \Shared\Helpers\Helpers::normalize_decimal( $this -> product['price_brutto_promo'] ); else: echo \Shared\Helpers\Helpers::normalize_decimal( $this -> product['price_brutto'] ); endif;?>',
              quantity: 1,
              google_business_vertical: "retail"
            }
          ]
        }
      });
    <? endif;?>
  });
</script>
<script class="footer" type="text/javascript">
  $( function ()
  {
    var fullUrl = window.location.href;
    var hash = fullUrl.split('/')[4];
    if ( hash ) {
      // Podziel fragment na tablicę za pomocą znaku /
      var array = hash.split('/');

      // Sprawdź, czy tablica nie jest pusta
      if (array.length > 0) {
        // Przechodź przez tablicę elementów
        array.forEach(function(element, index) {
          // Ustaw opóźnienie na podstawie indeksu, aby kliknięcia były w odstępach półsekundowych
          setTimeout(function() {
            // Znajdź label z atrybutem for odpowiadającym aktualnemu elementowi tablicy i kliknij go
            $("label[for='" + element + "']").click();
          }, 100 * index); // 500 ms * indeks elementu
        });
      }
    }

    if ( $( '#product #tab-0' ).is( ':visible' ) )
      $( '#product #tabs-menu #tab-link-0' ).addClass( 'current' );
    else
      $( '#product #tabs-menu #tab-link-0' ).removeClass( 'current' );

    if ( $( '#product #tab-1' ).is( ':visible' ) )
      $( '#product #tabs-menu #tab-link-1' ).addClass( 'current' );
    else
      $( '#product #tabs-menu #tab-link-1' ).removeClass( 'current' );

    if ( $( '#product #tab-2' ).is( ':visible' ) )
      $( '#product #tabs-menu #tab-link-2' ).addClass( 'current' );
    else
      $( '#product #tabs-menu #tab-link-2' ).removeClass( 'current' );

    $( 'body' ).on( click_event, '.fradio label', function()
    {
      fradio_label_click( $( this ), true );
    });

    $( 'body' ).on( click_event, '.tab-link', function()
    {
      $( 'html, body' ).animate({
        scrollTop: $( "#tab-" + $( this ).attr( 'tab' ) ).offset().top - 120
      }, 333 );
    });

    // powiększenie zdjęcia
    $('body').on( click_event, '#image-big a', function ()
    {
      var image_id = $(this).attr('image-id');
      $('#image-' + image_id).trigger('click');
    });

    $('body').on('mouseover', '#gallery a', function()
    {
      var i = $(this).attr('i');
      var src = $(this).attr('href');
      if (i != $('#image-big a').attr('image-id'))
      {
        $('#image-big a').attr('image-id', i);
        $('#image-big img').attr('src', src);
      }
    });

    $('body').on( click_event, '.btn-review-form', function(e)
    {
      e.preventDefault();
      $.alert({
        title: '<?= ucfirst( \Shared\Helpers\Helpers::lang( 'dodaj-opinie' ) );?>',
        content: '<form method="POST">'
                    + '<div class="row form-group">'
                      + '<div class="col-12 text-left">'
                        + '<?= ucfirst( \Shared\Helpers\Helpers::lang( 'ocena' ) );?>: <i class="fa fa-star"><\/i> <i class="fa fa-star"><\/i> <i class="fa fa-star"><\/i> <i class="fa fa-star"><\/i> <i class="fa fa-star"><\/i> <i class="fa fa-star"><\/i>'
                      + '<\/div>'
                    + '<\/div>'
                    + '<div class="row form-group">'
                      + '<div class="col-12">'
                        + '<input type="text" class="form-control" name="name" placeholder="<?= ucfirst( \Shared\Helpers\Helpers::lang( 'imie' ) );?>">'
                      + '<\/div>'
                    + '<\/div>'
                    + '<div class="row form-group">'
                      + '<div class="col-12">'
                        + '<textarea name="review" class="form-control" placeholder="<?= ucfirst( \Shared\Helpers\Helpers::lang( 'opinia' ) );?>"><\/textarea>'
                      + '<\/div>'
                    + '<\/div>'
                + '<\/form>',
        type: 'blue',
        closeIcon: true,
        closeIconClass: 'fa fa-times',
        typeAnimated: true,
        animation: 'opacity',
        useBootstrap: false,
        theme: 'modern',
        buttons:
        {
          cancel:
          {
            text: '<?= \Shared\Helpers\Helpers::lang( 'anuluj' );?>',
            btnClass: 'btn-danger',
            action: function () {}
          }
        }
      });
    });

    $('body').on('change', '#quantity', function(e)
    {
      e.preventDefault();

      var quantity = parseInt($('#quantity').val());
      var max_value = parseInt($('input#quantity').attr('max'));

      quantity = quantity + 1;

      if (quantity > max_value)
      {
        quantity = max_value;
        $.alert(
        {
          title: '<?= ucfirst( \Shared\Helpers\Helpers::lang( 'uwaga' ) );?>',
          content: 'Maksymalna ilość wybranego produktu wynosi: <b>' + max_value + '<\/b>',
          type: 'blue',
          closeIcon: true,
          closeIconClass: 'fa fa-times',
          typeAnimated: true,
          animation: 'opacity',
          useBootstrap: false,
          theme: 'modern',
          autoClose: 'confirm|5000',
          icon: 'fa fa-exclamation',
          buttons: {
            confirm: {
              text: '<?= \Shared\Helpers\Helpers::lang( 'zamknij' );?>',
              btnClass: 'btn-blue',
              keys: ['enter'],
              action: function () {}
            }
          }
        });
      }

      $('input#quantity').val(quantity);
      return false;
    });

    $('body').on(click_event, '.btn-plus', function (e)
    {
      e.preventDefault();

      var quantity = parseInt($('#quantity').val());
      var max_value = parseInt($('input#quantity').attr('max'));

      quantity = quantity + 1;

      if (quantity > max_value)
      {
        quantity = max_value;
        $.alert(
        {
          title: '<?= ucfirst( \Shared\Helpers\Helpers::lang( 'uwaga' ) );?>',
          content: 'Maksymalna ilość wybranego produktu wynosi: <b>' + max_value + '<\/b>',
          type: 'blue',
          closeIcon: true,
          closeIconClass: 'fa fa-times',
          typeAnimated: true,
          animation: 'opacity',
          useBootstrap: false,
          theme: 'modern',
          autoClose: 'confirm|5000',
          icon: 'fa fa-exclamation',
          buttons: {
            confirm: {
              text: '<?= \Shared\Helpers\Helpers::lang( 'zamknij' );?>',
              btnClass: 'btn-blue',
              keys: ['enter'],
              action: function () {}
            }
          }
        });
      }

      $('input#quantity').val(quantity);
      return false;
    });

    $('body').on(click_event, '.btn-minus', function (e)
    {
      e.preventDefault();

      var quantity = parseInt($('input#quantity').val());
      var min_value = parseInt($('input#quantity').attr('min'));

      quantity = quantity - 1;

      if (quantity < min_value)
        quantity = min_value;

      $('input#quantity').val(quantity);
      return false;
    });

    $('body').on(click_event, '#add-to-basket', function ()
    {
      var check = true;
      $( '#attributes input[type="hidden"], #attributes select' ).each( function( index, element )
      {
        if ( $( element ).val() == '' )
        {
          var name = $( element ).attr( 'description' );
          shopAlert(
              '<?= ucfirst( \Shared\Helpers\Helpers::lang( 'uwaga' ) );?>',
              '<?= ucfirst( \Shared\Helpers\Helpers::lang( 'prosze-wybrac' ) );?>: <b>' + name + '</b>',
              [
                '<a href="#" onclick="shopAlertClose(); return false;" class="btn btn-success">Zamknij</a>',
               ] );
          check = false;
          return false;
        }
      });

      $( '#attributes .fradio-group' ).each( function( index, element )
      {
        var atrribute = $( element ).attr( 'attribute' );
        var value = $( element ).find( 'input[type="radio"]:checked' ).val();

        if ( typeof value === "undefined" )
        {
          var name = $( element ).attr( 'attribute-name' );
          shopAlert(
              '<?= ucfirst( \Shared\Helpers\Helpers::lang( 'uwaga' ) );?>',
              '<?= ucfirst( \Shared\Helpers\Helpers::lang( 'prosze-wybrac' ) );?>: <b>' + name + '</b>',
              [
                '<a href="#" onclick="shopAlertClose(); return false;" class="btn btn-success">Zamknij</a>',
               ] );
          check = false;
          return false;
        }
      });

      if ( $( '.product-message textarea' ).prop( 'required' ) && $.trim( $( '.product-message textarea' ).val() ) == '' )
      {
        shopAlert(
            '<?= ucfirst( \Shared\Helpers\Helpers::lang( 'uwaga' ) );?>',
            'Proszę uzupełnić pole na dodatkową wiadomość.',
            [
              '<a href="#" onclick="shopAlertClose(); return false;" class="btn btn-success">Zamknij</a>',
              ] );
        check = false;
        return false;
      }

      // dodatkowe pola muszą być uzupełnione
      $( '.custom-field textarea[required]' ).each( function( index, element )
      {
        if ( $.trim( $( element ).val() ) == '' )
        {
          shopAlert(
              '<?= ucfirst( \Shared\Helpers\Helpers::lang( 'uwaga' ) );?>',
              'Proszę uzupełnić pole: <b>' + $( element ).attr( 'field_name' ) + '</b>',
              [
                '<a href="#" onclick="shopAlertClose(); return false;" class="btn btn-success">Zamknij</a>',
                ] );
          check = false;
          return false;
        }
      });

      if (!check)
        return false;

      var values = $( '#product-<?= $this -> product['id'];?>' ).serializeArray();
      var quantity = $('#product-<?= $this -> product['id'];?> #quantity').val();

      jQuery.ajax(
      {
        type: 'POST',
        cache: false,
        url: '/shopBasket/basket_add_product',
        data:
        {
          values: JSON.stringify(values)
        },
        beforeSend: function()
        {
          $('#add-to-basket').addClass('disabled');
        },
        success: function( response )
        {
          data = jQuery.parseJSON(response);
          $('#add-to-basket').removeClass('disabled');
          $('#basket-mini #products-count').html(data.basket_mini_count);
          $('#basket-mini #basket-value').html(data.basket_mini_value);
          $('#product #quantity').val(1);

          if (data.result == 'ok')
          {
            <? if ( $this -> settings['piksel'] ):?>
              for (var i = 1; i <= quantity; i++)
              {
                fbq('track', 'AddToCart', {
                  content_name: '<?= str_replace( '"', '', $this -> product['language']['name'] );?>',
                  content_category: 'produkt',
                  content_ids: ['<?= $this -> product['id'];?>'],
                  content_type: 'product',
                  value: '<? if ( $this -> product['price_brutto_promo'] ): echo \Shared\Helpers\Helpers::normalize_decimal( $this -> product['price_brutto_promo'] ); else: echo \Shared\Helpers\Helpers::normalize_decimal( $this -> product['price_brutto'] ); endif;?>',
                  currency: 'PLN'
                });
              }
            <? endif;?>

            <? if ( $this -> settings['google_tag_manager_id'] ):?>
              var add_to_cart_value = <? if ( $this -> product['price_brutto_promo'] ): echo \Shared\Helpers\Helpers::normalize_decimal( $this -> product['price_brutto_promo'] ); else: echo \Shared\Helpers\Helpers::normalize_decimal( $this -> product['price_brutto'] ); endif;?> * quantity;
              dataLayer.push({
                event: "add_to_cart",
                ecommerce: {
                  currency: "PLN",
                  value: add_to_cart_value,
                  items: [
                    {
                      item_id: "<?= $this -> product['id'];?>",
                      item_name: "<?= str_replace( '"', '', $this -> product['language']['name'] );?>",
                      price: <? if ( $this -> product['price_brutto_promo'] ): echo \Shared\Helpers\Helpers::normalize_decimal( $this -> product['price_brutto_promo'] ); else: echo \Shared\Helpers\Helpers::normalize_decimal( $this -> product['price_brutto'] ); endif;?>,
                      quantity: quantity,
                      google_business_vertical: "retail"
                    }
                  ]
                }
              });
            <? endif;?>

            shopAlert(
              'Produkt dodany do koszyka',
              data.product_sets,
              [
                '<a href="#" onclick="shopAlertClose(); return false;" class="btn btn-default">Wróć do zakupów</a>',
                '<a href="/koszyk" class="btn btn-success">Przejdź do koszyka</a>'
               ] );
            observer.observe();
          }
        }
      });
      return false;
    });
  });

  // odświeżenie listy atrybutów produktu
  function refresh_product_attributes( attribute_with_value, attribute_order )
  {
    // Wybierz wszystkie etykiety z klasą "active" wewnątrz elementu o ID "attributes"
    const activeLabels = document.querySelectorAll('#attributes label.active');

    // Utwórz tablicę z wartościami atrybutu "for" tych etykiet
    const forValues = Array.from(activeLabels).map(label => label.getAttribute('for'));

    $.ajax({
      type: 'POST',
      cache: false,
      url: '/shopProduct/draw_product_attributes',
      data: {
        selected_values: forValues,
        product_id: <?= $this -> product['id'];?>
      },
      beforeSend: function() {
        $( '#add-to-basket' ).addClass('disabled');
      },
      success: function( response ) {
        data = jQuery.parseJSON( response );
        console.log( data );
        $( '#add-to-basket' ).removeClass( 'disabled' );

        if ( data.product_data )
        {
          if ( data.product_data.price_brutto_promo )
          {
            $( '#product-options .prices .price-old' ).html( data.product_data.price_brutto + ' <span class="small">zł</span>' );
            $( '#product-options .prices .price' ).html( data.product_data.price_brutto_promo + ' <span class="small">zł</span>' );
          }
          else
          {
            $( '#product-options .prices .price' ).html( data.product_data.price_brutto + ' <span class="small">zł</span>' );
          }

          // jeżeli stan magazynowy jest większy niż 0
          if ( data.product_data.quantity > 0 )
          {
            $( '.warehouse-message' ).html( data.product_data.messages.warehouse_message_nonzero );
            $( '#quantity' ).attr( 'max', data.product_data.quantity );
            $( '.add-to-basket #add-to-basket, .add-to-basket .quantity-container' ).show();
            $( '.add-to-basket .alert' ).addClass( 'hidden' );
          }
          // jeżeli stan magazynowy jest równy 0
          else
          {
            // jeżeli można kupić produkt ze stanem magazynowym równym 0
            if ( data.product_data.stock_0_buy == 1 )
            {
              $( '.warehouse-message' ).html( data.product_data.messages.warehouse_message_zero );
              $( '#quantity' ).attr( 'max', 999 );
              $( '.add-to-basket #add-to-basket, .add-to-basket .quantity-container' ).show();
              $( '.add-to-basket .alert' ).addClass( 'hidden' );
            }
            // jeżeli nie można kupić produktu ze stanem magazynowym równym 0
            else
            {
              $( '.warehouse-message' ).html( '' );
              $( '#quantity' ).attr( 'max', 0 );
              $( '.add-to-basket #add-to-basket, .add-to-basket .quantity-container' ).hide();
              $( '.add-to-basket .alert' ).removeClass( 'hidden' );
            }
          }
        }
      }
    });
    return false;
  }

  /* Fixed box when you scroll */
  const postDetails = document.querySelector("#product .product_info_box") //* Blok statyczny.
  const postSidebar = document.querySelector("#product .product_info__info") //* Blok jaki powinien być zafiksowany
  const headerHeight = document.querySelector("#main-menu") //* Header

  const controller = new ScrollMagic.Controller()
  const scene = new ScrollMagic.Scene({
    triggerElement: postSidebar,
    triggerHook: 0,
    offset: -headerHeight.offsetHeight - 40,
    duration: getDuration,
  }).addTo(controller)

  if (window.matchMedia("(min-width: 991px)").matches) {
    scene.setPin(postSidebar, {
      pushFollowers: false
    })
  }

  window.addEventListener("resize", () => {
    if (window.matchMedia("(min-width: 991px)").matches) {
      scene.setPin(postSidebar, {
        pushFollowers: false
      })
    } else {
      scene.removePin(postSidebar, true)
    }
  })

  function getDuration() {
    return (
      postDetails.offsetHeight - postSidebar.offsetHeight
    )
  }

  //* Accordion
  $( function () {
    $("#description .description_accordion .accordion_tile .accordion_data");
  })

  $("#description .description_accordion .accordion_tile .accordion_title").on("click", function () {
    let accTitle = $(this).parent()
    $("#description .description_accordion .accordion_tile").not(accTitle).removeClass('accordion_active')
    $(accTitle).toggleClass("accordion_active")

    $(".accordion_data").not($(".accordion_data", accTitle)).slideUp("slow")
    $(".accordion_data", accTitle).slideToggle("slow")
  })

  if ( windowsize <= 767 )
  {
    var direcion = 'horizontal';
    var slidesPerView = 4;
  }
  else
  {
    var direcion = 'vertical';
    var slidesPerView = 3;
  }

console.log(direcion);

  //* Galleria
  $( function () {
    if ( typeof Swiper === 'undefined' ) return;

    var swiper = new Swiper(".mySwiper", {
      loop: false,
      spaceBetween: 4,
      slidesPerView: slidesPerView,
      watchOverflow: true,
      watchSlidesVisibility: true,
      watchSlidesProgress: true,
      direction: direcion
    });

    var swiper2 = new Swiper(".mySwiper2", {
      loop: true,
      spaceBetween: 10,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      thumbs: {
        swiper: swiper,
      },
    });
  })

  //* grid row
  $( function ()
  {
    if ( typeof Swiper === 'undefined' ) return;

    if ( $( ".otherProductsSwiper" ).length )
    {
      var swiper3 = new Swiper(".otherProductsSwiper", {
        slidesPerView: 6,
        spaceBetween: 30,
        centeredSlides: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".otherProductsSwiper-next",
          prevEl: ".otherProductsSwiper-prev",
        },

        breakpoints: {
          1400: {
            slidesPerView: 6,
          },
          1200: {
            slidesPerView: 5,
          },
          991: {
            slidesPerView: 4,
          },
          576: {
            slidesPerView: 3,
          },
          300: {
            slidesPerView: 2,
          },
          200: {
            slidesPerView: 1,
          }
        }
      }).slideTo(2, 0, false);
    }

    if($(".otherColorsSwiper").length){
      var swiper4 = new Swiper(".otherColorsSwiper", {
        slidesPerView: 6,
        // initialSlide : 2,
        spaceBetween: 30,
        centeredSlides: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".otherColorsSwiper-next",
          prevEl: ".otherColorsSwiper-prev",
        },

        breakpoints: {
          1400: {
            slidesPerView: 6,
          },
          1200: {
            slidesPerView: 5,
          },
          991: {
            slidesPerView: 4,
          },
          576: {
            slidesPerView: 3,
          },
          300: {
            slidesPerView: 2,
          },
          200: {
            slidesPerView: 1,
          }
        }
      }).slideTo(2, 0, false);
    }
  })

</script>

