@extends('layouts.whitelabel.master')

@section('product-seo')
	@include('marketplaces.product.seo-meta')
@stop

@section('title')
    {{ $product->product_name }}
@stop

@section('header')
	<link rel="stylesheet" href="{{ URL::asset('site/css/product.css') }}">
@stop

@section('content')
	<!-- Page Header -->
	<header class="titlebar titlebar1">
		<div class="container">
			<div class="row">
				<div class="col-sm-12">
					<h1 class="page-title pull-left page-title1">{{ $product->product_name }}</h1>
					<ol class="breadcrumb pull-right">
	                    <li>
		                    <a href='{{ action('Marketplace\MarketplaceController@detail', $marketplace->slug) }}'>
		                        {{ trans('site.Home') }}
		                    </a>
						</li>
						<li class="active">
							<a href='{{ action('Marketplace\ProductController@index', [$marketplace->slug]) }}'>
								{{ trans('site.Products') }}
							</a>
						</li>
						<li class="active">{{ trans('site.Detail') }}</li>
					</ol>
				</div>
			</div>
		</div>
	</header> <!-- END Page Header -->
	
	<section class="shop-section section-4 product_detail">
		<div class="container">
			@include('page_info')
			<div class="row">
				<div class="col-sm-12">
					@if(Session::has('success_sent'))
						<div class="alert alert-success text-center" role="alert">
							<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
							<span class="sr-only">Success:</span>
							{{ Session::get('success_sent') }}
						</div>
					@endif 
				</div>

				<div class="col-sm-7 col-md-9 col-md-push-3 col-sm-push-5 space-left">
					<div class="row mb40">
						<div class="col-sm-12 col-xs-12 col-md-5">
							<div id="owl-shop-lg" class="owl-carousel">
								@foreach($product->ProductGallery as $gallery)
									<div class="ribbon-box owl-item-shop zoom item">
										{{-- Product promotion ribbone --}}
										@if( $product->promotion_label )
											<div class="ribbon"><span>{{ $product->promotion_label }}</span></div>
										@endif
										
										@if( $product->third_party )
											<img src="{{ $gallery->gallery }}" alt="Product">
										@else
											<img src="{{ imagePath('products',$gallery->gallery) }}" alt="Product">
										@endif
									</div>								
								@endforeach
								@if( $product->ProductYoutube )
									@foreach( $product->ProductYoutube as $youtube )
										<div class="owl-item-shop zoom item">
											<iframe class="video-responsive" width="329" height="315" src="https://www.youtube.com/embed/{{ $youtube->youtube }}" frameborder="0" allowfullscreen></iframe>
										</div>
									@endforeach
								@endif	
							</div>

							<div id="owl-shop-th" class="owl-carousel">
								@foreach($product->ProductGallery as $gallery)
									<div class="owl-item-shop item">
										@if( $product->third_party )
											<img src="{{ $gallery->gallery }}" alt="Product">
										@else
											<img src="{{ imagePath('products',$gallery->gallery) }}" alt="Product">
										@endif
									</div>												
								@endforeach
								@if( $product->ProductYoutube )
									@foreach( $product->ProductYoutube as $youtube )
										<div class="item">
											<img src="http://img.youtube.com/vi/{{ $youtube->youtube }}/0.jpg" alt="product">
										</div>
									@endforeach 
								@endif
							</div>
						</div>

						<div class="col-xs-12 col-sm-12 col-md-7">
							<div class="shop-description-product">
								<div class="row brand-title">
									<h3 class="col-md-12 brand-name">
										{{ $product->product_name }}
									</h3>
									
									@if( $product->qr_code )
										<p class="qr-code">
											<img class="product-qr-code" src="{{ getAssestsUrl() . 'products/' . $product->qr_code }}" alt="">
										</p>
									@endif

									<span class="variation-brand-name">
										{{ trans('product.Brand') }} : {{ $product->product_brand }}
									</span>

									@if( $product->type == 'Service' )
										<span class="booking-lead-time">{{ trans('product.Booking_Lead_Time') }} : {{ $product->lead_time_for_booking }}</span>
									@endif

									@if( $product->model_no )
										<span class="variation-model-no">
											{{ trans('product.Model_No') }} : {{ $product->model_no }}
										</span>
									@endif

									<span class="merchant-name">
										{{ trans('product.Seller') }} : {{ $product->Partner->ref_name }}
									</span>
								</div>
								
								@if( $product->type == 'Product' )
									<div class="row rate_border">
										<div class="col-md-12">
											{{ trans('product.Estimated_Delivery') }} : {{ $product->delivery_days }}
										</div>
	 								</div>
 								@endif

 								<div class="row mt10">
 									<div class="col-md-9">
	 									@include('product.price', ['product' => $product])
	 								</div>
 								</div>

 								@include('product.my-point')

								{!! Form::open(['action' => ['Marketplace\CartController@addCart',$marketplace->slug, $product->id], 'class' => 'form-horizontal', 'id' => 'product-detail-form']) !!}

									@if( $product->isSimpleProduct() )
										@include('marketplaces.product.partials.simple-product')
									@elseif( $product->isVariableProduct() )
										@include('marketplaces.product.partials.variable-product')
									@endif

									<div class="col-md-12 mb20">
										<a href="#productEnquiryModal" class="pd_enquiry btn-modal" data-toggle="modal">{{ trans('product.Product_Enquiry') }}</a>
										<a href="{{ action('Marketplace\MarketplaceController@displayDeliveryInfo', $marketplace->slug) }}" style="padding-left:20px;" target="_blank">{{ trans('product.Delivery_Fees') }}</a>
									</div>
								{!! Form::close() !!}

								<div class="col-md-12">
									<div id="social-share"></div>
								</div>

								<!-- Modal HTML -->
								<div id="productEnquiryModal" class="modal fade">
								    <div class="modal-dialog">
								        <div class="modal-content">
								            <div class="modal-header">
								                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								                <h4 class="modal-title">{{ trans('product.Ask_a_Question') }}</h4>
								            </div>
								            <div class="modal-body col-md-12">
								            	{!! Form::open(['action' => ['Marketplace\ProductController@enquiryEmail', $marketplace->slug, $product->id], 'class' => 'form-horizontal', 'id' => 'product-enquiry-form']) !!}
								            		<input type="hidden" name="product_id" value="{{ $product->id }}"/>
									            	<div class="form-group col-md-12">
										                <label for="name">{{ trans('account.Name') }}</label>
										                <input class="form-control" id="name" tabindex="1" name="name" type="text" required>
													</div>
													<div class="form-group col-md-12">
														<label for="email">{{ trans('account.Email') }}</label>
														<input class="form-control" id="email" tabindex="2" name="email" type="email" required>
													</div>
													<div class="form-group col-md-12">
														<label class="comment-box">
															<div class="ask-text">
																{{ trans('product.Product_Enquiry_Text') }}
															</div>
															<textarea name="comment" id="comment" rows="10" class="form-control" required></textarea>
														</label>
													</div>
													<div class="row col-md-12">
								                		<button type="submit" class="btn btn-default">{{ trans('site.Send') }}</button>
								                	</div>
												{!! Form::close() !!}
								            </div>
								            <div class="modal-footer">

								            </div> 
								        </div>
								    </div>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-12">
							
							<ul class="nav nav-tabs shop-sidebar nav-description">
							  	<li class="active"><a href="#tab1" data-toggle="tab">{{ trans('product.Product_Description') }}</a></li>
							  	<li><a href="#tab2" data-toggle="tab">{{ trans('product.Product_Specifications') }}</a></li>
							  	@if( $product->terms_condition )
								  	<li><a href="#tab3" data-toggle="tab">{{ trans('product.Terms_and_Conditions') }}</a></li>
							  	@endif
							</ul>
							
							<div class="tab-content shop">

							  	<div class="tab-pane fade in active" id="tab1">
							 		{!! $product->description !!}
							  	</div>
							  	<div class="tab-pane fade shop-specifications" id="tab2">
								  	<div class="row">
								  		<div class="col-sm-12 col-md-6">
								  			<ul>
									  			@foreach( $product->ProductSpecification as $product_specification)
													<strong><li>{{ $product_specification->specification_title }}</li></strong>
													<br/>												@endforeach	
								  			</ul>
								  		</div>
								  		<div class="col-sm-12 col-md-6">
										
								  		</div>
								  	</div>
							  	</div>
							  	@if( $product->terms_condition )
									<div class="tab-pane fade" id="tab3">
									  	{!! $product->terms_condition !!}
									</div>
								@endif
								
							</div>

						</div>
					</div>
				</div>
				{{-- Sidebar --}}
				@include('marketplaces.product.sidebar')
			</div>
			<div class="row">
				<div class="col-sm-12">
					<h2 class="section-title-2 left">{{ trans('product.Related_Products') }}</h2>
				</div>
			</div>
			<div class="row">
				<div class="row shop-products related-product">
					<ul>
						@foreach($related_products as $key => $related_product)
							<li class="ribbon-box ribbon-wrapper cate_item ajax_block_product col-xs-6 col-sm-6 col-md-4 col-lg-4">
								@if( $related_product->Product->promotion_label )
									<div class="ribbon"><span>{{ $related_product->Product->promotion_label }}</span></div>
								@endif
								
								<div class="img_border">
									<div class="left-block">
									
										@include('product.image', ['marketplace_product' => $related_product])
									
								   		<div class="button-container fly_3 clearfix">
									   		<a class="quick-view" href="{{action('Marketplace\ProductController@show', 
			                       			[$marketplace->slug, $related_product->Product->id]) }}" 
			                       			rel="nofollow" title="Detail View"> 
									   		<span class="wrap_bg"> <i class="fa fa-eye"></i> <span class="wrap_text">{{ trans('site.Detail') }}</span> </span></a>
									   		
									   		<a class="exclusive ajax_add_to_cart_button" href="{{ action('Marketplace\WishController@store', [$marketplace->slug, $related_product->Product->id]) }}" rel="nofollow" title="Add to wishlist" data-id-product="8"> 
									    		<span class="wrap_bg"> <i class="fa fa-heart"></i> <span class="wrap_text">{{ trans('product.Add_to_Wishlist') }}</span> </span>
									    	</a>
								    	</div>
								    	
									</div>
									<div class="right-block product_info2">
			                        	<div class="product-name2">
			                       			<h4>
				                       			<a href="{{ action('Marketplace\ProductController@show', 
			                       			   [$marketplace->slug, $related_product->Product->id]) }}">{!! getExcerpt($related_product->Product->product_name,$startPos=0, $maxLength=50) !!}
				                       			</a>
			                       			</h4>
			                       			<p>{{ $related_product->Product->product_brand }}</p>

			                       			@include('product.price', $related_product->Product)
			                        	</div>
			                    	</div>
		                   		</div>
							</li>
						@endforeach
					</ul>
				</div>
				{{-- keeping session --}}
				
			</div>
		
	</section>
