@extends('layouts.front.app')

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

@section('content')

{{-- caso o projeto seja da opera garden, incluir o menu de banner na pagina de carrinho --}}
@if( config('site.domain') === "operagarden")
@include(config('site.domain').'.layouts.front.menu-banner')
@endif
{{-- \caso o projeto seja da opera garden, incluir o menu de banner na pagina de carrinho --}}
@include('layouts.front.shared.modal-cart-loading')
<section>
  <!--Modal: modalEnviaPagamento-->
  <div class="p-5 modal fade" id="modalEnviaPagamento" tabindex="-1" role="dialog" data-backdrop="false">
    <div class="modal-dialog modal-notify modal-warning" role="document">
      <div class="text-center modal-content">
        <div class="modal-header d-flex justify-content-center">
          <p class="heading font-weight-bolder">processando pagamento</p>
        </div>

        <div class="modal-body">
          <i class="mb-4 fas fa-bell fa-4x animated rotateIn"></i>
          <p>
            <span class="txtProcessando font-weight-bolder">Estamos processando seu pagamento, aguarde...</span>
            <div class="spinner-grow text-danger" role="status">
              <span class="sr-only">Carregando...</span>
            </div>
          </p>
        </div>

        <div class="modal-footer flex-center font-weight-bolder">
          Aguarde que esta janela se fechar&aacute; ao concluir o pagamento
        </div>
      </div>

    </div>
  </div>
  <!--Modal: modalEnviaPagamento-->
</section>
<section>
  <div class="container mt-4">
    <nav>
      <ol class="mt-3 breadcrumb grey lighten-3">
        <li class="breadcrumb-item">
          <a class="font-weight-bold fosco-text" href="{{ route('home') }}">
            <i class="mr-1 fas fa-home"></i>Home
          </a>
        </li>
        <li class="breadcrumb-item black-text font-weight-bolder">Meus Produtos</li>
      </ol>
    </nav>
  </div>
</section>

