{extends "index.tpl"}

{block "css" append}
   {encore_entry_link_tags entry='product'}
{/block}

{block "header-title"}
   {if !$body.product.meta_title}
      <title>{$body.product.model_short_title} {$body.product.model_section} {$seo_gender}
         - {$dbcfg.shop_title}</title>
   {else}
      <title>{$body.product.meta_title} - {$dbcfg.shop_title}</title>
   {/if}
{/block}

{block "meta-description"}
   {* pro shopy co nemaji rozdeleni mzd *}
   {$parent_cat = $body.returnNav[0]|array_slice:-2}
   {if $parent_cat[0].ID}
      {get_seo type="product" section=$parent_cat[0].ID sekce=$body.product.model_section nazev=$body.product.model_short_title assign="product_seo"}
   {/if}

   {if $header.meta_description != ""}
      <meta name="description" content="{$header.meta_description}">
   {elseif $product_seo.descr}
      <meta name="description" content="{$product_seo.descr}">
   {else}
      <meta name="description" content="{$header.meta_description|default:$dbcfg.shop_description}">
   {/if}
{/block}

{block "google_tag_manager"}
   {include 'block.analytics.gtm.tpl' pageType='product'}
{/block}

{block "body-content"}
   {ifmodule REVIEWS}
   {get_ratings assign=ratings id_product=$body.product.id}
   {/ifmodule}
   <div class="row">
      <div class="col-xs-12 product-detail">
         {* zobrazuje se jen na mobilu *}
         <div class="row hidden-md-up text-center m-b-2 product-detail-content responsive">
            <div class="col-xs-12">
               <h2 class="product-h1">{$body.product.model_short_title}
                  <span class="h2 product-subtitle"><i data-text="variation-title">{$body.product.model_section}</i> <i
                             data-text="variation-set"></i></span>
               </h2>
            </div>
         </div>
         <div class="row">
            {include "product/product.gallery.tpl"}

            <div class="col-xxl-7 col-lg-9 col-md-8 col-xs-12 product-detail-content" data-scroll="fixed-table"
                 data-filter="products">
               <div class="hidden-sm-down pos-rel">
                  {$gender = $body.product.sex}
                  {if $gender}
                     <div class="gender gender-detail pull-right">
                        {if $gender == 'W'}
                           <span class="gender-female">{t}Pro ženy{/t} <i class="fc icons_female"></i></span>
                        {elseif $gender == 'M'}
                           <span class="gender-male">{t}Pro muže{/t} <i class="fc icons_male"></i></span>
                        {elseif $gender == 'U'}
                           <span class="gender-unisex">{t}Unisex{/t} <i class="fc icons_unisex"></i></span>
                        {elseif $gender == 'K'}
                           <span class="gender-child">{t}Pro děti{/t} <i class="fc icons_child-gender"></i></span>
                        {/if}
                     </div>
                  {/if}

                  <h1 class="product-h1">{$body.product.model_short_title}<br>
                     <span class="h2 product-subtitle"><i data-text="variation-title">{$body.product.model_section}</i> <i
                                data-text="variation-set"></i></span>
                  </h1>

                  {if $ratings.rating_count}
                     {include "product/product.rating.microdata.tpl"}
                  {/if}
               </div>

               {include "product/product.fn.gpsr_tab_content.tpl"}

               {include "product/product.variations.tpl"}

               {insert_products type="productsInSerie" models=true show_producer=true id_serie=$body.serie.id_abra id_model=$body.model.id_abra count=12 offset=NULL image=2
               template="block.products.related.tpl" assign="pserie" template=null}

               {if $pserie.products|count}
                  <div class="hidden-xxl-up more-product-series-mobile">
                     {include "block.products.related.mobile.tpl" products=$pserie.products->slice(0,1) items=$pserie.products|count}
                  </div>
               {/if}

               {if $body.model.id_richcontent}
                  {include "product/product.description.tabs.tpl" header_class="h2"}
               {else}
                  {include "product/product.description.tpl"}
               {/if}

               {ifmodule REVIEWS}
               {block "product-reviews"}
                  <div class="reviews m-t-3" id="reviews">
                     {include "block.reviews.tpl"}
                  </div>
               {/block}
               {/ifmodule}
            </div>

            <div class="col-xxl-2 col-xs-12 hidden-xl-down">
               {if $pserie.products|count}
                  <div class="more-product-series">
                     {include "block.products.related.tpl" products=$pserie.products->slice(0,1) catalog_class="col-xxl-12 col-xl-3 col-lg-4 col-md-6 col-xs-12"}
                     {if $pserie.products|count > 1}
                        <p class="text-center">
                           <a href="#serie" class="btn btn-outlined btn-outlined--green"
                              data-scroll-to>{t}Zobrazit všechny{/t}</a>
                        </p>
                     {/if}
                  </div>
               {/if}
            </div>
         </div>

         {if $pserie.products|count > 1}
            <div class="row p-t-3"
                 id="serie">  {* pokud je jen jeden produkt zobrazi se na velkym monitoru pouze nahore *}
               <div class="col-xs-12">
                  <hr class="m-b-3">
                  {include "block.products.related.tpl" products=$pserie.products row_class="slider-wrapper"}
               </div>
            </div>
         {/if}

         {insert_products type="soldProductsInSection" models=true id_section=$breadcrumbs[count($breadcrumbs)-2].ID id_product=$body.product.id count=6
         offset=NULL image=2 assign="pbest" template=null}
         {if $pbest.products|count > 5}
            <div class="row p-t-3">
               <div class="col-xs-12 current-in-category">
                  <h2 class="h1 text-center">
                     {if $activeCategory.breadcrumb[1].text == "Muži"}
                        {t}U mužů aktuálně frčí{/t}
                     {elseif $activeCategory.breadcrumb[1].text == "Ženy"}
                        {t}U žen aktuálně frčí{/t}
                     {else}
                        {t}Aktuálně frčí{/t}
                     {/if}
                  </h2>
                  {include "block.products.tpl" products=$pbest.products row_class="slider-wrapper" catalog_class='col-xxl-2 col-xl-2 col-lg-4 col-md-4 col-sm-6 col-xs-12'}
               </div>
            </div>
         {/if}

         <div class="row hidden-md-down m-t-3">
            <div class="col-xs-12">
               {insert_products type="last_visited_model" models=true ID=$body.product.id_model count=6 image=2 assign="last_visited" template="block.products.last_visited.tpl"}
            </div>
         </div>
      </div>
   </div>
{/block}

