Add calculations on basket

resources/views/Shop/Baskets/basket.blade.php

@@ -23,12 +23,44 @@
 							@foreach ($items as $item)
 								@include('Shop.Baskets.partials.article')
 							@endforeach
+						</div>
 					</div>
 				@endforeach		
 			</div>
 			<div class="col-4">
 				@component('components.card')
-				Tarif appliqué :	
+				<div class="row mb-3">
+					<div class="col-6 text-uppercase">
+						Tarif appliqué
+					</div>
+					<div class="col-6">
+					</div>
+				</div>
+				<div class="row m-3">
+					<div class="col-6">
+						<span id="basket-count"></span> ARTICLES
+					</div>
+					<div class="col-6 text-right">
+						<span id="basket-total"></span> €
+					</div>
+				</div>
+				<div class="row m-3">
+					<div class="col-6">
+						LIVRAISON
+					</div>
+					<div class="col-6 text-right">
+						<span id="shipping">5</span> €
+					</div>
+				</div>
+				<hr>
+				<div class="row m-3"  style="font-size: 1.6em; font-weight: 600;">
+					<div class="col-6">
+						TOTAL TTC
+					</div>
+					<div class="col-6 text-right">
+						<span id="basket-total-shipped"></span> €
+					</div>
+				</div>
 				@endcomponent
 			</div>
 		</div>
@@ -37,13 +69,61 @@
 
 @push('js')
 	<script>
-		$('.basket-quantity').change(function() {
-			var offer_id = $(this).parent('row');
-			console.log(offer_id);
-		});
-		$('.basket-delete').change(function() {
-			var offer_id = $(this).data('id');
-			console.log(offer_id);
-		});
+		function handleBasket() {
+			calculateTotal();
+
+			$('.basket-quantity').change(function() {
+				calculatePrice($(this).parents('.basket-row'));
+			});
+
+			$('.basket-delete').click(function() {
+				var offer_id = $(this).data('id');
+				var data = {offer_id: offer_id, quantity: 0};
+				$.post("{{ route('Shop.Basket.addBasket') }}", data, function() {
+					$('#basket_offer-' + offer_id).remove();
+					calculateTotal();
+				});
+			});
+		}
+
+		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();
+			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()) + 5;
+			$('#basket-total-shipped').html(fixNumber(total_shipped));
+		}
+
+		function fixNumber(value) {
+			return parseFloat(value).toFixed(2);
+		}
+
+		handleBasket();
 	</script>
 @endpush