@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 bg-white breadcrumb shadow-1">
          <li class="breadcrumb-item font-weight-bold">
            <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-normal text-dark">
                {{ $product->categoria->name }}
              </a>
            </li>
          @endif
          <li class="breadcrumb-item active font-weight-normal text-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 rounded shadow-1">

        <div class="row">

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

            @include('layouts.front.shared.favoritos')

            @include('layouts.front.shared.floating-button')

            <div id="carousel-details" class="mb-6 carousel slide carousel-thumbnails" data-ride="carousel">
              <i class="m-3 fas fa-search-plus fosco-text position-absolute d-md-block d-none fa-2x"
                style="z-index:999"></i>
              <div class="carousel-inner" role="listbox">

                {{-- @php $array = [] @endphp

          <!--Pegando a imagem do produto principal-->
          @foreach ($imagesByApi as $image)

          @php array_push($array, $image->src)@endphp
          @endforeach --}}

                <!--Se existir variaveis, pega suas imagens-->
                {{-- @if ($product->attributes->where('ordem', '!=', 99)->count() > 0)
          @foreach ($product->attributes as $image)
          @php array_push($array, $image->cover_attribute)@endphp
          @endforeach
          @endif --}}

                {{-- @php $array = array_unique($array) @endphp --}}
                @php
                  $imagesByApi = $imageItem->getImages($product->sku);
                @endphp
                @if ($imagesByApi)

                  @foreach ($imagesByApi as $seq => $image)
                    @php
                      $src = $image ? config('site.url') . 'storage/products/' . $image->file_item_id . strtolower($image->file_item_extensao) : asset('storage/images/img-indisponivel.png');
                    @endphp

                    <div class="carousel-item text-center @if ($seq==0) active @endif">
                      <img src="{{ $src }}" alt="{{ $product->name }}" class="mx-auto img-fluid">
                    </div>
                  @endforeach

                @else

                  @php $src = asset('storage/images/img-indisponivel.png') @endphp
                  <div class="text-center carousel-item active ">
                    <img src="{{ $src }}" alt="{{ $product->name }}" class="mx-auto img-fluid">
                  </div>

                @endif

              </div>

              <ol class="pl-4 ml-auto carousel-indicators">
                @foreach ($imagesByApi as $seq => $image)
                  @php
                    $src = $image ? config('site.url') . 'storage/products/' . $image->file_item_id . strtolower($image->file_item_extensao) : asset('storage/images/img-indisponivel.png');
                  @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>

            </div>

          </div>

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

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

              <div class="my-3">
                <p class="mb-1 font-weight-bold new-grey">Código: <span
                    class="p-1 badge badge-info">{{ $product->sku }}</span></p>
                <p class="mb-1 font-weight-bold new-grey">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 font-weight-bold new-grey ">Marca: <span class="p-1 badge badge-secondary">
                      {{ $product->brand->name }}</span>
                  </p>
                @endif

                <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">
                          @if (!config('site.catalogo_produtos'))
                            <h3 class="font-weight-bold font-abeezee">
                              <span class="price">{{ config('cart.currency_symbol') }}
                                {{ number_format($atributo->price, 2, ',', '.') }}</span>
                            </h3>
                          @else
                            <h3>&nbsp;</h3>
                          @endif
                          <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.0;
                              $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') && !config('site.catalogo_produtos'))
                              <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.0;
                      $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 ($product->quantity > 0)

                      @if (!config('site.catalogo_produtos') && !$product->sob_consulta)

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

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

                        @if (auth()->check())

                          <button class="text-white btn btn-block btn-lg box-green font-weight-bold btn-comprar">
                            Adicionar ao carrinho <i class="ml-2 fas fa-shopping-cart"></i>
                          </button>

                        @else

                          <a href="{{ route('autentica.completo') }}"
                            class="mx-auto text-white btn btn-lg btn-block box-red">
                            Entre para comprar <i class="ml-2 fas fa-sign-in-alt"></i>
                          </a>

                        @endif

                      @else

                        <div class="d-flex justify-content-end">
                          <a class="mx-auto text-white btn btn-lg btn-block box-red"
                            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="ml-1 fas fa-comments"></i>
                          </a>
                        </div>

                      @endif

                    @else
                      <div class="d-flex justify-content-end">
                        <a class="mx-auto text-white btn btn-lg btn-block box-red"
                          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 sobre preço e disponibilidade<i class="ml-1 fas fa-comments"></i>
                        </a>
                      </div>
                    @endif

                </form>
                @endif

              </div>

              @include('layouts.front.shared.frete_vue')

            </div>

          </div>

        </div>

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

      </div>

    </div>

  </section>

@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 funcoes auto invocaveis comum aos projetos --}}
  @include('layouts.front.js.iifeJS')
  {{-- Arquivo com funcoes auto invocaveis 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>
    $(document).ready(function() {
      $("#cepDest").mask("99999-999")
      $('.carousel-item').zoom().css({
        "cursor": "zoom-in"
      });
    });

  </script>

@endsection