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

	@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="fosco">
						<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" class="form-control text-center" name="quantity" min="1" max="{{ $cartItem->product->quantity }}" value="{{ $cartItem->qty }}" >
									<div class="input-group-append">
										<button type="submit" class="btn fosco 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="">
							<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"></i>
								</button>
							</form>
						</td>
					</tr>
					@endforeach

				</tbody>
			</table>

			<div class="row">
				<div class="col-lg mb-4">
					<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="fosco">
								<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"></i>
					</a>
					@else
					<a data-toggle="modal" data-target="#modalLRForm" class="btn btn-block box-green"><i class="fas fa-shopping-cart"></i> Finalizar Pedido</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