@extends('layouts.front.app')

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

@section('content')

@php use Illuminate\Support\Str; @endphp

@if ($product)

<section>
  <div class="container my-4">
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <a class="fosco-text font-weight-bold" href="{{ route('home') }}">
            Home <i class="fas fa-caret-right mx-2 mt-1"></i>
          </a>
        </li>
        @if ($product->categoria)
        <li class="breadcrumb-item">
          <a class="fosco-text font-weight-bolder" href="{{ route('front.list.grupo', [$product->categoria->slug, $product->id_grupo]) }}">
            {{ Str::title($product->categoria->name) }} <i class="fas fa-caret-right mx-2 mt-1"></i>
          </a>
        </li>
        <li class="breadcrumb-item">
          <a class="fosco-text font-weight-bolder" href="{{ route('front.list.subgrupoweb', [$product->subCategoria->slug, $product->id_subgrupo]) }}">
            {{ Str::title($product->subCategoria->name) }} <i class="fas fa-caret-right mx-2 mt-1"></i>
          </a>
        </li>
        @endif
        <li class="breadcrumb-item font-weight-bolder text-dark">{{ Str::title($product->name) }}</li>
      </ol>
    </nav>
  </div>
</section>

<section id="all">

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

  <div class="container">

    <div class="row">

      <div class="col-lg">
        <div class="row">

          <div class="col-md-3 d-md-block d-none">

            <ol class="carousel-indicators d-inline-block carousel-lateral">
              @foreach ($product->images as $key => $image)
              <li data-target="#carousel-thumb" data-slide-to="{{ $key }}">
                <img src="{{ config('site.url') }}/storage/{{ $image->src }}" height="75" width="75" class="d-block img-fluid border" alt="{{ $product->name }}">
              </li>
              @endforeach
            </ol>

          </div>

          <div class="col-md">

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

            <div id="carousel-thumb" class="carousel slide detalhes carousel-fade carousel-thumbnails mt-2" data-ride="carousel">

              <div class="carousel-inner" role="listbox">
                @foreach ($product->images as $key => $imagec)
                <div class="carousel-item @if($key === 0) active @endif">
                  <img src="{{ config('site.url') }}/storage/{{ $imagec->src }}" class="img-fluid border rounded" alt="{{ $product->name }}[{{ $key }}]">
                </div>
                @endforeach
              </div>

              <a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
              </a>
              <a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
                <span class="carousel-control-next-icon"></span>
              </a>

              <p class="font-weight-bold mt-3"><i class="fas fa-info-circle orange-text	 mr-1"></i>Imagens meramente ilustrativas</p>
            </div>

          </div>

        </div>

      </div>

      <div class="col-lg">
        <div>
          <h3 class="font-weight-bold fosco-text text-uppercase font-abeezee">{{ $product->name }} <span id="complemento_variacao"></span></h3>
          <p class="my-3">
            <span class="font-weight-bold new-grey mr-2">SKU: <span class="badge badge-info p-1">{{ $product->sku }}</span></span>
            @if($product->reference)
            <span class="font-weight-bold new-grey mx-2">Referência: <span class="badge badge-secondary p-1">{{ $product->reference }}</span></span>
            @endif
          </p>

          <hr>
          @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
          <h4 class="font-weight-bold red-text" id="price_item">
            @if ($product->sob_consulta === 1)
            <strong> Pre&ccedil;o sob consulta </strong>
            @else
            @if ($preco_valido > 0)
            {{ config('cart.currency_symbol') }} {{ number_format($preco_valido, 2, ',','.') }}
            @else
            Preço sob Consulta
            @endif
            @endif
          </h4>

          @if($preco_valido > 0)

          <form action="{{ route('cart.store') }}" method="post">
            {{ csrf_field() }}
            <div class="variaveis-item">
              {{-- {{dd($product->attributes, $product->sku)}} --}}
              @foreach ($product->variavel_type as $ch => $tipo)

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

              <p class="font-weight-bold fosco-text">Selecione as medidas:</p>
              <ul class="nav md-tabs"  role="tablist">
                @foreach ($product->variavel_value as $key => $atributo)
                <li class="nav-item m-1">
                  <a class="nav-link rounded active" data-toggle="tab" href="#home-just" role="tab">{{ $atributo->value }}</a>
                </li>
                @endforeach
              </ul>

              @else

              <div class="tab-content">
                <h6 class="font-weight-bold fosco-text my-2">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">

                    @php
                    $src = $atributo->cover_attribute ? config('site.url')."storage/".$atributo->cover_attribute : config('site.url').'storage/images/img-indisponivel.jpg'
                    @endphp

                    <input type="radio" id="{{ $atributo->id }}" name="productAttribute" value="{{ $atributo->id }}" class="custom-control-input" data-image="{{ $src }}" data-price="{{ $atributo->price }}" data-qty={{ $atributo->quantity }} data-variacao="{{ $atributo->value }}" required>
                    <label for="{{ $atributo->id }}" class="custom-control-label">
                      <img src="{{ $src }}" class="img-fluid rounded img-thumbnail zoom" width="70" alt="{{ $atributo->value }}" data-toggle="tooltip" title="{{ $atributo->value }}">
                    </label>
                  </div>
                  @endforeach
                </div>

              </div>

              @endif

              @endforeach
            </div>


            @if($product->quantity > 0)

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

            <a href="{{route('contato')}}" class="btn btn-lg box-green text-white font-weight-bold btn-block mt-4">
              Entre em contato conosco <i class="fas fa-comments"></i>
            </a>

            @else

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

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

            @endif

            @else

            <h4 class="font-weight-bolder font-abeezee fosco-text">Ops...</h4>
            <h6 class="font-weight-bolder fosco-text">Esse produto encontra-se indisponível</h6>
            <hr>

            @endif

          </form>

          @endif
        </div>
      </div>

    </div>

  </div>

