
<style>    
.cep_consulta {
  color: #8F8F8F;
}          
.nume2Frt{
  color:#02A051;font-weight:700;
}
.nume3Frt{
  font-size: 10px;color:#8C8C8C;margin-top:5px;
}
.product-shop .prices .on-sale{
  font-size:25px;
}      
  #calcFrete {    
    padding: 20px 0;   
  }    
  a.naoSeiCep {       
    display: inline-block;   
    margin: 0 5px;   
    text-decoration: underline;   
    font-size: 12px;
    color:#8C8C8C;
    font-family:arial;  
  }   
  .rowFrete {     
    background-color: #eeeeee;   
    margin: 0 0 10px 0;  
  }    
  span.rowValor {    
    width: 100%;   
    display: block;   
  }    
  span.valorFrete {     
    font-weight: bold;   
  }   
  input.campoCep {      
    background-color: #ffffff;   
    border: 1px solid #e4e4e4;   
    display: inline-block;    
  }     
  .content.carregandoDN {     
    height:100% !important;   
    width:100% !important;   
    display:flex;   
    align-items:center !important;   
    justify-content:center !important;   
    padding: 0 !important;   
    margin:0 !important;   
  }    
  .carregandoDN .bWox {    
    width:300px;   
    text-align:center;   
    font-size:20px;   
    font-family:Arial   
  }    
  .carregandoDN .lds-ring {      
    display:inline-block;   
    position:relative;   
    width:64px;
    height:64px;  
  }    
  .carregandoDN .lds-ring div{
    box-sizing:border-box;
    display:block;
    position:absolute;
    width:51px; height:51px;
    margin:6px;
    border:6px solid #a0a0a0;
    border-radius:50%;   
    animation:lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color:#a0a0a0 transparent transparent transparent;  
  }
  .carregandoDN .lds-ring div:nth-child(1){
    animation-delay:-0.45s;
  }
  .carregandoDN .lds-ring div:nth-child(2){
    animation-delay:-0.3s;
  }
  .carregandoDN .lds-ring div:nth-child(3){
    animation-delay:-0.15s;
  }  
  @keyframes lds-ring { 
    0% { 
    transform:rotate(0deg);
   }
   100%{
    transform:rotate(360deg);
  }
}  
  #retornoFT {
    margin: 15px 0px 15px 0 !important;
  }
      
   .fretado {              
      background: #000;
      background-size: 200px;
      border-bottom: 1px solid #000;
      width: fit-content;
      padding: 5px;
      color: white !important;
      margin: 0 9px 0 0;
      font-size: 21px !important;
      border-radius: 0 10px 10px 0;              
    }              
   .fretado2 {              
      display: block;
      margin: -29px 0 -27px 100px;
      color: var(--freteprice-color);               
    }              
    .fretado3 {              
      font-weight: 700;
      padding: 5px;                
    }              
    .corfrete {
      font-weight: 400;                
    }              
            
    .tempofrete i {                
      font-size: 19px;
      border: 1px solid #eaeaea;
      border-radius: 5px;
      padding: 5px;
      margin: 5px 11px 0 0;                
    }
    .tempofrete1 , .tempofrete2 {
      font-size: 16px;
      font-weight: 600;                
    }
     .tempofrete2 {
        font-size: 16px;
        font-weight: 600;                
      }
     .colorfretegeral  {
        font-size: 16px;                
      }     

  .estados_box_frete {    
    display: block;
    margin: 0 0 -12px 0;  
  }  
  #estadosfrete {    
    margin: 0 103px 0 0;
    border: 1px solid #efefef;
    padding: 5px;
    width: 220px;
    font-size: 16px;
    border-radius: 6px;
    display: inline-flex;  
  }  
  .estadosfrete {    
    border: 1px solid #efefef;
    padding: 5px;
    margin: 0 0 0 -92px;
    width: 83px;
    font-size: 16px;
    text-align: center;
    border-radius: 6px;
    display: inline-flex;  
  }  
.testimonial-wrap {
  padding: 5px;
  margin-bottom: 10px;
}

.hidden-content {
  height: 0px;
  visibility: hidden;
  transition: all 0.5s ease-out;
}
.active .hidden-content {  
  margin: 10px 0 0 0;
  height: auto;
  visibility: visible;
  transition: all 0.5s ease-in;
}
button {
  display: inline-block;
}  

