<!-- <script src="includes/js/jquery.js"></script> -->
<script src="includes/js/jquery/form.js"></script>
<!-- <script src="includes/js/jquery/thickbox.js"></script> -->
<link rel="stylesheet" type="text/css" href="includes/styles/thickbox.css" />


<script>
	// Add new element
	var items = [];
	function AddWebhook() {
		// Finding total number of elements added
		var total_element = $(".element").length;
	
		// last <div> with element class id
		var lastid = $(".element:last").attr("id");

		if(lastid) {
			var split_id = lastid.split("_");
			var nextindex = Number(split_id[1]) + 1;
		} else {
			var nextindex = 1;
		}
		
		var max = 25;
		$('#total_webhooks').val(nextindex);
		// Check total number elements
		if (total_element < max) {
					if (total_element == 0) {
						$(".add").after("<div class='element' id='div_" + nextindex + "'></div>");
					} else {
						// Adding new div container after last occurrence of element class
						$(".element:last").after("<div class='element' id='div_" + nextindex + "'></div>");
					}
					
					// Adding element to <div>
					// var webhook_html = 'URL: <input type="text" name="WebhookUrl_' + nextindex + '" class="Field250 form_text" value=""> <br> Events to Fire: <select name="webhook_event_' + nextindex + '" id="WebhookEvent"><option value="1">On Subscribe</option><option value="2">On Unsubscribe</option><option value="3">On Bounce</option></select>';
					var webhook_html = '<select name="webhook_event_' + nextindex + '" id="WebhookEvent">' +
							'<option value="1">On Subscribe</option>' +
							'<option value="2">On Unsubscribe</option>' +
							'<option value="3">On Bounce</option>' +
						'</select>&nbsp;URL: <input type="text" name="WebhookUrl_' + nextindex + '" class="Field250 form_text" value="">';
					$("#div_" + nextindex).append(webhook_html + "&nbsp; <span id='remove_" + nextindex + "' onclick='remove(" + nextindex + ")' class='remove'><!-- Heroicon minus-circle --><svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5 text-red-400\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z\" /></svg></span>");
				}
	}

	function remove(id) {

	  var deleteindex = id;
	  //var total_element = $('#total_webhooks').val();
	 // $('#total_webhooks').val(total_element - 1);
	  
	  // Remove <div> with id
	  $("#div_" + deleteindex).remove();

	}	

	$(function() {
		$(document.frmListEditor).submit(function(event) {
			try {

				var fieldNames = ["Name", "OwnerName", "OwnerEmail", "ReplyToEmail", "BounceEmail"];
				var emptyToks = ["%%LNG_EnterListName%%", "%%LNG_EnterOwnerName%%", "%%LNG_EnterOwnerEmail%%", "%%LNG_EnterReplyToEmail%%", "%%LNG_EnterBounceEmail%%"];
				var invalidToks = ["%%LNG_ListNameIsNotValid%%", "%%LNG_ListOwnerNameIsNotValid%%", "%%LNG_ListOwnerEmailIsNotValid%%", "%%LNG_ListReplyToEmailIsNotValid%%", "%%LNG_ListBounceEmailIsNotValid%%"];
				var form = this;

				var fields = jQuery.map(fieldNames, function(el, i) {
					return form.elements[el];
				});

				var error = false;
				jQuery.each(fields, function(i, el){
					if (el.value == '') {
						error = emptyToks[i];
						el.focus();
						return false;
					} else if (fieldNames[i].indexOf('Email') != -1 && !isValidEmail(el.value)) {
						error = invalidToks[i];
						el.focus();
						return false;
					}
				});

				if (error) {
					alpineAlert(error);
					return false;
				}

				var count = 0;
				for (var i = 0; i < $('#fields')[0].options.length; i++) {
					if ($('#fields')[0].options[i].selected) { count++; break; }
				}

				if (count == 0) {
					alpineAlert("%%LNG_SelectFields%%");
					$('#fields')[0].focus();
					return false;
				}

				return true;

			} catch(e) {
				alpineAlert('Unable to validate');
				return false;
			}
		});

		$('.CancelButton', document.frmListEditor).click(function() { alpineConfirm("%%GLOBAL_CancelButton%%", "", "OK", "Cancel", function() { document.location="index.php?Page=Lists" }); });

		$('.form_text', document.frmListEditor).focus(function() { this.select(); });

		$('#availablefields').click(AvailableFieldsClicked);
	});

	function AvailableFieldsClicked() {
		var availableFields = $('#availablefields').get(0);
		var visibleFields = $('#fields').get(0);
		for(var i = 0, j = availableFields.options.length; i < j; ++i) {
			var currentValue = availableFields.options[i].value;
			var currentText = availableFields.options[i].text;
			var entryInVisibleFields = $('ul li input[@value='+currentValue+']', visibleFields).get(0);

			if(availableFields.options[i].selected) {
				if(entryInVisibleFields) continue;

				var newIndex = document.frmListEditor['VisibleFields[]'].options.length;
				var newOption = new Option(currentText, currentValue);
				document.frmListEditor['VisibleFields[]'].options[newIndex] = newOption;
				$(ISSelectReplacement.add_option(document.frmListEditor['VisibleFields[]'], newOption, newIndex)).appendTo($('ul', visibleFields));
			} else {
				if(!entryInVisibleFields) continue;

				$(entryInVisibleFields).parent().remove();
				$('option[@value='+currentValue+']', document.frmListEditor['VisibleFields[]']).remove();
			}
		}
	}
