@extends('layouts.front.app')

@section('og')
<meta property="og:type" content="product" />
<meta property="og:title" content="{{ $product->name }}" />
<meta property="og:description" content="{{ config('app.description') }}" />
@if(!is_null($product->cover))
<meta property="og:image" content="{{ asset("storage/$product->cover") }}" />
@endif
@endsection

@section('content')
<section>
  <div class="container my-3">
    <nav>
      <ol class="breadcrumb grey lighten-3">
        <li class="breadcrumb-item font-weight-bold fosco-text">
          <a class="fosco-text" href="{{ route('home') }}">
            <i class="mr-1 fas fa-home"></i> Home
            <i class="ml-1 fas fa-angle-right"></i>
          </a>
        </li>
        @if($product->SubCategoria)
        <li class="breadcrumb-item active">
          <a class="text-dark font-weight-bolder"
            href="{{ route('front.list.subgrupo', [str_slug($product->SubCategoria->name), $product->SubCategoria->id_subgrupo, $product->SubCategoria->id_grupo]) }}">
            {{ $product->SubCategoria->name }} <i class="mx-2 fas fa-angle-right"></i>
          </a>
        </li>
        @endif
        <li class="breadcrumb-item active font-weight-bolder text-dark"> {{ $product->name }}</li>
      </ol>
    </nav>
  </div>
</section>