{block "body" append}
   {get_session_value type='added_to_favorites' assign='addedToFavorites'}
   {if $addedToFavorites}
      {block "favorites"}
         {include "focus/focus.favorites.tpl" class="active added-to-favorites"}
      {/block}
      <script>
         wpj.onReady.push(function() {
            $(".added-to-favorites.focus").focus({
               opened: true
            });
         });
      </script>
   {/if}
{/block}

{block "js-entry" append}
   {encore_entry_script_tags entry='product'}
{/block}

{block "js-dynamic-load" append}
   {ifmodule REVIEWS}
   {if !$body.product->isold()}
      {asset_compile}
         <script src="/common/static/bootstrapvalidator/js/bootstrapValidator.js"></script>
         <script src="/common/static/bootstrapvalidator/js/language/{$ctrl.active_language_code}.js"></script>
      {/asset_compile}
   {/if}
   {/ifmodule}

   {if $body.model.id_richcontent}
      {asset_compile}
         <script src="/static/js/wpj-tabs.js"></script>
      {/asset_compile}
   {/if}
{/block}

<script>
   {block onready append}
   {block "notinstore-js"}
   var $innerListItem = $("[data-variation-id].active"),
           $notinstoreOpener = $("[data-notinstore-opener]");

   // po kliku zobrazit varianty, ktere nejsou skladem
   $notinstoreOpener.click(function(e) {
      if ($(this).hasClass("open")) {
         $("[data-var-hidden]").hide();
         $(this).removeClass("open");
         $(this).html('<a href=""><i class="fc icons_arrow_down"></i>{t}hlídejte si další varianty{/t}</a>');
         $("[data-hidden-half]").addClass("hidden-half");
         if (!wpj.domUtils.isInView($(this)))
            wpj.domUtils.scrollTo($(this));
      } else {
         $("[data-var-hidden]").show();
         $(this).addClass("open");
         $("[data-hidden-half]").removeClass("hidden-half");
         $(this).html('<a href=""><i class="fc icons_arrow_up"></i>{t}skrýt varianty k hlídání{/t}</a>');
      }
      return false;
   });
   {/block}
   {/block}
</script>


{block "fb-pixel" append}
   {if $dbcfg.analytics.fb_pixel.id}
      {include 'block.fbpixel.tpl' pageType='product'}
   {/if}
{/block}

{block analytics append}
   {if !isDebug() and $dbcfg.custom.karsaEhsopId and !$body.product->isold()}
      <script>
         //** BEGIN karsaMonitorCollector v5 **
         (function() {
            var supportJsHostUrl = "https://collector.karsa-monitor.com";
            var d = document, g = d.createElement("script"), s = d.getElementsByTagName("script")[0];
            g.type = "text/javascript";
            g.async = true;
            g.defer = true;
            g.src = supportJsHostUrl + "/collector-api.js";
            s.parentNode.insertBefore(g, s);
         })();
         //** END karsaMonitorCollector v5 **

         window.karsaCollectorInit = function(karsaMonitorCollector) {
            {foreach $body.products as $product}
            {if $product.inStore > 0}
            karsaMonitorCollector.addProduct("{$product.code}", {$product.productPrice.value_with_vat->asFloat()});
            {/if}
            {/foreach}

            karsaMonitorCollector.send({$dbcfg.custom.karsaEhsopId});
         };
      </script>
   {/if}
{/block}