.valorfrete_active {    
  margin: 0 auto;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  align-items: end;
  padding: 0 55px;
}

  
@media (max-width: 768px) {   
.active .hidden-content {
  font-size: 12px !important;    
  }    
.valorfrete_active {    
  padding: 19px 10px !important    
  }               
  .tempofrete {
    padding: 10px;
  }              
  .tempofrete span {  
  font-size: 12px;  
  }                
  .tempofrete2 {
      color: #000;
      font-size: 14px;
      font-weight: 600;
      display: block;
  }  
    .fretado3 {    
      font-weight: 700;
      color: var(--freteprice-color);
      padding: 5px;
      display: inline-block;
      width: fit-content;      
  }                
  .colorfretegeral {    
      font-size: 13px;                  
    }  
    .frete-content {
      width: 100% !important;
    }            
}
.frete-header {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: #4a4a4a;
}

.frete-content {
  width: 45%;
}
</style>




<div class="valorfrete_active">
  <div class="frete-content">
    <div class="frete-header">
      CONSULTAR ENVIO
    </div>
    <div class="calculoFrete">
      <input type="text" name="cep" class="campoCep" id="cepFT" placeholder="Digite seu CEP" style="font-size: 14px;width:150px; height: 38px;display: inline-block;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;line-height: 40px;height: 40px;padding: 0 10px;border: 1px solid #E5E5E5;float: left;margin-right: 0;">   
      <button type="button" onclick="calculaFreteFT()" class="toggle-button" style="background-color: #F4F4F4;border: 0 none;border-radius: 4px;height: 40px;min-width: 45px !important;color:#4a4a4a !important;font-family: arial, tahoma, verdana, sans-serif !important;font-weight: normal;font-size: 15px;text-transform: none;margin: 0 0 0 7px;"><span>{{section.settings.buttonText}}</span> </button>           

      <div class="content carregandoDN" style="display: none;">
        <div class="bWox">
          <div class="lds-ring">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
      </div>  
    </div>   

    <div class="tempofrete">       
      <p id="message" style="display:none;">Carregando...</p>
      <!-- <p id="second" style="display:none;">Carregou...</p> -->
      <div id="resultado" style="display:none; font-size: 14px; margin-top: 15px;">
        <ul style="list-style-type: none;padding: 0;margin-bottom: -30px;">
    
    
        <li style="display: flex; gap: 15px;width: max-content; margin-top: 15px;">
          <span style="width: 45px;display: inline-block;"><script src="https://cdn.lordicon.com/lusqsztk.js"></script>
            <img src="https://cdn.shopify.com/s/files/1/0538/2573/2800/files/fast-delivery_480x480.png?v=1650579268" alt="" width="50" height="50" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0538/2573/2800/files/fast-delivery_480x480.png?v=1650579268">
          </span> 
    
          <div>
            {% if section.settings.habilitar_frete_gratis %}

            <strong style:"color:#4a4a4a;">{{ section.settings.textofrete }}</strong> 
            <span style="text-decoration: line-through; color:red;font-weight:600;">{{section.settings.title}}</span> 
            {% endif %}
      
            <div>     
            
            {% if section.settings.habilitar_frete_gratis  == false%}
                <strong style:"color:#4a4a4a;">{{ section.settings.textofrete }}</strong><strong style="color:red;font-weight:600;">{{section.settings.title}}</strong>
            {% endif %}   
            
            {% if section.settings.delivery_time %}
            <div class="main-font-title">
              <div class="shipping-preview-line" style="position: relative;margin-left: 0;">
                <div class="bg-info-ship">
                  <p class="shipping-preview-loading" style="text-align: left !important;color: #4a4a4a !important;padding: 0 0 0 60px;font-size: {{ section.settings.size_text_frete }} !important;margin: 0px 0 30px 0;display:block;">
                    Carregando, aguarde...
                  </p>
                  <p style="text-align: left !important;color: #4a4a4a !important;font-size: {{ section.settings.size_text_frete }} !important;margin: 0px 0 0 0;"
                                class="custom-address"></p>
                             <p style="text-align: left !important;color: #4a4a4a !important; font-size: {{ section.settings.size_text_frete }} !important;margin: 0px 0 0 0;"
                                class="shipping-estimated"></p>
                              </div>
                             {% if section.settings.enable_garantia %}
                                 <p class="text-garantia"
                                    style="display: none; text-align: left !important;color: {{ section.settings.troca_cor }}!important;padding: 10px 0 0 14px;font-size: {{ section.settings.size_text_frete }} !important;margin: 0px 0 0 0;">
                                     <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check-circle"
                                          fill="currentColor"
                                          xmlns="http://www.w3.org/2000/svg">
                                         <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                                         <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
                                     </svg>
                                     {{ section.settings.garantia_text }}
                                 </p>
                             {% endif %}
                             {% if section.settings.enable_troca %}
                                 <p style="display: none; text-align: left !important;color: {{ section.settings.troca_cor }} !important;padding: 3px 0 0 14px;font-size: {{ section.settings.size_text_frete }} !important;margin: 0px 0 0 0;"
                                    class="text-troca">
                                     <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bootstrap-reboot"
                                          fill="currentColor"
                                          xmlns="http://www.w3.org/2000/svg">
                                         <path fill-rule="evenodd" d="M1.161 8a6.84 6.84 0 1 0 6.842-6.84.58.58 0 0 1 0-1.16 8 8 0 1 1-6.556 3.412l-.663-.577a.58.58 0 0 1 .227-.997l2.52-.69a.58.58 0 0 1 .728.633l-.332 2.592a.58.58 0 0 1-.956.364l-.643-.56A6.812 6.812 0 0 0 1.16 8zm5.48-.079V5.277h1.57c.881 0 1.416.499 1.416 1.32 0 .84-.504 1.324-1.386 1.324h-1.6zm0 3.75V8.843h1.57l1.498 2.828h1.314L9.377 8.665c.897-.3 1.427-1.106 1.427-2.1 0-1.37-.943-2.246-2.456-2.246H5.5v7.352h1.141z"/>
                                     </svg>
                                     {{ section.settings.troca_text }}
                                 </p>
                             {% endif %}
                         </div>
                     </div>
                     {% endif %}
                    </div>
                  </div>
                </div>
              </li>
            </ul>         
          </div>  
        </div>         
        <div id="retornoFT" style="margin-top: 15px;">
        </div>
      </div>  
    </div>
  </div>
    
    