<!-- Área do Produto-->
<section id="all" v-cloak>

  <div class="container">
    <form action="{{route('cart.store')}}" method="POST" class="formAdd">

      {{ csrf_field() }}

      <input type="hidden" name="product" value="{{$product->id}}">
      <input type="hidden" name="frete" value="0.00">

      <div class="container">

        <div class="row">

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

            <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->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="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>

              @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="col-lg description">
            @php
            if ($product->sale_price && ($product->sale_price_ini <= now() && $product->sale_price_fim > now() &&
              $product->sale_price_ini !== null && $product->sale_price_fim !== 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

                <h2 class="font-weight-bold text-dark font-abeezee">{{ $product->name }}</h2>

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

                <hr>

                @php $qty_variavel = 0 @endphp
                @foreach ($product->attributes as $pdt_variavel)
                @php $pdt_variavel->quantity > 0 ? $qty_variavel++ : null @endphp
                @endforeach

                <div>
                  @if(config('site.catalogo_produtos'))
                  @else
                  @if($product->sob_consulta === 0) {{-- Se não for item sob_consulta --}}

                  @if($product->attributes->count() > 0 && $qty_variavel > 0)
                  {{-- Exibe a informação a partir, pois existem variaveis --}}

                  {{-- <h4 class="font-weight-bold font-abeezee fosco-text">A partir de
                {{ config('cart.currency_symbol') }} <span
                    id="valid_price">{{ number_format($preco_valido, 2, ',', '.') }}</span>
                  </h4> --}}
                  <a class="px-0 text-white btn primary btn-block font-weight-bolder" role="button"
                    href="https://wa.me/{{ config('shop.whatsapp_link') }}?text=Vi este produto no site:{{ $product->name }}"
                    target="_blank">
                    Consulte um vendedor <i class="ml-1 fas fa-comments"></i>
                  </a>
                  @else {{-- caso contrario, já exibe por --}}

                  @if($product->quantity > 0)
                  <h4 class="font-weight-bold font-abeezee fosco-text">
                    @if ($product->sale_price && ($product->sale_price_ini <= now() && $product->sale_price_fim > now()
                      && $product->sale_price_ini !== null && $product->sale_price_fim !== null))
                      <s class="mt-1 mr-3 font-italic text-black-50 h6">
                        {{ config('cart.currency_symbol') }} {{ number_format($product->price, 2, ',', '.') }}
                      </s>
                      @endif
                      <span class="">{{ config('cart.currency_symbol') }} <span
                          id="valid_price">{{ number_format($preco_valido, 2, ',', '.') }}</span></span>
                  </h4>
                  @endif

                  @endif

                  @else {{-- Sendo sob consulta, apenas exibe a informação para consultar o item --}}

                  @endif

                  @if (config('cart.desconto_boleto') > 0 && $product->sob_consulta != 1 && ($product->quantity > 0 ||
                  ($product->attributes->count() > 0 && $qty_variavel > 0 )))
                  <div>
                    <span class="font-abeezee h2 text-danger font-weight-bold h4"><small>por </small>
                      {{ config('cart.currency_symbol') }} {{ number_format($valorBoleto, 2, ',','.') }}
                      <small class="clear h6 text-dark font-italic">(via Transferência ou Depósito Bancário )</small>
                    </span>
                  </div>
                  @endif
                  @endif

                  <div>
                    @if(config('site.catalogo_produtos'))
                    <a class="px-0 text-white btn primary btn-lg btn-block font-weight-bolder" role="button"
                      href="https://wa.me/{{ config('shop.whatsapp_link') }}?text=Vi este produto no site:{{ $product->name }}"
                      target="_blank">
                      Consulte um vendedor <i class="ml-1 fas fa-comments"></i>
                    </a>
                    @else

                    @if (($valor > config('cart.valor_min_parcela')) && intval($parcela) > 1 && $product->sob_consulta
                    != 1 && ($product->quantity > 0 || ($product->attributes->count() > 0 && $qty_variavel > 0) ) )
                    <p class="pt-3 fosco-text font-abeezee font-weight-bold">ou até
                      <span id="numero_parcelas">{{ $parcela }}</span>X de {{ config('cart.currency_symbol') }}
                      <span id="valor_parcela">{{ number_format($valor, 2, ',', '.') }} (s/ juros)</span>
                    </p>
                    @endif

                    @if ($product->sob_consulta === 0 )

                    @if($product->quantity > 0 && !$product->attributes->count() > 0)
                    <div class="mb-3 md-form input-group justify-content-end">
                      <label class="ml-1 font-weight-bolder" for="qty">Quant.:</label>
                      <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" class="form-control" min="1"
                        max="{{ $product->quantity }}" required>

                      <div class="input-group-append">
                        <button class="rounded btn btn-success btn-md btn-comprar" type="submit">
                          <span class="float-left pr-2 font-weight-bolder border-right">Clique aqui para
                            <span class="h2-responsive"><br> COMPRAR</span>
                          </span>
                          <span class="float-right pt-3 pl-3"><i class="fas fa-shopping-cart fa-2x"></i></span>
                        </button>
                      </div>
                    </div>

                    @else

                    @if(!$qty_variavel)
                    {{-- <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> --}}
                    <a href="{{ route('contato') }}" class="btn btn-red btn-lg btn-rounded font-weight-bold shadow-0">
                      Consulte nosso vendedor <i class="ml-1 fas fa-comments fa-lg"></i>
                    </a>
                    @endif

                    @endif

                    @else

                    @if($product->quantity > 0 || $product->attributes->count() > 0 )

                    <div class="d-flex justify-content-end">
                      <a href="{{ route('contato') }}" class="btn btn-red btn-lg btn-rounded font-weight-bold shadow-0">
                        Consulte nosso vendedor <i class="ml-1 fas fa-comments fa-lg"></i>
                      </a>
                    </div>

                    @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> --}}
                    <a href="{{ route('contato') }}" class="btn btn-red btn-lg btn-rounded font-weight-bold shadow-0">
                      Consulte nosso vendedor <i class="ml-1 fas fa-comments fa-lg"></i>
                    </a>

                    @endif

                    @endif

                    @endif

                  </div>

                </div>

                <div>

                </div>

                @if(!config('site.catalogo_produtos'))

                @if($product->sob_consulta != 1 && ($product->quantity > 0 || ($product->attributes->count() > 0 &&
                $qty_variavel > 0) ))
                @include(config('site.domain').'.front.shared.parcelamento')
                @endif

                @if($product->quantity > 0 || ($product->attributes->count() > 0 && $qty_variavel > 0 ))
                @include('layouts.front.shared.frete_vue')
                @endif

                @endif

          </div>

        </div>

        @if($product->attributes->count() > 0)
        <div class="pt-5 mt-5">
          @if($product->SubCategoria->id_subgrupo !==10)
          {{-- Se não for isca, abrirá uma listagem digerente, tabulada --}}

          <h3 class="font-weight-bolder fosco-text">
            <span class="border-description">Modelos</span>
          </h3>

          <hr class="border-description mt-n2">

          <small class="text-center card-title nativus-text">
            (Será adicionado ao carrinho, quando selecionar a quantidade)
          </small>

          <table class="table card-body table-striped dataTables">

            <thead>
              <tr>
                <th>Opção</th>
                <th>Quantidade</th>
                <th>Preço unitário</th>
              </tr>
            </thead>

            <tbody>

              @foreach($product->attributes as $productAttribute => $value)

              @php
              $itemVariavel = false;
              $quantidade = 0;

              if ($value->sale_price){
              $preco_valido = $value->sale_price;
              } else {
              $preco_valido = $value->price;
              }

              foreach ($getCartItems as $variavelCart) {
              /* dd($variavelCart->options->product_attribute_id === $value->id,
              $variavelCart->options->product_attribute_id, $value->id); */
              if(intval($variavelCart->options->product_attribute_id) === $value->id) {
              $itemVariavel = true;
              $quantidade = $variavelCart->qty;
              }
              }
              @endphp

              <tr>
                <td>
                  <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="chk-attribute-{{$value->id}}"
                      data-product="{{$value->id}}" data-attribute="{{$value->id}}" name="productAttribute"
                      @if($value->quantity === 0) disabled @endif
                    @if($itemVariavel) checked @endif
                    @if ($value->quantity === 0 ) disabled @endif
                    value="{{$value->id}}"
                    />
                    <label class="pl-2 custom-control-label" for="chk-attribute-{{$value->id}}">
                      {{$value->attributesValues->first()->value}}
                    </label>
                  </div>
                </td>

                <td>
                  @if ($value->quantity > 0 && !$product->sob_consulta )
                  <select class="browser-default custom-select cart-add-qty w-50" name="quantity"
                    data-price="{{$preco_valido}}" data-attribute="{{$value->id}}" data-product="{{$product->id}}"
                    id="quantity-{{$value->id}}" data-maxquantity="{{ $value->quantity }}">
                    @for ($q = 0; $q <= $value->quantity; $q++)
                      <option value="{{$q}}" @if($quantidade===$q) selected @endif>{{$q}}</option>
                      @endfor
                  </select>

                  @else

                  <a href="{{ route('contato') }}" class="btn btn-red btn-lg btn-rounded font-weight-bold shadow-0">
                    Consulte nosso vendedor <i class="ml-1 fas fa-comments fa-lg"></i>
                  </a>

                  @endif
                </td>

                <td>
                  @if ($preco_valido > 0.00 && $value->quantity > 0 && !$product->sob_consulta)
                  {{ config('cart.currency_symbol') }} {{ number_format($preco_valido, 2, ',', '.') }}
                  @else
                  --
                  @endif
                </td>

              </tr>
              @endforeach

            </tbody>

          </table>

          <div class="mb-3 md-form input-group justify-content-end">
            @if(config('site.catalogo_produtos'))
            <a class="px-0 text-white btn primary btn-lg btn-block font-weight-bolder" role="button"
              href="https://wa.me/{{ config('shop.whatsapp_link') }}?text=Vi este produto no site:{{ $product->name }}"
              target="_blank">
              Consulte um vendedor <i class="ml-1 fas fa-comments"></i>
            </a>
            @else
            {{-- <label class="ml-1 font-weight-bolder" for="qty">Quant.:</label> --}}
            <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" class="form-control d-none" min="1"
              max="{{ $product->quantity }}" required @if($product->attributes->count() > 0) disabled @endif>

            <div class="input-group-append">
              <button class="rounded btn btn-success btn-md btn-comprar" type="submit" disabled>
                <span class="float-left pr-2 font-weight-bolder border-right">Clique aqui para
                  <span class="h2-responsive"><br> COMPRAR</span>
                </span>
                <span class="float-right pt-3 pl-3"><i class="fas fa-shopping-cart fa-2x"></i></span>
              </button>
            </div>
            @endif
          </div>

          @else{{-- Neste caso, será uma isca, abrindo outro tipo de seleção --}}

          <h3 class="font-weight-bolder fosco-text">
            <span class="border-description">Modelos</span>
          </h3>

          <hr class="border-description mt-n2">

          <div class="row justify-content-center">
            @foreach($product->attributes as $value)

            @php
            $src = $value->cover_attribute ? config('site.url')."storage/$value->cover_attribute" :
            asset("storage/images/sem_imagem.png");
            @endphp

            <div class="m-2 rounded col-lg-2 variaveis shadow-1">

              <a data-href="{{$src}}" data-titulo="{{ $product->name }} {{ $value->attributesValues->first()->value }}"
                data-toggle="modal" data-target="#imageProduct" class="img-variavel">
                <div class="p-1 bg-image hover-zoom">
                  <img class="img-fluid" src="{{ $src }}"
                    alt="{{ $product->name }} {{ $value->attributesValues->first()->value }}">
                </div>
              </a>

              <div class="produto-variavel">

                <h6 class="text-center font-weight-bolder font-nunito fosco-text">
                  {{$value->attributesValues->first()->value}}
                </h6>

                @if(intval($value->quantity) > 0 && !$product->sob_consulta )

                <div class="my-4 text-center number-input">
                  <div class="p-1 white d-inline-block">
                    <a onclick="this.parentNode.querySelector('.qty_var').stepDown()" v-on:click="produtoVariavel">
                      <i class="p-2 fas fa-minus text-dark green"></i>
                    </a>
                    <input type="hidden" name="productAttribute[]" value="{{$value->id}}">
                    <input type="number" name="quantity[]" class="qty_var" id="quantity-{{ $value->id }}" min="0"
                      max="{{ $value->quantity }}" value="0" readonly style="min-width: 68px;">
                    <a onclick="this.parentNode.querySelector('.qty_var').stepUp()" v-on:click="produtoVariavel">
                      <i class="p-2 fas fa-plus text-dark green"></i>
                    </a>
                  </div>
                </div>

                @else

                <div class="text-center">
                  <span class="badge badge-danger">Produto Indisponível</span>
                  <a href="{{ route('contato') }}" class="px-0 my-2 btn box-green btn-block font-weight-bold btn-md">
                    Consulte-nos<i class="ml-1 fas fa-comments"></i>
                  </a>
                </div>

                @endif

              </div>

            </div>

            @endforeach

          </div>
          @if(config('site.catalogo_produtos'))
          <a class="float-right text-white btn primary btn-lg font-weight-bolder" role="button"
            href="https://wa.me/{{ config('shop.whatsapp_link') }}?text=Vi este produto no site:{{ $product->name }}"
            target="_blank">
            Consulte um vendedor <i class="ml-1 fas fa-comments"></i>
          </a>
          @else
          @if ( ($product->quantity > 0 && $product->sob_consulta === 0) || $product->attributes->count() > 0 )
          <div class="mb-3 md-form input-group justify-content-end">

            {{-- <label class="ml-1 font-weight-bolder" for="qty">Quant.:</label> --}}
            <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" class="form-control d-none" min="1"
              max="{{ $product->quantity }}" required @if($product->attributes->count() > 0) disabled @endif>
            <div class="input-group-append">
              <button class="rounded btn btn-success btn-md btn-comprar" type="submit" disabled>
                <span class="float-left pr-2 font-weight-bolder border-right">Clique aqui para
                  <span class="h2-responsive"><br> COMPRAR</span>
                </span>
                <span class="float-right pt-3 pl-3">
                  <i class="fas fa-shopping-cart fa-2x"></i>
                </span>
              </button>
            </div>
          </div>
          @endif
          @endif

          @endif
        </div>
        @endif

      </div>

  </div>

  </form>
  </div>

