@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">
    <nav>
      <ol class="mt-3 breadcrumb grey lighten-3">
        <li class="breadcrumb-item">
          <a href="{{ route('home') }}" class="font-weight-bold fosco-text"><i class="fas fa-home"></i> Home</a>
        </li>
        @if ($product->categoria)
        <li class="breadcrumb-item">
          <a href="{{ route('front.group.list', [$product->categoria->slug, $product->id_segment, $product->id_grupo]) }}" class="font-weight-bolder dtext-dark">
            {{ $product->categoria->name }}
          </a>
        </li>
        @endif
        <li class="breadcrumb-item active font-weight-bolder dtext-dark">{{ $product->name }}</li>
      </ol>
    </nav>
  </div>
</section>

<section id="all" v-cloak>

  @include('layouts.front.shared.error-success')

  <div class="container my-2">
    <div class="p-4 bg-white">

      <div class="row">

        <div class="pb-5 col-lg-6">

          @if(!$product->quantity > 0)
          @include('layouts.front.shared.favoritos')
          @endif

          <div id="carousel-details" class="mb-6 carousel slide carousel-fade carousel-thumbnails" data-ride="carousel">

            @if($product->images->count() > 0)
            <div class="carousel-inner" role="listbox">
              @php $seq = 0; @endphp
              @foreach ($product->images as $image)
              @php
              if(config('site.conjugado'))
              $src = config('site.url')."storage/".config('site.domain')."/".str_replace("products", "itens", $image->src);
              else
              $src = config('site.url')."storage/".$image->src;
              @endphp
              <div class="carousel-item @if($seq === 0) active @endif">
                <img class="mx-auto d-block w-100" src="{{ $src }}" alt="{{ config('app.name') }} - {{ $product->name }}">
              </div>
              @php
              $seq++;
              @endphp
              @endforeach
            </div>

            @if($product->images->count() > 1)
            <a class="carousel-control-prev" href="#carousel-details" role="button" data-slide="prev">
              <i class="fas fa-chevron-left fosco-text fa-2x"></i>
            </a>
            <a class="carousel-control-next" href="#carousel-details" role="button" data-slide="next">
              <i class="fas fa-chevron-right fosco-text fa-2x"></i>
            </a>
            @endif

            <ol class="pl-4 ml-auto carousel-indicators">
              @php $seq2 = 0; @endphp
              @foreach ($product->images as $image)
              @php
              if(config('site.conjugado'))
              $src2 = config('site.url')."storage/".config('site.domain')."/".str_replace("products", "itens", $image->src);
              else
              $src2 = config('site.url')."storage/".$image->src;
              @endphp
              <li data-target="#carousel-details" data-slide-to="{{ $seq2 }}" class="@if($seq2 === 0) active @endif px-pdt">
                <img src="{{ asset($src2) }}" height="75" width="75" class="border rounded d-block" alt="{{ config('app.name') }} - {{ $product->name }}">
              </li>
              @php
              $seq2++;
              @endphp
              @endforeach
            </ol>

            @else
            <div  class="d-flex justify-content-center">
              <img src="{{asset('storage/images/img-indisponivel.jpg')}}" height="400" width="400" alt="">
            </div>

            @endif

          </div>

        </div>

        <div class="col-lg-6 describe-product">

          <div class="">
            <h4 class="font-weight-bold font-abeezee">{{ $product->name }}</h4>

            <div class="my-3">
              <p class="mb-1 mr-2 font-weight-bold">Código:
                <span class="p-1 badge badge-info">{{ $product->sku }}</span>
              </p>
              <p class="mb-1 mr-2 font-weight-bold">Disponibilidade:
                @if($product->variavel_value->count() > 0)
                <span class="badge badge-primary">Tem Variações</span>
                @elseif($product->quantity > 0 )
                <span class="p-1 badge badge-success">Em Estoque</span>
                @else
                <span class="p-1 badge badge-danger">Indisponível</span>
                @endif
              </p>
              @if ($product->brand)
              <p class="mb-1 mr-2 font-weight-bold">Marca:
                <span class="p-1 badge badge-secondary">{{ $product->brand->name }}</span>
              </p>
              @endif
            </div>

            <hr>

            <form action="{{ route('cart.store') }}" method="post">

              {{ csrf_field() }}
              <div class="variaveis-item">
                @php $list_tab = 0; @endphp
                @foreach ($product->variavel_type as $ch => $tipo)

                @if ($tipo->name !== 'Cor')

                <p class="font-weight-bold fosco-text">Selecione a medida:</p>

                <ul class="nav nav-pills item-var" id="pills-tab" role="tablist">
                  @foreach ($product->variavel_value as $key => $atributo)
                  <li class="text-center nav-item">
                    <a class="nav-link item-variavel rounded-pill @if($atributo->quantity <= 0) grey @else blue text-white @endif p-2 mx-1"
                      id="pills-home-tab-{{ $atributo->id }}" @if($atributo->quantity <= 0) title="Item indisponível"
                      data-content="Este item encontra-se sem estoque no momento." @else data-toggle="pill" href="#pills-{{ $atributo->id }}" role="tab"  @endif data-product="{{ $atributo->id }}" @if($atributo->cover_attribute !== '') data-image="{{ config('site.url') }}/storage/{{ $atributo->cover_attribute }}" @else data-image="" @endif  @if($atributo->quantity <= 0) disabled @endif>
                      {{ $atributo->value }}
                    </a>
                  </li>
                  @endforeach
                </ul>

                @else

                <div class="tab-content">
                  <h6 class="my-2 font-weight-bold fosco-text">Selecione uma cor:</h6>

                  <div class="tab-pane fade @if($ch === 0) show active @endif" id="cor-{{ $tipo->id }}" role="tabpanel">
                    @foreach ($product->variavel_value as $key => $atributo)
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" id="{{ $atributo->id }}" name="productAttribute" value="{{ $atributo->id }}" class="custom-control-input" @if($atributo->cover_attribute !== '') data-image="{{ config('site.url') }}/storage/{{ $atributo->cover_attribute }}" @else data-image="" @endif data-price="{{ $atributo->price }}" data-qty={{ $atributo->quantity }} required>
                      <label for="{{ $atributo->id }}" class="custom-control-label">
                        <img src="{{ config('site.url') }}storage/{{ $atributo->cover_attribute }}" class="rounded img-fluid img-thumbnail" width="70" alt="{{ $atributo->value }}" data-toggle="tooltip" title="{{ $atributo->value }}">
                      </label>
                    </div>
                    @endforeach
                  </div>

                </div>

                @endif

                @endforeach
              </div>

              @if($product->variavel_value->count() > 0)

              <div class="tab-content">
                @foreach($product->variavel_value as $key => $atributo)
                <div class="tab-pane fade @if($key === 0) in show active @endif" id="pills-{{ $atributo->id }}" role="tabpanel">
                  <h3 class="font-weight-bold font-abeezee">
                    <span class="price">
                      {{ config('cart.currency_symbol') }}
                      {{ number_format($atributo->price, 2, ',', '.') }}
                    </span>
                  </h3>

                  <input type="hidden" name="final_price-{{$atributo->id}}" value="{{ $atributo->price }}">
                  <input type="hidden" name="quantity-{{$atributo->id}}" value="{{ $atributo->quantity }}">

                  <p class="font-weight-bold">
                    @php
                    $preco_valido = $atributo->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
                    @if(config('cart.desconto_boleto'))
                    <p><span>{{ config('cart.currency_symbol') }} {{ number_format($valorBoleto, 2, ',', '.') }}</span> no boleto</p>
                    @endif
                    @if(floatval($preco_valido) !== floatval($valor) && $parcela > 0)
                    <p class="font-weight-bolder fosco-text">
                      ou, em até {{ $parcela }}x de <span>{{ config('cart.currency_symbol') }} {{ number_format($valor, 2, ',', '.') }}</span> s/ juros
                    </p>
                    @else
                    <p class="py-1"></p>
                    @endif

                  </p>

                  <hr>
                </div>

                @endforeach
              </div>

              @else

              @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

              <h3 class="font-weight-bold font-abeezee"></h3>
              <input type="hidden" name="subTotal" value="{{ $preco_valido }}">
              <h3 class="font-weight-bold font-abeezee" id="price_item">
                {{ config('cart.currency_symbol') }} {{ number_format($preco_valido, 2, ',','.') }}
              </h3>

              @if($product->quantity > 0)

              <div class="my-4 number-input">
                <label class="mr-3 font-weight-bold dtext-dark" for="qtd-pdt">QUANTIDADE:</label>
                <div class="p-1 border gray-100 d-inline-block btn-rounded">
                  <a onclick="this.parentNode.querySelector('input[type=number]').stepDown()" class="pointer">
                    <i class="p-2 bg-white border fas fa-minus other-grey btn-rounded"></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 }}" class="item-quantidade" readonly>
                  <a onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="pointer">
                    <i class="p-2 bg-white border fas fa-plus other-grey btn-rounded"></i>
                  </a>
                </div>
              </div>

              @if (auth()->check())
              <button class="text-white btn btn-block btn-lg box-green btn-comprar font-weight-bold">Adicionar ao carrinho
                <i class="ml-2 fas fa-shopping-cart"></i>
              </button>
              @else
              <a href="{{ route('autentica.completo') }}" class="text-white btn btn-block btn-lg box-green btn-comprar font-weight-bold">
                Entre para comprar <i class="ml-2 fas fa-sign-in-alt"></i>
              </a>
              @endif


              @else

              <a 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" class="my-2 text-white btn btn-lg box-green btn-block font-weigt-bold">
                Consulte nosso vendedor <i class="ml-1 fas fa-comments fa-lg"></i>
              </a>

              @endif

            </form>
            @endif

            @if(config('site.busca_correios'))
            @include("layouts.front.shared.frete_vue")
            @endif
          </div>

        </div>

      </div>

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

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

@endsection

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

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

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

@include('layouts.front.js.arrowJS')

<script>
  (function zoom(){
    const width = window.innerWidth
    if(width > 796){
      $(".carousel-item").zoom().css({"cursor":"zoom-in"});
    }
  })();

  (function ocultaAvaliacao(){
    const navIem = document.querySelector(".area-detalhes .details-pdt li:last-child")
    navIem.classList.add("d-none");
  })();
</script>

@endsection