@extends('website.layouts.master')

@section('site_title')سلة التسوق - @endsection

@section('left-nav')
								<a class="cart mr-0" href="{{ route('website.home') }}">
									<i class="fas fa-arrow-circle-left"></i>
								</a>
@endsection

@section('content')
		<section class="page-title cart-header">
			<div class="container">
				<div class="row ">
					<div class="col-6">
						<div class="title-icon">
							<i class="fas fa-shopping-basket"></i>
							<h5>سلة التسوق</h5>
						</div>
					</div>
					<div class="col-6 pl-0">
						<div class="page-text">
							<a href="{{ route('website.home') }}" class="back-to-store">العودة لأكمال التسوق</a>
						</div>
					</div>
				</div>
			</div>

		</section>
		<!-- End page title -->
		<!-- Start steps section -->
		<section class="cart-steps">
			<div class="container">
				<!-- steps -->
				<div class="steps">
					<p>
						<span class="check active">
							<i class="fas fa-check"></i>
						</span>
						<span>سلة الطلبات</span>
					</p>
					<p>
						<span class="check">
							<i class="fas fa-check"></i>
						</span>
						<span>مراجعة الطلب</span>
					</p>
					<p>
						<span class="check">
							<i class="fas fa-check"></i>
						</span>
						<span>تنفيذ الطلب</span>
					</p>
				</div>
			</div>
			<!-- steps -->
			<!-- Start cart-1 form -->
			<form action="{{ route('website.orders.create') }}" id="create-order-form">
				<div class="cart-1">
					<div class="container-fluid">
						<div class="row">
							<div class="col-lg-6 cart-table">
								@include('website.includes.cart_table')
							</div>
							<div class="col-lg-6">
								<div class="orders-cart order-location">
									<div class="cart-title">
										<h5>عنوان التوصيل</h5>
										<span>
											<a href="{{ route('website.users.addresses') }}" class="">
												اضافة عنوان جديد
											</a>
										</span>
									</div>
									<div class="locations">
										<h5>اختر عنوان التوصيل</h5>
										<div class="single-location">
											@include('website.includes.cart_addresses', ['cart' => $cart])
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-6">
								<a href="javascript:;" id="order-button" class="next-cart-1">
									<div class="total-orders">
										التالي
										<span>
											الأسعار لا تشمل قيمة الضريبة المضافة
										</span>
										<p>
											<span id="total">
												{{ \App\Models\Cart::get_total_cart_price() }}
											</span>
											ريال
										</p>
									</div>
								</a>
							</div>
						</div>
					</div>
				</div>
			</form>
		</section>
		<div class="modal fade" id="view-address" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title" style="text-align: center; color: #006a8a;" id="myModalLabel">عرض العنوان على الخريطة</h4>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						</button>
						<span aria-hidden="true">&times;</span>
					</div>
					<div class="modal-body">
						<div class="row">
						    {{$cart->pluck('id')}}
							<div id="view-map-canvas"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
@endsection

@push('page_level_style')
	<style type="text/css">
		input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { 
			-webkit-appearance: none;
			direction: ltr;
		}
		.delete-single-location {
			background: #d54850!important;
			width: 60px!important;
			text-align: center!important;
			height: 100%!important;
			display: flex!important;
			align-items: center!important;
			justify-content: center!important;
		}
		#map-canvas {
			width: 90%;
			height: 500px;
		}
		#view-map-canvas {
			width: 90%;
			height: 400px;
			border-radius: 20px;
		}
		#view-map-canvas {
			right: 5%
		}
		@media only screen and (max-width: 479px) {
			#map-canvas, #view-map-canvas {
				width: 90%;
				height: 250px;
			}
		}
		.gift-product {
			padding: 10px 15px;
			background: #2ecc71;
			color: #fff !important;
			border-radius: 10px;
			font-size: 18px;
			width: 75%;
			text-align: center;
			margin-inline: 15%;
		}
		.order-img {
			height: 120px;
		}
		.reward-product .total-price span, .free-pieces {
			background: #d54850;
			color: #fff;
			border-radius: 5px;
			padding: 5px;
			font-size: 14px!important;
		}
		.rewarded-product {
			text-align: center;
		}
		.cart-remove, .fa-times {
			background: #d54850!important;
			color: #fff!important;
			border-radius: 5px;
			padding: 5px;
			font-size: 14px!important;
		}
		.cart-remove:hover, .fa-times:hover {
			background: #fff!important;
			color: #d54850!important;
			border: 2px solid #d54850!important;
		}
	</style>
@endpush

