@extends('layouts.front.app')

@section('og')
<meta property="og:type" content="home"/>
<meta property="og:description" content="{{ config('app.description') }}"/>
@endsection
@section('content')

<section>
  <div class="container">    
    <ol class="breadcrumb gray-200 mt-3 ">
      <li class="breadcrumb-item font-weight-bold">
        <a href="{{ route("home")}}" class="fosco-text">
          <i class="fas fa-home"></i> Home
        </a>
      </li>
      <li class="breadcrumb-item font-weight-bolder text-dark">
        {{ $product->name }}
      </li>
    </ol>    
  </div>
</section>

<section id="all" v-cloak>
  
  @include('layouts.front.shared.error-success')
  
  <div class="container">
    
    <div class="bg-white rounded p-3">
      
      <div class="row">
        
        <div class="col-lg pb-5">
          
          @if(!$product->quantity > 0)
          @include('layouts.front.shared.favoritos')
          @endif
          
          <div id="carousel-details" class="carousel slide carousel-thumbnails mb-6" data-ride="carousel">
            
            <i class="fas fa-search-plus position-absolute d-md-block d-none fosco-text m-3 fa-2x" style="z-index: 999"></i>
            
            <div class="carousel-inner" role="listbox">
              
              @php $array = [] @endphp
              
              <!--Pegando a imagem do produto principal-->
              @foreach ($product->images->where('ordem', '!=', 99) as $image)
              @php array_push($array, $image->src)@endphp
              @endforeach                              
              
              @php
              $array = array_unique($array);
              $array = array_values($array);
              @endphp
              
              @if(count($array) > 0)
              
              @foreach ($array as $seq => $image)
              @php
              $src = $image ? config('site.url')."storage/".$image : asset('storage/images/img-indisponivel.jpg')
              @endphp
              
              <div class="carousel-item text-center @if($seq == 0) active @endif">
                <img src="{{ $src }}" alt="{{ $product->name }}" class="img-fluid">
              </div>
              @endforeach
              
              @else
              
              <div class="carousel-item text-center active">
                @php $src = asset('storage/images/img-indisponivel.jpg') @endphp
                <img src="{{ $src }}" alt="{{ $product->name }}" class="img-fluid">
              </div>
              
              @endif
              
            </div>
            
            <ol class="carousel-indicators ml-auto pl-4">
              @foreach ($array as $seq => $image)
              @php
              $src = $image ? config('site.url')."storage/".$image : asset('storage/images/img-indisponivel.jpg')
              @endphp
              <li data-target="#carousel-details" data-slide-to="{{ $seq }}" class="@if($seq == 0) active @endif px-pdt">
                <img src="{{ $src }}" height="75" width="75" class="d-block border rounded" alt="{{ $product->name }}">
              </li>
              @endforeach
            </ol>
            
          </div>
          
        </div>
        
        <div class="col-lg describe-product">
          
          <div class="titulo-produto">
            <h3 class="font-weight-bold font-abeezee">{{ $product->name }}</h3>
          </div>
          
          <div class="my-3">
            <p class="font-weight-bold fosco-text mr-2 mb-1">SKU:
              <span class="badge badge-info p-1">{{ $product->sku }}</span>
            </p>
            <p class="font-weight-bold fosco-text mr-2 mb-1">Disponibilidade:
              @if($product->variavel_value->count() > 0)
              <span class="badge badge-primary">Tem Variações</span>
              @elseif($product->quantity > 0 )
              <span class="badge badge-success p-1">Em Estoque</span>
              @else
              <span class="badge badge-danger p-1">Indisponível</span>
              @endif
            </p>
            
          </div>
          
          <hr>   
          
          <form action="{{ route('cart.store') }}" method="post" id="formAddCart">
            
            {{ csrf_field() }}              
            
            <div class="preco-produto">                                                                 
              
              @php
              if ($product->sale_price && ($product->sale_price_ini <= now() && $product->sale_price_fim > now() || $product->sale_price_ini === null)) {
                $preco_valido = $product->sale_price;
              } else {
                $preco_valido = $product->price;
              }
              $valorBoleto = (config('cart.desconto_boleto') > 0) ? $preco_valido - ($preco_valido * (config('cart.desconto_boleto') / 100)) : $preco_valido;
              $valor = 0.00;
              $parcela = 0;
              for($p = 1 ; $p <= config('cart.parc_sem_juros') ; $p++) {
                if (round($preco_valido / $p, 2) > config('cart.valor_min_parcela')) {
                  $valor = $preco_valido / $p;
                  $parcela = $p;
                }
              }
              @endphp
              
              <input type="hidden" name="subTotal" value="{{ $preco_valido }}">
              
              <h3 class="font-weight-bolder fosco-text font-abeezee mt-3">por
                <span class="font-montserrat h2">
                  {{ config('cart.currency_symbol') }}
                  {{ number_format($preco_valido, 2, ',', '.') }}
                </span>
              </h3>
              
              @if($valor > config('cart.valor_min_parcela'))
              <h6 class="font-weight-bolder fosco-text font-montserrat ml-3 mt-3">
                ou, em até {{ $parcela }}x
                de {{ number_format($valor, 2, ',', '.') }} sem juros
              </h6>
              @endif
              
              @if (config('site.catalogo_produtos'))
              
              <a class="btn btn-lg text-white btn-block mx-auto secondary border-radius font-weight-bold py-3 my-3" href="https://wa.me/{!! config('shop.country_ddi').config('shop.whatsapp_link') !!}?text=[Cliente do site {!! config('site.url') !!}] - Eu tenho interesse: {{ $product->name }}" target="_blank">
                Consulte nosso vendedor <i class="fas fa-comments fa-lg ml-1"></i>
              </a>
              
              @else
              
              @if($product->quantity > 0)
              
              <div class="number-input my-4">
                <label class=" text-dark mr-3 font-montserrat" for="qty">QUANTIDADE:</label>
                <div class="white d-inline-block border btn-rounded p-1">
                  <a onclick="this.parentNode.querySelector('input[type=number]').stepDown()" class="pointer">
                    <i class="fas fa-minus other-grey p-2 border btn-rounded white"></i>
                  </a>
                  <input type="hidden" name="frete" id="valFrete">
                  <input type="hidden" name="product" value="{{ $product->id }}">
                  <input type="number" name="quantity" id="qty" min="1" value="1" max="{{ $product->quantity }}" readonly>
                  <a onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="pointer">
                    <i class="fas fa-plus other-grey p-2 border btn-rounded white"></i>
                  </a>
                </div>
              </div>
              
              @if(auth()->check())
              <button class="btn btn-lg btn-block box-green text-white font-weight-bold btn-comprar py-3">
                Adicionar ao carrinho <i class="fas fa-shopping-cart ml-2"></i>
              </button>
              @else
              <a href="{{ route('autentica.completo') }}" class="btn btn-lg btn-block box-green text-white font-weight-bold py-3">
                Faça seu login para continuar <i class="fas fa-sign-in-alt ml-2"></i>
              </a>
              @endif
              
              @else
              
              <div class="my-4">
                <h4 class="font-abeezee">Oops...</h4>
                <h5 class="font-weight-bolder font-montserrat">Esse produto encontra-se indisponível</h5>
              </div>
              
              @endif
              
              @endif
              
            </div>
            
          </form>
          
          @if (config('site.busca_correios'))
          <div class="mt-5">
            @include('layouts.front.shared.frete_vue')
          </div> 
          @endif
          
        </div>
        
      </div>
      
      <!------------------------------------------------------------------------->
      @if($product->attributes->count() > 0 )
      <div class="mt-5 pt-5">
        
        <h2 class="fosco-text font-montserrat mb-0">talvez você precise de:</h2>         
        
        @include( config('site.domain').'.front.products.product-list-associate', ["associados" => $product->attributes])
        
      </div>
      @endif
      <!------------------------------------------------------------------------->
      
    </div>
  </div>
