{% unless settings.breadcrumb_styles == 'none' %}{% include 'breadcrumb' %}{% endunless %}
{% assign _layout = settings.general_placement %}
{% assign _lazyload = settings.use_lazyload %}
{% assign _show_product_review = settings.show_product_review %}

<div itemscope itemtype="http://schema.org/Product">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}" />
  <meta itemprop="image" content="{{ product.featured_image.src | product_img_url: 'grande' }}">
  <span itemprop="name" class="hide">{{ product.title }}</span>
  
  {% assign _product_layout = 'normal' %}
  {% assign _product_sb_placement = section.settings.product_sb_placement %}

  <div id="col-main" class="page-product layout-{{ _product_layout }} layout-redirect">
    {% if _layout == 'wide' %}<div class="container-fluid">{% endif %}
    
      <div class="product">
        <div class="product-content-wrapper">
          <div class="row">
            {% if _product_sb_placement == 'left' %}  
              {% include 'product-templete-content' %}
            {% endif %}

            {% assign _ti_position = section.settings.ti_position %}
            <div class="col-lg-8 col-md-6 col-sm-12 col-12">
              <div class="background-color-wrapper" style="background-color: {{ section.settings.prod_img_bg_color }};">
                <div class="product-title-wrapper">
                  {% if section.settings.show_product_vendor and product.vendor != blank %}
                    <div class="product-vendor">{{ product.vendor | link_to_vendor }}</div>
                  {% endif %} 

                  <h1 itemprop="name" content="{{ product.title }}" class="page-heading">{{ product.title }}</h1>

                  <div class="code-rating">
                    {% if section.settings.show_product_sku %}
                      <div class="product-code">
                        <span>{{ 'products.product.product_code' | t }}</span>
                        {% if product.variants.first.sku == blank %}
                          <span id="sku">N/A</span>
                        {% else %}  
                          <span id="sku">{{ product.variants.first.sku }}</span>
                        {% endif %}
                      </div>
                    {% endif %}

                    {% if section.settings.product_tab_review and _show_product_review %}
                      <div class="rating-links">
                        <div class="shopify-product-reviews-badge" data-id="{{ product.id }}"></div>
                        <a href="#tab_review">{{ 'products.product.add_your_review' | t }}</a>
                      </div>
                    {% endif %}
                  </div>
                </div> 

                <div id="product-image" class="product-image">
                  <div class="product-image-inner{% unless _ti_position == 'bottom' %} row{% endunless %}">
                      {% include 'product-label' %}

                      {% if product.images.size > 0 %} 

                        {% if _ti_position == 'left' %}
                          <div class="more-view-image col-md-2 col-sm-12 col-12">
                            <div id="gallery-image" class="v-gallery-image-thumb bxslider">
                              {% for image in product.images %}
                                <a class="thumb-img{% if forloop.index == 1 %} active{% endif %}{% if _lazyload %} lazyload waiting{% endif %}" data-image="{{ image | product_img_url: '1024x1024' }}" data-zoom-image="{{ image | product_img_url: 'original' }}">
                                  <img {% if _lazyload %}class="lazyload" data-{% endif %}src="{{ image.src | product_img_url: '200x' }}" alt="{{ product.title | escape }}">
                                </a>
                              {% endfor %}
                            </div> 
                          </div>
                        {% endif %}

                        {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
                        <div class ="main-image{% unless _ti_position == 'bottom' %} col-md-10 col-sm-12 col-12{% endunless %}">
                          <a href="javascript:;" class="featured-image elevatezoom{% if _lazyload %} lazyload waiting{% endif %}">
                            
                            <img id="product-featured-image" class="magniflier zoom-image{% if _lazyload %} lazyload{% endif %}" {% if _lazyload %}data-{% endif %}src="{{ featured_image | product_img_url: '1024x1024' }}" data-zoom="{{ featured_image | product_img_url: 'original' }}" alt="{{ product.title | escape }}" />
                            
                          </a>

                          <div class="more-view-image mobile-version d-lg-none">
                            <div id="gallery-image" class="gallery-image-thumb">
                              {% for image in product.images %}
                                <a class="thumb-img{% if forloop.index == 1 %} active{% endif %}{% if _lazyload %} lazyload waiting{% endif %}" data-image="{{ image | product_img_url: '1024x1024' }}" data-zoom-image="{{ image | product_img_url: 'original' }}">
                                  <img {% if _lazyload %}class="lazyload" data-{% endif %}src="{{ image.src | product_img_url: '200x' }}" alt="{{ product.title | escape }}">
                                </a>
                              {% endfor %}
                            </div> 
                          </div>
                        </div> 

                        {% if section.settings.meta_size_chart %}
                          {% assign meta_sizechart = product.metafields.c_f %}
                          {% assign key = 'pdf_file' %}

                          {% unless meta_sizechart.pdf_file == blank %}
                            <div class="pdf-file-wrapper">
                              <button type="button" id="btn-pdf" class="btn btn-pdf" data-toggle="modal" data-target="#pdf-file">
                                <i class="demo-icon icon-file-pdf"></i> {{'products.product.manual' | t}}
                              </button>

                              <div class="modal fade" id="pdf-file" tabindex="-1" role="dialog" aria-labelledby="pdf-file" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                  <div class="modal-content"><iframe id="pdf-frame"></iframe></div>
                                </div>
                              </div>
                            </div>

                            <script type="text/javascript">
                                $(document).ready(function() {
                                    let src = "{{ meta_sizechart.pdf_file }}";
                                    $('#btn-pdf').on('click', function(){
                                        $("#pdf-frame").attr("src", src);
                                    }); 
                                });
                            </script>
                          {% endunless %}

                        {% endif %}

                        {% if section.settings.meta_video %}
                          {% assign _meta_video = product.metafields.c_f %}
                          {% assign key = 'video_url' %}

                          {% unless _meta_video.video_url == blank %}
                            <div class="meta-video">
                              <a href="{{ _meta_video.video_url }}" class="m-video"><i class="demo-icon icon-play-circle2"></i>{{ 'products.product.video' | t }}</a>
                            </div>

                            <script>
                              $(document).ready(function() {
                                $('.m-video').fancybox({
                                  openEffect  : 'none',
                                  closeEffect : 'none',
                                  helpers : {
                                    media : {},
                                    overlay :{
                                      locked: true
                                    }
                                  }
                                });
                              });
                            </script>

                          {% endunless %}

                        {% endif %}
              
                        {% unless _ti_position == 'left' %}
                          <div class="more-view-image{% unless _ti_position == 'bottom' %} col-md-2 col-sm-12 col-12{% endunless %}">
                            <div id="gallery-image" class="{% if _ti_position == 'bottom' %}gallery-image-thumb{% else %}v-gallery-image-thumb bxslider{% endif %}">
                              {% for image in product.images %}
                                <a class="thumb-img{% if forloop.index == 1 %} active{% endif %}{% if _lazyload %} lazyload waiting{% endif %}" data-image="{{ image | product_img_url: '1024x1024' }}" data-zoom-image="{{ image | product_img_url: 'original' }}">
                                  <img {% if _lazyload %}class="lazyload" data-{% endif %}src="{{ image.src | product_img_url: '200x' }}" alt="{{ product.title | escape }}">
                                </a>
                              {% endfor %}
                            </div> 
                          </div>
                        {% endunless %}  

                        {% unless _ti_position == 'bottom' %}
                          <script type="text/javascript" defer>
                            jQuery(document).ready(function($){ 
                              AT_Main.productSlider(); 
                            })
                          </script> 
                        {% endunless %} 
                        
                          
                      {% else %}
                        <img src="{{ 'default-image.jpg' | asset_url }}" />

                      {% endif %}

                  </div>
                </div>
              </div>
            </div>

            {% if _product_sb_placement == 'right' %}  
              {% include 'product-templete-content' %}
            {% endif %}  
          </div>
        </div>
      </div>
    
    {% if _layout == 'wide' %}</div>{% endif %}

    {% if section.settings.show_product_tab %}
      {% include 'product-toggle' %}
    {% endif %}
    
    {% if section.settings.product_tab_review == 'below' and _show_product_review %}
      <div class="review-item" id="tab_review_tabbed">
        <div id="tab-review">
          <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
        </div>
      </div>
    {% endif %}

    {% if section.settings.enable_related_product %}
      {% if _layout == 'wide' %}<div class="container-fluid">{% endif %}
        {% include 'related-product' %}
      {% if _layout == 'wide' %}</div>{% endif %}
    {% endif %}
  
  </div>
  
</div>

{% if settings.enable_notify_product_page %}
  {% include 'layout-notify' %}
{% endif %}

<script type="text/javascript">
  
  	

	// initialize multi selector for product
	$(window).load(function() {
      AT_Main.stickAddToCart();
        setTimeout(function(){
          AT_Main.scareWidth();
        }, 1000);
      
        $(".qty-inner .qty-up").on("click", function() {
			var oldValue = $("#quantity").val(),
				newVal = 1;
				newVal = parseInt(oldValue) + 1;
				$("#quantity").val(newVal);
		});
		$(".qty-inner .qty-down").on("click", function() {
			var oldValue = $("#quantity").val();
			if (oldValue > 1) {
				newVal = 1;
				newVal = parseInt(oldValue) - 1;
				$("#quantity").val(newVal);
			}
		});

		/* selectCallback */
		var selectOptionsCallback = function(variant, selector) {

			if (variant) {
				var form = jQuery('#' + selector.domIdPrefix).closest('form');
				for (var i=0,length=variant.options.length; i<length; i++) {
					var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
					if (radioButton.size()) {
						radioButton.get(0).checked = true;
					}
				}
			}
          
          
			var add_to_cart = '#add-to-cart';
			var $price = '#purchase-' + selector.product.id.toString() + ' .detail-price';
			if (variant && variant.available) {
              
                jQuery("#stock").html('<span>{{"products.product.available" | t }}:</span><span class="stock"> {{"products.product.in_stock" | t }}</span>');
              
              	// Update variant image
				if (variant.featured_image) { 
          var originalImage = jQuery("#product-featured-image");
          var newImage = variant.featured_image;
          var element = originalImage[0];
          Shopify.Image.switchImage(newImage, element, function (newImageSizedSrc, newImage, element) {

            jQuery('.more-view-image img.lazyloaded').each(function() {
              if(jQuery(this).attr('src') == undefined){
                var grandSize = jQuery(this).data('src');
              } else {
                var grandSize = jQuery(this).attr('src');
              }
              grandSize = grandSize.replace('200x','1024x1024');
              grandSize = grandSize.replace('https:','');
              if (grandSize == newImageSizedSrc) {
                jQuery(this).parent().trigger('click');              
                return false;
              }
            });

          })
        }
				// selected a valid variant
				$(add_to_cart).removeClass('disabled').removeAttr('disabled').html('{{ "products.product.add_to_cart" | t }}'); // remove unavailable class from add-to-cart button, and re-enable button

				if(variant.compare_at_price == null){
					$($price).html('<span class="price">'+Shopify.formatMoney(variant.price, '{{shop.money_format}}')+'</span>');
                    
                    {% if settings.enable_saleoff_label %}
                      jQuery("#label-sale").html('').hide();
                    {% endif %}
				}
			  
				else {
					$($price).html('<span class="price-sale">'+Shopify.formatMoney(variant.price, '{{shop.money_format}}') + '</span>' + '<del class="price-compare">' + Shopify.formatMoney(variant.compare_at_price, '{{shop.money_format}}') + '</del>');
                                                                                       
                    {% if settings.enable_saleoff_label %}
                      jQuery("#label-sale").html('<span class="sale-text">{{ "products.label.sale" | t }}</span>').show();
                    {% endif %}
				}
                
                /* Update currency */
                {% if settings.show_multiple_currencies %}
                  currenciesCallbackSpecial('#product-info span.money');
				{% endif %}
			} 
			else {
                jQuery("#stock").html('<span>{{"products.product.available" | t }}:</span><span class="stock"> {{"products.product.out_stock" | t }}</span>');
				$(add_to_cart).addClass('disabled').attr('disabled', 'disabled'); // set add-to-cart button to unavailable class and disable button
				var message = variant ? "{{'products.product.sold_out' | t }}" : "{{'products.product.unavailable' | t }}";
				$(add_to_cart).html(message);
			}
                
            {% if section.settings.show_product_sku %}
				if (variant && variant.sku ) { 
					jQuery("#sku").html(variant.sku).parent().show(); 
				}
				else{
					jQuery("#sku").html('N/A'); 
				}
			{% endif %}
		};

        {% if product.variants.size > 1 %}
            new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: {{ product | json | remove:'\u003E' | remove:'\u003C' | remove:'\u00a0' }}, onVariantSelected: selectOptionsCallback, enableHistoryState: true });
        {% endif %}
              
		// Add label if only one product option
		{% if product.options.size == 1 and product.options.first != 'Title' %}
			$('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first | escape }}</label>');
		{% endif %}
												 
		// Hide selectors if we only have 1 variant and its title contains 'Default'.
		{% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
			$('.selector-wrapper').hide();
		{% endif %}

	});