<script>
  setTimeout(function waitJquery() {
          if (window.jQuery) {
            $( document ).ready(function() {                    
                $( "#clicktrigger" ).click(function() {
                    $( "#boxxJuros" ).slideToggle("slow");
                });                  
              $(".boxxTot").hide();    
            });               
            
          } else {
              setTimeout(waitJquery, 100);
          }
      }, 100);
  
  function calculaFreteFT () {
    
    setTimeout(function waitJqueryToPerformFrete() {
      if (window.jQuery) {
    var dadosFT = "shop=" + $('#shopFT').val() + "&diasUteis=" + $('#diasUteisFT').val() + "&cep=" + $('#cepFT').val(); 
    console.log( dadosFT );        
    $('.naoSeiCep').fadeOut();              
    $("#retornoFT").html('');            
      } else {
        setTimeout(waitJqueryToPerformFrete, 100);
      }          
    }, 100);             
  }   

function convertDate(inputFormat) {
function pad(s) { return (s < 10) ? '0' + s : s; }
var d = new Date(inputFormat);
return [pad(d.getDate())].join('/');
}

function getMesExtenso(mes){
return this.arrayMes[mes];
}

var arrayMes = new Array(12);
arrayMes[0] = "janeiro";
arrayMes[1] = "fevereiro";
arrayMes[2] = "março";
arrayMes[3] = "abril";
arrayMes[4] = "maio";
arrayMes[5] = "junho";
arrayMes[6] = "julho";
arrayMes[7] = "agosto";
arrayMes[8] = "setembro";
arrayMes[9] = "outubro";
arrayMes[10] = "novembro";
arrayMes[11] = "dezembro";  
var showMes = "";
var date = new Date();
var diax = date.setDate(date.getDate() + 10);
var diay = date.setDate(date.getDate() + 15);
var mes = getMesExtenso(date.getMonth());  
function data(data){
var d = new Date(data);
return getMesExtenso(d.getMonth());
}  			
if(data(diax) !== data(diay)){
showMes = " de " + data(diax);
}            
$.getJSON( "https://wtfismyip.com/json", function(localizacao) {
var localizacao = localizacao['YourFuckingLocation'];
var regiao = localizacao.replace(", Brazil", "");
$("#custom-address").html("" + regiao + " e Região.");              
$(".shipping-estimated").html("<span>Previsão de Entrega: <span class='tempofrete2'>" + convertDate(diax) + showMes + " a " + convertDate(diay) + " de " + mes + "</span> </span>");
$("#valor-regiao").html(' ' + regiao + ' e Região. ')
})

$(document).ready(function() {
$('.toggle-button').on('click', function() {
$('#resultado').css("display","none");
$('#message').show();
setTimeout(function() {
 $('#message').hide();
$('#resultado').css("display","block");
}, 3000);
});
});  

if(!window.jQuery || typeof jQuery == 'undefined' || jQuery == null)
{
document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></' + 'script>');
}

