@extends('layouts.master-voyo')

@section('header')
	<link rel="stylesheet" href="{{URL::asset('site/css/checkbox.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">Gift Ideas</h1>
					<ol class="breadcrumb pull-right">
						<li><a href="#">Home</a></li>
						<li class="active">Gift Ideas</li>
					</ol>
				</div>
			</div>
		</div>
	</header> <!-- END Page Header -->

	<section class="shop-section section-4">
		<div class="container">
			<div class="row mb20">
				<div class="col-md-12">
					<article class="blog-item" >
						<div class="col-sm-12 blog-image full-image">
							<img src="{{ URL::asset('site/images/christmas_opt4.png')}}" alt="">
						</div>
					</article>
				</div>
			</div>
			<div class="row" id="giftidea">
				<div class="col-md-12">
					<h3 class="main-title-gift">Share Your Love This Christmas</h3>
				    <p>
				    	At UP, we understand the importance of appreciating the people in our lives. This year, with a few easy steps, UP makes it simple and convenient for you to spread your love with the ones that you loved most. Mix and match the best items at our customizable section or simply check out our wide range of gift sets ready for the right owners.
				    </p>
				</div>	
			    {{-- <div class="col-md-2">
				    <div class="filter_block">
			            <div class="filtertitle">For</div>
			            <div class="filter-link-box">
				            <div class="filter" data-filter=".gft-him"><i class="fa fa-caret-right"></i>&nbsp; Gifts for Him</div>
				            <div class="filter" data-filter=".gft-her"><i class="fa fa-caret-right"></i>&nbsp; Gifts for Her</div>
				            <div class="filter" data-filter=".gft-kids"><i class="fa fa-caret-right"></i>&nbsp; Gifts for Kids</div>
				        </div>
				    </div>
				</div> --}}
				<div class="col-md-10">
				    <div class="filter_block">
				        <div class="filter_personality">
				            <div class="filtertitle">Personality</div>
				            <div class="filter-link-box">
					            {{-- <div class=	"filter" >
					            	<i class="fa fa-caret-right"></i>
					            </div> --}}
								{!! generateGiftCategoryLists($categories, $parentId=0) !!}
					        </div>
				        </div>
				    </div>
				</div>

				<div class="col-md-2">
				    <div class="filter_block">
				        <div class="pricefilter">
				            <div id="price" class="filtertitle">Price</div>
				            <div class="filter-link-box">
					            <div class="filter" data-filter=".opt-17">
					            	<i class="fa fa-caret-right"></i><a href="{{ URL::to('gift-ideas/Price/20')}} "> &nbsp; Under S$20</a>
					            </div>
					            <div class="filter" data-filter=".opt-18">
					            	<i class="fa fa-caret-right"></i>
									<a href="{{ URL::to('gift-ideas/Price/20to50') }}">
					            	&nbsp; S$20 to S$50</a>
					            </div>
					            <div class="filter" data-filter=".opt-19">
					            	<i class="fa fa-caret-right">
					            	<a href="{{ URL::to('gift-ideas/Price/50to100') }}">
					            	</i>&nbsp; S$50 to S$100
					            	</a>
					            </div>
					            <div class="filter" data-filter=".opt-20">
					            <a href="{{ URL::to('gift-ideas/Price/100') }}">
					            	<i class="fa fa-caret-right"></i>&nbsp; Over S$100
					            </a>
					            </div>
					        </div>
				        </div>
				    </div>
				</div>
				{{-- <div class="col-md-2">
				    <div class="filter_block">
				        <div class="last_filter_block">
				            <div class="filtertitle">Sort by</div>
				            <div class="filter-link-box">
					            <div class="sort best_seller active" data-sort="default">
					            	<i class="fa fa-caret-right"></i>&nbsp; Best Sellers
					            </div>
					            <div class="sort sortByPrice" data-sort="" id="pricefilter">
					            	<i class="fa fa-caret-right"></i>&nbsp; Price 
					            	<span><i class="fa fa-caret-down"></i></span><br/>
					            </div>
					            <div class="sort" data-sort="new:desc">
					            	<i class="fa fa-caret-right"></i>&nbsp; Newest
					            </div>
					       	</div>
				        </div>
				    </div>
				</div> --}}
				<div class="col-md-12 mt10">
					<div class="filter_items"></div>
				</div>
			</div><!-- End Gift Finder -->
		</div>
	</section><!-- End Banner img section -->
	
	<section class="shop-section mt10">
		<div class="container">
			<div class="shop-products" id="Container_filter">
				<div class="giftidea-products">
					<ul class=""> 
						@foreach($products as $product)
						<li class="ribbon-wrapper cate_item ajax_block_product col-xs-11 col-sm-12 col-md-3 col-lg-3 " data-new="2">
							<div class="img_border">
								<div class="left-block">
									<div class="checkbox img-checkbox checkbox-img-success">
				                        <input type="checkbox" class="styled" id="imgcheckbox2" value="option1">
				                        <label></label>
				                    </div><!-- End Checkbox -->
									<a href="#" class="shop_img_block"> 
										<div class="custom-bg product-bg product_image" data-bg="{{ imagePath('products', $product['gallery']) }}"></div>
									</a>
								   	<div class="button-container fly_3 clearfix"> 
								   		<a class="quick-view" href="" rel="nofollow" title="Order Confirmation"> 
								   		<span class="wrap_bg"><i class="fa fa-check"></i> <span class="wrap_text">Order Confirmation</span> </span> </a> 
								    	<a class="exclusive ajax_add_to_cart_button" href="" rel="nofollow" title="Checkout" data-id-product="8">	<span class="wrap_bg"> <i class="fa fa-shopping-cart"></i> <span class="wrap_text">Checkout</span> </span> 
								    	</a>
								    </div>
								</div>
								<div class="right-block product_info2">
			                        <div class="product-name2">
			                       		<h4>
			                       			<a href="">OSIM uSnug Foot Massager OSIM uSnug Foot Massager</a>
			                       		</h4>
			                       		<p></p>
										<p class="normal_price2">S$ 500</p>
										<p class="promo_price2">Now <b class="price-results">S$ 400</b></p>
			                        </div>
			                    </div>
		                   </div>
						</li><!-- End Product Img block -->
						@endforeach
					</ul>
				</div>
			</div><!-- End shop-products -->
			{{-- <div class="">
				<div class="col-sm-12">
					<ul class="pagination">
						<li class="disabled"><a href="#"><i class="fa fa-chevron-left"></i></a></li>
						<li class="active"><a href="#">1</a></li>
						<li><a href="#">2</a></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
						<li><a href="#">5</a></li>
						<li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
					</ul>
				</div>
			</div> --}}
			<div class="row">
                <div class="col-md-12 form-group mt50" align="right">
                    <a type="submit" class="btn btn-orange-o m-right rounded" name="shopping" value="" href="{{URL::to('/gift-wrap')}}">Wrapping Services </a>
                    <a type="submit" class="btn btn-orange m-right rounded" name="shopping" value="" href="{{URL::to('/checkout/process')}}">Confirm Order </a>
                </div>
            </div>
		</div><!-- End Container -->
	</section><!-- End Products section -->

