@extends('Shop.layout.layout', [
	'title' => __('Panier'),
])

@section('content')
	@if ($basket)
		<div class="row">
			<div class="col-lg-8 col-md-12">
				<div class="row mb-3">
					<div class="col-4">
						<h1>Panier</h1>
					</div>
					<div class="col-8">
						Livraison à domicile ...<br>
						Commande en ligne et livraison par voie postale. Attention certains produits ne sont pas disponibles en livraison.
						Les sachets disponibles en lignes sont disponibles à la livraison et uniquement quelques plants.
					</div>
				</div>
				@foreach ($basket as $nature => $items)
					<div class="row ml-1 mb-3 p-2 bg-green-light border rounded-lg">
						<div class="col-12">
							<h2 style="font-size: 1.6em;" class="text-uppercase">{{ $nature }}</h2>
							@foreach ($items as $item)
								@include('Shop.Baskets.partials.article')
							@endforeach
						</div>
					</div>
				@endforeach		
			</div>
			<div class="col-lg-4 col-md-12">
				<x-card class='shadow'>
					@include('Shop.Baskets.partials.basketTotal')
					<div class="row m-3">
						<div class="col-12 text-center">
							<a href="{{ route('Shop.Orders.order') }}" class="btn btn-green-dark">COMMANDER</a>
						</div>
					</div>
				</x-card>
			</div>
		</div>
	@else
		<div class="row">
			<div class="col-8">
				<h1>Panier</h1>
				Votre panier est vide
			</div>
		</div>
	@endif
@endsection

@push('js')
	<script>
		function handleBasket() {
			calculateTotal();

			$('.basket-quantity').change(function() {
				var offer_id = $(this).data('id');
				var quantity = $(this).val();
				var $row = $(this).closest('.row');
				updateBasket(offer_id, quantity, function() {
					calculatePrice($row);
					calculateTotal();
				});
			});

			$('.basket-delete').click(function() {
				var offer_id = $(this).data('id');
				updateBasket(offer_id, 0, function() {
					$('#basket_offer-' + offer_id).remove();
					calculateTotal();
				});
			});
		}

		function updateBasket(offer_id, quantity, callback) {
			var data = {offer_id: offer_id, quantity: quantity, update: true};
			$.post("{{ route('Shop.Basket.addBasket') }}", data, callback);
		}

		function calculatePrice($that) {
			var quantity = $that.find('.basket-quantity').val();
			var price = $that.find('.basket-price').text();
			var total_price = fixNumber(quantity * price);
			$that.find('.basket-total-row').html(total_price);
			calculateTotal();
			return total_price;
		}

		function calculateTotal() {
			countBasket();
			var total = 0;
			$('.basket-total-row').each(function() {
				total += parseFloat($(this).text());
			});
			$('#basket-total').html(fixNumber(total));
			calculateTotalShipped();
			refreshBasketTop();
			return total;
		}

		function countBasket() {
			var count = 0;
			$('.basket-quantity').each(function() {
				count += parseInt($(this).val());
			});
			$('#basket-count').html(count);
			return count;
		}

		function calculateTotalShipped() {
			var total_shipped = parseFloat($('#basket-total').html());
			$('#basket-total-shipped').html(fixNumber(total_shipped));
		}

		function fixNumber(value) {
			return parseFloat(value).toFixed(2);
		}

		handleBasket();
	</script>
@endpush