{if '{segment_3}'==''}

	{redirect="hawaii-visitor-guide-packet"}
	
{if:elseif '{segment_4}'!='' && '{segment_3}'=='mahalo-hawaii-travel-packet'}

	{redirect="mahalo-hawaii-travel-packet"}

{if:else}

	{exp:stash:set trim="yes" parse_tags="yes" process="start"}
		{stash:entry_id}{segment_1}{segment_2}{segment_3}{/stash:entry_id}
	{/exp:stash:set}
	
	{exp:stash:parse process="end"}
	
		{stash:embed:global-v4:base-slim}
	
		{exp:stash:set name="{stash:entry_id}_body"}
	
		{!-- ================= BEGIN BODY MAIN CORE =================  --}	
		<!-- BEGIN .content -->
		<section class="content">
	
			<div class="wrapper">

				{!-- Disabled AdThrive Ads --}
				<script>
					adthrive.cmd.push(function() {
					 adthrive.disableAds();
					});
				</script>
					
				<section class="main-content row-fluid">	
					
					<main class="main nosidebar">
					{exp:channel:entries channel="products" url_title="{segment_3}" dynamic="no" limit="1"}
					
					<div class="wrapper article-content">
	
						<div class="article-header">
							<h1 class="entry-title">{title}</h1>
							{if product_tag_line}<h4>{product_tag_line}</h4>{/if}
						</div><!--article-header-->
	
						{exp:charge:form form_class="form-horizontal" form_id="charge-form" return="/visitor-guide/purchase/mahalo-hawaii-travel-packet" on_success="hawaii_travel_packet"}
						
						    <fieldset>
						        {if have_errors}
						            <div class="alert alert-error">
						                <h4>We have {error_count} errors</h4>
						                <ul>
						                {errors}
						                    <li>{error_message}</li>
						                {/errors}
						                </ul>
						            </div>
						        {/if}
	
						        <h4 style="margin-top:15px;">Product Details</h4>
						
						        <div class="row">
							        
							        <div class="small-2 columns">		        
								       {exp:jcogs_img:pair src="{product_image}" crop="yes|center,center|0,0" width="150" quality="90"}
								       		<img data-src="{made}" class="lazyload" alt="{title}" />
								       	{/exp:jcogs_img:pair}
							        </div>
							        
							        <div class="small-10 columns end">
										<h2>{title}</strong></h2>
										<small><em>To be provided via download link immediately after purchase</em></small>
										<p><strong>Price:</strong> ${product_price}</p>
										{product_description}
										<input type="hidden" name="plan_amount" id="plan_amount" value="{product_price}" />
							        </div>
	
						        </div><!--row-->
						
						        <hr/>
						        
						        <div class="small-12 medium-8 medium-offset-2 column end">
						
									<h2 class="mt50">Secure Instant Checkout</h2>
						
							        <h4 class="mt15">Customer Details</h4>
							        <div class="row">
		
							            <div class="small-12 medium-4 columns">
								            <label for="plan_amount" class="control-label">Customer Name</label>
							                <input type="text" class="text shadow" id="customer_name" name="customer_name" placeholder="eg. Joe Smith" value="{customer_name}">
							                {if error_customer_name}
							                    <div class="alert alert-warning">
							                    {error_customer_name_message}
							                    </div>
							                {/if}
							            </div>
							            
							            <div class="small-12 medium-4 columns end">
								            <label for="plan_amount" class="control-label">Customer Email</label>
							                <input type="text" class="text shadow" id="customer_name" name="customer_email" placeholder="eg. joe@smith.org" value="{customer_email}">
							                {if error_customer_email}
							                    <div class="alert alert-warning">
							                    {error_customer_email_message}
							                    </div>
							                {/if}
							            </div>
							            
							        </div><!--row-->
						
									<hr/>
						
							        <h4 style="margin-top:15px;">Credit Card Details</h4>
							
									<div id="card-element">
										<!-- a Stripe Element will be inserted here. -->
									</div>
									
									<div id="card-errors" role="alert"></div>

									<div id="progress" style="display:none;">We are processing your payment... please wait.</div>

									<div id="payment-errors" style="display:none;"></div>

									<div class="row">
										<button id="pay-button" type="button" data-processing="Please Wait..." style="margin-top: 20px;" class="btn btn-green btn-3d text-center">Purchase &amp; Download Now &rarr;</button>							           
									</div><!--row-->    
								
						        </div><!--small-xx-->
							     
						    </fieldset>
	
						{/exp:charge:form}
	
						<div class="row mt50 border-top">
								
							<div class="small-12 columns center">
								<img data-src="https://aws.hawaii-guide.com/images/2013/store/secure-icon.png" alt="Secure Chekout" class="lazyload" />
							</div><!--small-->
							
						</div><!--row-->
	
					</div><!--wrapper-->
				
					{/exp:channel:entries}
					</main>
	
				</section><!--main-->
		
			</div><!--wrapper -->
		
		<!-- BEGIN .content -->
		</section>	
		{!-- ================= END BODY MAIN CORE =================  --}	
		
		{/exp:stash:set}
	
		{exp:stash:set name="{stash:entry_id}_header_tags" parse_tags="yes"}
			<META NAME="ROBOTS" CONTENT="NOINDEX, FOLLOW">
		{/exp:stash:set}
		
		{!-- Set the Entry Title --}		
		{exp:stash:set name="{stash:entry_id}_meta_title" trim="yes"}
			Hawaii Travel Packet &amp; Visitor Guide | Hawaii-Guide
		{/exp:stash:set}
		
		{exp:stash:set name="{stash:entry_id}_canonical_url" trim="yes"}
			https://www.hawaii-guide.com{if segment_1}/{segment_1}{/if}{if segment_2}/{segment_2}{/if}{if segment_3}{segment_3}{/if}
		{/exp:stash:set}
	
		{exp:stash:set name="{stash:entry_id}_admin_controls" parse_conditionals="yes" parse_tags="yes"}
			{if '{logged_in_group_id}'=='1'}
				<div class="small-3 columns text-center noprint">
					
					<p class="clear pt15 small small90">Queries: {total_queries} ({elapsed_time} sec)</p>
					
				</div><!--column-->		
			{/if}
		{/exp:stash:set}
		
		{exp:stash:set name="{stash:entry_id}_footer_tags" scope="site"}
			<!--==============CHARGE STRIPE SCRIPTS BEGIN==============-->
			<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
			<script src="{exp:charge:stripe_js}"></script>
			<script src="{exp:charge:js}"></script>
			<script>
			var cardFormOptions = {};

			$(this).chargeForm({
				stripe_key: '{exp:charge:public_key}',
				form: '#charge-form',
				card: '#card-element',
				pay_button: '#pay-button',
				pay_button_processing_text: 'Please Wait...',
				pay_errors: '#payment-errors',
				progress: '#progress',
				coupon_form: '#coupon-form',
				coupon_field: '#coupon',
				coupon_status: '#coupon_status',
				card_form_options: cardFormOptions,
			});
			</script>
			<!--==============CHARGE STRIPE SCRIPTS END==============-->
		{/exp:stash:set}
	
	{/exp:stash:parse}
{/if}