</section>

@include('layouts.front.shared.details-product', ['product' => $product])

@else

<section>
  <div class="container my-5">
    <div class="alert alert-warning font-weight-bolder">
      Item não disponível!
    </div>
  </div>
</section>

@endif

@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 Anonimas comum aos projetos--}}
@include('layouts.front.js.arrowJS')
{{--Arquivo Anonimas comum aos projetos--}}

<script type="text/javascript">
  $(document).ready(function () {
    let $lightbox = $('#showVariacao')
    /*
    $('[data-target="#lightbox"]').on('click', function(event) {
      var $img = $(this).find('img'),
      src = $img.attr('src'),
      alt = $img.attr('alt'),
      css = {
        'max-width': 600,
        'max-height': 600
      };

      $lightbox.find('.close').addClass('hidden')
      $lightbox.find('img').attr('src', src)
      $lightbox.find('img').attr('alt', alt)
      $lightbox.find('img').css(css)
      $lightbox.find('.modal-dialog').attr('style','max-width: 650px; max-height: 650px; width: 650px; height: 650px;')
      $lightbox.find('.modal-content').attr('style','max-width: 650px; max-height: 650px; width: 650px; height: 650px;')
      $lightbox.find('.modal-body').attr('style','max-width: 650px; max-height: 650px; width: 650px; height: 650px;')
    });

    $lightbox.on('shown.bs.modal', function (e) {
      var $img = $lightbox.find('img');

      $lightbox.find('.modal-dialog').css({'width': $img.width()});
      $lightbox.find('.close').removeClass('hidden');
    });
    /**/

    $('input[name=productAttribute]').on('click', function(){
      let productAttribute = $(this).val()
      let price = $(this).data('price')
      let image = $(this).data('image')
      let qty = $(this).data('qty')
      let sob_consulta = "{{$product->sob_consulta}}"
      let variacao = $(this).data('variacao')
      let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
      console.log(image)
      if(parseInt(qty) === 0) {
        $('button[type=submit]').addClass('disabled')
      } else {
        $('button[type=submit]').removeClass('disabled')
      }
      $('#carousel-thumb>div.carousel-inner>div.carousel-item').html('<img src="'+image+'">')
      if(!sob_consulta) $('#price_item').html(price.toLocaleString('pt-BR', formato))
      $('#qty').attr('max', qty)
      $('#qty').val(1)
      $('#complemento_variacao').html(variacao)
    })

  })
</script>

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

@endsection