<section>
  <div class="container">

    @if ($cartItems->count() > 0)
    @php
    $color_site = config('site.cor_bootstrap1');
    @endphp
    <div class="">

      <div class="my-1">

        <table class="table my-3 border table-hover table-bordered">

          <thead>
            <tr class="{!! $color_site !!}">
              <th style="width:50%" class="text-center text-white white-text font-weight-bold">PRODUTO </th>
              @if( intval(config('site.mostrar_referencia')) === 1)
              <th style="width:13%" class="text-center text-white white-text font-weight-bold">REFER&Ecirc;NCIA </th>
              @else
              <th style="width:13%" class="text-center text-white white-text font-weight-bold">C&Oacute;DIGO </th>
              @endif
              <th style="width:10%" class="text-center text-white white-text font-weight-bold">PREÇO </th>
              <th style="width:13%" class="text-center text-white white-text font-weight-bold">QUANTIDADE </th>
              <th style="width:17%" class="text-center text-white white-text font-weight-bold">SUBTOTAL </th>
              <th style="width:10%"></th>
            </tr>
          </thead>

          <tbody class="bg-white white">
            @foreach ($cartItems as $cartItem)

            {{-- {{dd($cartItem)}} --}}
            @php
            $dadosProduto = $getProduct->getProdutInfo($cartItem->product->sku);
            @endphp

            <tr>
              <td data-th="Produto">
                <div class="row">

                  <div class="col-lg-3">
                    @php
                    $srcImage = $imageItem->getCover($cartItem->product->sku);
                    if($srcImage) {
                    $src =
                    config('site.url')."storage/products/".$srcImage->file_item_id.(strtolower($srcImage->file_item_extensao));
                    } else {
                    $src = asset('storage/images/img-indisponivel.jpg');
                    }
                    @endphp

                    @foreach($cartItem->product->attributes as $imgVariavel)
                    @if($imgVariavel->id == $cartItem->options->product_attribute_id)
                    @php
                    $src = asset('storage/'.$imgVariavel->cover_attribute)
                    @endphp
                    @endif
                    @endforeach
                    <img src="{{ $src }}" width="100%" class="img-responsive" />
                  </div>

                  <div class="my-auto col-lg-9">
                    @php
                    $link = null;
                    config('cart.link_redirect') ? $link = route('front.get.product', [$cartItem->product->slug,
                    $cartItem->id]) : $link = "#!";
                    @endphp
                    <a href="{{$link}}" @if(config('cart.link_redirect')) target="_blank" @endif>
                      <h6 class="font-weight-normal">{{ $cartItem->name }}</h6>
                    </a>
                    @if($cartItem->options->combination)
                    @foreach($cartItem->options->combination as $combination)
                    <i class="fas fa-check fa-2x fosco-text"></i> {{ $combination['value'] }}
                    @endforeach
                    @endif
                  </div>

                </div>
              </td>

              @if( intval(config('site.mostrar_referencia')) === 1)
              <td data-th="Preço" class="text-center font-weight-normal h6">
                {{ ($dadosProduto->reference) ?? $dadosProduto->sku }}
              </td>
              @else
              <td data-th="Preço" class="text-center font-weight-normal h6">
                {{ $dadosProduto->sku }}
              </td>
              @endif
              <td data-th="Preço" class="text-center font-weight-normal h6">
                {{ config('cart.currency_symbol') }} {{ number_format($cartItem->price, 2, ',', '.') }}
              </td>

              <td data-th="Quantidade">

                {{-- {!! dd($cartItem->product->attributes, $cartItem->options->combination, $cartItem->options->max_quantity) $cartItem->options->max_quantity !!} --}}

                @php
                $max = !$cartItem->options->combination ? $cartItem->product->quantity : $cartItem->product->quantity;
                $min = isset($cartItem->product->ean_qtd) ? $cartItem->product->ean_qtd : 1;
                @endphp

                @foreach($cartItem->product->attributes as $itemVariavel)
                @if (intval($itemVariavel->id) === intval($cartItem->options->product_attribute_id) )
                @php $max = $itemVariavel->quantity @endphp
                @endif
                @endforeach

                <form action="{{ route('cart.atualiza') }}" method="POST">
                  {{ csrf_field() }}
                  <div class="mb-3 border md-form input-group">
                    <input type="hidden" name="method" value="_post">
                    <input type="hidden" name="id" value="{{$cartItem->rowId}}">
                    <input type="number" class="text-center form-control" data-product={{$cartItem->rowId}}
                      name="quantity" min="{{$min}}" max="{{ $max }}"
                      value="@if($cartItem->qty > $max){{ $max }}@else{{ $cartItem->qty }}@endif">
                    <div class="input-group-append">
                      <button type="submit" class="btn {!! $color_site !!} btn-md m-0 px-3"
                        data-submit={{$cartItem->rowId}}>
                        <i class="text-white fas fa-sync-alt white-text pointer"></i>
                      </button>
                    </div>
                  </div>
                </form>

              </td>

              <td data-th="Subtotal" class="text-center font-weight-normal">
                {{ config('cart.currency_symbol') }} {{ number_format($cartItem->subtotal, 2, ',', '.') }}
              </td>

              <td data-th="Actions" class="actions font-weight-normal">
                <form action="{{ route('cart.destroy', $cartItem->rowId) }}" method="post"
                  id="ExcluiItem_{{ $cartItem->rowId }}">
                  {{ csrf_field() }}
                  <input type="hidden" name="_method" value="delete">
                  <button onclick="return confirm('Deseja remover o produto?')"
                    class="my-0 text-white btn box-red btn-sm destroy-cart white-text">
                    <i class="fas fa-trash fa-lg"></i>
                  </button>
                </form>
              </td>

            </tr>

            @endforeach

          </tbody>

        </table>

        <div class="row table-cart">
          <div class="my-auto col-lg-6">

            @if (!config('cart.link_redirect'))
            <a href="{{ route("home") }}" class="text-white font-weight-bold btn btn-lg btn-green white-text">
              @else
              @if(isset($_COOKIE['current_url']))
              <a href="{{ $_COOKIE['current_url'] }}" class="font-weight-bold btn btn-lg btn-green">
                @else
                <a href="{{ route("home") }}" class="font-weight-bold btn btn-lg btn-green">
                  @endif
                  @endif
                  <i class="fas fa-arrow-left"></i> Continuar Comprando
                </a>
          </div>

          <div class="pb-5 mb-3 col-lg table-responsive">
            <table class="table text-center border">
              <thead>
                <tr class="{!! $color_site !!}">
                  @if (config('cart.show_subtotal'))
                  <th class="text-white white-text">SUBTOTAL</th>
                  <th class="text-white white-text">FRETE</th>
                  @endif
                  <th class="text-white white-text">
                    @if (!config('cart.show_subtotal'))
                    <h4><strong>
                        @endif
                        TOTAL
                        @if (!config('cart.show_subtotal'))
                      </strong></h4>
                    @endif
                  </th>
                </tr>
              </thead>
              <tbody class="bg-white white">
                <tr>
                  @if (config('cart.show_subtotal'))
                  <th class="font-weight-bold">
                    <span id="sudTotal">{{ config('cart.currency_symbol') }}
                      {{ number_format($subtotal, 2, ',', '.') }}</span>
                    <i class="float-right fas fa-plus red-text"></i>
                  </th>
                  <th class="font-weight-bold">
                    <span id="valFrete">Ser&aacute; calculado na pr&oacute;xima tela</span>
                    <i class="float-right fas fa-equals"></i>
                  </th>
                  @endif
                  <th class="font-weight-bold red-text">
                    @if (!config('cart.show_subtotal'))
                    <h4><strong>
                        @endif
                        <span id="valid_price">{{ config('cart.currency_symbol') }}
                          {{ number_format(floatval($total) + floatval($cartItem->options->frete), 2, ',', '.') }}</span>
                        @if (!config('cart.show_subtotal'))
                      </strong></h4>
                    @endif
                  </th>
                </tr>
              </tbody>
              @if(intval(config('cart.compra_minima')) > 0 && (floatval($total) + floatval($cartItem->options->frete) <
                intval(config('cart.compra_minima')))) <tfoot>
                <tr>
                  <th class="font-weight-bold h3">Valor mínimo para o pedido: {{ config('cart.currency_symbol') }}
                    {{ number_format(floatval(config('cart.compra_minima')), 2, ",", ".") }} </th>
                </tr>
                </tfoot>
                @endif
            </table>
            @if (auth()->check())

            <button
              class="btn btn-block btn-lg box-green font-weight-bold btn-cart white-text text-white @if(intval(config('cart.compra_minima')) > 0 && (floatval($total) + floatval($cartItem->options->frete) < intval(config('cart.compra_minima')))) disabled @endif"
              data-href="{{ route('checkout.index') }} ">
              Confirmar Dados <i class="fas fa-check-double"></i>
            </button>

            @if(config('site.orcamento_direto'))
            <form action="{{ route('orcamento.store') }}" method="post" onsubmit="openModal()">
              {{ csrf_field() }}
              <input type="hidden" name="filial_id" value="{{ config('site.emp_filial_id') }}">
              <input type="hidden" name="user_id" value="{{ auth()->user()->id }}">
              <button type="submit"
                class="mt-2 text-white btn btn-block btn-lg btn-info font-weight-bold btn-cart white-text">
                Solicitar apenas um orçamento <i class="fas fa-hand-holding-usd"></i>
              </button>
            </form>
            @endif

            @else
            @if(intval(config('site.login.integra_ls.ativa')) === 1)
            <a href="{{ route('autentica.completo') }}"
              class="btn btn-block btn-lg box-green font-weight-bold btn-logar white-text text-white @if(intval(config('cart.compra_minima')) > 0 && (floatval($total) + floatval($cartItem->options->frete) < intval(config('cart.compra_minima')))) disabled @endif">
              Confirmar Dados <i class="ml-1 fas fa-shopping-cart"></i>
            </a>
            @else
            <button data-toggle="modal" data-target="#modalLRForm"
              class="btn btn-block btn-lg box-green font-weight-bold btn-logar white-text text-white @if(intval(config('cart.compra_minima')) > 0 && (floatval($total) + floatval($cartItem->options->frete) < intval(config('cart.compra_minima')))) disabled @endif">
              Confirmar Dados <i class="ml-1 fas fa-shopping-cart"></i>
            </button>
            @endif
            @endif

          </div>
        </div>

      </div>
    </div>

    @else


    <div class="p-3 mb-3 rounded white z-depth-1">
      <div class="p-4 text-center">
        <h3 class="font-weight-bold font-abeezee red-text">Seu carrinho está vazio</h3>
        <p class="font-weight-bolder new-grey">Para continuar comprando, navegue pelas categorias do site ou faça uma
          busca pelo seu produto.</p>
        @if(isset($_COOKIE['current_url']))
        <a href="{{ $_COOKIE['current_url'] }}" class="text-white btn btn-lg white-text box-green">
          @else
          <a href="{{ route('home') }}" class="text-white btn btn-lg white-text box-green">
            @endif
            Escolher produtos</a>
      </div>
    </div>

    @endif

  </div>