</script>

{% schema %}
  {
    "name": "Product Redirect Pages",
    "settings": [
      {
        "type": "checkbox",
        "id": "enable_payment_button",
        "label": "Show dynamic checkout button",
        "info": "Let customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_product_vendor",
        "label": "Product vendor",
  		"default": true
      },
       {
        "type": "checkbox",
        "id": "show_product_sku",
        "label": "Product code - SKU",
		"default": true
      },
      {
        "type": "checkbox",
        "id": "show_product_collections",
        "label": "Product vollections",
        "default": true
      },
      {
        "type": "header",
        "content": "Color and Size Swatches"
      },
      {
        "type": "checkbox",
        "id": "show_swatches_color",
        "label": "Adding Color Swatches",
		"default": true
      },
      {
        "type": "checkbox",
        "id": "swatches_color_image",
        "label": "Use variant images for swatch color",
        "info": "Make sure you have activated 'Adding Color Swatches' option"
      },
      {
        "type": "checkbox",
        "id": "show_swatches_size",
        "label": "Adding Size Swatches",
		"default": true
      },
      {
        "type": "header",
        "content": "Metafield",
        "info": "Metafield allow you to attach metadata, which is additional information to a store's resources. Please install the [Custom Fields](http:\/\/freakdesign.com.au\/pages\/shopify-custom-fields) from chrome extension."
      },
      {
        "type": "checkbox",
        "id": "meta_redirect",
        "label": "Metafields redirect: c_f.redirect_url",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "meta_countdown_timer",
        "label": "Metafields Countdown Timer: c_f.countdown_timer",
        "default": true,
        "info": "Please make sure you config product's compare price to make this label visible [(?)](http:\/\/help.shopify.com\/manual\/products\/promoting-marketing\/sales)"
      },
      {
        "type": "checkbox",
        "id": "meta_description_excerpt",
        "label": "Metafields Description Excerpt: c_f.description_excerpt",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "meta_video",
        "label": "Metafields video: c_f.video_url",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "meta_size_chart",
        "label": "Metafields pdf file: c_f.pdf_file",
        "default": true
      }, 

      {
        "type":"header",
        "content":"Product Image Section"
      },
      {
        "type":"color",
        "id":"prod_img_bg_color",
        "label":"Background color for Product Image Section",
        "default":"#ffffff"
      },
      {
        "type":"paragraph",
        "content":"Thumbnail images position"
      },
      {
        "type":"select",
        "id":"ti_position",
        "label":"Set position",
        "info":"Thumbnail images' position is relative to product's feature image.",
        "options":[
          {"value":"left","label":"Left"},
          {"value":"bottom","label":"Bottom"},
          {"value":"right","label":"Right"}
        ],
        "default":"bottom"
      },
      {
        "type": "header",
        "content": "Product Content Section"
      },
      {
        "type":"color",
        "id":"prod_content_bg_color",
        "label":"Background color for Product Content Section",
        "default":"#ffffff"
      },
      {
        "type": "select",
        "id": "product_sb_placement",
    "label": "Position",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ]
      },
      {
        "type":"paragraph",
        "content":"Product Policies"
      },
      {
        "type":"checkbox",
        "id":"show_policies",
        "label":"Show product policies",
        "info":"To customize your product policies, please scroll to Content section and add content."
      },

      {
        "type": "header",
        "content": "Related Product"
      },
      {
        "type": "checkbox",
        "id": "enable_related_product",
        "label": "Enable Related Product",
		"default": true
      },
      {
        "type": "text",
        "id": "heading_related_product",
        "label": "Heading",
		"default": "#related items"
      },
      {
        "type": "select",
        "id": "related_product_data",
        "label": "How to select related products",
        "options": [
          {
            "label": "Same Collection",
            "value": "collection"
          },
          {
            "label": "Same Vendor",
            "value": "vendors"
          }
        ],
        "default": "collection"
      },
      {
        "type": "range",
        "id": "item_per_row",
        "label": "Number of items per row",
        "min": 3,
        "max": 6,
        "step": 1,
        "default": 6
      },
      {
        "type": "text",
        "id": "related_product_limit",
        "label": "Total items",
		"default": "6"
      },
    {
        "type": "header",
        "content": "Product Tabs"
      },
      {
        "type": "color",
        "id": "product_tab_bg_color",
        "label": "Background color",
		"default": "#f9f9f9"
      },
      {
        "type": "checkbox",
        "id": "show_product_tab",
        "label": "Show product tabs",
		"default": true,
		"info": "To customize your product tabs, please scroll to Content section and add content."
      },
      {
        "type": "select",
        "id": "product_tab_review",
        "label": "Product Review Position",
        "options": [
          {
            "label": "Inside the product tabs",
            "value": "inside"
          },
          {
            "label": "Below the product tabs",
            "value": "below"
          },
          {
            "label": "None",
            "value": "none"
          }
        ],
        "default": "inside",
		"info": "[Please install Product Reviews app](http:\/\/apps.shopify.com\/product-reviews)"
      }
    ],
   "blocks": [
      {
        "type": "description",
        "name": "Standard - Description",
        "limit": 1,
        "settings": [
             {
        "type": "paragraph",
        "content": "Standard tab are created base on your Product description content. If you'd like unique set of tabs for each product you shoud use heading 5 function"
             },
          {
            "type": "checkbox",
            "id": "multi-tab",
            "label": "Use Multi-tabs with heading 5 tag",
			"default": true,
            "info": "We use heading 5 in Product's description to seperate Multi-tabs, each <h5>Tabs Title</h5> will be considered as content seperator and tabs title"
          }
        ]
      },
      {
        "type": "page",
        "name": "Static - Page",
        "settings": [
          {
          "type": "paragraph",
          "content": "Static tab are created base on Page content. It's usefull for some content that is same for all the products like Shipping term, Size Guide, and so on"
          },
          {
            "type": "text",
            "id": "page_title",
            "label": "Heading"
          },
          {
            "type": "page",
            "id": "page",
            "label": "Select a Page"
          }
        ]
      },
      {
        "type": "policy",
        "name": "Product Policy",
        "limit": 3,
        "settings": [
         {
          "type":"select",
          "id":"icon_type",
          "label":"Icon type",
          "options":[
            {"value":"image","label":"Use image"},
            {"value":"class","label":"Use classname"}
          ],
          "default":"class"
         },
         {
          "type":"image_picker",
          "id":"icon_image",
          "label":"Upload icon image"
         },
         {
          "type":"text",
          "id":"icon_classname",
          "label":"Input icon classname"
         },
         {
          "type":"text",
          "id":"icon_title",
          "label":"Title"
         }
        ]
      }
    ]
  }
{% endschema %}