{% assign meta_shortdes = product.metafields.c_f %}
{% assign key = 'countdown_timer' %}

{% unless meta_shortdes.countdown_timer == blank %}

  {% assign expire = meta_shortdes.countdown_timer %}
  {% assign dueDate = expire | split: '/' %}

  <div class="detail-deal">
    <div class="wrapper-countdown">
      {% unless template == 'index' %}<span class="deal-text">{{ 'products.product.offer' | t }}</span>{% endunless %}
      <div class="countdown_{{ product.id }}"></div>
    </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_{{ product.id }}').countdown({
          padZeroes: true,
          until: dueDate, 
          format: 'DHMS',
          labels: ['Years', 'Months', 'Weeks', 'Days', 'Hrs', 'Mins', 'Secs']
        });

        setInterval(function(){
          $(".countdown_{{ block.id }} .countdown-section").each(function(){
              let val = $(this).find('.countdown-amount').text();
              if (val == 0){
                $(this).find('.countdown-amount, .countdown-period').css('color', '#cacaca')
              } 
          })
        },1000)  
      }

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

    });
  </script>

{% endunless %}