@extends('website.layouts.master')

@section('site_title'){{ $product['name'] }} - @endsection
@section('content')
		<section class="page-title">
			<div class="container">
				<div class="title-icon">
					<i class="fas fa-leaf"></i>
				</div>
				<div class="page-text">
					<h5 class="mt-0">المنتجات</h5>
					<nav aria-label="breadcrumb">
						<ol class="breadcrumb">
							<li class="breadcrumb-item">
								<a href="{{ route('website.home') }}">
									منتجات المياه
								</a>
							</li>
							<li class="breadcrumb-item">
								<a href="{{ route('website.products.index', ['slug' => $product->company['slug'] ]) }}">
									{{ $product->company['name'] }}
								</a>
							</li>
							<li class="breadcrumb-item active" aria-current="page">
								{{ $product['name'] }}
							</li>
						</ol>
					</nav>
				</div>
			</div>
		</section>
		<section class="product-info water-single-product">
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-5 col-lg-4">
						<div class="product-slider">
							<div class="demo">
								<div class="item">
									<div class="clearfix" style="max-width:474px;">
										<ul id="image-gallery" class="gallery list-unstyled cS-hidden">
											<li data-thumb="{{ URL::asset('/img/product_detail/' . $product['image']) }}">
												<img src="{{ URL::asset($product['image']) }}" />
											</li>
											<li data-thumb="{{ URL::asset('/img/product_detail/' . $product['image']) }}">
												<img src="{{ URL::asset($product['image']) }}" />
											</li>
											<li data-thumb="{{ URL::asset('/img/product_detail/' . $product['image']) }}">
												<img src="{{ URL::asset($product['image']) }}" />
											</li>
										</ul>
									</div>

								</div>

							</div>
						</div>
					</div>
					<div class="col-md-7 col-lg-8">
						<div class="product-details">
							<div class="product-name">
								<div class="product-icons">
									<i class="{{ Auth::check()? Auth::user()->user_wishlist()->wherePivot('product_id', $product->id)->count()? 'fas' : 'far' : 'far' }} fa-heart add_to_wishlist" data-id="{{ $product->id }}" id="wishlist-{{ $product->id }}"></i>
								</div>
								<h5>
									{{ $product['name'] }}
								</h5>
								<h6>
									{{ $product['description'] }}
								</h6>
								<div class="product-price text-left">
									@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>
						<div class="product-choice">
							@auth
								@if (!Auth::guard('web')->user()->user_carts()->wherePivot('product_id', $product->id)->count())
								<div class="add-basket">
									<form action="{{ route('website.carts.store', ['product_id' => $product->id]) }}" method="POST" id="add-to-basket-form">
										@csrf
										<a href="javascript:;" class="basket-button">
											<i class="fas fa-cart-plus"></i>
											أضف الى السلة
										</a>
									</form>
								</div>
								@else
								<div class="add-basket" style="background: rgb(255, 255, 255);">
									<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 product-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>
								</div>
								@endif
							@else
								<div class="add-basket">
									<form action="{{ route('website.carts.store', ['product_id' => $product->id]) }}" method="POST" id="add-to-basket-form">
										@csrf
										<a href="javascript:;" class="basket-button">
											<i class="fas fa-cart-plus"></i>
											أضف الى السلة
										</a>
									</form>
								</div>
							@endauth
						</div>
					
						@if ($product->product_characteristics()->count())
						<section class="salt-percent">
								<div class="percents-p">
									@foreach ($product->product_characteristics()->get() as $product_characteristic)
									<div class="single-salt">
										<span>{{ __('api.products.' . $product_characteristic->name) }}</span>
										<span class="p-percent">{{ $product_characteristic->pivot['value'] }}</span>
									</div>
									@endforeach
								</div>
						</section>
						@endif
					</div>
				</div>

				<section class="latest-offers">
					<div class="container-fluid">
						<div class="companies-title">
							<h4>عروض مشابهة من نفس الشركة</h4>
						</div>
						<!-- Start offers -->
						<div class="offers">
							<div class="row">
								@foreach ($product->featured_products($product->company->id) as $featured_product)
								<div class="col-6 col-md-4 col-lg-3 col-xl-2">
									<div class="single-offer">
										<div class="offer-topbar">
											<i class="{{ Auth::check()? Auth::user()->user_wishlist()->wherePivot('product_id', $featured_product->id)->count()? 'fas' : 'far' : 'far' }} fa-heart add_to_wishlist" data-id="{{ $featured_product->id }}" id="wishlist-{{ $featured_product->id }}"></i>
											@if ($featured_product->new_price > 0)
											@if (((1 - ($featured_product['new_price']/$featured_product['price'])) * 100) > 0)
											<p class="offer-count">
												<span>{{ (int) ((1 - ($featured_product['new_price']/$featured_product['price'])) * 100) + 1 }}%</span>
											</p>
											@else
											<p class="offer-count" style="opacity: 0%">
												<span>0%</span>
											</p>
											@endif
											@else
											<p class="offer-count" style="opacity: 0%">
												<span>0%</span>
											</p>
											@endif
										</div>
										<div class="offer-img" style="background-image:url('{{ URL::asset('/img/related_product/' . $featured_product['image']) }}')"></div>
										<p class="offer-price">
											@if ($featured_product->new_price > 0)
											<span class="new-price">{{ $featured_product['new_price'] }} ر س</span>
											<span class="old-price">{{ $featured_product['price'] }} ر س</span>
											@else
											<span class="new-price">{{ $featured_product['price'] }} ر س</span>
											@endif
										</p>
										<p class="offer-name">
											<a href="{{ route('website.products.show', ['product_id' => $featured_product->id]) }}">
												<span>
													{{ $featured_product['name'] }}
												</span>
											</a>
										</p>
										<form action="{{ route('website.carts.store', ['product_id' => $featured_product->id]) }}" method="POST" class="add-to-basket-form">
											@csrf
											<a class="add-to-basket">
												<i class="fas fa-cart-plus"></i>
												 أضف للسلة
											</a>
										</form>
									</div>
								</div>
								@endforeach
							</div>
						</div>
						<!-- End offers -->
					</div>
				</section>
			</div>
		</section>