</script>
<form name="frmListEditor" id="frmListEditor" method="post" action="index.php?Page=Lists&Action=%%GLOBAL_Action%%">
	<table cellspacing="0" cellpadding="0" width="100%" align="center">
		<tr>
			<td class="Heading1">
				%%GLOBAL_Heading%%
			</td>
		</tr>
		<tr>
			<td class="body pageinfo">
				<p>
					%%GLOBAL_Intro%%
				</p>
			</td>
		</tr>
		<tr>
			<td>
				%%GLOBAL_Message%%
			</td>
		</tr>
		<tr>
			<td>
				<input class="FormButton SubmitButton" type="submit" value="%%LNG_Save%%">
				<input class="FormButton CancelButton" type="button" value="%%LNG_Cancel%%" />
				<br />&nbsp;
				<table border="0" cellspacing="0" cellpadding="2" width="100%" class="Panel">
					<tr>
						<td colspan="2" class="Heading2">
							&nbsp;&nbsp;%%GLOBAL_ListDetails%%
						</td>
					</tr>
					<tr>
						<td class="FieldLabel">
							{template="Required"}
							%%LNG_ListName%%:&nbsp;
						</td>
						<td>
							<input type="text" name="Name" class="Field250 form_text" value="%%GLOBAL_Name%%">&nbsp;%%LNG_HLP_ListName%%
						</td>
					</tr>
					<tr>
						<td class="FieldLabel">
							{template="Required"}
							%%LNG_ListOwnerName%%:&nbsp;
						</td>
						<td>
							<input type="text" name="OwnerName" class="Field250 form_text" value="%%GLOBAL_OwnerName%%">&nbsp;%%LNG_HLP_ListOwnerName%%
						</td>
					</tr>
					<tr>
						<td class="FieldLabel">
							{template="Required"}
							%%LNG_ListOwnerEmail%%:&nbsp;
						</td>
						<td>
							<input type="text" name="OwnerEmail" class="Field250 form_text" value="%%GLOBAL_OwnerEmail%%">&nbsp;%%LNG_HLP_ListOwnerEmail%%
						</td>
					</tr>
					<tr>
						<td class="FieldLabel">
							{template="Required"}
							%%LNG_ListReplyToEmail%%:&nbsp;
						</td>
						<td>
							<input type="text" name="ReplyToEmail" class="Field250 form_text" value="%%GLOBAL_ReplyToEmail%%">&nbsp;%%LNG_HLP_ListReplyToEmail%%
						</td>
					</tr>
					<tr style="display: %%GLOBAL_ShowBounceInfo%%">
						<td class="FieldLabel">
							{template="Required"}
							%%LNG_ListBounceEmail%%:&nbsp;
						</td>
						<td>
							<input type="text" name="BounceEmail" class="Field250 form_text" value="%%GLOBAL_BounceEmail%%">&nbsp;%%LNG_HLP_ListBounceEmail%%
						</td>
					</tr>
					<tr>
						<td class="FieldLabel">
							{template="Not_Required"}
							%%LNG_NotifyOwner%%:&nbsp;
						</td>
						<td>
							<label for="NotifyOwner"><input type="checkbox" name="NotifyOwner" id="NotifyOwner" value="1" %%GLOBAL_NotifyOwner%%>%%LNG_NotifyOwnerExplain%%</label> %%LNG_HLP_NotifyOwner%%
						</td>
					</tr>
					<tr>
						<td class="FieldLabel">
							{template="Not_Required"}
							%%LNG_UnsubscribeReason%%:&nbsp;
						</td>
						<td  style="padding-bottom:10px;">
							<select name="SurveyID" class="Field250">
								%%GLOBAL_surveys_list%%
							</select>
							&nbsp;%%LNG_HLP_UnsubscribeReason%%
						</td>
					</tr>
					
					<tr>
						<td class="FieldLabel">
							&nbsp;&nbsp; Webhook(s):
						</td>
						<td>
							<div class="container">
								%%GLOBAL_webhook_data%%
							</div>
							
						</td>
					</tr>

					<tr %%GLOBAL_ShowCustomFields%%>
						<td class="EmptyRow" colspan="2">
							&nbsp;
						</td>
					</tr>
					<tr %%GLOBAL_ShowCustomFields%%>
						<td colspan="2" class="Heading2">
							&nbsp;&nbsp;%%LNG_Add_Customfields_To_List%%
						</td>
					</tr>
					<tr %%GLOBAL_ShowCustomFields%%>
						<td class="FieldLabel">
							%%LNG_AddTheseFields%%:
						</td>
						<td>
							<select id="availablefields" name="AvailableFields[]" multiple="multiple" class="ISSelectReplacement" style="%%GLOBAL_VisibleFields_Style%%" onClick="AvailableFieldsClicked();">
								%%GLOBAL_AvailableFields%%
							</select>&nbsp;%%LNG_HLP_AddTheseFields%%
						</td>
					</tr>

					<tr>
						<td class="EmptyRow" colspan="2">
							&nbsp;
						</td>
					</tr>
					<tr>
						<td colspan="2" class="Heading2">
							&nbsp;&nbsp;%%LNG_VisibleFields%%
						</td>
					</tr>
					<tr>
						<td class="FieldLabel">
							%%LNG_ShowTheseFields%%:
						</td>
						<td>
							<select id="fields" name="VisibleFields[]" multiple="multiple" class="ISSelectReplacement" style="%%GLOBAL_VisibleFields_Style%%">
								%%GLOBAL_VisibleFields%%
							</select>&nbsp;%%LNG_HLP_VisibleFields%%
						</td>
					</tr>
					<tr>
						<td class="EmptyRow" colspan="2">
							&nbsp;
						</td>
					</tr>
					<tr>
						<td colspan="2" class="Heading2">
							&nbsp;&nbsp;%%LNG_PredefinedCustomFields%%
						</td>
					</tr>
					<tr>
						<td class="FieldLabel">
							{template="Not_Required"}
							%%LNG_CompanyName%%:&nbsp;
						</td>
						<td>
							<input type="text" name="CompanyName" class="Field250 form_text" value="%%GLOBAL_CompanyName%%">&nbsp;%%LNG_HLP_CompanyName%%
						</td>
					</tr>
					<tr>
						<td class="FieldLabel">
							{template="Not_Required"}
							%%LNG_CompanyAddress%%:&nbsp;
						</td>
						<td>
							<input type="text" name="CompanyAddress" class="Field250 form_text" value="%%GLOBAL_CompanyAddress%%">&nbsp;%%LNG_HLP_CompanyAddress%%
						</td>
					</tr>
					<tr>
						<td class="FieldLabel">
							{template="Not_Required"}
							%%LNG_CompanyPhone%%:&nbsp;
						</td>
						<td>
							<input type="text" name="CompanyPhone" class="Field250 form_text" value="%%GLOBAL_CompanyPhone%%" maxlength="20">&nbsp;%%LNG_HLP_CompanyPhone%%
						</td>
					</tr>
					{template="bounce_details"}
				</table>
				<table width="100%" cellspacing="0" cellpadding="2" border="0" class="PanelPlain">
					<tr>
						<td width="200" class="FieldLabel">&nbsp;</td>
						<td valign="top" height="30">
							<input class="FormButton SubmitButton" type="submit" value="%%LNG_Save%%" />
							<input class="FormButton CancelButton" type="button" value="%%LNG_Cancel%%" />
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</form>
