@extends('website.layouts.master')

@section('site_title')نتائج البحث - @endsection
@section('content')
		<section class="page-title water-products-title">
			<div class="container-fluid">
				<div class="row">
					<div class="right-page-title">
						<div class="box-radius">
							<div class="water-icon" style="background-image:url('{{ URL::asset('/assets/website/images/search.png') }}')"></div>
						</div>
						<div>
							<p>نتائج البحث عن منتج</p>
							<span>
								"{{ $keyword }}"
							</span>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section class="water-product">
			<div class="container-fluid">
				<div class="row">
					@foreach($products as $product)
					<div class="col-md-4 col-xl-3 single-water">
						<a href="{{ route('website.products.show', ['slug' => $product->slug]) }}">
							<div class="single-water-product">
								<div class="single-fav title-margin">
									@if ($product->new_price > 0)
									@if (((1 - ($product['new_price']/$product['price'])) * 100) > 0)
									<div class="fav-sale">
										<p>{{ (int) ((1 - ($product['new_price']/$product['price'])) * 100) + 1 }}%</p>
									</div>
									@else
									<div class="fav-sale" style="opacity: 0%">
										<p>0%</p>
									</div>
									@endif
									@else
									<div class="fav-sale" style="opacity: 0%">
										<p>0%</p>
									</div>
									@endif
									<div class="fav-details">
										<div class="fav-data">
											<div class="fav-data-cantent">
												<div class="fav-pic">
													<div style="background-image: url({{ URL::asset($product['image']) }});"></div>
												</div>
												<div class="fav-content">
													<p>
														{{ $product['name'] }}
													</p>
													<span>{{ $product->company['name'] }}</span>
												</div>
											
												<div class="fav-price">
													@if ($product->new_price > 0)
													<span class="new-price">{{ $product['new_price'] }} ر س</span>
													<span class="old-price">{{ $product['price'] }} ر س</span>
													@else
													<span class="new-price">{{ $product['price'] }} ر س</span>
													@endif
												</div>
											</div>
										</div>
										@auth
											@if (!Auth::guard('web')->user()->user_carts()->wherePivot('product_id', $product->id)->count())
											<form action="{{ route('website.carts.store', ['product_id' => $product->id]) }}" method="POST" class="add-to-basket-form">
												@csrf
												<a class="add-to-basket">
													<i class="fas fa-cart-plus"></i>
													 أضف للسلة
												</a>
											</form>
											@else
												<div class="counter" style="display: flex;">
													<button class="pluse increase-quantity" data-id="{{ $product->id }}">
														<i class="fas fa-plus"></i>
													</button>
													<input type="number" class="quantity" data-id="{{ $product->id }}" data-price="{{ $product->getPrice() }}" id="quantity-{{ $product->id }}" value="{{ Auth::guard('web')->user()->user_carts()->wherePivot('product_id', $product->id)->first()->pivot['quantity'] }}">
													<button class="mince decrease-quantity" data-id="{{ $product->id }}">
														<i class="fas fa-minus"></i>
													</button>
												</div>
											@endif
										@else
										<form action="{{ route('website.carts.store', ['product_id' => $product->id]) }}" method="POST" class="add-to-basket-form">
											@csrf
											<a class="add-to-basket">
												<i class="fas fa-cart-plus"></i>
												 أضف للسلة
											</a>
										</form>
										@endauth
									</div>
								</div>
							</div>
						</a>
					</div>
					@endforeach
				</div>
			</div>
		</section>

		<a href="{{ route('website.carts.index') }}" class="shopping-cart">
			<i class="fas fa-cart-plus"></i>
			سلة التسوق
			@guest
			<span class="cart-num">0</span>
			@else
			<span class="cart-num">{{ Auth::guard('web')->user()->user_carts()->count() }}</span>
			@endguest
		</a>
@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;
			}
		</style>
@endpush

@push('page_level_script')
		<script type="text/javascript">
			$(document).on('click','.add-to-basket',function(){
				$(this).parents(".add-to-basket-form").submit();
			});
			$('.increase-quantity').on('click', function() {
				event.preventDefault();
				var product_id				=	$(this).data('id');
				var product_price			=	parseFloat($(this).data('price'));
				var product_quantity		=	parseInt($('#quantity-'+product_id).val());

				var dataString				=	"product_id=" + product_id;

				$.ajax({
					type: "POST",
					url: "/carts/increase",
					data: dataString,
					success: function(data){
						// console.log(data);
						if (data.status == 'success') {
							$('#quantity-'+product_id).val(data.data);
							// $('#total-price-'+product_id).html((data.data * product_price) + ' ر.س.');
							get_remaining_delivery_price();
						}
						if (data.status == 'error') {
							swal('', data.message, data.status);
						}
					}
				});
			});
			$('.decrease-quantity').on('click', function() {
				event.preventDefault();
				var product_id				=	$(this).data('id');
				var product_price			=	parseFloat($(this).data('price'));
				var product_quantity		=	parseInt($('#quantity-'+product_id).val());

				var dataString				=	"product_id=" + product_id;

				if (product_quantity <= 1) {
					$(this).attr('disabled', 'disabled');
				}

				$.ajax({
					type: "POST",
					url: "/carts/decrease",
					data: dataString,
					success: function(data){
						if (data.status == 'success') {
							$('#quantity-'+product_id).val(data.data);
							// $('#total-price-'+product_id).html((data.data * product_price) + ' ر.س.');
							get_remaining_delivery_price();
							if (data.data == 0) {
								location.reload();
							}
						}
						if (data.status == 'error') {
							swal('', data.message, data.status);
						}
					}
				});
			});

			$('.quantity').on('click', function() {
				event.preventDefault();
			});

			$('.quantity').on('keyup', function() {
				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){
						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();
							}
						}
						if (data.status == 'error') {
							swal('', data.message, data.status);
						}
					}
				});
			});

			function get_remaining_delivery_price() {
				$.ajax({
					type: "GET",
					url: "/remaining_delivery_price",
					success: function(data){
						var price = data.data;
					// console.log(price[0]);
					// console.log(price[1]);
					// console.log(price[2]);
						$(".progress-bar").attr('aria-valuenow', price[2]);
						$(".progress-bar").css("width", ((price[1]/price[0])*100) + '%');
						$('#remaining-percent').val(price[1]);
						$('#deliver-price').html('(' + price[2] + ' ر.س.)');
					},
					error: function(data){
						swal('', 'يرجى تسجيل الدخول', 'error');
					}
				});
			}
		</script>
@endpush