</section>

@endsection

@section('js')
<script type="text/javascript" src="{{ asset('js/axios.js') }}" charset="utf-8"></script>
<script type="text/javascript">
  var token = document.head.querySelector('meta[name="csrf-token"]')
        axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content
        $(document).ready(function () {
          function openModal(){
            $("#modalEnviaPagamento").modal('show')
          }

          $('#modalAlertCart').modal( 'hide' )

          $('.btn-cart').on('click', function() {
            window.location.href = $(this).data('href')
          })
          $('.total').hide()

          $('.carousel').carousel()
          $('ul.navbar-nav li.dropdown').hover(function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
          }, function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
          });

          $('.popover-dismiss').popover({
            trigger: 'focus'
          })

          $('.link-categoria').on('click', function(){
            window.location.href = $(this).data('href');
          })

          $('#cepDest').mask ('99999-999')
          $('.aguardeFrete').hide()
          $('.calcularFrete').show()
          $('.frete').hide()

          $('#calcularFrete').on('click', function(e){
            e.preventDefault()
            $('.aguardeFrete').show()
            $('.calcularFrete').hide()
            $('#frete>tbody').html("<tr><td colspan='3'></td></tr>")
            /*Padroes da entrega dos correios*/
            let min_comprimento = {!! config('shipping.correios.min_comprimento') !!}
            let max_comprimento = {!! config('shipping.correios.max_comprimento') !!}
            let min_altura = {!! config('shipping.correios.min_altura') !!}
            let max_altura = {!! config('shipping.correios.max_altura') !!}
            let min_largura = {!! config('shipping.correios.min_largura') !!}
            let max_largura = {!! config('shipping.correios.max_largura') !!}
            let min_peso = {!! config('shipping.correios.min_peso') !!}
            let max_peso = {!! config('shipping.correios.max_peso') !!}

            let cepOrig = {!! str_replace('-', '', config('shop.warehouse.zip')) !!}
            let cepDest = $('#cepDest').val()
            cepDest = cepDest.replace('-', '')

            let quantity = $('input[name=quantity]').val()
            let peso = $('input[name=peso]').val()
            let altura = $('input[name=altura]').val() * 100
            let largura = $('input[name=largura]').val() * 100
            let comprimento = $('input[name=comprimento]').val() * 100
            let preco = $('input[name=subTotal]').val()
            preco = parseFloat(preco)

            console.log(peso)
            let send = true
            if(peso < min_peso){
              peso = min_peso
            } else if (peso > max_peso){
              console.log('Peso ['+ peso +'] excede o valor máximo para entregar pelos correios ' + max_peso)
              send = false
            }
            if(altura < min_altura){
              altura = min_altura
            } else if (altura > max_altura){
              console.log('Altura ['+ altura +'] excede o valor máximo para entregar pelos correios ' + max_altura)
              send = false
            }
            if(largura < min_largura){
              largura = min_largura
            } else if (largura > max_largura){
              console.log('Largura ['+ largura +'] excede o valor máximo para entregar pelos correios ' + max_largura)
              send = false
            }
            if(comprimento < min_comprimento){
              comprimento = min_comprimento
            } else if (comprimento > max_comprimento){
              console.log('Comprimento ['+ comprimento +'] excede o valor máximo para entregar pelos correios ' + max_comprimento)
              send = false
            } else if (cepDest === '') {
              $('.msgCEP').removeClass('alert-danger')
              $('.msgCEP').addClass('alert-warning')
              $('.msgCEP').addClass('show')
              $('#msgCEP').html('Verifique se preencheu corretamente o CEP.')
              send = false
            }

            let url = '/api/calculaEntrega/' + cepDest + '/' + preco + '/' + quantity + '/' + peso + '/' + altura + '/' + largura + '/' + comprimento
            if(send){
              $('.msgCEP').removeClass('show')
              axios.get(url, {headers: {'Accept': 'application/json'}})
              .then((response)=>{
                let retorno = response.data
                let _tableFrete
                let txt_dias
                let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
                $.each(retorno, function( index, fretes ) {
                  $.each(fretes, function( i, frete ) {
                    console.log('Frete', frete)
                    txt_dias = (frete.prazo > 1) ? ' dias úteis' : ' dia útil'
                    let valor = parseFloat(frete.valor)
                    _tableFrete += '<tr>'
                      _tableFrete += '<td>'
                        _tableFrete += '<div class="custom-control custom-radio">'
                          _tableFrete += '<input type="radio" class="custom-control-input" id="'+frete.servico+'" name="tipoEntrega" value="'+frete.codigo+'" aria-selected="true" data-frete="'+valor+'">'
                          _tableFrete += '<label class="custom-control-label" for="'+frete.servico+'">'+frete.descServico+'</label>'
                          _tableFrete += '</div>'
                          _tableFrete += '</td>'
                          _tableFrete += '<td data-th="dia" class="text-center dia">' + frete.prazo + txt_dias+ ' </td>'
                          _tableFrete += '<td data-th="preco" class="text-center preco">' + valor.toLocaleString('pt-BR', formato) + '</td>'
                          _tableFrete += '</tr>'
                        })
                      })

                      $('#frete>tbody').html(_tableFrete)

                      $('.aguardeFrete').hide()
                      $('.calcularFrete').show()
                      $('.frete').show()
                      /**
                      * Insere os valores nos devidos campos após a escolha do frete
                      */
                      $('input[name=tipoEntrega]').on('click', function(){
                        let frete_val = $('input[name=tipoEntrega]:checked').data('frete')
                        let valorFinal = preco + parseFloat(frete_val)
                        let parc_sem_juros = {!! config('cart.parc_sem_juros') !!}
                        let valor_min_parcela = {!! config('cart.valor_min_parcela') !!}
                        let valor_parcela = 0.00
                        let parcela = 0


                        $('input[name=frete]').val(parseFloat(frete_val))
                        $('#valid_price').html(valorFinal.toLocaleString('pt-BR', formato))
                        $('#valFrete').html(frete_val.toLocaleString('pt-BR', formato))
                        $('#numero_parcelas').html(parcela)
                        $('#valor_parcela').html(valor_parcela.toLocaleString('pt-BR'))
                        $('button.btn-comprar').removeClass('disabled')
                        $('button.btn-logar').removeClass('disabled')
                      })

                    }).catch((error)=>{
                      $('.aguardeFrete').hide()
                      $('.calcularFrete').show()
                      $('.msgCEP').removeClass('alert-warning')
                      $('.msgCEP').addClass('alert-danger')
                      $('.msgCEP').addClass('show')
                      $('#msgCEP').html('Erro')
                      $('button.btn-comprar').addClass('disabled')
                      $('button.btn-logar').addClass('disabled')
                      console.log('Error', error)
                      $('.frete').show()
                    })
                  } else {
                    $('.aguardeFrete').hide()
                    $('.calcularFrete').show()
                  }
                })

                $('input[name=quantity]').on('blur', function(){
                  $('#modalAlertCart').modal( 'show' )
                  let cartItem = $(this).data('product')
                  let submit = $('button[data-submit='+cartItem+']')
                  submit.trigger('click')
                })

                $('.btn-comprar').on('click', function(e){
                  e.preventDefault()
                  let frete = $('input[name=frete]').val()
                  /*if(frete === '') {
                    $('.msgCEP').addClass('show')
                    $('#msgCEP').html('Você não escolheu o método de entrega...')
                  } else {*/
                    $('#adicionandoCarrinho').modal( 'show' )
                    $('#adicionandoCarrinho').modal({
                      backdrop: 'static'
                    })
                    $('#toCheckout').submit()
                    /*}*/
                  })

                  $('.avise-me').on('click', function() {
                    let url = "{!! url('api/avise-me') !!}"
                    let sku = $(this).data('sku')

                    let customer_id = $('#user_id_loged').val()

                    if (customer_id === "null") {
                      $('#modalAviso').modal( 'show' )
                      $('#modalAviso').on('show.bs.modal', function (event) {
                        var modal = $(this)
                        modal.find('.modal-title').text('Efetuar Login')
                        modal.find('.modal-body #modal-message').html('Você precisa estar logado para armazenar as informações.')
                      })
                      return false
                    }

                    console.log(sku, customer_id)
                    axios.post(url, {
                      token: token,
                      customer_id: parseInt(customer_id),
                      sku: sku
                    },
                    {
                      /*headers: {'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest','Content-Type': 'application/json'},*/
                      crossDomain: true
                    })
                    .then((response)=>{
                      console.log('Resposta', response.data)
                      console.log('Status', response.status)

                      $('#modalAviso').modal( 'show' )
                      $('#modalAviso').on('show.bs.modal', function (event) {
                        var modal = $(this)
                        modal.find('.modal-title').text('Aviso Gravado')
                        modal.find('.modal-body #modal-message').html('Você será avisado quando este produto chegar.')
                      })
                    }).catch((error)=>{
                      console.log('Error', error)
                    })
                  })

                  $('.item-variavel').on('click', function(){
                    let product_id = $(this).data('product')
                    let price = $('input[name=final_price-'+product_id+'').val()
                    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))
                    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()
                    }
                  })
                  $('.cart-del').on('click', function(e) {
                    e.preventDefault()
                    $('#formDestroy').submit()
                  })
                })
</script>

@endsection