@include('site.bottom-menu')
@stop

@section('footer')
	<script>
		$(function(){
			$('#Container_filter').mixItUp({
				load: {
					filter: 'all'
				},
				multiFilter: 'true',
				animation: {
				      easing: 'ease',
				      duration: 600
			    },
			    controls: {
				      toggleFilterButtons: true,
				      toggleLogic: 'and'
			    },
			    callbacks: {
					onMixFail: function(){
						alert('No items were found matching the selected filters.');
					}
				}
			});
			$('#Container_filter').on('mixEnd', function(e, state){
				$('.filter_items').text(state.totalShow+' elements match the current filter');
			});
		
			// Price sorting
			var ascending = false;
			$('.last_filter_block').on('click','.sortByPrice',function(){
			    var sorted = $('.results-row').sort(function(a,b){
			        return (ascending ==
			            (convertToNumber($(a).find('.price-results').html()) < 
			            convertToNumber($(b).find('.price-results').html()))) ? 1 : -1;
			    });
			    ascending = ascending ? false : true;
			    $('.results').html(sorted);
			});
			var convertToNumber = function(value){
			    return parseFloat(value.replace('S$',''));
			}

			//price sorting icon change
			$('#pricefilter').click(function(){
			    var $this = $(this);
			    var $icon =$('#pricefilter>span>i')
			    // don't proceed if already selected
			    if ( $this.hasClass('active') ) {
			        if ($icon.hasClass('fa-caret-down')){
			          	$icon.removeClass('fa-caret-down').addClass('fa-caret-up');
			        }
			        else {
			          	$icon.removeClass('fa-caret-up').addClass('fa-caret-down');
			        }
			    }
			    var $optionSet = $('#Container_filter');
			    $optionSet.find('.active').removeClass('active');
			    $this.addClass('active');
		    });
		)};
	</script>
@stop