</section>

@include(config('site.domain').'.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>

<script>
  $(document).ready(function(){
    $('.carousel-item').zoom();
  });
</script>

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

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

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

<script type="text/javascript">
  $(document).ready(function () {

    $('select[name=quantity]').on('change', function() {
      let quantity = $(this).val()
      let product = $(this).data('product')
      let attribute = $(this).data('attribute')
      let checkbox = $('input[name=productAttribute]#chk-attribute-'+attribute)

      if(quantity !== '0') {
        checkbox.attr('checked', true)
        $('.btn-comprar').removeAttr('disabled')
      }
      if(quantity === '0')  {
        checkbox.removeAttr('checked')
        $('.btn-comprar').attr('disabled', true)
      }
    })

    $('input[name=productAttribute]').on('click', function() {
      let product = $(this).data('product')
      let attribute = $(this).data('attribute')
      let modalMaxQuantity = $('#quantity-'+attribute).data('maxquantity')
      console.log(modalMaxQuantity)
      if(!this.checked) {
        $('#quantity-'+attribute).val(0)
        $(this).removeAttr('checked')
      } else {
        if(modalMaxQuantity > 0){
          $('#quantity-'+attribute).val(0)
          $(this).attr('checked', 'checked')
        }
      }
    })
  })
</script>

@endsection