@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 class="grey lighten-3 my-2 rounded">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a class="font-weight-bold fosco-text" href="{{ route('home') }}"><i class="fas fa-home mr-1"></i>HOME</a></li>
        <li class="breadcrumb-item font-weight-bolder black-text">Meus Produtos</li>
      </ol>
    </nav>
  </div>
</section>

<section>
  
  <div class="container">
    
    @if ($cartItems->count() > 0)
    <div class="row">
      <div class="col-lg my-1 table-responsive ">
        
        <table class="table border table-hover my-3">
          
          <thead>
            <tr class="black-vitas">
              <th style="width:50%"><h4 class="white-text font-weight-bold">Produto</h4></th>
              <th style="width:10%"><h4 class="white-text font-weight-bold">Preço</h4></th>
              <th style="width:8%"><h4 class="white-text font-weight-bold">Quantidade</h4></th>
              <th style="width:22%"><h4 class="white-text font-weight-bold text-center">SubTotal</h4></th>
              <th style="width:10%"></th>
            </tr>
          </thead>
          <tbody>
            @foreach ($cartItems as $cartItem)     
            <tr>
              <td data-th="Produto">
                <div class="row">
                  <div class="col-lg-3">                   
                    <img src="{{ asset($cartItem->cover) }}" width="100%"  class="img-responsive"/>
                  </div>
                  <div class="col-lg-9">
                    <h6 class="font-weight-bolder">{{ $cartItem->name }}</h6>
                    @if($cartItem->options->combination)
                    @foreach($cartItem->options->combination as $combination)
                    <i class="fas fa-check fa-2x green-vitas-text"></i> {{ $combination['value'] }}
                    @endforeach
                    @endif
                  </div>
                </div>
              </td>
              <td data-th="Preço" class="text-center h6">{{ config('cart.currency_symbol') }} {{ number_format($cartItem->price, 2, ',', '.') }}</td>
              <td data-th="Quantidade">
                <form action="{{ route('cart.atualiza') }}" method="POST">
                  {{ csrf_field() }}
                  <div class="md-form input-group mb-3">
                    <input type="hidden" name="method" value="_post">
                    <input type="hidden" name="id" value="{{$cartItem->rowId}}">
                    <input type="number" name="quantity" class="form-control text-center" value="{{$cartItem->qty}}"  min="1" max="{{$cartItem->product->quantity}}">
                    <div class="input-group-append">
                      <button type="submit" class="btn btn-info btn-md m-0 px-3"><i class="fas fa-sync-alt white-text" style="cursor: pointer;"></i></button>
                    </div>
                  </div>
                </form>
              </td>
              <td data-th="Subtotal" class="text-center h6">{{ config('cart.currency_symbol') }} {{ number_format($cartItem->subtotal, 2, ',', '.') }}</td>
              <td class="actions" data-th="Actions">
                <form action="{{ route('cart.destroy', $cartItem->rowId) }}" class="" method="post" id="ExcluiItem_{{ $cartItem->rowId }}">
                  {{ csrf_field() }}
                  <input type="hidden" name="_method" value="delete">
                  <button onclick="return confirm('Tem certeza??')" class="btn red-shadow btn-sm my-0 p white-text"><i class="fas fa-trash"></i></button>
                </form>
              </td>
            </tr>
            
            @endforeach
          </tbody>
        </table>
        <div class="row">
          <div class="col-lg-6 mb-4">
            <a href="{{ url()->previous() }}" class="font-weight-bold red-vitas-text"><i class="fas fa-arrow-left"></i> Continuar Comprando</a>
          </div>
          
          <div class="col-lg table-responsive">
            <table class="table text-center border">
              <thead>
                <tr class="black-vitas">
                  <th class="white-text">Subtotal</th>
                  <th class="white-text">Frete</th>
                  <th class="white-text">Total</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th class="font-weight-bold"><span id="sudTotal">{{ config('cart.currency_symbol') }} {{ number_format($subtotal, 2, ',', '.') }}</span>  <i class="fas fa-plus float-right"></i>
                  </th>
                  <td class="font-weight-bold"><span id="valFrete">{{-- config('cart.currency_symbol') }} {{ number_format($cartItem->options->frete, 2, ',', '.') --}}Ser&aacute; calculado na pr&oacute;xima tela</span> <i class="fas fa-equals float-right red-vitas-text"></i></td>
                  <td class="font-weight-bold red-vitas-text"><span id="valid_price">{{ config('cart.currency_symbol') }} {{ number_format(floatval($total) + floatval($cartItem->options->frete), 2, ',', '.') }}</span> </td>
                </tr>
              </tbody>
            </table>
            @if (auth()->check())
            <button class="btn btn-block green-shadow btn-cart white-text" data-href="{{ route('checkout.index') }}">
              <i class="fas fa-shopping-cart"></i> Finalizar Pedido
            </button>
            @else
            <button data-toggle="modal" data-target="#modalLRForm" class="btn btn-block green-shadow white-text btn-logar">
              <i class="fas fa-shopping-cart"></i> Finalizar Pedido
            </button>
            @endif
          </div>
        </div>
        
      </div>
    </div>
    
    @else
      <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>
        <a href="{{ route('home') }}" class="btn btn-lg box-green">Escolher produtos</a>
      </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 () {
    $('.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()
            }
          })
          
          $('.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