{exp:stash:parse process="end" parse_depth="2"}

{!--
***{stash:form_entry_id}****
***{stash:drip_form_id}**
--}

	{exp:channel:entries disable="member_data|pagination|categories" show_future_entries="yes" entry_id="{stash:form_entry_id}" status="not Closed" dynamic="no" limit="1" require_entry="yes" parse="inward"}
			
		<div class="wrapper-slim-old article-content">
		
			{if quiz_heading}<h3>{quiz_heading}</h3>{/if}
		
			{quiz_introduction}
		
			{quiz_instructions}
		
		</div><!--wrapper-slim-old-->
	
		<div class="pb20">
			<div id="loader"></div><!--loader-->
			{if '{exp:stash:drip_form_id}'!=''}<form class="captcha-form clear clearfix" action="https://www.getdrip.com/forms/{stash:drip_form_id}/submissions" method="post" data-drip-embedded-form="{stash:drip_form_id}" id="form">{if:else}<form class="captcha-form clear clearfix" id="form">{/if}

		        {form_drip_tags}
		            {columns}
					 <input type="hidden" name="tags[]" id="main_tags_{column_id}" value="{value}" tabindex="-1">
		            {/columns}
		        {/form_drip_tags}
	
				{exp:stash:get name="form_inputs-{stash:block_count}"}
											
				<div class="wrapper-sides">
					
					<div id="email-fields">									
						{!--Blocks Start--}
						{quiz_custom}
						
							{form_field_one_column}
								{related_form_field}
									<div class="row-fluid clear">
										<div class="small-12 large-12 columns end">
											<div class="form-group">
											{if '{related_form_field:input_field_type}'=='checkbox'}{if:else}<label for="id_{related_form_field:drip_input_name}">{if '{related_form_field:input_label_icon}'!=''}<i class="fa-{related_form_field:input_label_icon}"></i> {/if}{if '{related_form_field:input_label}'!=''}{related_form_field:input_label}{if:else}{related_form_field:title}{/if} {if '{related_form_field:input_required}'=='yes'}<span class="small small80" style="font-weight:normal"><em>(Required)</em></span>{/if}</label>{/if}
											{if '{related_form_field:input_field_type}'=='text'}
												<input class="form-control{if '{related_form_field:input_required}'=='yes'} required{/if}" name="fields[{related_form_field:drip_input_name}]" id="id_{related_form_field:drip_input_name}" type="text" {if '{related_form_field:input_required}'=='yes'}required{/if}>													
											{if:elseif '{related_form_field:input_field_type}'=='textarea'}
												<textarea class="form-control{if '{related_form_field:input_required}'=='yes'} required{/if}" name="fields[{related_form_field:drip_input_name}]" id="id_{related_form_field:drip_input_name}" cols="60" rows="4" {if '{related_form_field:input_required}'=='yes'}required{/if}></textarea>											
											{if:elseif '{related_form_field:input_field_type}'=='select'}
												<select name="fields[{related_form_field:drip_input_name}]" class="{if '{related_form_field:input_required}'=='yes'}required{/if}" id="id_{related_form_field:drip_input_name}" {if '{related_form_field:input_required}'=='yes'}required{/if}>
												{related_form_field:input_choices var_prefix="related"}
													{if '{related:title}'=='Blank'}
														<option value="">---</option>
													{if:elseif '{related:title}'=='- Select an Option -'}
														<option value="">- Select an Option -</option>
													{if:else}
														<option value="{if '{related:option_drip_value}'!=''}{related:option_drip_value}{if:else}{related:title}{/if}">{related:title}</option>
													{/if}
												{/related_form_field:input_choices}
												</select>
											{if:elseif '{related_form_field:input_field_type}'=='radio'}
											
											
											{if:elseif '{related_form_field:input_field_type}'=='checkbox'}
												<br /><input type="checkbox" class="{if '{related_form_field:input_required}'=='yes'}required{/if}" name="fields[{related_form_field:drip_input_name}]" id="id_{related_form_field:drip_input_name}" value="{related_form_field:input_choices var_prefix="related"}{related:title}{/related_form_field:input_choices}" checked="" {if '{related_form_field:input_required}'=='yes'}required{/if}> {if '{related_form_field:input_label}'!=''}{related_form_field:input_label}{if:else}{related_form_field:title}{/if}		
											
											{/if}
											</div><!--form-group-->									
										</div><!--small-xx-->
									</div>
								{/related_form_field}
							{/form_field_one_column}
							
							{form_field_two_column}
								<div class="row-fluid clear">
									{left_related_form_field}
										<div class="small-12 medium-6 columns">
											<div class="form-group">
											{if '{left_related_form_field:input_field_type}'=='checkbox'}{if:else}<label for="id_{left_related_form_field:drip_input_name}">{if '{left_related_form_field:input_label_icon}'!=''}<i class="fa-{left_related_form_field:input_label_icon}"></i> {/if}{if '{left_related_form_field:input_label}'!=''}{left_related_form_field:input_label}{if:else}{left_related_form_field:title}{/if} {if '{left_related_form_field:input_required}'=='yes'}<span class="small small80" style="font-weight:normal"><em>(Required)</em></span>{/if}</label>{/if}
											{if '{left_related_form_field:input_field_type}'=='text'}
												<input class="form-control{if '{left_related_form_field:input_required}'=='yes'} required{/if}" name="fields[{left_related_form_field:drip_input_name}]" id="id_{left_related_form_field:drip_input_name}" type="text" {if '{left_related_form_field:input_required}'=='yes'}required{/if}>													
											{if:elseif '{left_related_form_field:input_field_type}'=='textarea'}
												<textarea class="form-control{if '{left_related_form_field:input_required}'=='yes'} required{/if}" name="fields[{left_related_form_field:drip_input_name}]" id="id_{left_related_form_field:drip_input_name}" cols="60" rows="4" {if '{left_related_form_field:input_required}'=='yes'}required{/if}></textarea>											
											{if:elseif '{left_related_form_field:input_field_type}'=='select'}
												<select name="fields[{left_related_form_field:drip_input_name}]" class="{if '{left_related_form_field:input_required}'=='yes'}required{/if}" id="id_{left_related_form_field:drip_input_name}" {if '{left_related_form_field:input_required}'=='yes'}required{/if}>
												{left_related_form_field:input_choices var_prefix="related"}
													{if '{related:title}'=='Blank'}
														<option value="">---</option>
													{if:elseif '{related:title}'=='- Select an Option -'}
														<option value="">- Select an Option -</option>
													{if:else}
														<option value="{if '{related:option_drip_value}'!=''}{related:option_drip_value}{if:else}{related:title}{/if}">{related:title}</option>
													{/if}
												{/left_related_form_field:input_choices}
												</select>
											{if:elseif '{left_related_form_field:input_field_type}'=='radio'}
												
											
											{if:elseif '{left_related_form_field:input_field_type}'=='checkbox'}
												<br /><input type="checkbox" class="{if '{left_related_form_field:input_required}'=='yes'}required{/if}" name="fields[{left_related_form_field:drip_input_name}]" id="id_{left_related_form_field:drip_input_name}" value="{left_related_form_field:input_choices var_prefix="related"}{related:title}{/left_related_form_field:input_choices}" checked="" {if '{left_related_form_field:input_required}'=='yes'}required{/if}> {if '{left_related_form_field:input_label}'!=''}{left_related_form_field:input_label}{if:else}{left_related_form_field:title}{/if}
											
											{/if}
											</div><!--form-group-->
										</div><!--small-xx-->
									{/left_related_form_field}
									{right_related_form_field}
										<div class="small-12 medium-6 columns end">
											<div class="form-group">
											{if '{right_related_form_field:input_field_type}'=='checkbox'}{if:else}<label for="id_{right_related_form_field:drip_input_name}">{if '{right_related_form_field:input_label_icon}'!=''}<i class="fa-{right_related_form_field:input_label_icon}"></i> {/if}{if '{right_related_form_field:input_label}'!=''}{right_related_form_field:input_label}{if:else}{right_related_form_field:title}{/if} {if '{right_related_form_field:input_required}'=='yes'}<span class="small small80" style="font-weight:normal"><em>(Required)</em></span>{/if}</label>{/if}
											{if '{right_related_form_field:input_field_type}'=='text'}
												<input class="form-control{if '{right_related_form_field:input_required}'=='yes'} required{/if}" name="fields[{right_related_form_field:drip_input_name}]" id="id_{right_related_form_field:drip_input_name}" type="text" {if '{right_related_form_field:input_required}'=='yes'}required{/if}>													
											{if:elseif '{right_related_form_field:input_field_type}'=='textarea'}
												<textarea class="form-control{if '{right_related_form_field:input_required}'=='yes'} required{/if}" name="fields[{right_related_form_field:drip_input_name}]" id="id_{right_related_form_field:drip_input_name}" cols="60" rows="4" {if '{right_related_form_field:input_required}'=='yes'}required{/if}></textarea>											
											{if:elseif '{right_related_form_field:input_field_type}'=='select'}
												<select name="fields[{right_related_form_field:drip_input_name}]" class="{if '{right_related_form_field:input_required}'=='yes'}required{/if}" id="id_{right_related_form_field:drip_input_name}" {if '{right_related_form_field:input_required}'=='yes'}required{/if}>
												{right_related_form_field:input_choices var_prefix="related"}
													{if '{related:title}'=='Blank'}
														<option value="">---</option>
													{if:elseif '{related:title}'=='- Select an Option -'}
														<option value="">- Select an Option -</option>
													{if:else}
														<option value="{if '{related:option_drip_value}'!=''}{related:option_drip_value}{if:else}{related:title}{/if}">{related:title}</option>
													{/if}
												{/right_related_form_field:input_choices}
												</select>
											{if:elseif '{right_related_form_field:input_field_type}'=='radio'}
											
											
											{if:elseif '{right_related_form_field:input_field_type}'=='checkbox'}
												<br /><input type="checkbox" class="{if '{right_related_form_field:input_required}'=='yes'}required{/if}" name="fields[{right_related_form_field:drip_input_name}]" id="id_{right_related_form_field:drip_input_name}" value="{right_related_form_field:input_choices var_prefix="related"}{related:title}{/right_related_form_field:input_choices}" checked="" {if '{right_related_form_field:input_required}'=='yes'}required{/if}> {if '{right_related_form_field:input_label}'!=''}{right_related_form_field:input_label}{if:else}{right_related_form_field:title}{/if}
												
											{/if}
											</div><!--form-group-->
										</div><!--small-xx-->
									{/right_related_form_field}	
								</div>							
							{/form_field_two_column}
	
							{content_block}
								<div class="article-content clear {if '{block_number}'=='1'}top-content{/if}">
									{content}
								</div><!--wrapper-sides-->					
							{/content_block}
							
						{/quiz_custom}
						{!--Blocks End--}
					</div><!--email-fields-->
		
					{if '{exp:stash:get name="form_button-{stash:block_count}"}'!=''}
						{exp:stash:get name="form_button-{stash:block_count}"}
					{if:else}
					<div class="row-fluid pl15 pr15">
						<div class="small-12 column text-center">
							
								<button type="submit" class="btn {if '{form_button_size}'=='3d'}btn-large{if:elseif '{form_button_size}'!=''}btn-{form_button_size}{if:else}btn-large{/if} btn-{if '{form_button_color}'!=''}{form_button_color}{if:else}darkgreen{/if}" id="id_submit"><i class="fa fa-{if '{form_button_icon}'!=''}{form_button_icon}{if:else}hawaii-guide{/if}"></i> {if '{form_button_text}'!=''}{form_button_text}{if:else}Submit{/if}</button>								
						</div><!--small-xx-->
					</div><!--row-->
					{/if}{!--button-override--}
					
				</div><!--wrapper-sides-->
			
			</form>
		</div><!--premium-noemail-->
		<style>
			.main .loader {
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  width: 50px;
			  height: 50px;
			  background: transparent;
			  margin: 30px auto 0 auto;
			  border: solid 2px #424242;
			  border-top: solid 2px #1c89ff;
			  border-radius: 50%;
			  opacity: 0;
			}
			
			.main .check {
			  width: 100%;
			  height: 100%;
			  display: flex;
			  flex-direction: column;
			  justify-content: center;
			  align-items: center;
			  transform: translate3d(-4px, 50px, 0);
			  opacity: 0;
			}
			.main .check span:nth-child(1) {
			  display: block;
			  width: 10px;
			  height: 2px;
			  background-color: #0B4D96;
			  transform: rotate(45deg);
			}
			.main .check span:nth-child(2) {
			  display: block;
			  width: 20px;
			  height: 2px;
			  background-color: #0B4D96;
			  transform: rotate(-45deg) translate3d(14px, -4px, 0);
			  transform-origin: 100%;
			}
			
			.main .loader.active {
			  -webkit-animation: loading 2s ease-in-out;
			          animation: loading 2s ease-in-out;
			  -webkit-animation-fill-mode: forwards;
			          animation-fill-mode: forwards;
			}
			
			.main .check.active {
			  opacity: 1;
			  transform: translate3d(-4px, 4px, 0);
			  transition: all 0.5s cubic-bezier(0.49, 1.74, 0.38, 1.74);
			  transition-delay: 0.2s;
			}
		
			@keyframes loading {
			  30% {
			    opacity: 1;
			  }
			  85% {
			    opacity: 1;
			    transform: rotate(1080deg);
			    border-color: #fff;
			  }
			  100% {
			    opacity: 1;
			    transform: rotate(1080deg);
			    border-color: #0B4D96;
			  }
			}
		</style>					
		<script>
			/*
			############################################################################################################
			############################################################################################################
			
			© Copyright 2022 - Guide of US, LLC and Guide of Hawaii, LLC - All Rights Reserved
			Developed by: John C. Derrick 
			
			This script may not be copied or reproduced without permission from Guide of US, LLC.
			
			############################################################################################################
			############################################################################################################
			*/
			
			var force_email = "No"; //Yes, Y or N, No
			var disable_drip = "No"; //Yes, Y or No, N
			
			function createCookieForm(cookieName, cookieValue, daysToExpire) {
				var date_estimate = new Date();
				date_estimate.setTime(date_estimate.getTime() + (daysToExpire * 24 * 60 * 60 * 1000));
				document.cookie = cookieName + "=" + cookieValue + "; expires=" + date_estimate.toGMTString() + "; path=/; secure";
			}
			
			function getFormCookie(cname) {
				let name = cname + "=";
				let ca = document.cookie.split(';');
				for(let i = 0; i < ca.length; i++) {
					let c = ca[i];
					while(c.charAt(0) == ' ') {
						c = c.substring(1);
					}
					if(c.indexOf(name) == 0) {
						return c.substring(name.length, c.length);
					}
				}
				return "";
			}
			
			var form = document.getElementById("form");
			var loader_div = document.getElementById("loader");
			var premium_drip_email = getFormCookie("premium_email");
			var form_height = (document.getElementById("form").offsetHeight - 80) + "px";
			
			var loader = document.querySelector('.loader'),
				check = document.querySelector('.check');

			let emailFields;
			if (!document.getElementById("email-fields")) {
				//does not exist
				emailFields = "";
			} else {
				emailFields = document.getElementById("email-fields");
			}

			let emailInput;
			if (!document.getElementById("id_email")) {
				//does not exist
				emailInput = "";
			} else {
				emailInput = document.getElementById("id_email").parentElement;
			}
			
			if(premium_drip_email != '' && force_email != 'Yes' && force_email != 'Y' && emailFields != '') {
				emailInput.innerHTML = "<p class='text-center pt20 pb20'>Aloha, <em><strong class='text-blue'>Welcome back</strong></em>! You've already provided your email address... please continue below.</p>";
			};
			
			//SUBMIT THE FORM DYNAMICALLY
			document.addEventListener('DOMContentLoaded', function() {
				document.getElementById('form').addEventListener('submit', submitForm);
			});
			
			function submitForm(event) {
				event.preventDefault();
						
				let email;
				if(premium_drip_email == '' || force_email == 'Yes') {
					email = document.getElementById("id_email").value;
				} else {
					email = premium_drip_email;
				}
			
				let main_tag_1;
				if (!document.getElementById("main_tags_1")) {
					//does not exist
					main_tag_1 = "";
				} else {
					main_tag_1 = document.getElementById("main_tags_1").value;
				}

				let main_tag_2;
				if (!document.getElementById("main_tags_2")) {
					//does not exist
					main_tag_2 = "";
				} else {
					main_tag_2 = document.getElementById("main_tags_2").value;
				}
			
				let tag_1;
				if (!document.getElementById("tags_1")) {
					//does not exist
					tag_1 = "";
				} else {
					tag_1 = document.getElementById("tags_1").value;
				}
			
				let tag_2;
				if (!document.getElementById("tags_2")) {
					//does not exist
					tag_2 = "";
				} else {
					tag_2 = document.getElementById("tags_2").value;
				}

				let tag_3;
				if (!document.getElementById("tags_3")) {
					//does not exist
					tag_3 = "";
				} else {
					tag_3 = document.getElementById("tags_3").value;
				}
			
				let tag_4;
				if (!document.getElementById("tags_4")) {
					//does not exist
					tag_4 = "";
				} else {
					tag_4 = document.getElementById("tags_4").value;
				}
			
				var whichMonthSelect = document.getElementById("id_month_of_visit");
				var whichYear = document.getElementById("id_year_of_visit").value;
				var island = document.getElementById("id_which_island").value;
				var secondIsland = document.getElementById("id_second_island").value;
			
				var whichMonth;
				
				if (whichMonthSelect.value === 'January'){
					whichMonth = 0;
				}
				else if(whichMonthSelect.value ==='February'){
					whichMonth = 1;	
				}
				else if(whichMonthSelect.value ==='March'){
					whichMonth = 2;	
				}
				else if(whichMonthSelect.value ==='April'){
					whichMonth = 3;	
				}
				else if(whichMonthSelect.value ==='May'){
					whichMonth = 4;	
				}
				else if(whichMonthSelect.value ==='June'){
					whichMonth = 5;	
				}
				else if(whichMonthSelect.value ==='July'){
					whichMonth = 6;	
				}
				else if(whichMonthSelect.value ==='August'){
					whichMonth = 7;	
				}
				else if(whichMonthSelect.value ==='September'){
					whichMonth = 8;	
				}
				else if(whichMonthSelect.value ==='October'){
					whichMonth = 9;	
				}
				else if(whichMonthSelect.value ==='November'){
					whichMonth = 10;	
				}
				else if(whichMonthSelect.value ==='December'){
					whichMonth = 11;	
				}
			
				function monthDiff(dateFrom, dateTo) {
				 return dateTo.getMonth() - dateFrom.getMonth() + 
				   (12 * (dateTo.getFullYear() - dateFrom.getFullYear()));
				}
			
				var currentYear = new Date().getFullYear();
				var currentMonth = new Date().getMonth();
			
				var MonthsUntilTrip = monthDiff(new Date(currentYear, currentMonth), new Date(whichYear, whichMonth));

				let MonthsUntil;
				if (isNaN(MonthsUntilTrip) || (MonthsUntilTrip === " ")) {
					MonthsUntil = "Not Defined";
				}
				else {
					MonthsUntil = MonthsUntilTrip;	
				}		
				console.log("MonthsUntil: "+ MonthsUntil);		
				
			
				function fadeOut(el, duration) {
				    var s = el.style, step = 25/(duration || 300);
				    s.opacity = s.opacity || 1;
				    (function fade() { (s.opacity -= step) < 0 ? s.display = 0 : setTimeout(fade, 25); })();
				}
							
				if(email != "" && email != null && disable_drip != 'Yes' && disable_drip != 'Y' && island != '') {
					createCookieForm("premium_email", email, 365);
					//change button text
					document.getElementById('id_submit').innerHTML = '<i class="fa fa-envelope"></i> Submitting…';	
					_dcq.push(["identify", {
						email: email,
						which_island: island,
						referral_url: window.location.href,
						month_of_visit: whichMonthSelect.value,
						year_of_visit: whichYear,
						second_island: secondIsland,
						months_until_trip: MonthsUntil,
						tags: [main_tag_1,tag_1,tag_2,tag_3,tag_4,main_tag_2],
						success: function(response) {
						    loader_div.innerHTML ="<div class='loader active'><div class='check active'><span class='check-one'></span><span class='check-two'></span></div></div>";
					form.innerHTML ="<div style='height:"+form_height+";' class='pt80'><h4 class='text-blue text-center'><i class='fa-check-circle fa-xl'></i> Submission Received - You're Signed Up!</h4>";		
					fadeOut(loader_div,5000);  
						  } 
					}]);	
				} else if(email != "" && email != null && disable_drip != 'Yes' && disable_drip != 'Y') {
					createCookieForm("premium_email", email, 365);
					//change button text
					document.getElementById('id_submit').innerHTML = '<i class="fa fa-envelope"></i> Submitting…';	
					_dcq.push(["identify", {
						email: email,
						referral_url: window.location.href,
						success: function(response) {
							loader_div.innerHTML ="<div class='loader active'><div class='check active'><span class='check-one'></span><span class='check-two'></span></div></div>";
					form.innerHTML ="<div style='height:"+form_height+";' class='pt80'><h4 class='text-blue text-center'><i class='fa-check-circle fa-xl'></i> Submission Received - You're Signed Up!</h4>";		
					fadeOut(loader_div,5000); 
						  } 
					}]);
				} else {		
					//change button text
					document.getElementById('id_submit').innerHTML = '<i class="fa fa-envelope"></i> Submitting…';
					loader_div.innerHTML ="<div class='loader active'><div class='check active'><span class='check-one'></span><span class='check-two'></span></div></div>";
					form.innerHTML ="<div style='height:"+form_height+";' class='pt80'><h4 class='text-blue text-center'><i class='fa-check-circle fa-xl'></i> Submission Received - You're Signed Up!</h4>";		
					fadeOut(loader_div,5000);
				}//if email
			
			}//submit form
		</script>
	
	{/exp:channel:entries}
{/exp:stash:parse}