// Include the CSS
// document.write("<link href='https://listings.cbislands.com/css/popup.css' rel='stylesheet'> \
// 				<script src='https://listings.cbislands.com/js/jquery.multiselect.js'></script> \
// 				<div class='fyeo_activate' onclick='openCloseFyeoOverlay()'> \
// 					Signup to receive automatic listing alerts <u>click here to get started</u> \
// 				</div>");
document.write("<link href='https://listings.cbislands.com/css/popup.css' rel='stylesheet'> \
				<script src='https://listings.cbislands.com/js/jquery.multiselect.js'></script> \
				<script src='https://www.google.com/recaptcha/api.js?render=6LepYCMqAAAAADz4QWAU_aBqxQk8xpmz1YaySVu1'></script> \
				");

function openCloseFyeoOverlay() {
	el = document.getElementById("fyeo_overlay");
	el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

function fyeoSubmitForm() {
	var thank_you_message = "<div class='fyeo_text'> \
Thank you for signing up to our automatic listing alerts. <b>You will shortly receive a confirmation email.</b> Please click the link inside this email to confirm your alert subscription. \
</div> \
";
	document.getElementById("fyeo_form_body").innerHTML = thank_you_message;
}

function activateMultiSelect() {
	jQuery('#property_type_4yio').multiselect({
	    columns: 1,
	    placeholder: 'Select Property Type(s)',
	    search: true,
	    selectAll: true
	});
	jQuery('#location_4yio').multiselect({
	    columns: 1,
	    placeholder: 'Select Location(s)',
	    search: true,
	    selectAll: true
	});
	jQuery('#property_type_rentals_4yio').multiselect({
	    columns: 1,
	    placeholder: 'Select Property Type(s)',
	    search: true,
	    selectAll: true
	});
	jQuery('#location_rentals_4yio').multiselect({
	    columns: 1,
	    placeholder: 'Select Location(s)',
	    search: true,
	    selectAll: true
	});
}

function switchInputs() {
	jQuery('.tab-content select').prop("disabled", true);
	jQuery('.tab-content.current select').prop("disabled", false);
	activateMultiSelect();
}

function formToJson(form, token) {
	const formData = new FormData(form);
	const formValue = Object.fromEntries(formData);
	formValue.location = formData.getAll("location[]");
	formValue.property_type = formData.getAll("property_type[]");
	delete formValue["location[]"];
	delete formValue["property_type[]"];
	formValue.recaptchaToken = token;

	return JSON.stringify(formValue);
}

const errorMessageMap = new Map([
	["invalid-email", `Invalid email address.`],
	["empty-email", `Email address cannot be empty.`],
	["empty-phone", `Phone cannot be empty.`],
]);

const combineValidationMessages = (validationMessages) =>
  `Validation failed: ${validationMessages.join(" ")}`;

function setupForm(formId) {
	jQuery(formId).off("submit"); // TODO: remove this once the double load of this file has been removed
	jQuery(formId).submit(function(event) {
		/* stop form from submitting normally */
		event.preventDefault();

		grecaptcha.ready(function() {
			grecaptcha.execute("6LepYCMqAAAAADz4QWAU_aBqxQk8xpmz1YaySVu1", { action: "submit" }).then(function(token) {
				jQuery.ajax({
					url: "https://api.cbislands.com:3000/crm/3/listing-alerts/sign-up",
					type: "POST",
					crossDomain: true,
					cache: false,
					data: formToJson(event.target, token),
					dataType: "json",
					success: function (response) {
						console.log(response);
						if (response.status !== 'success') {
							if (response.errors == undefined || response.errors.length === 0) {
								return;
							}

							alert(combineValidationMessages(response.errors.map((error) => errorMessageMap.get(error))));
							return;
						}

						const thank_you_message = "<div class='fyeo_text'> \
		Thank you for signing up to our automatic listing alerts. <b>You will shortly receive a confirmation email.</b> Please click the link inside this email to confirm your alert subscription. \
						</div> \
						";
						document.getElementById("fyeo_form_body").innerHTML = thank_you_message;
					},
					error: function (xhr, status) {
						alert("error");
					}
				});
			});
		});
	});
}

jQuery(document).ready(function(){
	activateMultiSelect();
	jQuery('.fyeo_form_body ul.tabs li').click(function(){
		var tab_id = jQuery(this).attr('data-tab');
		jQuery('ul.tabs li').removeClass('current');
		jQuery('.tab-content').removeClass('current');
		jQuery(this).addClass('current');
		jQuery("#"+tab_id).addClass('current');
		switchInputs(jQuery(this));
		console.log(jQuery(this));
		var listingTypeVal = jQuery("#"+tab_id).attr("data-listingtype");
		jQuery("input[name='listing_type']").val(listingTypeVal);
	});

	setupForm("#form_4yio_sales");
	setupForm("#form_4yio_rentals");
});



function closeFyeoOverlay() {
	el = document.getElementById("fyeo_overlay");
	el.style.visibility = 'hidden';
}

function validatePhone(inputtxt)
{
  var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
  if(inputtxt.value.match(phoneno))
     {
	   return true;
	 }
   else
     {
	   alert("Not a valid Phone Number");
	   return false;
     }
}

var popup_html =  "<div class='fyeo_header'> \
	<img src='https://images.cbislands.com/affiliate_logos/bermuda_white.png' class='fyeo_logo' /> \
	<div class='fyeo_close' onclick='openCloseFyeoOverlay()'>&#215;</div> \
</div> \
<div class='fyeo_form_body' id='fyeo_form_body'> \
	<div class='fyeo_text'> \
		<p>Signup below to get <b>up to the minute property alerts.</b></p> \
		<p>Gain valuable market insight by being among the first to know when your perfect home comes onto the market or prices change.</p> \
	</div> \
	<ul class='tabs'> \
		<li class='tab-link current' data-tab='tab-sales'>Sales</li> \
		<li class='tab-link' data-tab='tab-rentals'>Rentals</li> \
	</ul> \
	<div id='tab-sales' class='tab-content current' data-listingtype='sales'> \
		<form class='fyeo_form' id='form_4yio_sales'> \
			<p>Signup below to receive our latest sales listings. </p>\
			<div class='fyeo_form_label'> \
				Name \
			</div> \
			<div class='fyeo_form_control'> \
				<input class='formVal' type='text' name='name' placeholder='Name' /> \
			</div> \
			<div class='fyeo_form_label'> \
				Email<span style='color:red'>*</span> \
			</div> \
			<div class='fyeo_form_control'> \
				<input class='formVal' type='email' name='email' placeholder='Email Address' /> \
			</div> \
			<div class='fyeo_form_label'> \
				Phone \
			</div> \
			<div class='fyeo_form_control'> \
				<input class='formVal' type='text' name='phone' placeholder='Phone' /> \
			</div> \
			<div class='fyeo_form_label'> \
				Property Type \
			</div> \
			<div class='fyeo_form_control'> \
				<select multiple class='formVal' name='property_type[]' id='property_type_4yio'> \
					<option value='Apartment Building'>Apartment Building</option> \
					<option value='Commercial Sales'>Commercial Sales</option> \
					<option value='Condo'>Condo</option> \
					<option value='Condo Hotel'>Condo Hotel</option> \
					<option value='Multi-Family'>Multi-Family</option> \
					<option value='Residential With Income'>Residential With Income</option> \
					<option value='Single Family Home'>Single Family Home</option> \
					<option value='Vacant Lot'>Vacant Lot</option> \
				</select> \
			</div> \
			<div class='fyeo_form_label'> \
				Location \
			</div> \
			<div class='fyeo_form_control'> \
				<select multiple class='formVal' name='location[]'  id='location_4yio'> \
					<option value=\"City of Hamilton\">City of Hamilton</option> \
					<option value=\"Devonshire\">Devonshire</option> \
					<option value=\"Hamilton Parish\">Hamilton Parish</option> \
					<option value=\"Paget\">Paget</option> \
					<option value=\"Pembroke\">Pembroke</option> \
					<option value=\"Sandys\">Sandys</option> \
					<option value=\"Smith's\">Smith's</option> \
					<option value=\"Southampton\">Southampton</option> \
					<option value=\"St. George's\">St. George's</option> \
					<option value=\"Warwick\">Warwick</option> \
				</select> \
			</div> \
			<div class='fyeo_form_label'> \
				Min. Price \
			</div> \
			<div class='fyeo_form_control fyeo_beds'> \
				<select class='formVal' name='min-price'> \
					<option value=''>--</option> \
					<option value='10000'>$10k</option> \
					<option value='20000'>$20k</option> \
					<option  value='30000'>$30k</option> \
					<option  value='50000'>$50k</option> \
					<option  value='100000'>$100k</option> \
					<option  value='130000'>$130k</option> \
					<option  value='150000'>$150k</option> \
					<option  value='200000'>$200k</option> \
					<option  value='250000'>$250k</option> \
					<option  value='300000'>$300k</option> \
					<option  value='350000'>$350k</option> \
					<option  value='400000'>$400k</option> \
					<option  value='450000'>$450k</option> \
					<option  value='500000'>$500k</option> \
					<option  value='550000'>$550k</option> \
					<option  value='600000'>$600k</option> \
					<option  value='650000'>$650k</option> \
					<option  value='700000'>$700k</option> \
					<option  value='750000'>$750k</option> \
					<option  value='800000'>$800k</option> \
					<option  value='850000'>$850k</option> \
					<option  value='900000'>$900k</option> \
					<option  value='950000'>$950k</option> \
					<option  value='1000000'>$1m</option> \
					<option  value='1100000'>$1.1m</option> \
					<option  value='1200000'>$1.2m</option> \
					<option  value='1250000'>$1.25m</option> \
					<option  value='1400000'>$1.4m</option> \
					<option  value='1500000'>$1.5m</option> \
					<option  value='1600000'>$1.6m</option> \
					<option  value='1700000'>$1.7m</option> \
					<option  value='1750000'>$1.75m</option> \
					<option  value='1800000'>$1.8m</option> \
					<option  value='1900000'>$1.9m</option> \
					<option  value='2000000'>$2m</option> \
					<option  value='2250000'>$2.25m</option> \
					<option  value='2500000'>$2.5m</option> \
					<option  value='2750000'>$2.75m</option> \
					<option  value='3000000'>$3m</option> \
					<option  value='3500000'>$3.5m</option> \
					<option  value='4000000'>$4m</option> \
					<option  value='5000000'>$5m</option> \
					<option  value='10000000'>$10m</option> \
					<option  value='20000000'>$20m</option> \
				</select> \
			</div> \
			<div class='fyeo_form_label'> \
				Max. Price \
			</div> \
			<div class='fyeo_form_control fyeo_baths'> \
				<select class='formVal' name='max-price'> \
					<option value=''>--</option> \
					<option value='20000'>$20k</option> \
					<option  value='30000'>$30k</option> \
					<option  value='50000'>$50k</option> \
					<option  value='100000'>$100k</option> \
					<option  value='130000'>$130k</option> \
					<option  value='150000'>$150k</option> \
					<option  value='200000'>$200k</option> \
					<option  value='250000'>$250k</option> \
					<option  value='300000'>$300k</option> \
					<option  value='350000'>$350k</option> \
					<option  value='400000'>$400k</option> \
					<option  value='450000'>$450k</option> \
					<option  value='500000'>$500k</option> \
					<option  value='550000'>$550k</option> \
					<option  value='600000'>$600k</option> \
					<option  value='650000'>$650k</option> \
					<option  value='700000'>$700k</option> \
					<option  value='750000'>$750k</option> \
					<option  value='800000'>$800k</option> \
					<option  value='850000'>$850k</option> \
					<option  value='900000'>$900k</option> \
					<option  value='950000'>$950k</option> \
					<option  value='1000000'>$1m</option> \
					<option  value='1100000'>$1.1m</option> \
					<option  value='1200000'>$1.2m</option> \
					<option  value='1250000'>$1.25m</option> \
					<option  value='1400000'>$1.4m</option> \
					<option  value='1500000'>$1.5m</option> \
					<option  value='1600000'>$1.6m</option> \
					<option  value='1700000'>$1.7m</option> \
					<option  value='1750000'>$1.75m</option> \
					<option  value='1800000'>$1.8m</option> \
					<option  value='1900000'>$1.9m</option> \
					<option  value='2000000'>$2m</option> \
					<option  value='2250000'>$2.25m</option> \
					<option  value='2500000'>$2.5m</option> \
					<option  value='2750000'>$2.75m</option> \
					<option  value='3000000'>$3m</option> \
					<option  value='3500000'>$3.5m</option> \
					<option  value='4000000'>$4m</option> \
					<option  value='5000000'>$5m</option> \
					<option  value='10000000'>$10m</option> \
					<option  value='20000000'>$20m</option> \
				</select> \
			</div> \
			<div class='fyeo_form_label'> \
				Min. Beds \
			</div> \
			<div class='fyeo_form_control fyeo_beds'> \
				<select class='formVal' name='min-beds'> \
					<option value=''>--</option> \
					<option value='1'>1</option> \
					<option value='2'>2</option> \
					<option value='3'>3</option> \
					<option value='4'>4</option> \
					<option value='5'>5</option> \
				</select> \
			</div> \
			<div class='fyeo_form_label'> \
				Min. Baths \
			</div> \
			<div class='fyeo_form_control fyeo_baths'> \
				<select class='formVal' name='min-baths'> \
					<option value=''>--</option> \
					<option value='1'>1</option> \
					<option value='2'>2</option> \
					<option value='3'>3</option> \
					<option value='4'>4</option> \
					<option value='5'>5</option> \
				</select> \
			</div> \
			<div class='fyeo_form_control fyeo_international'>  \
				<input type='checkbox' value='1' name='international' /> <label>Available to International Buyers</label> \
			</div> \
			<!-- div class='fyeo_form_preferences'> \
				<p><b>How would you like to receive your property alerts?</b> </p> \
				<input  class='formVal' type='radio' name='preferences' value='email' checked> \
				Via Email &nbsp; &nbsp; &nbsp; \
				<input  class='formVal' type='radio' name='preferences' value='phone'> \
				Via Text \
			</div --> \
			<input type='hidden' name='affiliate_rsn' value='3' /> \
			<input type='hidden' name='listing_type' value='sales' /> \
			<input type='submit' class='fyeo_submit' /> \
			<!-- button class='fyeo_submit' onclick='fyeoSubmitForm()' href='#'>Save Property Alert Settings</button --> \
		</form> \
	</div> <!-- Close Tab --> \
	\
	\
	\
	\
	<div id='tab-rentals' class='tab-content' data-listingtype='rentals'> \
		<form class='fyeo_form' id='form_4yio_rentals'> \
			<p>Signup below to receive our latest rental listings.</p> \
			<div class='fyeo_form_label'> \
				Name \
			</div> \
			<div class='fyeo_form_control'> \
				<input class='formVal' type='text' name='name' placeholder='Name' /> \
			</div> \
			<div class='fyeo_form_label'> \
				Email<span style='color:red'>*</span> \
			</div> \
			<div class='fyeo_form_control'> \
				<input class='formVal' type='email' name='email' placeholder='Email Address' /> \
			</div> \
			<div class='fyeo_form_label'> \
				Phone \
			</div> \
			<div class='fyeo_form_control'> \
				<input class='formVal' type='text' name='phone' placeholder='Phone' /> \
			</div> \
			<div class='fyeo_form_label'> \
				Property Type \
			</div> \
			<div class='fyeo_form_control'> \
				<select multiple class='formVal' name='property_type[]' id='property_type_rentals_4yio'> \
					<option value=''>All Property Types</option> \
					<option value='Condo'>Condo</option> \
					<option value='Single Family Home'>Single Family Home</option> \
				</select> \
			</div> \
			<div class='fyeo_form_label'> \
				Location \
			</div> \
			<div class='fyeo_form_control'> \
				<select multiple class='formVal' name='location[]'  id='location_rentals_4yio'> \
					<option value=''>Any Location</option> \
					<option value=\"City of Hamilton\">City of Hamilton</option> \
					<option value=\"Devonshire\">Devonshire</option> \
					<option value=\"Hamilton Parish\">Hamilton Parish</option> \
					<option value=\"Paget\">Paget</option> \
					<option value=\"Pembroke\">Pembroke</option> \
					<option value=\"Sandys\">Sandys</option> \
					<option value=\"Smith's\">Smith's</option> \
					<option value=\"Southampton\">Southampton</option> \
					<option value=\"St. George's\">St. George's</option> \
					<option value=\"Warwick\">Warwick</option> \
				</select> \
			</div> \
			<div class='fyeo_form_label'> \
				Min. Price \
			</div> \
			<div class='fyeo_form_control fyeo_beds'> \
				<select class='formVal' name='min-price'> \
					<option value=''>--</option> \
					<option value='500'>$500</option> \
					<option value='1000'>$1,000</option> \
					<option value='2000'>$2,000</option> \
					<option value='3000'>$3,000</option> \
				</select> \
			</div> \
			<div class='fyeo_form_label'> \
				Max. Price \
			</div> \
			<div class='fyeo_form_control fyeo_baths'> \
				<select class='formVal' name='max-price'> \
					<option value=''>--</option> \
					<option value='1000'>$1,000</option> \
					<option value='2000'>$2,000</option> \
					<option value='4000'>$4,000</option> \
					<option value='5000'>$5,000</option> \
					<option value='7500'>$7,500</option> \
					<option value='10000'>$10,000</option> \
				</select> \
			</div> \
			<div class='fyeo_form_label'> \
				Min. Beds \
			</div> \
			<div class='fyeo_form_control fyeo_beds'> \
				<select class='formVal' name='min-beds'> \
					<option value=''>--</option> \
					<option value='1'>1</option> \
					<option value='2'>2</option> \
					<option value='3'>3</option> \
					<option value='4'>4</option> \
					<option value='5'>5</option> \
				</select> \
			</div> \
			<div class='fyeo_form_label'> \
				Min. Baths \
			</div> \
			<div class='fyeo_form_control fyeo_baths'> \
				<select class='formVal' name='min-baths'> \
					<option value=''>--</option> \
					<option value='1'>1</option> \
					<option value='2'>2</option> \
					<option value='3'>3</option> \
					<option value='4'>4</option> \
					<option value='5'>5</option> \
				</select> \
			</div> \
			<!-- div class='fyeo_form_preferences'> \
				<p><b>How would you like to receive your property alerts?</b> </p> \
				<input  class='formVal' type='radio' name='preferences' value='email' checked> \
				Via Email &nbsp; &nbsp; &nbsp; \
				<input  class='formVal' type='radio' name='preferences' value='phone'> \
				Via Text \
			</div --> \
			<input type='hidden' name='affiliate_rsn' value='3' /> \
			<input type='hidden' name='listing_type' value='rentals' /> \
			<input type='submit' class='fyeo_submit' /> \
			<!-- button class='fyeo_submit' onclick='fyeoSubmitForm()' href='#'>Save Property Alert Settings</button --> \
		</form> \
	</div> \
</div> \
";

document.getElementById("fyeo_popup").innerHTML = popup_html;
document.getElementById("fyeo_overlay").addEventListener("click", closeFyeoOverlay());