{% assign _expire = block.settings.product_expire %}
{% assign _dueDate = _expire | split: '/' %}

{% if _style == '1' %}
  <div class="text-box">
    {% unless _text_1 == blank %}<div class="text-1">{{ _text_1 }}</div>{% endunless %}
    {% unless _text_2 == blank %}<div class="text-2">{{ _text_2 }}</div>{% endunless %}
    {% unless _text_3 == blank %}<div class="text-3">{{ _text_3 }}</div>{% endunless %}
  </div>

  <div class="product-wrapper">
    <div class="product-wrapper-inner">
      <div class="product-head">
        <div class="special-product-label">
          {% if product.variants.first.price < product.variants.first.compare_at_price %}
          <span class="spl-2">
            <span class="spl-text-2">
              <span class="text">{{ 'products.big_product.text_save' | t }}</span>
              {% assign percent_off = product.variants.first.price | times:100.00 | divided_by: product.variants.first.compare_at_price | round %}
              <span class="percent">{{ 100 | minus : percent_off }}%</span>
            </span>
          </span>
          {% endif %}
        </div>

        <div class="product-image">
          {% capture _image_html %}{{ product.featured_image | product_img_url: '450x' }}{% endcapture %}
          <div class="image">
            <a href="{{ product.url }}"{% if _lazyload %} class="lazyload waiting"{% endif %}>
              <img {% if _lazyload %}class="lazyload" data-{% endif %}src="{% if product.images.size >= 1 %}{{ _image_html }}{% else %}{{ 'default-image.jpg' | asset_url }}{% endif %}" alt="{{ product.title | escape }}" />
            </a>
          </div>
        </div>
      </div>

      <div class="product-content">
        <div class="pc-inner">
          <h5 class="product-name"><a href="{{ product.url }}">{{ product.title }}</a></h5>

          {% include 'product-price' %}

          {% unless _expire == blank %}
          <div class="wrapper-countdown">
            <span class="offer-text">{{ 'products.big_product.text_countdown' | t }}</span>
            <div class="countdown_{{ block.id }}"></div>
          </div> 

          <script type="text/javascript">
            jQuery(document).ready(function($){

              var currentDate = new Date();
              var dueDate = new Date( {{ _dueDate[2] }}, {{ _dueDate[0] | plus:0 }} - 1, {{ _dueDate[1] | plus:0 }} );

              if(currentDate < dueDate){
                $('.countdown_{{ block.id }}').countdown({until: dueDate, format: 'DHMS'});
                  }

                  else{
                  $('.countdown_{{ block.id }}').parent().hide();
                  }

                  });
          </script>
          {% endunless %}

          <div class="deal-progress">
            <div class="deal-stock">
              {% capture stockSold %} {{ block.settings.product_sold }} {% endcapture %}

              {% unless stockSold == blank %}
              <span class="stock-sold">{{ 'products.big_product.text_sold' | t }}: <strong>{{ stockSold }}</strong></span>
              {% endunless %}

              {% assign total=0 %}
              {% for variant in product.variants %}
              {% capture i %}{{ total | plus:variant.inventory_quantity }}{%endcapture%}
              {% assign total = i %}
              {% endfor %}

              <span class="stock-available">{{ 'products.big_product.text_available' | t }}: <strong>{{ total }}</strong></span>
            </div>

            {% unless stockSold == blank %}
            {% capture progress %}{{ stockSold | times:100 | divided_by: total }}{% endcapture %}
            {% assign progressNumber = progress | plus: 0 %}

            {% if progressNumber <= 100 %}
            <div class="progress">
              <span class="progress-bar" style="width:{{ progress }}%"></span>
            </div>
            {% endif %}
            {% endunless %}
          </div>

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

  </div>

