@php $show=false; @endphp
<!-- Calculo de Fretes -->
<input type="hidden" name="peso" value="{{ $product->weight }}">
<input type="hidden" name="altura" value="{{ $product->height }}">
<input type="hidden" name="largura" value="{{ $product->width }}">
<input type="hidden" name="comprimento" value="{{ $product->length }}">

<div class="frete-produto mt-3">  
  <div class="form-inline form-search justify-content-end">
    @if($show)
    @verbatim
    <button type="button" v-bind:class="disabled" v-on:click="calcFrete">teste</button>
    @endverbatim
    @endif
    <input class="form-control form-control-lg rounded-0" v-model="frete.cepDest" id="cepDest" name="cepDest" type="text" placeholder="Informe o CEP" style="width:59%">
    <a class="btn btn-green pb-n2 px-0 btn-frete calcularFrete font-weight-bold" id="calcularFrete">CALCULAR FRETE
      <i class="fas fa-truck ml-2"></i>
    </a>
  </div>
  
  @if($show)
  @verbatim
  
  <div v-if="frete.loading" class="text-center p-3">
    <span class="spinner-border"></span>
    <span class="ml-3 font-weight-bold">BUSCANDO...</span>
  </div>
  
  <table class="table table-bordered" v-if="frete.show">
    <tbody>
      <tr v-for="(service, i) of contentFrete" :key="i">       
        <th scope="row" class="font-weight-bold font-montserrat h6">{{ service.descServico || service.descricao }}</th>
        <td class="font-weight-bolder text-center h6">
          {{ service.prazo }} {{ service.prazo == "1" ? "dia útil" : "dias úteis" }} 
        </td>
        <td class="font-weight-bolder text-center h6">
          {{service.valor.toLocaleString('pt-BR',{ minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' })}}
        </td>          
      </tr>
    </tbody>
  </table>
  
  <div v-if="frete.error.isError" class="alert alert-warning alert-dismissible font-weight-bolder" role="alert">
    {{ frete.error.message }}
    <button type="button" class="close" data-dismiss="alert">
      <span>&times;</span>
    </button>
  </div>
  
  @endverbatim
  @endif
  
  <div class="aguardeFrete text-center p-3" disabled>
    <span class="spinner-border"></span>
    <span class="ml-3 font-weight-bold">BUSCANDO...</span>
  </div>
  
  <div class="alert alert-warning alert-dismissible d-none msgCEP" role="alert">
    <strong>Algo deu errado!</strong> <span id="msgCEP"></span>
    <button type="button" class="close" data-dismiss="alert">
      <span>&times;</span>
    </button>
  </div>  
  
  <div class="frete">
    <table id="frete" class="table table-hover table-condensed table-bordered">
      <tbody>
        
      </tbody>
    </table>
  </div>
  
  <p class="font-weight-bolder fosco-text text-right px-2">Não sabe o CEP?
    <b><a href="http://www.buscacep.correios.com.br/sistemas/buscacep/default.cfm" class="black-text" target="_blank">Clique aqui</a></b>
  </p>
  
  <div class="alert alert-warning alert-dismissible not-posible" role="alert">
    <strong id="text-frete"></strong>
    <button type="button" class="close" data-dismiss="alert">
      <i class="fas fa-times"></i>
    </button>
  </div>
</div>
<!-- ./ Calculo de Fretes -->