
{% assign step1_title = settings.step1_title  %}
{% assign step2_title = settings.step2_title %}

{% assign step1_amount = settings.step1_amount | plus: 0 %}
{% assign step2_amount = settings.step2_amount | plus: 0 %}

{% assign step1_success_msg = settings.step1_success_msg %}
{% assign step2_success_msg = settings.step2_success_msg %}

{% comment %}
{% if cart.item_count != 0 %}
{% if settings.timer != blank %}
<p class="timing" id="timer">{{ settings.timer }} <span id="minutes"></span><span id="seconds"></span> </p>
{% endif %}

<script type="text/javascript">
  $(function(){
  function makeTimer() {

		var endTime = new Date("29 April 2020 9:56:00 GMT+01:00");
			endTime = (Date.parse(endTime) / 1000);

			var now = new Date();
			now = (Date.parse(now) / 1000);

			var timeLeft = endTime - now;

			var days = Math.floor(timeLeft / 86400);
			var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
			var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
			var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));

			if (hours < "10") { hours = "0" + hours; }
			if (minutes < "10") { minutes = "0" + minutes; }
			if (seconds < "10") { seconds = "0" + seconds; }


			$("#minutes").html(minutes + "<span> Min </span>");
			$("#seconds").html(seconds + "<span> secs </span>");

	}

	setInterval(function() { makeTimer(); }, 1000);
  });
</script>

<div class="progress_bar_main_top">
  <div class="progress_bar_line_main">
    {% assign progressper =  cart.total_price | times:100  %}

    <div class="all_steps">
      {% if cart.total_price < step1_amount %}
      {% assign freedif = step1_amount | minus:cart.total_price %}
      <div class="step step1">
        <p>YOU’RE {{ freedif | money }} AWAY TO FREE SHIPPING</p>
       {% comment %} <h2>{{step1_amount | money}}</h2> {% endcomment %}
      </div>
      {% else %}
      <div class="step step1">
        <p>{{step1_success_msg}}</p>
      </div>
      {% endif %}
    </div>
  </div>
</div>

<style>
  .progress_bar_main_top .progress_bar_line_main { background: {{ settings.shipping_bg_color }};}
</style>

{% endif %}
{% endcomment %}

<script>
  //Clicar fora
  window.onclick = function(event) {
    console.log(!event.target.closest('.cartDrawer'))
    if (!event.target.closest('.cartDrawer') ) {        
      let cartBackdrop = document.querySelector('.cartBackdrop')
      cartBackdrop.classList.add("hide")
    }
  }
</script>

<style>
  .progress_bar_main .progress_bar_line_main .progress_bar_line_above { background: {{ settings.shipping_bg_color }};}
</style>

<div class="progress_bar_main">
  {% comment %}<div class="top_msg">{{settings.progress_top_msg}}</div>{% endcomment %}
  <div class="progress_bar_line_main" style="display: none">

    {% assign progressper =  cart.total_price | times:100 | divided_by: step2_amount %}
    <div class="progress_bar_line_behind"></div>
    {% if cart.total_price < step2_amount %}
    <div class="progress_bar_line_above" style="width:{{progressper}}%;"></div>
    {% else %}
    <div class="progress_bar_line_above" style="width:100%;"></div>
    {% endif%}


    <div class="all_steps">
      {% if cart.total_price < step1_amount %}
      {% assign freedif = step1_amount | minus:cart.total_price %}
      <div class="step step1">
        <img class="lazyload" data-src="{{ 'shipicon11.png' | asset_url }}" alt="" width="55" height="46" />
        <p>{{step1_title}}</p>
        <h2>{{step1_amount | money}}</h2>
      </div>
      {% else %}
      <div class="step step1">
        <img class="lazyload" data-src="{{ 'shipicon11.png' | asset_url }}" alt="" width="55" height="46" />
        <p>{{step1_success_msg}}</p>
      </div>
      {% endif %}
      {% if cart.total_price < step2_amount %}
      {% assign freeexdif = step2_amount | minus:cart.total_price %}
      <div class="step step1">
        <img class="lazyload" data-src="{{ 'shipicon22.png' | asset_url }}" alt="" width="55" height="46" />
        <p>{{step2_title}}</p>
        <h2>{{step2_amount | money}}</h2>
      </div>
      {% else %}
      <div class="step step1">
        <img class="lazyload" data-src="{{ 'shipicon11.png' | asset_url }}" alt="" width="55" height="46" />
        <p>{{step2_success_msg}}</p>
      </div>
      {% endif %}
    </div>
  </div>
</div>


