@extends('layouts.master-voyo')

@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 Preview - {{ $product->product_name }}</h1>
				</div>
			</div>
		</div>
	</header> <!-- END Page Header -->
	
	<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-8 col-md-offset-2">
					<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>
								<div class="row rate_border">
 									<div class="col-md-12 mb10">
	 									<span  class="product_review_tx"><i class="fa fa-eye color_green"></i><small> 0 Reviews</small></span>
	 								</div>
									<div class="col-md-12">
										Estimated Delivery : {{ $product->delivery_days }}
									</div>
 								</div>

 								<div class="row mt40">
 									<div class="col-md-12">
 										<a href="#myModal" data-toggle="modal" class="btn-width btn voyo-btn btn-red icon br2">Product Enquiry</a>
 									</div>
 								</div>

 								
								<!-- 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' => ['PartnerController@catalogueProductEnquiry', $product->Partner->id, $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('partner.catalogue-product-sidebar') --}}
			</div>
		
	</section>
<!-- footer links -->
{{-- @include('site.bottom-menu') --}}

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

@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() {
			/**
			 * My Point
			 */
			
			/**
			 * End My Point
			 */

			/**
			 * 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