{{-- Product Detail --}}
@extends('layouts.master-voyo')

@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">All Time Deals</h1>
					<ol class="breadcrumb pull-right">
						<li><a href="#">Home</a></li>
						<li><a href="#">Shop</a></li>
						<li class="active">Product</li>
					</ol>
				</div>
			</div>
		</div>
	</header> <!-- END Page Header -->

	
		@include('components.userstatus',[
			'type' =>'alert-warning'		
		])
	
	<section class="shop-section section-4 product_detail">
		<div class="container">
			<div class="row">
				<div class="col-sm-12 col-md-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-md-5">
							<div id="owl-shop-lg" class="owl-carousel">
								@foreach($product->ProductGallery as $gallery)
									<div class="owl-item-shop zoom item">
										<img src="{{ imagePath('products',$gallery->gallery) }}" alt="product">
									</div>								
								@endforeach

								@if( $product->ProductYoutube )
									@foreach( $product->ProductYoutube as $youtube )
										<div class="owl-item-shop zoom item">
											<iframe width="420" 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">
										<img src="{{ imagePath('products',$gallery->gallery) }}" alt="product">
									</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-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>
									<span class="variation-brand-name">
										Brand : {{ $product->product_brand }}
									</span>
									@if( $product->model_no )
										<span class="variation-model-no">
											Model No. : {{ $product->model_no }}
										</span>
									@endif
									<span class="merchant-name">
										Seller : {{ $product->Partner->ref_name }}
									</span>
									<div class="col-md-12">
										<h5 class="detail-product-name">
										
										</h5>
									</div>
								</div>
								<div class="row rate_border">
 									<div class="col-md-3 mb10">
	 									<span  class="product_review_tx"><i class="fa fa-eye color_green"></i><small> 0 Reviews</small></span>
	 								</div>
 									<div class="col-md-3">
 										@if($product->preorder == "Yes")
											<span class="stock mb10 label label-warning">
												<i class="fa fa-check"></i> Pre Order Only
											</span>
 										@else
 											{{-- Product is in stock --}}
 											@if( $product->status == 1 )
												<span class="stock mb10 label label-success">
													<i class="fa fa-check"></i> {!! productStatus($product->status) !!}
												</span>
											@else
												{{-- Product is out of stock --}}
												<span class="stock mb10 label label-danger">
													<i class="fa fa-check"></i> {!! productStatus($product->status) !!}
												</span>
											@endif
										@endif
									</div>
									<div class="col-md-6">
										@if($product->product_type=='Product')
																					Estimated Delivery : {{ $delivery_days }} Days
										@endif
									</div>
 								</div>

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

								{!! Form::open(['action' => ['ProductController@addCart', $product->id], 'class' => 'product-detail-form row']) !!}
									<div class="col-md-12 mt20 mb10 mbm25">
								    	<label for="quantity">Quantity</label>
								    	<input type="text" value='1' name="quantity" class='form-control pd_qty_input' />
									    <div class="select_arow_qty_wrap ptd_select_arow_qty_wrap">
									    	<div class="arw-wrap">
									    		<i id="up" class="fa fa-caret-up select_up_arow" data-id=""></i>
									    	</div>
									    	<div class="arw-wrap">
									    		<i id="down" class="fa fa-caret-down select_down_arow" data-id=""></i>
									    	</div>
                                       </div>
									</div>
									@if(count($variation)>0)
										@foreach($variation as $v)                       
											@if(property_exists($v,'name'))
												<div class="col-md-6 mb10 mbm25">
											    	<label for="quantity">{{ucwords($v->name)}}</label>
											    	<br/>
											    	<select class="form-control" name="variation[{{$v->name}}]">
												    	@foreach($v->data as $d)
												    		<option value="{{ $d->description }}">{{ $d->description }}</option>
												    	@endforeach
											    	</select>
												</div>	
									    	@endif
										@endforeach
									@endif
									@if( $product->Addon->count() > 0 )
									<div class="col-lg-12">
										<div class="booking_panel collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo">
								      		<h4 class="addon booking-title panel-title booking-toggle">
								          		Product Options
								      		</h4>
								    	</div>
										<div id="collapseTwo" class="row collapse">
			      							<div class="panel-body">
		      									<div class="alert alert-info alert-dismissable disclaimer-text"
		      										style="display: none">
													Add the following addons for this product
												</div>								    	
										    	@foreach( $product->Addon as $index => $product_addon )
												<div class="row addon-pd">
													<div class="addon-check">
												    	<input name="addons[{{$index}}][id]" 
												    		   value="{{ $product_addon->id }}"       
												    	   	   type="checkbox" style="margin-top: 8px;"
												    	   	   {{ $product_addon->is_complementary ? 'checked' : ''}}>				
												    </div>
												    <div class="row">
												    	<div class="col-lg-12">
														<div class="col-md-2 addon-img" style="max-height: 60px">
															<img src="{{imagePath('product-addons', $product_addon->image)}}"
															     class="thumbnail" style="height: 55px" />
														</div>
														<div class="col-md-8">
															<div class="addon-collapsed">
																<span class="addon-name">
																	{{ $product_addon->product_name }}
																</span>
																<br/>
																<strong class="addon-price">
																    @if($product_addon->is_complementary)
																    	Complimentary
																    @else
																    	${{ number_format($product_addon->up_price, 2) }} 
																    @endif												
																</strong>
															</div>
															<div class="row addon-detail"> 
																<div class="panel-body">
																	<div class="addon-qty mt10">
															    		<!-- <label for="quantity">Quantity</label> -->
															    		<input type="text" value='1' 
															    			   name="addons[{{$index}}][quantity]" 
															    			   class='form-control addon_qty_input' />
																	    <div class="select_arow_qty_wrap">
																	    	<div class="arw-wrap">
																	    		<i class="up fa fa-caret-up select_up_arow" data-id=""></i>
																	    	</div>
																	    	<div class="arw-wrap">
																	    		<i class="down fa fa-caret-down select_down_arow" data-id=""></i>
																	    	</div>
								                                       </div>
																	</div>
																	<div class="addon-desc">
																		<div class="booking_panel collapsed" 
																			 data-toggle="collapse" 
																			 data-parent="#accordion" 
																			 data-target="#collapseDescription">	
																			<a class="booking-toggle">Description</a>
																		</div>
																		<div id="collapseDescription" class="row collapse">
																			<div class="col-md-12">
																				{!! $product_addon->description !!}
																			</div>
																		</div>
																	</div>
																</div>
															</div>
														</div>
														</div>
													</div>													
												</div>
												@endforeach
											</div>
										</div>
									</div>
									@endif
									
									@if($product->product_type == 'Service')
								     	@if( isset($bookingdetail) )
											<div class="clearfix"></div>
											<div class="col-md-12">
												<div class="panel-group booking-boder" id="accordion">
													<div class="booking_panel collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
											      		<h4 class="booking-title panel-title booking-toggle">
											          		Booking Details
											      		</h4>
											    	</div>
														<div id="collapseOne" class="row collapse">
															<div class="alert alert-info alert-dismissable disclaimer-text">
																* You will receive a confirmation from our Partner on the availability of your preferred booking. Alternatively, you may wish to check with us by clicking on the Product Enquiry link below before you place the order.
															</div>
							      							<div class="panel-body">
																@if($bookingdetail->pickup_date == 'From and To')
								      								<div class="col-md-12">
																		<h5>Preferred Date</h5>
																		<div class="book-option ml-book">
																			<div class="form-group col-md-6">
														                		<label for="start" class="label-text">Start Date</label>
																				<div class="input-group" id="datepicker1">
																            		<input type="text" name="b_date" id="dpd1" class="form-control input-small">
																            		<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
																        		</div>
																			</div>
																			<div class="form-group col-md-6">
																				<label for="end" class="label-text">End Date</label>
																				<div class="input-group" id="datepicker2">
																            		<input type="text" name="b_enddate" id="dpd2" class="form-control input-small">
																            		<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
																        		</div>
																			</div>	
																		</div>
								      								</div>
																@elseif($bookingdetail->pickup_date == "Single Date")
																	<!-- For 1 Calender picker -->
																	<div class="col-md-12">
																		<h5>Preferred Date</h5>
																		<div class="input-group" id="datepicker2">
														            		<input type="text" name="b_date" id="dpd2" class="form-control input-small">
														            		<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
														        		</div>
																	</div>
																@endif

																{{-- Time Selection #FromAndTo --}}
																@if($bookingdetail->time_selection == 'From and To')
																	<div class="col-md-12">
																		<h5>Preferred Timing</h5>
																		<div class="book-option ml-book">
																			<div class="form-group col-md-6">
																                <label for="from" class="label-text">From Time</label>
																				<div class="input-group bootstrap-timepicker timepicker">
																		            <input name="b_time" id="timepicker" type="text" class="form-control input-small">
																		            <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
																		        </div>
																			</div>
																			<div class="form-group col-md-6">
																				<label for="to" class="label-text">To Time</label>
																				<div class="input-group bootstrap-timepicker timepicker">
																		            <input name="b_endtime" id="timepicker2" type="text" class="form-control input-small">
																		            <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
																		        </div>
																			</div>
																		</div>
																	</div>
																@elseif($bookingdetail->time_selection == "Customized Time")
																	<!-- Customized Time -->
																	<div class="col-md-12">
																		<h5>Preferred Timing</h5>
																		<div class="book-option">
																            <div class="select_style2">
																		    	<select name="b_time" class="form-control selectpicker2" name="color">
																	    			@foreach(json_decode($bookingdetail->customize_time) as $time)
																	    				<option value="{{ $time }}">{{ $time }}</option>
																	    			@endforeach
																		    	</select>
																	    	</div>
																        </div>
																	</div>
																@elseif($bookingdetail->time_selection == "Single Time")
																	<!-- Single Time -->
																	<div class="col-md-12">
																		<h5>Preferred Timing</h5>
																		<div class="input-group bootstrap-timepicker timepicker book-option">
																            <input type="text" name="b_time" id="timepicker3" class="form-control input-small" value="">
																            <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
																        </div>
																	</div>
																@endif
																
																@if( $info != null )
																	<div class="col-md-12 mt10">
																		@foreach($info as $infos)
																			<div class="book-option">
															                	<label name="infotitle[]" for="pickupadd" class="label-text">
															                		{{ $infos['title'] }}
															                	</label>
															                	<input type="text" class="form-control" 
															                		   name="info[{{ $infos['title'] }}]">
															                </div> 
														                @endforeach
																	</div>
																@endif
																
																@if( $bookingdetail->member_comment == 'Yes' )
																	<div class="col-md-12 mt10">
																		<h5>Additional Comments</h5>
																		<div class="book-option">
																			<textarea name="member_comment" rows="10" class="form-control"></textarea>
																		</div>
																	</div>
																@endif
															</div>
														</div>
												</div>
											</div>
										@endif
									@endif

									<div class="form-group col-md-12">
										<a href="#myModal" class="pd_enquiry btn-modal" data-toggle="modal">Product Enquiry</a>
										<a href="{{URL::to('/delivery')}}" class="pd_enquiry" style="padding-left:20px;" target="_blank">Delivery Fees</a>
									</div>

									<div class="form-group col-md-12">
										<button class="btn-width btn voyo-btn btn-red icon br2"><i class="fa fa-shopping-cart"></i> Add to Cart</button>
										@if(Session::get('wish') && in_array($product->id, array_column(Session::get('wish'),'id')))
											<a disabled href="#" class="btn-width btn voyo-btn add-wish icon br2"><i class="fa fa-heart"></i>Added to Wishlist</a>
										@else
											<a href="{{ URL::to('/product/'.$product->id.'/add-wish')}}" class="btn-width btn voyo-btn add-wish icon br2"><i class="fa fa-heart"></i> Add to Wishlist</a>
										@endif
									</div>
								{!! Form::close() !!}
								<!-- Modal HTML -->
								<div id="myModal" 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">ASK A QUESTION</h4>
								            </div>
								            <div class="modal-body col-md-12">
								            	{!! Form::open(['action' => ['ProductController@enquiryEmail', $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">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">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">
																Please write your question....(min. 50, max. 2000 characters) 
															</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">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">Product Description</a></li>
							  	<li><a href="#tab2" data-toggle="tab">Product Specifications</a></li>
							  	<li><a href="#tab3" data-toggle="tab">Terms and Conditions</a></li>
							</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>
							<div class="tab-pane fade" id="tab3">
							  	{!! $product->terms_condition !!}
							</div>
							</div>
						</div>
					</div>
				</div>

				{{-- Sidebar --}}
				@include('product.sidebar.detail')

			</div>
			<div class="row">
			<div class="col-sm-12">
				<h2 class="section-title-2 left">Related Products</h2>
			</div>
		</div>
		<div class="row">
			<div class="row shop-products related-product">
				<ul>
					@foreach($related_products as $key => $item)
						@foreach($item->ProductGallery as $gallery)
							@if($gallery->default === 'Yes')
								<li class="ribbon-wrapper cate_item ajax_block_product col-xs-11 col-sm-3 col-xs-6 col-md-3 col-lg-3">
									<div class="img_border">
										<div class="left-block">
											
												<a href="{{ action('ProductController@Detail', $item->id) }}" class="shop_img_block"> 
													<div class="custom-bg product-bg product_image" data-bg="{{ imagePath('products',$gallery->gallery)}}">
													</div>
												</a>
											
										   <div class="button-container fly_3 clearfix"> 
											   	<a class="quick-view" href="{{ action('ProductController@Detail', $item->id) }}" rel="nofollow" title="Detail View"> 
											   		<span class="wrap_bg"> 
											   			<i class="fa fa-eye"></i> 
											   			<span class="wrap_text">Detail view</span> 
											   		</span> 
											   	</a> 
											    <a class="exclusive ajax_add_to_cart_button" href="{{ action('ProductController@Detail', $item->id) }}" rel="nofollow" title="Add to cart"> 
											    	<span class="wrap_bg"> 
											    		<i class="fa fa-shopping-cart"></i> 
											    		<span class="wrap_text">Add to cart</span> 
											    	</span> 
											    </a>
										    </div>
										</div>
										<div class="right-block product_info2">
					                        <div class="product-name2">
				                            	<h4 class="related-pd-name"><a href="#">{{ $item->product_name }}</a> </h4>
												
												@include('product.price', ['product' => $item])
												
				                            	<br/>
				                            	@if(isset($item->ProductDiscount) && $item->ProductDiscount->toArray())
													@foreach($item->ProductDiscount as $key => $discount)
														<span class="promo_price2">Now S$<b>{{ number_format($discount->discount_price, 2) }}</b></span>
													@endforeach
												@endif
				                        	</div>
					                    </div>
					                </div>
								</li>
							@endif
						@endforeach
					@endforeach
				</ul>
			</div>
			{{-- keeping session --}}
			
		</div>
		
	</section>
<!-- footer links -->
@include('site.bottom-menu')
@stop
<!-- footer section -->
@section('footer')
	<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() {
			/**
			 * Product Enquiry Form Handling
			*/
			$('#product-enquiry-form').validate();
			/**
			 * End Product Enquiry Form
			*/
			
			var nowTemp = new Date();
			var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
			 
			var checkin = $('#dpd1').datepicker({
				dateFormat: 'dd-mm-yy',
				onClose: function( selectedDate ) {
					$( "#dpd2" ).datepicker( "option", "minDate", selectedDate );
				}
			});
			var checkout = $('#dpd2').datepicker({
				dateFormat: 'dd-mm-yy',
				onClose: function( selectedDate ) {
					$( "#dpd1" ).datepicker( "option", "maxDate", selectedDate );
				}
			});
			
			$('#datepicker1 span').click(function(){
		       $(document).ready(function(){
		           $("#dpd1").datepicker().focus();
		       });
		   	});
			$('#datepicker2 span').click(function(){
		       $(document).ready(function(){
		           $("#dpd2").datepicker().focus();
		       });
		   	});

		   	$('#datepicker3 span').click(function(){
		       $(document).ready(function(){
		           $("#dpd3").datepicker().focus();
		       });
		   	});
		});

		$( "#cat_id1" ).change( function() {
			var cat_id = $(this).val();
			window.location.href = baseurl+"/shop/" + cat_id;
		});
		
		$('.cart_data').click(function(){
			window.location.href = baseurl+"/shop_cart";
		});

	    $(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)
		        }
	      	}
	   	});
		
		$('.pd_qty_input').val(1);
	   	$('#up').on('click',function(){
	        $('.pd_qty_input').val(parseInt($('.pd_qty_input').val())+1);
	   	});
	   	$('#down').on('click',function(){
	        if($('.pd_qty_input').val()<=1) { 
	    		alert('The product quantity cannot be less than 1'); 
	    	}
	        else {
	        	$('.pd_qty_input').val(parseInt($('.pd_qty_input').val())-1);
	        }
	   	});
   		$('.up').on('click', function(){
   			$qty = $(this).closest('.addon-qty').find('input.addon_qty_input');
   			$qty.val(parseInt($qty.val())+1);
   		});
   		$('.down').on('click', function(){
   			$qty = $(this).closest('.addon-qty').find('input.addon_qty_input');
   			if($qty.val()<=1) {
   				alert('The product quantity cannot be less than 1'); 
   			}
   			else {
   				$qty.val(parseInt($qty.val())-1);
   			}
   		});	   	
   		$('.addon-pd').each(function(){
   			$(this).siblings().siblings().find('.addon-detail').hide();
   		});
   		$('.addon-name').click(function() {
   			$(this).parents().parents().siblings('.addon-img').toggleClass('col-md-4 col-md-2').css('transition','ease-out 0.5s');
   			$(this).parents().siblings('.addon-detail').slideToggle( "slow" );
   		});		
	</script>
@stop