</section>

@include('layouts.front.shared.details-product')

@endsection

@section('js')
<script type="text/javascript" src="{{ asset('js/axios.js') }}"></script>


{{--Arquivo VueJS comum aos projetos--}}
@include('layouts.front.js.vueJS')
{{--Arquivo VueJS comum aos projetos--}}

{{--Arquivo com funções auto invocadas comum aos projetos--}}
@include('layouts.front.js.iifeJS')
{{--Arquivo com funções auto invocadas comum aos projetos--}}

{{--Arquivo Anonimas comum aos projetos--}}
@include('layouts.front.js.arrowJS')
{{--Arquivo Anonimas comum aos projetos--}}

{{--Arquivo Jquery comum aos projetos--}}
@include('layouts.front.js.jqueryJS')
{{--Arquivo Jquery comum aos projetos--}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.20/jquery.zoom.min.js"></script>

<script>
  (function zoom(){
    const width = window.innerWidth
    if(width > 796){
      $(".carousel-item").zoom().css({"cursor":"zoom-in"});
      $("#medidas .view").zoom().css({"cursor":"zoom-in"});
    }
  })();
  
  (function addClasses(){
    const breadcrumb = document.querySelector("ol.breadcrumb")
    if(breadcrumb) breadcrumb.classList.add("bg-white", "shadow-0")
  })();
  
  (function ocultaAvaliacao(){
    const navIem = document.querySelector(".area-detalhes .details-pdt li:last-child")
    navIem.classList.add("d-none");
  })();
  
  (function addItems(){
    const item = document.querySelectorAll("#pills-tab li a")
    item.forEach(element => {
      element.addEventListener("click", function(){
        
        const descricao = this.getAttribute("data-description")
        const descricao_html = document.querySelector(".description-variable").innerHTML = descricao
        
        const sku = this.getAttribute("data-sku")
        const sku_html = document.querySelector(".code-variable")
        if(sku_html) sku_html.innerText = sku
        
        const produto_id = this.getAttribute("data-product")
        const quantidade = document.querySelector(`input[name=quantity-${produto_id}]`).value
        
        document.querySelector("input[name=productAttribute]").value = produto_id
        document.querySelector("input[name=quantity]").value = 1
      })
    })
  })();
  
</script>

<script type="text/javascript">
  $(function() {
    $('input[name=quantity-var]').change(function() {
      let quantity = $(this).val()
      $('input[name=quantity]').val(quantity)
    });
    
    $(".btn-comprar").click(function(){
      $("#adicionandoCarrinho").modal("show")
    });
  })
</script>

@endsection