@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 Wrapping Services</h1>
					<ol class="breadcrumb pull-right">
						<li><a href="#">Home</a></li>
						<li class="active">Gift Wrapping Services</li>
					</ol>
				</div>
			</div>
		</div>
	</header> <!-- END Page Header -->
	<section class="shop-section mt10">
		<div class="container">
			<div class="shop-products" id="Container_filter">
				<div class="giftidea-products">
					<ul> 
						<li class="ribbon-wrapper cate_item ajax_block_product col-xs-11 col-sm-12 col-md-3 col-lg-3">
							<div class="img_border">
								<div class="left-block">
									<div class="custom-bg product-bg product_image" data-bg="{{ URL::asset('voyo/images/product/29crossingluggageloqimediumluggagesleevekidsluggage1.jpg')}}">
										<a href="#" class="product_img_block"> 
										</a>
										<span class="img-remove">
				                        	<i class="fa fa-remove"></i>
				                    	</span>
									</div>
									<div class="ribbon-wrapper-red">
										<div class="ribbon-red">50% OFF</div>
									</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.00</p>
										<p class="promo_price2">Now <b>S$ 460.00</b></p>
			                        </div>
			                    </div>
		                   </div>
						</li>
						<li class="ribbon-wrapper cate_item ajax_block_product col-xs-11 col-sm-12 col-md-3 col-lg-3">
							<div class="img_border">
								<div class="left-block">
									<div class="custom-bg product-bg product_image" data-bg="{{ URL::asset('voyo/images/product/osim_usnug.png')}}">
										<a href="#" class="product_img_block"> 
										</a>
										<span class="img-remove">
				                        	<i class="fa fa-remove"></i>
				                    	</span>
									</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.00</p>
										<p class="promo_price2">Now <b>S$ 400.00</b></p>
			                        </div>
			                    </div>
		                   </div>
						</li>
						<li class="ribbon-wrapper cate_item ajax_block_product col-xs-11 col-sm-12 col-md-3 col-lg-3">
							<div class="img_border">
								<div class="left-block">
									<div class="custom-bg product-bg product_image" data-bg="{{ URL::asset('voyo/images/product/osim_usqueeze.png')}}">
										<a href="#" class="product_img_block"> 
										</a>
										<span class="img-remove">
				                        	<i class="fa fa-remove"></i>
				                    	</span>
									</div>
								</div>
								<div class="right-block product_info2">
			                        <div class="product-name2">
			                            <h4><a href="#">OSIM uSqueeze Air Leg Massager</a> </h4>
			                            <p class="normal_price2">S$ 780.00
			                            <p class="promo_price2">Now <b>S$ 340.00</b></p>
			                        </div>
			                    </div>
			                </div>
						</li>
						<li class="ribbon-wrapper cate_item ajax_block_product col-xs-11 col-sm-12 col-md-3 col-lg-3">
							<div class="img_border">
								<div class="left-block">
									<div class="custom-bg product-bg product_image" data-bg="{{ URL::asset('voyo/images/product/osimushapebodyshaper1.png')}}">
										<a href="#" class="product_img_block"> 
										</a>
										<span class="img-remove">
				                        	<i class="fa fa-remove"></i>
				                    	</span>
									</div>
								</div>
								<div class="right-block product_info2">
			                        <div class="product-name2">
			                            <h4><a href="#">OSIM uSqueeze Air Leg Massager</a> </h4>
			                            <p class="normal_price2">S$ 780.00
			                            <p class="promo_price2">Now <b>S$ 240.00</b></p>
			                        </div>
			                    </div>
			                </div>
						</li>
					</ul>
				</div>
				<div class="clearfix"></div>
				<hr/>
				<div class="col-sm-12 col-md-12 mt30 gift-services">
                    <h3 class="main-title mb20">Gift Wrapping Services</h3>
                    <div class="checkbox checkbox-gift-success">
                    	<input type="checkbox" class="styled" name="gift_box" id="gift_box" value="" checked>
                        <label for="gift_box">Golden Gift Box or Wrapping Paper</label>
                        <span class="gift-price pull-right badge badge-color-red-o">S$ 3.80</span>
                    </div>
                    <div class="gift_box col-md-12 mb30">
                        <div class="col-md-4">
                            <img src="{{URL::asset('site/images/giftbox1.png')}}" alt="sample image">
                            <p class="img-label">Sample Image</p>
                        </div>	
                    </div>
                    <div class="clearfix"></div>
                    <hr/>
                    <div class="checkbox checkbox-gift-success mt30">
                        <input type="checkbox" name="gift_card" id="gift_card" value=""  class="styled"> 
                        <label for="gift_card">Gift Card</label>
                        <span class="gift-price pull-right badge badge-color-red-o">S$ 1.20</span>
                    </div>
                    <div class="gift_message col-md-12">
                        <div class="form-group">
                            <label for="message">Type your message</label>
                            <textarea class="form-control" id="message_status" row="3" maxlength="150"></textarea>
                            <div id="text_counter" align="right"></div>
                        </div>
                        <label for="photo">Upload your photo</label>
                        <input id="gift_message" name="gift_message" type="file" multiple class="file-loading">
                    </div>
                </div>
			</div><!-- End shop-products -->
			<div class="row">
                <div class="col-md-12 form-group mt50" align="right">
                    <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 Shop Section -->

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

@section('footer')
	<script>
		$(function(){
	 		// gift checkbox
	 		// $('div.gift_box').hide();
	        $('[type="checkbox"][name="gift_box"]').change(function(){
	          $('div.gift_box').toggle(this.checked).css('transition','all 0.5s ease');
	        });

	 		$('div.gift_message').hide();
			$('[type="checkbox"][name="gift_card"]').change(function(){
			  $('div.gift_message').toggle(this.checked).css('transition','all 0.5s ease');
			});
			// gift card photo upload
			$("#gift_message").fileinput({
			    uploadUrl: "{{ URL::asset('site/images/gift-card-photo/')}}", // server upload 
			    uploadAsync: true,
			    maxFileCount: 1
			});

			// gift message word limit
			var left = 150
	        $('#text_counter').text('Characters left: ' + left);
            $('#message_status').keyup(function () {
	            left = 150 - $(this).val().length;
		            if(left == 0){
		                $('#text_counter').addClass("overlimit");
		            }else{
		                $('#text_counter').removeClass("overlimit");
		            }
	            $('#text_counter').text('Characters left: ' + left);
	        });
		});
	</script>
@stop