[CASE:NO_ACCESS]
		<div class="wrapper main">
			<div class="card content">
				<h1>Niet toegankelijk</h1>
				<p>Helaas, de webshop is niet toegankelijk voor aspirant-leden. Wanneer u gediplomeerd bent en volwaardig lid van de ANVC wordt, krijgt u ook hiertoe toegang.</p>
			</div>
		</div>
[ENDCASE:NO_ACCESS]

[CASE:HAS_ACCESS]


		<div class="wrapper main">
		
			<ul class="breadcrumbs">
				<li><a href="{ROOT_URL}">Home</a></li>
				[REPEATER:BREADCRUMB]
					  <li><a href="{seoname}/">{name}</a></li>
				[ENDREPEATER:BREADCRUMB]
			</ul>
		
			<div class="row">
				<div class="col-8"> 							
						[CASE:HAS_HEADER_IMAGES]							
							<div class="card content"> 								
								<div class="card-header">
									<div class="cycle-slideshow" data-cycle-random="1" data-cycle-slides="> div" data-cycle-fx="tileBlind" >
										[REPEATER:HEADER_IMAGES]
											<div style="background-image:url({image_url})"></div>
										[ENDREPEATER:HEADER_IMAGES]
									</div>
								</div>
							</div>   																
						[ENDCASE:HAS_HEADER_IMAGES]								



						[CASE:SHOW_PRODUCTS]				
							<div data-editable class="editable card content" data-name="heading" id="cmscontent">
								{PAGE_CONTENT}
							</div>
						[ENDCASE:SHOW_PRODUCTS]				

					
						[CASE:SHOW_ERROR]
							<div class="card content">
								{ERRORS}
							</div>
							
						[ENDCASE:SHOW_ERROR]
						
						[CASE:SHOW_ORDER_PLACED]
							<div class="card content">
								<h3>Uw bestelling is geplaatst.</h3>
								<p>Hartelijk dank voor uw bestelling. U ontvangt een bevestiging per e-mail.</p>
							</div>
						[ENDCASE:SHOW_ORDER_PLACED]												
					
			
					[CASE:SHOW_PRODUCTS]
						[CASE:HAS_PRODUCTS]								
								[REPEATER:PRODUCTS]
									<div class="row">
										<div class="card list col-6">
											<a class="art-{id}"></a>
											<!--<div class="card-header" style="background-image:url({image})"></div>-->
											<div class="card-image"><img src="{image}"></div>
											<div class="card-content">
												<h3>{name}</h3>
												<p>{desc}</p>
											</div>
											<small><strong>Inhoud:</strong> {contents}</small>
											<hr>
											<div class="row">
												<div class="col-6"><strong>Prijs:</strong> &euro;{price} per {package}<br><small>exclusief btw</small></div>
												<div class="col-6">																											
													<a href="#" data-productid="{id}" class="add2cart float-right button">In winkelwagen</a>
													<input type="number" name="amount" class="amount2cart" value="1" min="1">														
												</div>
												<div class="clear"></div>
											</div>										
										</div>
										{new_row}
									</div>
															
									[ENDREPEATER:PRODUCTS]
						[ENDCASE:HAS_PRODUCTS]
					[ENDCASE:SHOW_PRODUCTS]
					
					
					[CASE:SHOW_ORDER]
						<div class="card">
							<h3>Overzicht bestelling</h3>
							[CASE:HAS_CART_PRODUCTS]
								<table width="100%" cellspacing="0">
									[REPEATER:CART_PRODUCTS]
										<tr>
											<td>{name}</td>
											<td>{num} <small>x</small></td>
											<td align="right">{price}</td>
											<td align="right">{subtotal}</td>
										</tr>
									[ENDREPEATER:CART_PRODUCTS]
									<tr>
										<td colspan="3" align="right">Subtotaal</td>
										<td align="right">&euro; {total}</td>
									</tr>
									<!--
									<tr>
										<td colspan="3" align="right">Gewicht in {shipping_unit}</td>
										<td align="right">{weight}</td>
									</tr>
									-->
									<tr>
										<td colspan="3" align="right">Verzendkosten</td>
										<td align="right">&euro; {shipping}</td>
									</tr>
									<tr>
										<td colspan="3" align="right">BTW 21%</td>
										<td align="right">&euro; {tax}</td>
									</tr>
									<tr>
										<td colspan="3" align="right"><strong>Totaal</strong></td>
										<td align="right"><strong>&euro; {grandtotal}</strong></td>
									</tr>
								</table>																		
							[ENDCASE:HAS_CART_PRODUCTS]
						</div>
						<form action="" method="post">
							<div class="card">
								<h3>Uw gegevens</h3>
								<div class="row">
									<div class="col-6">
										<div class="form-group">
											<label for="firstname">Voorletters</label>										
											<input type="text" value="{global.user.firstletters}" name="firstletters">
										</div>
									</div>
									<div class="col-6">
										<div class="form-group">
											<label for="lastname">Achternaam</label>
											<input type="text" value="{global.user.lastname}" name="lastname">
										</div>											
									</div>
									<div class="clear"></div>
								</div>
							</div>
							
							
							<div class="card">
								<h3>Afleveradres</h3>
								<div class="form-group">
									<label for="shipping">Maak een keuze</label>
									<select name="shipping" id="shipping">
										<option value="office">Praktijkadres > {OFFICE_ADDRESS}</option>
										<option value="private">Privéadres > {PRIVATE_ADDRESS}</option>
										<option value="alternate">Ander adres</option>												
									</select>
								</div>
								
								<div id="alternate_shipping" class="hidden">
									<div class="form-group">
										<label for="shipping_address_name">(Bedrijfs)naam</label>
										<input type="text" name="shipping_address_name">
									</div>										
									<div class="form-group">
										<label for="shipping_address">Adres</label>
										<input type="text" name="shipping_address">
									</div>
									
									<div class="row">
										<div class="col-6">
											<div class="form-group">
												<label for="shipping_zipcode">Postcode</label>
												<input type="text" name="shipping_zipcode">
											</div>												
										</div>
										<div class="col-6">
											<div class="form-group">
												<label for="shipping_placename">Plaatsnaam</label>
												<input type="text" name="shipping_placename">
											</div>																									
										</div>
										<div class="clear"></div>
									</div>
								</div>
							</div>
								
							<div class="card">
								<h3>Factuuradres</h3>
								<div class="form-group">
									<label for="invoice">Maak een keuze</label>
									<select name="invoice" id="invoice">
										<option value="office">Praktijkadres > {OFFICE_ADDRESS}</option>
										<option value="private">Privéadres > {PRIVATE_ADDRESS}</option>
										<option value="alternate">Ander adres</option>												
									</select>
								</div>
								
								<div id="alternate_invoice" class="hidden">
									<div class="form-group">
										<label for="invoice_address_name">(Bedrijfs)naam</label>
										<input type="text" name="invoice_address_name">
									</div>
									<div class="form-group">
										<label for="invoice_address">Adres</label>
										<input type="text" name="invoice_address">
									</div>
									
									<div class="row">
										<div class="col-6">
											<div class="form-group">
												<label for="invoice_zipcode">Postcode</label>
												<input type="text" name="invoice_zipcode">
											</div>												
										</div>
										<div class="col-6">
											<div class="form-group">
												<label for="invoice_placename">Plaatsnaam</label>
												<input type="text" name="invoice_placename">
											</div>																									
										</div>
										<div class="clear"></div>
									</div>
								</div>
							</div>
							<div class="card">
								<button type="button" onClick="parent.location='webwinkel/'" class="button float-left">Terug</button>
								
								
									<button type="submit" class="button float-right">Bestelling afronden</button>
								
								
								<div class="clear"></div>
							</div>								
						</form>								
					[ENDCASE:SHOW_ORDER]
							
				</div>
				
				<div class="col-4" id="sidebar">
					<div class="sticky">						
						<div class="card">
							[CASE:SHOW_PRODUCTS]
								<h3><i class="fa fa-shopping-cart"></i> Winkelwagen</h3>	
								<div id="cartContent"></div>
								<div class="spacer-24"></div>
									<a id="next" href="{ROOT_URL}webwinkel/bestellen/" class="float-right button hidden">Bestellen <i class="fa fa-arrow-right"></i></a>
								<div class="clear"></div>   					
							[ENDCASE:SHOW_PRODUCTS]
							[CASE:SHOW_ORDER]
								<p>Wanneer u de bestelling plaatst gaat u akkoord met de algemene leveringsvoorwaarden en heeft u een betaalverplichting.</p>
							[ENDCASE:SHOW_ORDER]								
						</div>    
					</div>                                                                
				</div>
				<div class="clear"></div>
			</div>
		
		</div>
		
