@extends('layouts.master-voyo')

@section('header')
<link rel="stylesheet" href="{{ URL::asset('voyo/inc/font-awesome/css/font-awesome.min.css') }}">

<link rel="stylesheet" href="{{ URL::asset('site/css/product.css') }}">
<link rel="stylesheet" href="{{ URL::asset('site/css/test.css') }}">
<link rel="stylesheet" href="{{ URL::asset('site/css/style.css') }}">

@stop

@section('content')

<!-- Global Wrapper -->

	<!-- 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">Cart</li>
				</ol>
			</div>
		</div>
	</div>
</header> <!-- END Page Header -->

	<section class="shop-section cart section-4">
		<div class="container">
			<div class="row">
				<div class="col-sm-12">
					<div class="table-responsive mb30">
						<table id="shop-cart-table" class="table table-hover">
							<thead>
								<tr>
									{{--<th>#</th> --}}
									<th class="col-md-2" >Product</th>
									<th class="col-md-3"></th>
									<th class="col-md-1">Qunatity</th>
									<th class="col-md-2"><span class="pull-right">Price</span></th>
									<th class="col-md-2"><span class="pull-right">Total</span></th>
									<th class="col-md-2" ></th>
								</tr>
							</thead>

							<tbody>
							@if(empty($cart_data))
								<div class="alert alert-2 bg-red alert-dismissable fade in">
								<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
								<i class="fa fa-cubes fa-2x"></i>
								<p>Your cart is empty. <a href="#">Link Style</a></p>
								</div>
							@else
							
							@foreach ( $cart_data as $cart_item )
															<tr>
									{{-- <td>{{$i++}}</td> --}}
									<td>
                            			<div class="pd_img_border">
	                            			<div class="pd_img_wrap">
	                            				<img src="{{ imagePath('products', $cart_item['image']) }}" alt="product">
	                            				
	                            			</div>
                            			</div>
                            		</td>
                            		<td>{{ $cart_item['name']}}</td>
									{{-- <td class="qunatity">
										<input type='text'  value= '{{ $cart_item['qty'] }}' class='qty{{ $cart_item['id'] }}'/>
									</td> --}}
									<td class="qty_input_selection">
										<div class="form-group qty_input" id="product-qty">
										    <input type="number" value='{{ $cart_item['qty']}}' class='qty{{ $cart_item['id']}} form-control pd_qty_input' />
										    <input type="hidden" name="id" value='{{ $cart_item['id']}}'/>
										    <div class="select_arow_qty_wrap">
                                                <i  class="fa fa-caret-up select_up_arw add_product" data-id="{{ $cart_item['id'] }}"></i>
                                                <i class="fa fa-caret-down select_down_arw remove_product" data-id="{{ $cart_item['id'] }}"></i>
                                           </div>
										</div>
                            		</td>
									<td align="right">
										<span>${{ $cart_item['price'] }} </span>

									</td>
									<td align="right"> 
										$ {{ $cart_item['s_total'] }} 
									</td>
									<td align="right">
									  {{-- <a href="#" data-toggle="tooltip" data-id="{{ $cart_item['id'] }}" class='edit'><i class="fa fa-edit"></i></a> --}}
										<a href="{{ url('remove_item',$cart_item['id']) }}" class="btn voyo-btn btn-red" ><i class="fa fa-trash-o"></i>Delete</a>
									</td>
								</tr>

							@endforeach	
								
								<tr>
									<td colspan="4" align="right">
										<span class="color_green"><b>Order Total</b></span>
									</td>
									<td align="right">
										<span class="color_red"><b>${{ $total }} </b></span>
									</td>
									<td>&nbsp;</td>
								</tr>
								@endif
							</tbody>
						</table>

					</div>

					<div align="right">
						<a href="{{url('shop')}}" class="btn btn-new rounded">Continue Shopping</a>
			
						<a href="{{ url('checkout/process') }}" class="btn btn-new rounded">Checkout</a>
					</div>
				</div>
			</div>
		</div>
	</section>
	
	<!-- Footer Wrapper -->
	@stop
	@section('footer')
		<script >
		
				$('.edit').click(function(){
				var id 			= $(this).data("id");
				var qty  		= $('.qty'+id).val();
				var action 		= 'edit';
				var obj			= {"qty":qty,  "id" :id, "action" : action};
				$.ajax({
					type: "GET", 
					url: baseurl+"/cartjs", 
					dataType:'html',
					data: obj ,
					success:function(data){
						location.reload();
					},
					error:function(){ 
						alert("Error!!!!");
					}
				});		

			});
		
		</script>
		<!-- END Footer -->
	<script type="text/javascript">
    $(document).ready(function(){
      // $('.pd_qty_input').val(1);
    //    var up = $('.select_up_arw').attr('id')
    //    console.log(up);
    //    $('#' + up).on('click',function(){
    //         if (isNaN(parseInt($('.pd_qty_input').val()))){$('.pd_qty_input').val(1);}
    //         else {$('.pd_qty_input').val(parseInt($('.pd_qty_input').val())+1);}
            
    //    });
    //    $('.select_down_arw').on('click',function(){
    //         if (isNaN(parseInt($('.pd_qty_input').val()))){$('.pd_qty_input').val(1);}
    //         else {  if(parseInt($('.pd_qty_input').val())<=1){  }
    //                 else {$('.pd_qty_input').val(parseInt($('.pd_qty_input').val())-1);}}
    //    });
    // });
    $('.add_product').on('click', function() {
    	var quantity = $(this).parent().siblings('input.pd_qty_input').val();
    	quantity ++;
    	$(this).parent().siblings('input.pd_qty_input').val(quantity);
    	// var price = $(this).closet('td');
    	var getprice = $(this).parent().parent().parent().next().children('span').html();
    	var price = getprice.replace("$","");
    	console.log(price);
    	var id 			= $(this).data("id");
		var qty  		= quantity;
		var action 		= 'edit';
		var obj			= {"qty":qty,  "id" :id, "action" : action};
		$.ajax({
			type: "GET", 
			url: baseurl+"/cartjs", 
			dataType:'html',
			data: obj ,
			success:function(data){
				location.reload();
			},
			error:function(){ 
				alert("Error!!!!");
			}
		});		

    });

    $('.remove_product').on('click', function() {
    	var quantity = $(this).parent().siblings('input.pd_qty_input').val();
    	if( quantity > 0 ) {
	    	quantity --;
	    	$(this).parent().siblings('input.pd_qty_input').val(quantity);
	    	var getprice = $(this).parent().parent().parent().next().children('span').html();
	    	var price = getprice.replace("$","");
	    	console.log(price);
	    	var id 			= $(this).data("id");
			var qty  		= quantity;
			var action 		= 'edit';
			var obj			= {"qty":qty,  "id" :id, "action" : action};
			$.ajax({
				type: "GET", 
				url: baseurl+"/cartjs", 
				dataType:'html',
				data: obj ,
				success:function(data){
					location.reload();
				},
				error:function(){ 
					alert("Error!!!!");
				}
			});
		}
		else {
			alert('Sorry, your product quantity is 1 now.');
		}

    	if( quantity <= '1' ) { 
    		alert('The product quantity cannot be less than 1');
    		return false;
    	} 
    	
    	quantity --;
    	$(this).parent().siblings('input.pd_qty_input').val(quantity);
    	var getprice = $(this).parent().parent().parent().next().children('span').html();
    	var price = getprice.replace("$","");
    	console.log(price);
    	var id 			= $(this).data("id");
		var qty  		= quantity;
		var action 		= 'edit';
		var obj			= {"qty":qty,  "id" :id, "action" : action};
		$.ajax({
			type: "GET", 
			url: baseurl+"/cartjs", 
			dataType:'html',
			data: obj ,
			success:function(data){
				location.reload();
			},
			error:function(){ 
				alert("Error!!!!");
			}
		});

    });
});
</script>
	@stop
<!-- END Global Wrapper -->