@extends('layouts.front.app')

@section('content')

<section>
  <div class="container">
    <nav>
      <ol class="breadcrumb transparent mt-3">
        <li class="breadcrumb-item font-weight-bold">
          <a href="{{ route('home') }}" class="black-text"><i class="fas fa-home"></i> Home</a>
        </li>
        <li class="breadcrumb-item active font-weight-bolder black-text">Meus Produtos</li>
      </ol>
    </nav>
  </div>
</section>

<section>
  @if ($cartItems->count() > 0)
  <div class="container">
    
    <div class="my-3">
      
      <table class="table cart table-bordered table-responsive table-hover my-3">
        
        <thead>
          <tr class="elegant-color">
            <th style="width:50%"><h6 class="white-text font-weight-bold">PRODUTO</h6></th>
            <th style="width:15%"><h6 class="white-text font-weight-bold text-center">PREÇO</h6></th>
            <th style="width:13%"><h6 class="white-text font-weight-bold text-center">QUANTIDADE</h6></th>
            <th style="width:15%"><h6 class="white-text font-weight-bold text-center">SUBTOTAL</h6></th>
            <th style="width:08%"></th>
          </tr>
        </thead>
        
        <tbody>
          @foreach($cartItems as $cartItem)
          <tr>
            <td data-th="Produto">
              <div class="row">
                <div class="col-lg-3">
                  <img src="{{ $cartItem->cover }}" class="img-fluid"/>
                </div>
                <div class="col-lg-9">
                  <h6 class="font-weight-bolder">{{ $cartItem->name }}</h6>
                </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 border 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 elegant-color btn-md m-0 px-3" title="atualizar">
                      <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="">
              <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('Deseja remover o produto?')" class="btn box-red btn-sm my-0">
                  <i class="fas fa-trash white-text fa-lg"></i>
                </button>
              </form>
            </td>
          </tr>
          @endforeach
          
        </tbody>
      </table>
      
      <div class="row">
        <div class="col-lg my-auto">
          <a href="{{ url()->previous() }}" class="font-weight-bold red-text"><i class="fas fa-arrow-left"></i> Continuar Comprando</a>
        </div>
        
        <div class="col-lg mb-3">
          <table class="table text-center border">
            <thead>
              <tr class="elegant-color">
                <th class="white-text">Subtotal</th>
                <th class="white-text">Frete</th>
                <th class="white-text">Total</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="font-weight-bold">{{ config('cart.currency_symbol') }} {{ number_format($subtotal, 2, ',','.') }}
                  <i class="fas fa-plus float-right"></i>
                </td>
                <td><small class="font-weight-bold">Será calculado na próxima tela</small>
                  <i class="fas fa-equals float-right new-grey"></i>
                </td>
                <td class="font-weight-bold red-text">{{ config('cart.currency_symbol') }} {{ number_format($subtotal, 2, ',','.') }}</td>
              </tr>
            </tbody>
          </table>
          @if (auth()->check())
          <a class="btn btn-block box-green btn-cart font-weight-bold" data-href="{{ route('checkout.index') }}">
            Finalizar Pedido<i class="fas fa-shopping-cart ml-2"></i>
          </a>
          @else
          <a data-toggle="modal" data-target="#modalLRForm" class="btn btn-block box-green font-weight-bold">Finalizar Pedido
            <i class="fas fa-shopping-cart ml-2"></i>
          </a>
          @endif
        </div>
      </div>
      
    </div>
  </div>
  
  @else
  <div class="container">
    <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>
  </div>
  @endif
</section>
@endsection
@section('js')
<script type="text/javascript">
	$(document).ready(function () {
		let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }

		$('.minus-item').on('click', function() {
			let idCart = $(this).data('cartId')
			let quantity = $('input[data-cartqty='+idCart+']').val()
			let subTotal  = $('input[data-cartValor='+idCart+']').val()
			let novoValor = parseFloat(quantity) * parseFloat(subTotal)
			console.log(quantity, subTotal,novoValor)

			$('input[data=carttotal'+idCart+'').html(novoValor.toLocaleString('pt-BR', formato) )
		})
	})
</script>
@endsection