<link rel="stylesheet" type="text/css" href="{TEMPLATEFOLDER}css/jquery-ui.min.css">
<script src="{TEMPLATEFOLDER}javascript/jquery-ui.min.js"></script>
<script>
$(function(){
	
	
	$('a.smoothScroll').click(function(e){
		e.preventDefault();

		$('html, body').animate({
			scrollTop: $('.'+$(this).attr('id')).offset().top -96
		}, 500);		

	})
	
/**/
$(".sticky").sticky({
	topSpacing:80,
	bottomSpacing:200
});
/**/

$('#shipping').on('change', function(){
	if( $(this).val() == 'alternate' ) {
		$('#alternate_shipping').slideDown();
	}else{
		$('#alternate_shipping').slideUp();
	}
});
$('#invoice').on('change', function(){
	if( $(this).val() == 'alternate' ) {
		$('#alternate_invoice').slideDown();
	}else{
		$('#alternate_invoice').slideUp();
	}
});	

readCart();

$('a.add2cart').click(function(e){
	e.preventDefault();
	el = $(this);
	$.ajax({
		url:	  'includes/ajax.handler.php',
		type:	  'POST',
		dataType: 'json',
		data:	  'method=add2cart&product_id='+$(el).data('productid')+'&amount='+$(el).parent().find('.amount2cart').val(),
		success: function(result){
			if( result.status == 200 ) {
				$(el).parent().effect( 'transfer', {to: '#cartContent',className: "ui-effects-transfer"} , 500, function(){
					$('#cartContent').effect('highlight');
				});
				readCart();
			}
		}
	});
});

$(document).on('click','.removeFromCart',function(e){
	e.preventDefault();
	el = $(this);
	$.ajax({
		url:	  'includes/ajax.handler.php',
		type:	  'POST',
		dataType: 'json',
		data:	  'method=removeFromcart&product_id='+$(el).data('productid'),
		success: function(result){
			if( result.status == 200 ) {
				readCart();
			}
		}
	});
});

function readCart() {
	$.ajax({
		url:	  'includes/ajax.handler.php',
		type:	  'POST',
		dataType: 'json',
		data:	  'method=readCart',
		success: function(result){
			if( result.status == 200 ) {
				if(result.cart !== false) {
					var cartHtml = '<table width="100%" cellspacing="0">';
					$.each(result.cart.products, function(id, productCollection) {
						cartHtml+= '<tr>';
						cartHtml+= '	<td>'+productCollection.product.name+'</td>';
						cartHtml+= '	<td>'+productCollection.num+'x</td>';
						cartHtml+= '	<td width="90" align="right"><a href="#" class="button small removeFromCart" data-productid="'+productCollection.product.id+'">verwijder 1</a></td>';							
						cartHtml+= '</tr>';
					});
					cartHtml+= '<table>';
					cartHtml+= '<div class="spacer-24"></div>';
					cartHtml+= '<p class="text-align-right">Totaalprijs: <strong>&euro; '+result.cart.total+'</strong></p>';
					$('#cartContent').html(cartHtml);
					$('#next').show();
				}else{
					$('#cartContent').html('Uw winkelwagen is leeg');
					$('#next').hide();
				}
			}
		}
	});
}

});
</script>		

[ENDCASE:HAS_ACCESS]