<div class="quick-items">
  {% for item in cart.items %}
  <div class="quick-cart-item">
    <div class="quick-cart-image">
      <a href="{{ item.product.url }}" title="{{ item.product.title | escape }}">
        <div style="padding-top:{{ 1 | divided_by: item.image.aspect_ratio | times: 100}}%; position: relative; width: 100%;" data-image-loading-animation>
          <img id="img{{ item.id }}"
               class="feature-row__image lazyload"
               data-src="{{ item | img_url: 'master' }}"
               data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
               data-aspectratio="{{ item.image.aspect_ratio }}"
               data-sizes="auto"
               alt="{{ item.image.alt | escape }}"
               style="position: absolute; top: 0;">
        </div>
      </a>
    </div>
    <div class="quick-cart-details">
      <p class="ptitle"><a href="{{ item.product.url }}">{{ item.product.title | remove: ' / Default' | remove: 'Default'  }}</a></p>
      <div class="pvarprice">
        <div class="pvars">
          {% for option_title in item.product.options %}
          {% unless item.variant.options[forloop.index0] contains 'Default' %}
          {{ option_title }} : {{item.variant.options[forloop.index0] }}
          {% endunless%}
          {% endfor %}</div>
        <div class="pprice">
          {% if item.product.compare_at_price != blank %}
          <span class="reguprice">{{ item.product.price | money_without_trailing_zeros }}</span>
          <span class="compareprice">{{ item.product.compare_at_price | money_without_trailing_zeros }}</span>
          {% else %}
          <span class="reguprice">{{ item.product.price | money_without_trailing_zeros }}</span>
          {% endif %}
        </div>
      </div>
      <div class="quick-cart-pqty">
        <div class="qtyAdjust">
          <span class="adjust minus">
            {% if item.quantity == 1 %}
            <i class="fa fa-trash-o" aria-hidden="true"></i>
            {% else %}
            <svg class="Icon Icon--minus" role="presentation" width="16" height="2" viewBox="0 0 16 2">
              <path d="M1,1 L15,1" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="square"></path>
            </svg>
            {% endif %}
          </span>
          <input type="text" size="2" name="updates[]" data-id="{{ item.id }}" id="updates_{{ item.id }}" value="{{ item.quantity }}" onfocus="this.select();" class="tc item-quantity" />
          <span class="adjust plus ">
            <svg class="Icon Icon--plus" role="presentation" width="16" height="16" viewBox="0 0 16 16">
              <g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="square">
                <path d="M8,1 L8,15"></path>
                <path d="M1,8 L15,8"></path>
              </g>
            </svg>
          </span>
        </div>
        <a class="remove_item" title="Remover item" href="#" data-id="{{ item.variant.id }}"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
      </div>
    </div>
  </div>
  {% for p in item.properties  %}
  {% if p.first == 'shipping_interval_frequency'%}
  <span class="hasSubsribe"></span>
  {% break %}
  {% endif%}
  {% endfor %}
  {% endfor %}
</div>

{% if cart.item_count != 0 %}

<div class="mini_cart_tool js_cart_tool">
  <ul>
    <li class="cart_note">
      {% include 'icon_note'%}
      <span class="tooltip">Adicionar observação</span>
    </li>
  </ul>
</div>

{%- if settings.cart_notes_enable -%}
<div class="cart-note">
  <label for="CartSpecialInstructions" class="cart-note__label small--text-center">{{ 'cart.general.note' | t }}</label>
  <textarea name="note" id="CartSpecialInstructions" class="cart-note__input" data-cart-notes>{{ cart.note }}</textarea>
  <a href="#" class="close-note">Cancelar</a>
</div>
{%- endif -%}


{%- if settings.mini_shipping_calculator -%}
<div class="minicart_calculator">
{% render 'shipping-calculator' %}
</div>
{%- endif -%}


<div class="cart-summary">
  <div class="grid--full">
    <div class="grid__item two-thirds text-left">Subtotal</div>
    <div class="grid__item one-third text-right">{{ cart.total_price | money }}</div>    
  </div>

  {% if settings.parcelamento_enable %}
    {% liquid    
      assign taxa_decima_segunda_parcela = settings.taxa_decima_segunda_parcela | divided_by: 100 | plus: 1
    %}
    <p class="price-portion">Ou <strong>12x</strong>{% if taxa_decima_segunda_parcela == 1 %} sem juros {% endif %} de <strong>{{ cart.total_price | times: taxa_decima_segunda_parcela | divided_by: 12 | money }}</strong></p>    
  {% endif %}
</div>

<div class="quick-btn">
  <a class="checkout-link button quick-chechout-btn" href="/cart"><span>Finalizar compra</span></a>  
  <a class="price-portion sub" href="/collections/all"><span>Continuar comprando</span></a>
</div>

{% else %}
<div class="empty_cart">
  <img class="lazyload" data-src="{{ 'minicart_close.png' | asset_url }}" alt="" />
  <p class="emptyCart text-center">Seu carrinho está vazio.</p>
  <a href='/' class="closecart btn emptyClose">Retornar à loja</a>
</div>
{% endif %}