{% assign frequently_bought_title = block.settings.frequently_bought_title %}
{% assign frequently_handles = product.metafields.astron.compre_junto %}

{% if frequently_handles %}

{% assign frequently_products = frequently_handles | split: "," %}

{% assign frequently_products_count = 1 %}

<style type="text/css">
  .total_price_label { font-size: 20px !important; }
  .pro_item_bottom { display: flex !important; }
  .pro_item_bottom span { margin: 0 5px; }
  .pro_item_bottom span { color: grey !important; }
  .frequently_products_main .frequently_products_inside .pro_item .fre_old_price { display: block !important; }
  .total_price_label_bottom { display: flex; }
  .total_price_label_bottom span { padding-left: 6px; }
  .saving_price { }
  .saving_price span {  margin-left: 5px; }
  .mobile_title .pro_count { display: none; }
  .pro_up { display: block; }
  .saving_price {  margin-top: 5px; }
  .saving_price span { }
  .total_price_label_bottom > span { font-size: 24px; font-weight: 500;}
  .total_price_label_bottom { }
  .total_price_label_bottom s { }
  .saving_price { font-size: 16px !important; }
  .saving_price span { font-size: 16px; }
  .fre_old_prices > s, span { font-weight: normal;}
  .pro_item { min-height: 320px;}

  @media (max-width: 1024px) {
    .pro_item_details { position: relative !important; }
    .pro_item { min-height: 110px; }
    .frequently_products_main .frequently_products_inside .pro_item .pro_item_img { }
    .pro_item img { padding: 10px;}
    .pro_item.active { display: grid !important; width: 100% !important; grid-template-columns: 1fr 2fr;}
    .pro_item_plus { display: none !important;}
    .frequently_products_main .frequently_products_inside .pro_item .pro_item_details { display: block !important;}
    .pro_item.sub_total { display: block !important; width: 100% !important;}
    .frequently_products_main .frequently_products_inside .pro_item .fre_addtocart_right { text-align: center; font-size: 20.98px; font-weight: 500; background: #000; color: #fff; line-height: 49px; width: 100%; margin: 0 auto 0; position: relative !important; bottom: 0; left: 0 !important; cursor: pointer;}
    .mobile_title .pro_count { display: block;}
    .mobile_title { display: flex; align-items: baseline; justify-content: space-between;}
    .pro_up { display: none;}
  }

  .frequently_products_main .product-price__price.discountedpricemob { display: block !important;}
</style>

<div class="frequently_products_main">
  <div class="frequently_products_title wow fadeInLeftBig">
    {% for block in section.blocks %}<h1>{{ frequently_bought_title }}</h1>{% endfor %}
    <em></em>
    <div class="line-line-gray">
      <div class="line-line-color"></div>
    </div>
  </div>
  <div class="frequently_products_inside wow fadeInUpBig">
    <div class="frequently_inside_content">
      <div class="pro_item active">
        <a class="pro_item_img main_img" style="" href="{{ product.url }}">
          <div class="gallery" style="padding-top:{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%; position: relative; width: 100%;" data-image-loading-animation>
            <img id="img{{ product.id }}"
                 class="gallery_image lazyload"
                 data-src="{{ product.featured_image | img_url: 'master' }}"
                 data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                 data-aspectratio="{{ product.featured_image.aspect_ratio }}"
                 data-sizes="auto"
                 alt="{{ product.title | escape }}"
                 style="position: absolute; top: 0;">
          </div>
        </a>
        <div class="pro_item_details ">
          <div class="pro_item_top {% if product.variants.size > 1 %} pro_item_top_title {% endif %}" data-variant-id="{{ product.variants.first.id }}">
            <label for="{{ product.handle }}">{{ product.title }}</label>
          </div>
          {% if product.variants.size > 0 %}
          <select name="id" id="{{ product.handle }}1" data-id="#{{ product.handle }}1" class="pro_swatch">
            {% for variant in product.variants %}
            {%- if variant.available -%}
            <option value="{{ variant.id }}">
              {{ variant.title }}  {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                                </option>
            {% endif %}

            {% endfor %}
            {% for variant in product.variants %}
            {%- if variant.available == false -%}
            <option value="{{ variant.id }}">
              {{ variant.title }}  {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                                </option>
            {% endif %}

            {% endfor %}
          </select>
          {% endif %}
          <em></em>
          <div class="pro_item_bottom"
               data-compare-price="{% if product_final.compare_at_price %}{{ product_final.compare_at_price  }}{% else %} 00.00 {% endif %}"
               data-fre-price="{{ product.price}}">
            {{ product.price | money }}
            <s class="product-price__price discountedpricemob">{{ product_final.compare_at_price | money }}</s>
          </div>

          <p>Produto selecionado</p>
          <div class="checkbox_selected">
            <input id="{{ product_final.handle }}" type="checkbox" checked name="{{ product_final.handle }}"/>
          </div>
        </div>
      </div>
      {% for products in frequently_products %}
      {% assign product_handle = products | strip %}
      {% assign product_final = all_products[product_handle] %}
      {% if product_final.title != "" %}
      {% assign frequently_products_count = frequently_products_count | plus: 1 %}
      <div class="pro_item_plus">{% include 'icon-plus-round' %}</div>
      <div class="pro_item active">
        <a class="pro_item_img prod-{{ forloop.index }} " href="{{ product_final.url }}">
          <div class="gallery" style="padding-top:{{ 1 | divided_by: product_final.featured_image.aspect_ratio | times: 100}}%; position: relative; width: 100%;" data-image-loading-animation>
            <img id="img{{ product_final.id }}"
                 class="gallery_image lazyload"
                 data-src="{{ product_final.featured_image | img_url: 'master' }}"
                 data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                 data-aspectratio="{{ product_final.featured_image.aspect_ratio }}"
                 data-sizes="auto"
                 alt="{{ product_final.title | escape }}"
                 style="position: absolute; top: 0;">
          </div>
        </a>
        <div class="pro_item_details">
          <div class="pro_item_top {% if product_final.variants.size > 1 %} pro_item_top_title {% endif %}"
               data-variant-id="{{ product_final.variants.first.id }}">
            <label for="{{ product_final.handle }}">{{ product_final.title }}</label>
          </div>

          {% if product_final.variants.size > 0 %}
          <select name="id" id="{{ product_final.handle }}1" data-id="#{{ product_final.handle }}1"
                  class="pro_swatch">
            {% for variant in product_final.variants %}
            {%- if variant.available -%}
            <option value="{{ variant.id }}">
              {{ variant.title }}  {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                                        </option>
            {% endif %}
            {% endfor %}
            {% for variant in product_final.variants %}
            {%- if variant.available == false -%}
            <option value="{{ variant.id }}">
              {{ variant.title }}  {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                                        </option>
            {% endif %}
            {% endfor %}
          </select>
          {% endif %}


          <div class="pro_item_bottom" data-compare-price="{% if product_final.compare_at_price %}{{ product_final.compare_at_price}}{% else %} 00.00 {% endif %}" data-fre-price="{{ product_final.price  }} ">
            {{ product_final.price | money }}
            <s class="product-price__price discountedpricemob">{{ product_final.compare_at_price | money }}</s>
          </div>
          <div class="checkbox_selected">
            <input id="{{ product_final.handle }}" type="checkbox" checked name="{{ product_final.handle }}"/>
          </div>
        </div>
      </div>
      {% endif %}
      {% endfor %}
      <div class="pro_item_plus pro_item_equal">{% include 'icon-equal-round' %}</div>
      <div class="pro_item sub_total">
        <div class="pro_count pro_up">{{ frequently_products_count }} Itens</div>
        <div class="fre_price">
          <div class="mobile_title">
            <div class="total_price_label">Preço total:</div>
            <div class="pro_count">{{ frequently_products_count }} Itens</div>
          </div>
          <div class="total_price_label_bottom">R$ <span class="regular_price"></span>
            <div class="fre_old_price"><s>$<span class="old_price"></span></s></div>

          </div>
          <div class="saving_price">Economize <span></span></div>
        </div>
        <!--Parcelamento em 12x-->
        {% liquid
          assign taxa_decima_segunda_parcela = settings.taxa_decima_segunda_parcela | divided_by: 100 | plus: 1
        %}
        <div class="total_price_parcelado" taxa_parcelamento_total={{taxa_decima_segunda_parcela}}>Ou 12x de R$ <span class="regular_price"></span>
        <!--Fim Parcelamento em 12x-->
        <div class="fre_addtocart_right action_button btn">Comprar agora</div>
      </div>
    </div>
  </div>
</div>
</div>

<script>
  $(document).ready(function () {
    setInterval(function () {
      $('.frequently_products_main').each(function () {
        var highestBox = 0;
        $(this).find('.frequently_products_inside .pro_item .pro_item_details .pro_item_top label').each(function () {
          if ($(this).height() > highestBox) {
            highestBox = $(this).height();
          }
        });
        $(this).find('.frequently_products_inside .pro_item .pro_item_details .pro_item_top label').height(highestBox);
      });
    }, 1000);
  });
</script>


<script>
  $(document).ready(function () {
    /*On Load Start*/
    var $priceright = parseFloat(0);
    var $cont = parseFloat(0);
    var $old_priceright = parseFloat(0);
    var $taxa_desconto = parseFloat(0);
    $(".frequently_products_inside .total_price_parcelado").each(function () {
      $taxa_desconto =$(this).attr("taxa_parcelamento_total");

    });
    $(".frequently_products_inside .pro_item_bottom").each(function () {
      $cont++;
      var $price = $(this).attr("data-fre-price");
      var $old_price = $(this).attr("data-compare-price");
      if(parseFloat($price) >= 1000){
        $priceright += parseFloat($price)/100 ;

      }
      else {
        $priceright += parseFloat($price);

      }

      //desconto
      if(parseFloat($old_price) >= 1000){
        $old_priceright += parseFloat($old_price)/100 ;

      }
      else {
        if( parseFloat($old_price) > 0 ){
          $old_priceright += parseFloat($old_price);

        }
        else {
          if(parseFloat($price) >= 1000){
            $old_priceright += parseFloat($price)/100 ;

          }
          else {
            $old_priceright += parseFloat($price);

          }

        }

      }
    });
    var $saving_price_total = $old_priceright.toFixed(2) + $priceright.toFixed(2);
    var $saving_price = $old_priceright.toFixed(2) - $priceright.toFixed(2);

    if (isNaN($priceright)) {
      $priceright = 0;
    }
    if (isNaN($old_priceright)) {
      $old_priceright = 0;
    }
    if (isNaN($saving_price)) {
      $saving_price = 0;
    }
    var $totalParcelado = (parseFloat($priceright) * parseFloat($taxa_desconto))/12;
    $(".frequently_products_inside .total_price_label_bottom span").text($priceright.toFixed(2));
    $(".frequently_products_inside .total_price_parcelado span").text($totalParcelado.toFixed(2));
    $(".frequently_products_inside .fre_old_price span").text($old_priceright.toFixed(2));
    $(".frequently_products_inside .saving_price span").text('R$ ' + Math.abs($saving_price).toFixed(2));
    /*On Load End*/

    /*Input Change Start*/
    $(".frequently_products_inside input").change(function () {
      var $pricerightchange = parseFloat(0);
      var $old_pricerightchange = parseFloat(0);
      $(".frequently_products_inside input").each(function () {
        if ($(this).prop("checked") == true) {
          var $price = $(this).parent(".checkbox_selected").parent(".pro_item_details").find(".pro_item_bottom").attr("data-fre-price");
          var $old_price = $(this).parent(".checkbox_selected").parent(".pro_item_details").find(".pro_item_bottom").attr("data-compare-price");
          $pricerightchange = parseFloat($pricerightchange) + parseFloat($price);
          $old_pricerightchange = parseFloat($old_pricerightchange) + parseFloat($old_price);
        }
      });

      console.log($old_pricerightchange);
      console.log($old_pricerightchange);

      var $saving_price = $old_pricerightchange.toFixed(2) - $pricerightchange.toFixed(2);
      if (isNaN($pricerightchange)) {
        $pricerightchange = 0;
      }
      if (isNaN($old_pricerightchange)) {
        $old_pricerightchange = 0;
      }
      if (isNaN($saving_price)) {
        $saving_price = 0;
      }
      $(".frequently_products_inside .total_price_label_bottom span").text($pricerightchange.toFixed(2));
      $(".frequently_products_inside .fre_old_price span").text($old_pricerightchange.toFixed(2));
      $(".frequently_products_inside .saving_price span").text('$' + Math.abs($saving_price).toFixed(2));
    });
    /*Input Change End*/

    /*add to cart frequently products start */
    $('.fre_addtocart_right').click(function () {
      var quantitycartheader = {{ cart.item_count }};
      Shopify.queue = [];
      $('.frequently_products_inside .pro_item').each(function () {
        var $inputvariant = $(this).find("input");
        if ($inputvariant.prop("checked") == true) {


          if ($(this).find('.pro_swatch').length == 0) {
            var $variant_id = $(this).find(".pro_item_top").attr("data-variant-id");
          } else {
            var $selectid = $(this).find('.pro_swatch').attr("data-id")
            var $variant_id = $($selectid).val();
          }

          //alert($variant_id);
          var $quantity = 1;
          Shopify.queue.push({
            variantId: $variant_id,
            Quantity: $quantity
          });
        }
      });

      Shopify.moveAlong = function () {
        if (Shopify.queue.length) {
          var request = Shopify.queue.shift();
          var data = 'id=' + request.variantId + '&quantity=' + request.Quantity;
          $.ajax({
            type: 'POST',
            url: '/cart/add.js',
            dataType: 'json',
            data: data,
            success: function (res) {
              Shopify.moveAlong();
              quantitycartheader += request.quantity;
            },
            error: function () {
              if (Shopify.queue.length) {
                Shopify.moveAlong()
              } else {
              }
            }
          });
        }
        else {
          quantitycartheader += 1;
          window.location.href = "/cart";
        }
      };
      Shopify.moveAlong();
    });

    $('.fre_addtocart_bottom').click(function () {
      var quantitycartheader = {{ cart.item_count }};
      Shopify.queue = [];
      $('.frequently_products_bottom .fre_bottom_item').each(function () {
        var $inputvariant = $(this).find(".pro_item_top").find("input");
        if ($inputvariant.prop("checked") == true) {

          if ($(this).find('.pro_swatch').length == 0) {
            var $variant_id = $(this).find(".pro_item_top").attr("data-variant-id");
          } else {
            var $selectid = $(this).find('.pro_swatch').attr("data-id")
            var $variant_id = $($selectid).val();
          }

          var $quantity = 1;
          Shopify.queue.push({
            variantId: $variant_id,
            Quantity: $quantity
          });
        }
      });
      Shopify.moveAlong = function () {
        if (Shopify.queue.length) {
          var request = Shopify.queue.shift();
          var data = 'id=' + request.variantId + '&quantity=' + request.Quantity;
          $.ajax({
            type: 'POST',
            url: '/cart/add.js',
            dataType: 'json',
            data: data,
            success: function (res) {
              Shopify.moveAlong();
              quantitycartheader += request.quantity;
            },
            error: function () {
              if (Shopify.queue.length) {
                Shopify.moveAlong()
              } else {
              }
            }
          });
        }
        else {
          quantitycartheader += 1;
          window.location.href = "/cart/";
        }
      };
      Shopify.moveAlong();
    });
    /* add to cart frequently product end*/
  });
</script>

{% endif %}