function convertDate(e) {
      var t, o = new Date(e);
      return [(t = o.getDate(), t < 10 ? "0" + t : t)].join("/")
  }

  function getMesExtenso(e) {
      var t = new Array(12);
      return t[0] = "janeiro", t[1] = "fevereiro", t[2] = "março", t[3] = "abril", t[4] = "maio", t[5] = "junho", t[6] = "julho", t[7] = "agosto", t[8] = "setembro", t[9] = "outubro", t[10] = "novembro", t[11] = "dezembro", t[e]
  }

  jQuery(document).ready(function (e) {
      const todayUseMin = new Date();
      const todayUseMax = new Date();

      const deliveryMin = new Date(todayUseMin.setDate(todayUseMin.getDate() + {{ section.settings.delivery_time_min_days }}));
      const deliveryMax = new Date(todayUseMax.setDate(todayUseMax.getDate() + {{ section.settings.delivery_time_max_days }}));

      const mesDeliveryMin = getMesExtenso(deliveryMin.getMonth());
      const mesDeliveryMax = getMesExtenso(deliveryMax.getMonth());

      let textDelivery
      if (mesDeliveryMax === mesDeliveryMin) {
          textDelivery = "<strong>" + convertDate(deliveryMin) + "</strong> e <strong>" + convertDate(deliveryMax) + " de " + mesDeliveryMax + "</strong>";
      } else {
          textDelivery = "<strong>" + convertDate(deliveryMin) + " de " + mesDeliveryMin + "</strong> e <strong>" + convertDate(deliveryMax) + " de " + mesDeliveryMax + "</strong>"
      }

      e.getJSON("https://wtfismyip.com/json",
          function (response) {
              const location = response.YourFuckingLocation.replace(", Brazil", "");
              e(".custom-address").html(
                  "<font color='{{ section.settings.entrega_estimada_cor }}'> </font> <strong><font color='{{ section.settings.entrega_estimada_cor }}'>" + location + " e Região</font></strong>")
              e(".shipping-estimated").html("{{ section.settings.delivery_time_text }} " + textDelivery + ".")
              e(".shipping-preview-loading").hide()
              e(".text-garantia").show();
              e(".text-troca").show();
          })
  });
</script>            

{% schema %}
{
  "name": "Simuladora de cep",
  "settings": [
    {
        "type": "text",
        "id": "textSend",
        "label": "Texto de envio",
        "default": "CONSULTAR ENVIO"

    },
    {
      "type": "text",
      "id": "title",
      "label": "Valor padrão",
      "default": "R$ 39,90"
    },

    {
        "type": "text",
        "id": "buttonText",
        "label": "Texto botão",
        "default": "Ok"
      },
      {
        "type": "header",
        "content": "Entrega estimada",
        "info": "Informe seus clientes quando eles devem esperar a chegada de seu pedido."
    },
    
    {
        "type": "checkbox",
        "id": "delivery_time",
        "label": "Habilitar tempo de entrega",
        "info": "Acesse sua loja fora do editor para visualizar as alterações feitas.",
        "default": true
    },
    
    {
        "type": "color",
        "id": "entrega_estimada_cor",
        "label": "Cor do texto",
        "default": "#B75E56"
    },
    {
      "type": "checkbox",
      "id": "habilitar_frete_gratis",
      "label": "Habilitar frete grátis",
      "info": "Acesse sua loja fora do editor para visualizar as alterações feitas.",
      "default": true
  },
    {
        "type": "text",
        "id": "textofrete",
        "label": "Texto frete",
        "default": "Frete Grátis"
    },
    {
        "type": "text",
        "id": "delivery_time_text",
        "label": "Texto prazo",
        "default": "Receba entre:"
    },
    {
        "type": "checkbox",
        "id": "enable_garantia",
        "label": "Habilitar garantia",
        "default": true
    },
    {
        "type": "text",
        "id": "garantia_text",
        "label": "Texto garantia",
        "default": "30 Dias de Garantia"
    },
    {
        "type": "checkbox",
        "id": "enable_troca",
        "label": "Habilitar troca",
        "default": true
    },
    {
        "type": "text",
        "id": "troca_text",
        "label": "Texto troca",
        "default": "7 dias para trocas e devoluções"
    },
    {
        "type": "color",
        "id": "troca_cor",
        "label": "Cor do texto",
        "default": "#53CA58"
    },
    {
        "type": "text",
        "id": "size_text_frete",
        "label": "Tamanho do texto",
        "default": "14px",
        "info": "Insira o tamanho em px."
    },
    {
        "type": "range",
        "id": "delivery_time_min_days",
        "min": 1,
        "max": 60,
        "step": 1,
        "label": "Tempo mínimo (Dias)",
        "default": 3
    },
    {
        "type": "range",
        "id": "delivery_time_max_days",
        "min": 2,
        "max": 60,
        "step": 1,
        "label": "Tempo máximo (Dias)",
        "default": 7
    }
  ]
}
{% endschema %}