@push('page_level_script')
	<script type="text/javascript">
		$(document).on('click','#order-button',function(){
			$("#create-order-form").submit();
		});
		totalOrders();
		function totalOrders(){
			$.ajax({
				type: "GET",
				url: "/orders/get_total_price",
				success: function(data){
					if (data.status == 'success') {
						result = data.values[0];
						document.getElementById("total").innerHTML = (Number((result).toFixed(2)));
					}
					if (data.status == 'error') {
						swal('', data.message, data.status);
					}
				}
			});
		}

		function get_cart () {
			$.ajax({
				type: "GET",
				url: "/carts",
				success: function(data){
					$('.cart-table').html(data);
				}
			});
		}

		$(document).on('click', '.pluse', function(event) {
			event.preventDefault();
			$(this).parents(".single-order").find(".min-qty").hide();
			var quantity = parseFloat($(this).parents(".order-details").find(".order-quantity").text());
			var orderPrice = parseFloat($(this).parents(".order-details").find(".order-price").text());
			var totalPrice = parseFloat($(this).parents(".single-order").find(".total").text());

			var product_id				=	$(this).data('id');

			var dataString				=	"product_id=" + product_id;
			var product_price			=	$(this).data('price');

			$.ajax({
				type: "POST",
				url: "/carts/increase",
				data: dataString,
				success: function(data) {
					get_cart();
					if (data.status == 'success') {
						$('#p-' + product_id).val(data.data);
						$('#total-' + product_id).html((Number((data.data * product_price).toFixed(2))));
						totalOrders();
					}
					if (data.status == 'error') {
						swal('', data.message, data.status);
					}
				}
			});
		});

		// Mince
		$(document).on('click', '.mince', function(event) {
			event.preventDefault();
			var quantity = parseFloat($(this).parents(".order-details").find(".order-quantity").text());
			var orderPrice = parseFloat($(this).parents(".order-details").find(".order-price").text());
			var totalPrice = parseFloat($(this).parents(".single-order").find(".total").text());

			var product_id				=	$(this).data('id');
			var product_price			=	$(this).data('price');

			var dataString				=	"product_id=" + product_id;

			$.ajax({
				type: "POST",
				url: "/carts/decrease",
				data: dataString,
				success: function(data){
					get_cart();
					if (data.status == 'success') {
						$('#p-' + product_id).val(data.data);
						$('#total-' + product_id).html((Number((data.data * product_price).toFixed(2))));
						if (data.data == 0) {
							$('#p-'+product_id).parent().parent().parent().parent().parent().parent().fadeOut();
						}
						totalOrders();
					}
					if (data.status == 'error') {
						swal('', data.message, data.status);
					}
				}
			});
		});

		$(document).on('change', '.order-quantity', function(event) {
			event.preventDefault();
			var product_id				=	$(this).data('id');
			var product_price			=	parseFloat($(this).data('price'));
			var product_quantity		=	parseInt($(this).val());

			var dataString				=	"product_id=" + product_id + "&quantity=" + product_quantity;

			$.ajax({
				type: "POST",
				url: "/carts/change",
				data: dataString,
				success: function(data){
					get_cart();
					if (data.status == 'success') {
						$('#p-'+product_id).val(data.data);
						$('#total-'+product_id).html((Number((data.data * product_price).toFixed(2))));
						if (data.data == 0) {
							$('#p-'+product_id).parent().parent().parent().parent().parent().parent().fadeOut();
						}
						totalOrders();
					}
					if (data.status == 'error') {
						swal('', data.message, data.status);
					}
				}
			});
		});

		// Remove From Cart
		$(document).on('click', '.cart-remove', function(event) {
			event.preventDefault();
			var product_id				=	$(this).data('id');

			var dataString				=	"product_id=" + product_id;

			swal('تأكيد الحذف من السلة؟', {
				buttons: {
					cancel: "الغاء",
					catch: {
						text: "تأكيد",
						value: true,
					},
				},
				dangerMode: true,
				icon: "warning"
			})
			.then((result) => {
				if (result) {
					$.ajax({
						type: "GET",
						url: "/carts/delete",
						data: dataString,
						success: function(data){
							get_cart();
							totalOrders();
						}
					});
				}
			});
		});

		// Empty Cart
		$(document).on('click', '.empty-cart', function(event) {
			event.preventDefault();

			swal('تأكيد افراغ السلة؟', {
				buttons: {
					cancel: "الغاء",
					catch: {
						text: "تأكيد",
						value: true,
					},
				},
				dangerMode: true,
				icon: "warning"
			})
			.then((result) => {
				if (result) {
					$.ajax({
						type: "GET",
						url: "/carts/empty",
						data: {},
						success: function(data){
							get_cart();
							totalOrders();
						}
					});
				}
			});
		});
	</script>

	<script type="text/javascript">
		var points = [];
		var map;
		var fill_colours = ['#000', '#FF0000', '#395563', '#219dcd', '#000', '#FF0000', '#395563', '#219dcd'];
		function initMap() {
			map = new google.maps.Map(document.getElementById('map-canvas'), {
				center: {
					lat: 24.774265,
					lng: 46.738586
					
				},
				zoom: 6
			});
			$('.all_points').each(function (index, obj) {
				var covered = JSON.parse(this.value);

				var regionPath = new google.maps.Polygon({
					path: covered,
					geodesic: true,
					strokeColor: 'fill_colours[i]',
					strokeOpacity: 1.0,
					strokeWeight: 2,
					fillColor: 'fill_colours[i]',
					fillOpacity: 0.35
				});
				regionPath.setMap(map);
			});
		}

		$(document).on('click', '.view-address', function(event) {
			event.preventDefault();
			var address_id				=	$(this).data('id');

			var dataString				=	"address_id=" + address_id;

			$.ajax({
				type: "POST",
				url: "/addresses/show",
				data: dataString,
				success: function(data){
					var mapProp = {
						center: new google.maps.LatLng(data.latitude, data.longitude),
						zoom: 12,
					};
					var map = new google.maps.Map(document.getElementById("view-map-canvas"), mapProp);

					var marker = new google.maps.Marker({
						map: map,
						position: new google.maps.LatLng(data.latitude, data.longitude),
					});
				}
			});
		});
	</script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmgVVBWPoe_QmTLa_0UCnMUj0aZGlZnsg&{{-- $is_out_of_cover? 'callback=initMap' : '' --}}"></script>
@endpush