{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}

	{exp:stash:set name="{stash:entry_id}_body"}

	{!-- ================= BEGIN BODY MAIN CORE =================  --}	
	<!-- BEGIN .content -->
	<section class="content">

		<div class="wrapper">
				
			<section class="main-content row-fluid">	
				
				<main class="main nosidebar">

{!-- action="https://www.getdrip.com/forms/4917466/submissions" method="post" data-drip-embedded-form="4917466" --}

<form class="captcha-form clear clearfix"  id="form">
	<input type="hidden" name="tags[]" id="main_tags_1" value="Manual Subscriber">
	<input type="hidden" name="tags[]" id="tags_1" value="Homepage Signup">
	
	<div class="wrapper-sides">
			
		<div class="row-fluid clear" id="email-field">
			<div class="small-12 large-12 columns end">
				<div class="form-group">
					<label for="id_email_addres"><i class="fa-envelope"></i> Email Address <span class="small small80" style="font-weight:normal"><em>(Required)</em></span></label>
					<input class="form-control" name="fields[email]" id="id_email_address" type="email" required> 
					<small></small>
				</div>
			</div><!--column-->
		</div><!--row-->
		
		<div class="row-fluid clear" id="main-fields">
			<div class="small-12 medium-6 columns">
				<div class="form-group">
					<label for="id_month_of_visit"><i class="fa-question"></i> Month of Visit <span class="small small80" style="font-weight:normal"><em>(Required)</em></span></label>
					<select name="fields[month_of_visit]" id="id_month_of_visit" class="" required>
						<option value="">- Select an Option -</option>
						<option value="January">January</option>
						<option value="February">February</option>
						<option value="March">March</option>
						<option value="April">April</option>
						<option value="May">May</option>
						<option value="June">June</option>
						<option value="July">July</option>
						<option value="August">August</option>
						<option value="September">September</option>
						<option value="October">October</option>
						<option value="November">November</option>
						<option value="December">December</option>
						<option value="Undecided">Undecided</option>
					</select>
					<small></small>
				</div>
			</div><!--columns-->
			<div class="small-12 medium-6 columns end">
				<div class="form-group">
					<label for="id_year_of_visit"><i class="fa-question"></i> Year of Visit <span class="small small80" style="font-weight:normal"><em>(Required)</em></span></label>
					<select name="fields[year_of_visit]" id="id_year_of_visit" class="" required>
						<option value="">- Select an Option -</option>
						<option value="2022">2022</option>
						<option value="2023">2023</option>
						<option value="2024">2024</option>
						<option value="2025">2025</option>
						<option value="Undecided">Undecided</option>
					</select>
					<small></small>
				</div>
			</div>
		</div><!--columns-->
		<div class="row-fluid clear">
			<div class="small-12 medium-6 columns">
				<div class="form-group">
					<label for="id_which_island"><i class="fa-question"></i> Which Island <span class="small small80" style="font-weight:normal"><em>(Required)</em></span></label>
					<select name="fields[which_island]" id="id_which_island" class="" required>
						<option value="">- Select an Option -</option>
						<option value="Oahu">Oahu</option>
						<option value="Maui">Maui</option>
						<option value="Kauai">Kauai</option>
						<option value="Big Island">Big Island</option>
						<option value="Multi-Island">Multiple Islands</option>
						<option value="Undecided">Undecided</option>
					</select>
					<small></small>
				</div>
			</div>
			<div class="small-12 medium-6 columns end">
				<div class="form-group">
					<label for="id_second_island"><i class="fa-question"></i> Second Island </label>
					<select name="fields[second_island]" id="id_second_island" class="">
						<option value="Not visiting another island">Not visiting another island</option>
						<option value="Oahu">Oahu</option>
						<option value="Maui">Maui</option>
						<option value="Kauai">Kauai</option>
						<option value="Big Island">Big Island</option>
						<option value="Molokai">Molokai</option>
						<option value="Lanai">Lanai</option>
						<option value="Undecided">Undecided</option>
					</select>
					<small></small>
				</div>
			</div><!--columns-->
		</div><!--row-->
		
		<div class="clear text-center">
			<button type="submit" id="id_submit" class="btn btn-lg btn-blue"><i class="fa fa-envelope"></i> Subscribe Now</button>
		</div>
	</div>
</form>
				
				</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}

	{!-- HEADER TAGS --}
	{exp:stash:set name="{stash:entry_id}_header_css" parse_tags="yes"}
