@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('/img/company_inner/assets/logo.png') }}')"></div>
						</div>
						<div>
							<p>عروض سقياكم</p>
							<span>
								العديد من العروض اليومية والأسبوعية
							</span>
						</div>
					</div>
				</div>
				<div class="delivery-line">
					<div class="progress">
						<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
					</div>
				</div>
		</section>
		<section class="free-delivery">
			<div class="container">
				<p>
					<span>
						يرجى العلم أنه خاضع لآلية الطلب المعتمدة في سقياكم
					</span>
					<br>
					بحيث يمكن اضافة المنتجات التابعة لنفس الشركة فقط إلى سلة التسوق
				</p>
			</div>
		</section>

		@if ($data['offers']->count())
		<section class="user-tabs">
			<nav class="nav nav-pills justify-content-center company_navs">
				@foreach ($data['companies'] as $company)
				<a class="nav-item nav-link company_nav {{ $loop->index? '' : 'active' }}" data-toggle="tab" href="#c-{{ $company['id'] }}">
					{{ $company['name'] }}
				</a>
				@endforeach
			</nav>
		</section>

		<div class="container-fluid">
			<div class="tab-content">
				@foreach ($data['companies'] as $company)
				<div id="c-{{ $company['id'] }}" class="tab-pane fade {{ $loop->index? '' : 'show active' }}">
					<div class="row">
						<h3 class="company-title">
							عروض "{{ $company['name'] }}"
						</h3>
					</div>
					<div class="row">
						@foreach ($company->offers()->get() as $offer)
						<div class="col-md-4 col-xl-3 single-water">
							<a href="{{ route('website.products.show', ['slug' => $offer['product']->slug]) }}">
								<div class="single-water-product">
									<div class="single-fav title-margin">
										<div class="fav-sale">
											<p class="offer_end_text"></p>
											<input type="hidden" class="offer_end_time" data-id="{{ $offer['product']->id }}" value="{{ $offer['end_time'] }}">
										</div>
										<div class="fav-details">
											<div class="fav-data">
												<div class="fav-data-cantent">
													<div class="fav-pic">
														<div style="background-image: url({{ URL::asset($offer['product']['image']) }});"></div>
													</div>
													<div class="fav-content">
														<p>
															{{ $offer['product']['name'] }}
														</p>
														<span>{{ $offer['product']['company']['name'] }}</span>
													</div>
												
													<div class="fav-price">
														<span class="old-price">{{ $offer['product']['price'] }} ر س</span>
														<span class="new-price">{{ $offer['price'] }} ر س</span>
													</div>
												</div>
											</div>
											@auth
												@if (!Auth::guard('web')->user()->user_carts()->wherePivot('product_id', $offer['product']->id)->count())
												<form action="{{ route('website.carts.store', ['product_id' => $offer['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="{{ $offer['product']->id }}">
															<i class="fas fa-plus"></i>
														</button>
														<input type="number" class="quantity" data-id="{{ $offer['product']->id }}" data-price="{{ $offer['product']->getPrice() }}" id="quantity-{{ $offer['product']->id }}" value="{{ Auth::guard('web')->user()->user_carts()->wherePivot('product_id', $offer['product']->id)->first()->pivot['quantity'] }}">
														<button class="mince decrease-quantity" data-id="{{ $offer['product']->id }}">
															<i class="fas fa-minus"></i>
														</button>
													</div>
												@endif
											@else
											<form action="{{ route('website.carts.store', ['product_id' => $offer['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>
				@endforeach
			</div>
		</div>
		@else
		<section class="user-tabs">
			<h3 class="row h-100 justify-content-center align-items-center">
				نعتذر, انتهت العروض حالياً
			</h3>
		</section>
		@endif

		<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;
			}
			.single-water-product .fav-sale {
				clip-path: unset;
				width: 80%;
			}
			.fav-sale {
				border-radius: 25px 5px;
			}
			@media (max-width: 575.98px) {
				.fav-sale {
					width: 85%!important;
				}
			}

			.nav-pills .nav-link.active, .nav-pills .show>.nav-link, .company_navs a:hover {
				background: #006a8a;
				transition: all .3s ease-in-out;

				color: #fff !important;
				transition: all .3s ease-in-out;
				text-decoration: none;
			}

			/*.company_navs {
				border: 4px solid #006a8a;
				border-radius: 10px;
				display: inline-flex;
				padding: 0px!important;
				display: flex;
				justify-content: center;

			}*/
			.company_navs {
				border: 4px solid #006a8a;
				border-radius: 10px;
				padding: 0px!important;

			}
			
			.company-title {
				margin-right: 2rem;
			}

			.nav-pills .nav-link {
				border-radius: 0;
				/*border-bottom: 4px solid #006a8a;*/
			}
			.user-tabs {
				margin: 4% 10%;
			}
			.offer_end_text {
				font-size: 28px;
				display: inline-block;
				vertical-align: middle;
				line-height: normal;
			}
		</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){
						if (data.status == 'success') {
							$('#quantity-'+product_id).val(data.data);
							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);

							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))));
							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;

						$(".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');
					}
				});
			}
		</script>

		<script type="text/javascript">
			function getTimeRemaining(endtime) {
				const total = Date.parse(endtime) - Date.parse(new Date());
				const seconds = Math.floor((total / 1000) % 60);
				const minutes = Math.floor((total / 1000 / 60) % 60);
				const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
				const days = Math.floor(total / (1000 * 60 * 60 * 24));

				return {
					total,
					days,
					hours,
					minutes,
					seconds
				};
			}

			function initializeClock(element, endtime) {
				// const clock = document.getElementById(element);
				// const daysSpan = clock.querySelector('.days');
				// const hoursSpan = clock.querySelector('.hours');
				// const minutesSpan = clock.querySelector('.minutes');
				// const secondsSpan = clock.querySelector('.seconds');

				function updateClock() {
					const t = getTimeRemaining(endtime);
					// console.log(t)

					var text = '';
					if (t.total > 0) {
						if (t.days > 0) {
							if (t.days > 2 && t.days <= 10) {
								text = t.days + ' أيام';
							} else {
								text = t.days + ' يوم';
							}
						} else {
							text = ('0' + t.hours).slice(-2) + ':'  + ('0' + t.minutes).slice(-2) + ':' + ('0' + t.seconds).slice(-2);
						}

						$(element).parent().find('.offer_end_text').html(text);
					}

					// daysSpan.innerHTML = t.days;
					// hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
					// minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
					// secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

					if (t.total <= 0) {
					  clearInterval(timeinterval);
					}
				}

				// updateClock();
				const timeinterval = setInterval(updateClock, 1000);
			}

			document.querySelectorAll('.offer_end_time').forEach (function (element) {
				// console.log(element)
				const deadline = new Date(element.value);
				initializeClock(element, deadline);
			});
			// const deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
			// console.log(document.getElementsByClassName('offer_end_time')[1])
					// console.log(deadline)
		</script>
@endpush