<!-- footer links -->

@include('product.my-point-modal')

@stop
<!-- footer section -->
@section('footer')
	@if( $product->isVariableProduct() )
		@if( $product->third_party )
		<script src="{{ URL::asset('site/js/product/variation-third-party.js') }}"></script>
		@else
		<script src="{{ URL::asset('site/js/product/variation.js') }}"></script>
		@endif
	@else
		<script src="{{ URL::asset('site/js/product/product.js') }}"></script>
	@endif

	<script>
		/** Time picker Range **/
		$('#timepicker').timepicker('setTime', '00:00 AM');
		$('#timepicker2').timepicker('setTime', '00:00 AM');
		$('#timepicker3').timepicker();

		/** Date picker Range **/
		/** for 1 calendar **/
		var nowDate = new Date();
		var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);

		/** for select 2 calendars **/
		$(function() {
			/**
			 * My Point
			 */
			$("#my-point").on("click", function(e) {
				e.preventDefault();
				var marketplace_id = "{{ $marketplace->id }}";
				$.get(baseurl + '/get-my-point/' + marketplace_id, function(data) {
					$('#my-point-modal .modal-body').html( data );
					$('#my-point-modal').modal('show');
				});
			});
			/**
			 * End My Point
			 */

			/**
			 * Product Enquiry Form Handling
			*/
			$('#product-enquiry-form').validate();
			/**
			 * End Product Enquiry Form
			*/
		});

	    $(document).ready(function() {
	      	var sync1 = $("#owl-shop-lg");
	      	var sync2 = $("#owl-shop-th");
	     
	      	sync1.owlCarousel({
	        	singleItem : true,
	        	autoHeight : true,
				slideSpeed : 400,
				navigation: true,
				navigationText:["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],
				pagination:false,
				afterAction : syncPosition,
				responsiveRefreshRate : 200
	      	});
	     
	      	sync2.owlCarousel({
	        	items : 4,
				itemsDesktop      : [1199,4],
				itemsDesktopSmall     : [979,4],
				itemsTablet       : [768,4],
				itemsMobile       : [479,4],
				pagination:false,
				responsiveRefreshRate : 100,
				afterInit : function(el){
					el.find(".owl-item").eq(0).addClass("synced");
				}
	      	});
	     
	      	function syncPosition(el){
	        	var current = this.currentItem;
	        		$("#owl-shop-th")
	          			.find(".owl-item")
	          			.removeClass("synced")
	          			.eq(current)
	          			.addClass("synced")
	        	if($("#owl-shop-th").data("owlCarousel") !== undefined){
	          		center(current)
	        	}
	      	}
	     
	      	$("#owl-shop-th").on("click", ".owl-item", function(e){
	        	e.preventDefault();
	        	var number = $(this).data("owlItem");
	        	sync1.trigger("owl.goTo",number);
	      	});
	     
	      	function center(number){
	        	var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
	        	var num = number;
	        	var found = false;
	        	for(var i in sync2visible){
	          		if(num === sync2visible[i]){
	            	var found = true;
	          	}
	        }
	     
	        if(found===false){
	          	if(num>sync2visible[sync2visible.length-1]){
	            	sync2.trigger("owl.goTo", num - sync2visible.length+2)
	          	}else{
	            	if(num - 1 === -1){
	              	num = 0;
	            }
	            	sync2.trigger("owl.goTo", num);
	          	}
		        } else if(num === sync2visible[sync2visible.length-1]){
		          	sync2.trigger("owl.goTo", sync2visible[1])
		        } else if(num === sync2visible[0]){
		          	sync2.trigger("owl.goTo", num-1)
		        }
	      	}
	   	});

   		$("#social-share").jsSocials({
        	shares: ["facebook", "twitter", "googleplus", "linkedin", "whatsapp"],
        	url: "{{ Request::url() }}",
        });

	</script>
@stop