{% else %}

  <div class="product-wrapper">
    <div class="row">

      <div class="product-head col-md-6 col-sm-12">
        <div class="special-product-label">
          {% if product.variants.first.price < product.variants.first.compare_at_price %}
            <span class="spl-2">
              <span class="spl-text-2">
                <span class="text">{{ 'products.big_product.text_save' | t }}</span>
                {% assign percent_off = product.variants.first.price | times:100.00 | divided_by: product.variants.first.compare_at_price | round %}
                <span class="percent">{{ 100 | minus : percent_off }}%</span>
              </span>
            </span>
          {% endif %}
        </div>

        <div class="product-image">
          {% capture _image_html %}{{ product.featured_image | product_img_url: '450x' }}{% endcapture %}
          {% capture number_of_images %}{{ product.images | size }}{% endcapture %}
          {% assign number_images = number_of_images | plus:0 %}
          
          {% if number_images > 1 %}
            <div class="image">
              <a href="{{ product.url }}"{% if _lazyload %} class="lazyload waiting"{% endif %}>
                <img class="featured-image{% if _lazyload %} lazyload{% endif %}" {% if _lazyload %}data-{% endif %}src="{{ _image_html }}" alt="{{ product.title | escape }}" />
              </a>
            </div>
          
            <div class="wrap-thumb-image">
              {% for image in product.images limit: 4 %}
                <div class="thumb-image{% if _lazyload %} lazyload waiting{% endif %}">
                  <img {% if _lazyload %}class="lazyload" data-{% endif %}src="{{ image.src | product_img_url: '70x' }}" data-swatch-image={{ image.src | product_img_url: '450x' }} alt="{{ product.title | escape }}" alt="{{ product.title | escape }}" />
                </div>
              {% endfor %}
            </div>

          {% else %}
            <div class="image">
              <a href="{{ product.url }}"{% if _lazyload %} class="lazyload waiting"{% endif %}>
                <img {% if _lazyload %}class="lazyload" data-{% endif %}src="{% if product.images.size >= 1 %}{{ _image_html }}{% else %}{{ 'default-image.jpg' | asset_url }}{% endif %}" alt="{{ product.title | escape }}" style="height:370px;" />
              </a>
            </div>

          {% endif %}

        </div>
        
        <script type="text/javascript">
          $('.sp-item-{{ block.id }} .product-wrapper .thumb-image > img').on('click', function(e){
          	e.stopPropagation();
          	var imgUrl = $(this).data("swatch-image"),
                parent = $(this).parents('.product-wrapper'),
                imgElem = parent.find('.product-image img.featured-image');
          	imgElem.parents('.product-image').addClass('img-loading');
          	imgElem.attr('src', imgUrl)
          	var fakeImg = new Image();
          	fakeImg.src = imgUrl;
            fakeImg.onload = function(event){
                imgElem.parents('.product-image').removeClass('img-loading');
            };
            fakeImg.onerror = function() {
                //Code for error loading
            };
        });
        </script>
      </div>

      <div class="product-content col-md-6 col-sm-12">
        <div class="pc-inner">
          <h5 class="product-name"><a href="{{ product.url }}">{{ product.title }}</a></h5>

          {% include 'product-price' %}
          
          <div class="deal-progress">
            <div class="deal-stock">
              {% capture stockSold %} {{ block.settings.product_sold }} {% endcapture %}

              {% unless stockSold == blank %}
                <span class="stock-sold">{{ 'products.big_product.text_sold' | t }}: <strong>{{ stockSold }}</strong></span>
              {% endunless %}

              {% assign total=0 %}
              {% for variant in product.variants %}
                {% capture i %}{{ total | plus:variant.inventory_quantity }}{%endcapture%}
                {% assign total = i %}
              {% endfor %}

              <span class="stock-available">{{ 'products.big_product.text_available' | t }}: <strong>{{ total }}</strong></span>
            </div>

            {% unless stockSold == blank %}
              {% capture progress %}{{ stockSold | times:100 | divided_by: total }}{% endcapture %}
              {% assign progressNumber = progress | plus: 0 %}

              {% if progressNumber <= 100 %}
                <div class="progress">
                  <span class="progress-bar" style="width:{{ progress }}%"></span>
                </div>
              {% endif %}
            {% endunless %}
          </div>

          {% unless _expire == blank %}
            <div class="wrapper-countdown">
              <span class="offer-text">{{ 'products.big_product.text_countdown' | t }}</span>
              <div class="countdown_{{ block.id }}"></div>
            </div> 

            <script type="text/javascript">
                  jQuery(document).ready(function($){

                        var currentDate = new Date();
                        var dueDate = new Date( {{ _dueDate[2] }}, {{ _dueDate[0] | plus:0 }} - 1, {{ _dueDate[1] | plus:0 }} );

                        if(currentDate < dueDate){
                          $('.countdown_{{ block.id }}').countdown({until: dueDate, format: 'DHMS'});
                        }

                        else{
                          $('.countdown_{{ block.id }}').parent().hide();
                        }

                  });
            </script>
          {% endunless %}

        </div>
      </div>

    </div>
  </div>

{% endif %}