@extends('layouts.front.app')

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

@section('content')

@include('layouts.front.shared.breadcrumb', ['tipo' => 'SG'])

@if($product)

<section id="all" v-cloak>
  
  @include('layouts.front.shared.error-success')
  
  <div class="container">
    
    <div class="bg-white rounded p-3 pb-5">
      
      <div class="row">
        
        <div class="pb-5 col-lg">
          
          @if(!$product->quantity > 0)
          @include('layouts.front.shared.favoritos')
          @endif
          
          @include('layouts.front.shared.floating-button')
          
          <div id="carousel-details"
          class="mb-6 carousel slide carousel-thumbnails"
          data-ride="carousel">
          
          <div class="carousel-inner"
          role="listbox">
          @php $array = [] @endphp
          <!--Pegando a imagem do produto principal-->
          @foreach ($product->images->whereNotIn('ordem', [99]) as $image)
          @php array_push($array, $image->src)@endphp
          @endforeach
          
          <!--Se existir variaveis, pega suas imagens-->
          {{-- @if($product->attributes->count() > 0)
            @foreach ($product->attributes->whereNotIn('ordem', [99]) as $image)
            @if($image->cover_attribute)
            @php array_push($array, $image->cover_attribute)@endphp
            @endif
            @endforeach
            @endif --}}
            
            @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="text-center carousel-item active">
              @php $src = asset('storage/images/img-indisponivel.jpg') @endphp
              <img src="{{ $src }}"
              alt="{{ $product->name }}"
              class="img-fluid">
            </div>
            
            @endif
            
            <div class="imagem-mascara-esgotado">
              <img src="{{ asset('storage/img/esgotado.png') }}?w=100&h100"
              data-zoom="{{ asset('storage/img/esgotado.png') }}?w=150&h150"
              style="">
            </div>
            
            <div class="imagem-promocao">
              <img src="{{ asset('storage/img/promocao.png') }}?w=100&h100"
              data-zoom="{{ asset('storage/img/promocao.png') }}?w=150&h150"
              style="">
            </div>
            
          </div>
          
          @if(count($array) > 1)
          <ol class="pl-4 ml-auto carousel-indicators">
            @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="border rounded d-block"
            alt="{{ $product->name }}">
          </li>
          @endforeach
        </ol>
        @endif
        
      </div>
      
    </div>
    
    <div class="mb-5 col-md-6 describe-product">
      
      <div class="p-4">
        
        <div class="mb-3">
          <h3 class="fosco-text font-abeezee font-weight-bold ">{{ $product->name }}</h3>
          
          <p class="font-weight-bold">
            <span>SKU:</span><span class="ml-2 badge badge-info white-text">{{ $product->sku }}</span>
          </p>
        </div>
        
        <hr>
        
        @if(count($productAttributes) > 0)
        {{-- Se o item possuir um variável, ele abrirá estas opções de produto --}}
        @php
        $list = 0;
        $list_tab = 0;
        @endphp
        
        <h6>Tamanhos</h6> {{-- Esta opção é para o Piccolino --}}
        <ul class="nav md-pills nav-justified pills-outline-piccolino pills-rounded"
        id="pills-tab"
        role="tablist">
        @foreach($productAttributes as $attribute)
        
        <li class="nav-item">
          <a class="nav-link item-variavel @if($attribute->quantity <= 0) grey white-text @else text-black-50 @endif"
            id="pills-home-tab-{{ $attribute->id }}"
            data-toggle="pill"
            href="#pills-{{ $attribute->id }}"
            role="tab"
            aria-controls="pills-home"
            aria-selected="true"
            data-product="{{ $attribute->id }}">
            {{ $attribute->attributesValues->first()->value }}
          </a>
        </li>
        @php
        $list++;
        @endphp
        @endforeach
      </ul>
      
      <hr>
      
      <div class="tab-content">
        @foreach($productAttributes as $attribute)
        <div class="tab-pane fade @if($list_tab === 0) in show active @endif"
        id="pills-{{ $attribute->id }}"
        role="tabpanel">
        
        <div>
          @if ($attribute->sale_price && $attribute->sale_price > 0 && ($attribute->sale_price_ini <= now()
          &&
          ($attribute->sale_price_fim > now() || $attribute->sale_price_ini === null)))
          <span class="mt-1 font-italic text-black-50">
            de: {{ config('cart.currency_symbol') }} {{ $attribute->price }}
          </span>
          <h3 class="h3 font-weight-bold primary-text font-abeezee">
            por: {{ config('cart.currency_symbol') }} {{ number_format($attribute->sale_price, 2, ',', '.') }}
          </h3>
          <input type="hidden"
          name="final_price-{{$attribute->id}}"
          value="{{ $attribute->sale_price }}"
          data-promocao="true">
          
          @else
          
          <h3 class="mt-3 h3 font-weight-bold primary-text font-abeezee">por:
            <span class="price">{{ config('cart.currency_symbol') }}
              {{ number_format($attribute->price, 2, ',', '.') }}</span>
            </h3>
            <input type="hidden"
            name="final_price-{{$attribute->id}}"
            value="{{ $attribute->price }}"
            data-promocao="false">
            
            @endif
            
            <input type="hidden"
            name="quantity-{{$attribute->id}}"
            value="{{ $attribute->quantity }}">
            <p class="font-weight-bold">
              @php
              if ($attribute->sale_price && $attribute->sale_price > 0 && ($attribute->sale_price_ini <= now()
              &&
              ($attribute->sale_price_fim > now() || $attribute->sale_price_ini === null))) {
                $preco_valido = $attribute->sale_price;
              } else {
                $preco_valido = $attribute->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
              <p><span>{{ config('cart.currency_symbol') }}
                {{ number_format($valorBoleto, 2, ',', '.') }}</span> no
                boleto{{-- (somente para o site) --}}</p>
                @if(floatval($preco_valido) !== floatval($valor))
                <p>ou, em até {{ $parcela }}x de <span>{{ config('cart.currency_symbol') }}
                  {{ number_format($valor, 2, ',', '.') }}</span> s/ juros{{-- (somente para o site) --}}
                </p>
                @else
                <p style="min-height: 50px"></p>
                @endif
              </p>
              
              <hr>
              
            </div>
            {{-- Fim do Loop --}}
          </div>
          
          @php
          $list_tab++;
          @endphp
          @endforeach
          
        </div>
        
        @else{{-- Caso contrário, ele exibirá o item unitário --}}
        
        <div>
          @if ($product->sale_price && ($product->sale_price_ini <= now()
          &&
          $product->sale_price_fim > now() ||
          $product->sale_price_ini === null))
          
          <span class="mt-1 font-italic text-black-50">
            de: {{ config('cart.currency_symbol') }} {{ $product->price }}
          </span>
          
          <h3 class="h3-responsive primary-text font-abeezee">
            por: {{ config('cart.currency_symbol') }} {{ number_format($product->sale_price, 2, ',', '.') }}
          </h3>
          
          <input type="hidden"
          name="final_price-{{$product->id}}"
          value="{{ $product->sale_price }}"
          class="promocao"
          data-promocao="true">
          
          @else
          
          <h3 class="mt-3 h3-responsive primary-text font-abeezee">
            por: {{ config('cart.currency_symbol') }} {{ number_format($product->price, 2, ',', '.') }}
          </h3>
          <input type="hidden"
          name="final_price-{{$product->id}}"
          value="{{ $product->price }}"
          class="promocao"
          data-promocao="false">
          
          @endif
          
          <p class="font-weight-bold">
            @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
            
            <p>
              @if ($product->attributes->count() > 0) (A partir de) @endif
              <span>{{ config('cart.currency_symbol') }} {{ number_format($valorBoleto, 2, ',', '.') }}</span>
              no boleto
            </p>
            
            @if(floatval($preco_valido) !== floatval($valor))
            <p>ou, em até {{ $parcela }}x de
              <span>{{ config('cart.currency_symbol') }} {{ number_format($valor, 2, ',', '.') }}</span>
              s/ juros
            </p>
            @else
            <p style="min-height: 50px"></p>
            @endif
          </p>
          
          @endif
          
          @if($product->quantity > 0 || $product->attributes->count() > 0)
          
          <h3 class="hidden desc-pr primary-text font-abeezee total">
            Total a pagar: <span class="preco_total"></span>
          </h3>
          
          @if($product->attributes->count() > 0)
          <input type="hidden"
          name="qty_max"
          value="{{ intval($product->attributes->count()) }}">
          @else
          <input type="hidden"
          name="qty_max"
          value="{{ intval($product->quantity) }}">
          @endif
          
          @if(auth()->check())
          
          <form action="{{ route('cart.store') }}"
          class="d-flex justify-content-left"
          id="formAddCart"
          method="POST">
          {{ csrf_field() }}
          @if ($product->sale_price)
          <input type="hidden"
          name="promocao"
          value="true">
          <input type="hidden"
          name="subTotal"
          value="{{ $product->sale_price }}">
          @else
          <input type="hidden"
          name="promocao"
          value="false">
          <input type="hidden"
          name="subTotal"
          value="{{ $product->price }}">
          @endif
          @if ($product->attributes->count() > 0)
          <input type="hidden"
          name="productAttribute"
          value="{{ $product->attributes->first()->id }}">
          @endif
          <input type="hidden"
          name="product"
          value="{{ $product->id }}">
          <input type="number"
          name="quantity"
          value="1"
          min="1"
          step="1"
          max="{{ intval($product->quantity) }}"
          class="mt-2 form-control w-25">
          <button id="add-to-cart-btn-{{ $product->id }}"
            class="btn primary font-weight-bolder btn-md btn-comprar"
            type="submit"
            @if(count($productAttributes)> 0) disabled @endif>
            <i class="fas fa-gas-pump"></i> Comprar
          </button>
        </form>
        
        @else
        
        <a @if(intval(config('site.login.integra_ls.ativa'))===1)
        href="{{ route('autentica.completo') }}"
        @else
        data-dismiss="modal"
        data-toggle="modal"
        @endif
        class="btn primary btn-lg btn-block font-weight-bold btn-rounded">
        EFETUE LOGIN, PARA COMPRAR<i class="fas fa-sign-in-alt"></i>
      </a>
      
      @endif
      
      @endif
      
    </div>
    
    @if(config('site.busca_correios'))
    @include("layouts.front.shared.frete_vue")
    @endif
    
    @if ($product->tags)
    <div>
      <span>Tags:</span>
      <span class="ml-2 badge badge-success">{!! $product->tags !!}</span>
    </div>
    @endif
    
  </div>
  
</div>

</div>

</div>
</div>
</section>

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

@else

<section>
  <div class="container">
    <div class="alert alert-warning font-weight-bolder">
      Este item encontra-se indispon&iacute;vel no momento. Continue
      <a href="{{ route('home') }}"
      class="alert-link">navegando</a> no site.
    </div>
  </div>
</section>

@endif

@endsection

@section('js')
<script type="text/javascript"
src="{{ asset('js/axios.js') }}"></script>
@include('layouts.front.js.vueJS')
{{--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>
  (function addClasses(){
    const area = document.querySelector(".area-detalhes")
    const breadcrumb = document.querySelector("ol.breadcrumb")
    if(area){
      area.classList.add("rounded", "bg-white", "p-3", "mb-5")
      area.classList.remove("mt-5", "pt-5")
    }
    
    if(breadcrumb){
      breadcrumb.classList.add("bg-white", "rounded", "shadow-1")
    }
  })();
</script>

<script type="text/javascript">
  $(document).ready(function () {
    
    $('.imagem-promocao').hide()
    let promocao = $('.promocao').data('promocao')
    if(promocao === true) {
      $('.imagem-promocao').show()
    } else {
      $('.imagem-promocao').hide()
    }
    
    let qty_max = $('input[name=qty_max]').val()
    if(qty_max > 0) {
      $('.imagem-mascara-esgotado').hide()
    } else {
      $('.imagem-mascara-esgotado').show()
    }
    
    $('.total').hide()
    
    $('.btn-comprar').on('click', function(e){
      e.preventDefault()
      let frete = $('input[name=frete]').val()
      $('#adicionandoCarrinho').modal( 'show' )
      $('#adicionandoCarrinho').modal({
        backdrop: 'static'
      })
      $('#formAddCart').submit()
    })
    
    $('.item-variavel').on('click', function(){
      let product_id = $(this).data('product')
      let price = $('input[name=final_price-'+product_id+'').val()
      let promocao = $('input[name=final_price-'+product_id+'').data('promocao')
      let quantity = $('input[name=quantity-'+product_id+'').val()
      let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
      price = parseFloat(price)
      
      $('input[name=subTotal]').val(price)
      $('input[name=quantity]').val(1)
      $('input[name=productAttribute]').val(product_id)
      $('input[name=quantity]').attr('max', quantity)
      $('span.price').html(price.toLocaleString('pt-BR', formato))
      console.log(quantity, quantity <= 0)
      if(quantity <= 0) {
        $('button.btn-comprar').attr('disabled', true)
        $('button#calcularFrete').attr('disabled', true)
        $('.imagem-mascara-esgotado').show()
      } else {
        $('button.btn-comprar').removeAttr('disabled')
        $('button#calcularFrete').removeAttr('disabled')
        $('.imagem-mascara-esgotado').hide()
      }
      
      if(promocao === true) {
        $('.imagem-promocao').show()
      } else {
        $('.imagem-promocao').hide()
      }
    })
  })
</script>
@endsection