<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;
	  }
	}

	.form-group.error input {
	    border-color: #dc3545;
	}
	
	.form-group.success input {
	    border-color: #28a745;
	}
	
	.form-group small {
	    color: #dc3545;
	    font-size:90%;
	}
	
</style>
	{/exp:stash:set}
	
	{!-- Set the Entry Title --}		
	{exp:stash:set name="{stash:entry_id}_meta_title" trim="yes"}
		Test Signup Form 2022 | 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}_footer_tags" scope="site"}

<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 = "Yes"; //Yes, Y or N, No
var disable_drip = "Yes"; //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 email_field = document.getElementById("email-field");
var form_status = document.getElementById("form-status");
var premium_drip_email = getFormCookie("premium_email");

var loader = document.querySelector('.loader'),
	check = document.querySelector('.check');

if(premium_drip_email != '' && force_email != 'Yes' && force_email != 'Y') {
	email_field.innerHTML = "<p class='text-center pt20 pb20'>Aloha, <em><strong class='text-green'>Welcome back</strong></em>! You've already provided your email address... click the button below to continue.</p>";
};

//VALIDATION
const emailEl = document.querySelector('#id_email_address');

const checkEmail = () => {
    let valid = false;
    const email = emailEl.value.trim();
    if (!isRequired(email)) {
        showError(emailEl, 'Email cannot be blank.');
    } else if (!isEmailValid(email)) {
        showError(emailEl, 'Email is not valid.')
    } else {
        showSuccess(emailEl);
        valid = true;
    }
    return valid;
};

const isEmailValid = (email) => {
    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
};

const isRequired = value => value === '' ? false : true;
const isBetween = (length, min, max) => length < min || length > max ? false : true;

const showError = (input, message) => {
    // get the form-field element
    const formField = input.parentElement;
    // add the error class
    formField.classList.remove('success');
    formField.classList.add('error');

    // show the error message
    const error = formField.querySelector('small');
    error.textContent = message;
};

const showSuccess = (input) => {
    // get the form-field element
    const formField = input.parentElement;

    // remove the error class
    formField.classList.remove('error');
    formField.classList.add('success');

    // hide the error message
    const error = formField.querySelector('small');
    error.textContent = '';
}

let isFormValid = isEmailValid;	



if (isFormValid) {
	//SUBMIT THE FORM DYNAMICALLY
	document.addEventListener('DOMContentLoaded', function() {
		document.getElementById('form').addEventListener('submit', submitForm);
		
	});
}//valid form


function submitForm(event) {
	event.preventDefault();

	//loader.classList.add('active');

	let email;
	if(premium_drip_email == '' || force_email == 'Yes') {
		email = document.getElementById("id_email_address").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 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;
	}

	var whichMonthSelect = document.getElementById("id_month_of_visit");
	var whichYear = parseInt(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));
					
	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,
			which_island: island,
			referral_url: window.location.href,
			month_of_visit: whichMonthSelect.value,
			year_of_visit: whichYear,
			second_island: secondIsland,
			months_until_trip: MonthsUntilTrip,
			tags: [main_tag_1,tag_1,tag_2],
			success: function(response) {
			    // Call a method with the response object
			    // Success callback is optional
			    //form.remove();
				form.innerHTML ="<div class='loader active'><div class='check active'><span class='check-one'></span><span class='check-two'></span></div></div>";
				form.innerHTML +="<h4 class='text-blue text-center'><i class='fa-check-circle fa-xl'></i> Submission Received - You're Signed Up!</h4>";		
			    
			  } 
		}]);
				
	} else {
		
		//change button text
		document.getElementById('id_submit').innerHTML = '<i class="fa fa-envelope"></i> Submitting…';

	    //form.remove();
		form.innerHTML ="<div class='loader active'><div class='check active'><span class='check-one'></span><span class='check-two'></span></div></div>";
		form.innerHTML +="<h4 class='text-blue text-center'><i class='fa-check-circle fa-xl'></i> Submission Received - You're Signed Up!</h4>";		
		
	}//if email

}//submit form

/*
function redirectPage() {
	window.location.href="https://www.hawaii-guide.com/mahalo-email";
}	

redirectPage();	
*/


const debounce = (fn, delay = 500) => {
    let timeoutId;
    return (...args) => {
        // cancel the previous timer
        if (timeoutId) {
            clearTimeout(timeoutId);
        }
        // setup a new timer
        timeoutId = setTimeout(() => {
            fn.apply(null, args)
        }, delay);
    };
};
 

form.addEventListener('input', debounce(function (e) {
     checkEmail();
}));


</script>		
	{/exp:stash:set}

{/exp:stash:parse}