@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">
		$('#add-to-cart-button').on('click', function() {
			$('#add-to-cart').submit();
		});
		$('.add-to-basket-form').on('click', function() {
			$('.add-to-basket-form').submit();
		});
		$('.basket-button').on('click', function() {
		    event.preventDefault();
			$('#add-to-basket-form').submit();
		});

		$('.add_to_wishlist').on('click', function() {
			var product_id = $(this).data('id');
			var is_active = $(this).hasClass('fas')? 1 : 0;
			var dataString = "product_id=" + product_id + "&is_active=" + is_active;

			$.ajax({
				type: "POST",
				url: "/wishlist",
				data: dataString,
				success: function(data){
					console.log(data);
					// console.log($('[data-id="stand-out"]').data('id'));
					swal('', data.message, data.status);
					if (data.status == 'success') {
						if (data.is_active) {
							$('#wishlist-' + product_id).removeClass("far fa-heart");
							$('#wishlist-' + product_id).addClass("fas fa-heart");
							// $(".add_to_wishlist").addClass('active');
						} else {
							$('#wishlist-' + product_id).removeClass("fas fa-heart");
							$('#wishlist-' + product_id).addClass("far fa-heart");
							// $(".add_to_wishlist").removeClass('active');
						}
					}
					if (data.status == 'error') {
						if (!data.is_active) {
							$('#wishlist-' + product_id).removeClass("far fa-heart");
							$('#wishlist-' + product_id).addClass("fas fa-heart");
							// $(".add_to_wishlist").addClass('active');
						} else {
							$('#wishlist-' + product_id).removeClass("fas fa-heart");
							$('#wishlist-' + product_id).addClass("far fa-heart");
							// $(".add_to_wishlist").removeClass('active');
						}
					}
				},
				error: function(data){
					swal('', 'يرجى تسجيل الدخول أولا', 'error');
				}
			});
		});

		$('.increase-quantity').on('click', function() {
			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);
						$('#total-price-'+product_id).html((data.data * product_price) + ' ر.س.');
					}
					if (data.status == 'error') {
						swal('', data.message, data.status);
					}
				}
			});
		});
		$('.decrease-quantity').on('click', function() {
			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/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) + ' ر.س.');
						if (data.data == 0) {
							location.reload();
						}
					}
					if (data.status == 'error') {
						swal('', data.message, data.status);
					}
				}
			});
		});
		$('.product-quantity').on('keyup', function() {
			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') {
						$('#quantity-'+product_id).val(data.data);
						$('#total-price-'+product_id).html((data.data * product_price) + ' ر.س.');
						if (data.data == 0) {
							location.reload();
						}
					}
					if (data.status == 'error') {
						swal('', data.message, data.status);
					}
				}
			});
		});
	</script>
@endpush