@extends('website.layouts.master')

@section('site_title'){{ $company['name'] }} - @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('/img/company_inner/' . $company['image']) }}')"></div>
						</div>
						<div>
							<p>{{ $company['name'] }}</p>
							<span>
								الحد الأدنى لقيمة المنتجات {{ $company['min_amount'] }} ريال
							</span>
						</div>
					</div>
					@if ($company['banner_image'])
					<div class="page-text">
					</div>
					@endif
				</div>
				<div class="delivery-line">
					<div class="progress">
						@auth
						@if ((Auth::guard('web')->user()->user_carts()->count()) && (Auth::guard('web')->user()->user_carts()->first()->company_id == $company->id))
						<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="{{ App\Models\Cart::get_remaining_price() }}" aria-valuemin="0" aria-valuemax="{{ $company['min_delivery_amount'] }}" style="width: {{ (100 - (App\Models\Cart::get_remaining_price()/$company['min_delivery_amount']) * 100) }}%"></div>
						@else
						<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="{{ $company['min_delivery_amount'] }}" style="width: 0%"></div>
						@endif
						@else
						<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="{{ $company['min_delivery_amount'] }}" style="width: 0%"></div>
						@endauth
					</div>
				</div>
		</section>
		@if ($company['has_free_delivery'])
		<section class="free-delivery">
			<div class="container">
				<p>
					<span>تريد توصيل مجاني ؟</span>
					أضف مزيدا من المنتجات بقيمة 
					@auth
					@if (Auth::guard('web')->user()->user_carts()->count())
					@if (Auth::guard('web')->user()->user_carts()->first()->company_id == $company->id)
					<span id="deliver-price">
						({{ App\Models\Cart::get_remaining_price() }} ر.س.)
					</span>
					@endif
					@else
					<span id="deliver-price">({{ $company['min_delivery_amount'] }} ر.س.)</span>
					@endif
					@else
					<span id="deliver-price">({{ $company['min_delivery_amount'] }} ر.س.)</span>
					@endauth
					لتحصل على توصيل مجاني
				</p>
			</div>
		</section>
		@endif

		<section class="market-filter">
			<div class="container">
				<div class="second-filter">
					<ul>
						@foreach ($categories as $key => $items)
						<li class="single-filter">
							<select class="product_category_id">
								<option value="">اختر {{ $key }}</option>
								<optgroup label="{{ $key }}">
									@foreach ($items as $item)
									<option value="{{ $item->id }}">{{ $item->name }}</option>
									@endforeach
								</optgroup>
							</select>
						</li>
						@endforeach
					</ul>
				</div>
			</div>
		</section>

		<section class="water-product">
			<div class="container-fluid">
				<div class="row">
					@foreach($company['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>{{ $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;
			}
			select {
				/*background: #68D1F5;*/
				/*border-color: #68D1F5;*/
				height: 47px;
				border-radius: 50px;
			}
			.second-filter .single-filter {
				padding: 0px;
			}
			@media (max-width: 575.98px) {
				select {
					height: 32px;
					padding: 0 0.7rem;
					line-height: 13px;
					margin-left: 0;
					flex: 0 0 44%;
					/*max-width: 44%;*/
					margin-bottom: .5rem;
				}
			}
			@media (max-width: 575.98px) {
				.second-filter .single-filter {
					max-width: 30%;
				}
			}
		</style>
@endpush

@push('page_level_script')
		<script type="text/javascript">
			$( window ).on( "load", function(){
				get_remaining_delivery_price();
			});
			$(document).on('click','.add-to-basket',function(){
				$(this).parents(".add-to-basket-form").submit();
			});
			$(document).on('change', '.product_category_id', function() {
				console.log($(this).val());
				var category_id = $(this).val();
				var slug = "{{ $company->slug }}";
				$.ajax({
					type: "GET",
					url: "/products/table",
					data: {
						slug: slug,
						category_id: category_id
					},
					success: function(data){
						if (!!data.status) {
							$('.water-product').empty().html(data.data);
						} else {
							swal('', data.message, 'error');
						}
					}
				});
			});

			$(document).on('click', '.increase-quantity', 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);
						}
					}
				});
			});
			
			$(document).on('click', '.decrease-quantity', 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);
						}
					}
				});
			});

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

			$(document).on('keyup', '.quantity', 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))));
							get_remaining_delivery_price();
							if (data.data == 0) {
								$('#p-'+product_id).parent().parent().parent().parent().parent().parent().fadeOut();
							}
						}
						if (data.status == 'error') {
							swal('', data.message, data.status);
						}
					}
				});
			});
			
			var remaining_price = 0;
			var current_price = 0;
			var total_price = 0;
			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] + ' ر.س.)');
						remaining_price = price[2];
						current_price = price[1];
						total_price = price[0];
						check_free_delivery();
					},
					error: function(data){
						// swal('', 'يرجى تسجيل الدخول', 'error');
					}
				});
			}

			function check_free_delivery() {
				if (current_price >= total_price) {
					$(".water-products-title .page-text h6").hide();
					$(".delivery-line .progress-bar").css("background-color", "#2c9c2c");
					$('.free-delivery p').text(" مبروك لقد حصلت على توصيل مجاني");
				} else {
					$(".water-products-title .page-text h6").show();
					$(".delivery-line .progress-bar").css("background-color", "#006a8a");
					$('.free-delivery p').html(
						'<span>تريد توصيل مجاني ؟</span>'
						+'أضف مزيدا من المنتجات بقيمة '
						+'<span id="deliver-price">'
							+'(' + remaining_price + ' ر.س.)'
						+'</span>'
						+'لتحصل على توصيل مجاني'
					);
				}
			}
		</script>
@endpush