<a href="clientarea.php?action=productdetails&id={$serviceid}" class="btn btn-success">&laquo; Back</a>
<table class="table table-list dataTable no-footer dtr-inline">
	<tr><td>Currently selected authentication type: </td><td>{$strings[$auths.currentAuthenticationType]}</td>
		<tr><td>Available auth types:</td><td>

			{foreach from=$auths.availableAuthenticationTypes item=authType}<label class="form-check ">
				<input type="radio" value="{$authType}" class="form-check-input" name="authType" {if $authType eq $auths.currentAuthenticationType}checked{/if}>{$strings.$authType} 
				  </label>
			{/foreach}
			</td></tr>
		</table>
		<p id="username_password-block" class="alert alert-info">Credentials will be generated automatically</p>
		<table class="table table-list dataTable no-footer dtr-inline" id="whitelist-table">
<tr><th colspan="2">
Add new IP: <input type="text" name="ip" id="newIP"><input class="btn btn-sm btn-default" type="button" value="Add" onclick="addIP(document.getElementById('newIP').value)">
<span id="whitelist-error" style="display:none"></span>
</th></tr>
<tr><th style="text-align:center">IP</th><th style="text-align:center">Actions</th></tr>
</table>
<buttton type="button" class="btn btn-block btn-success" onclick="return save();" id="save" disabled>Save</button>
{literal}
<script>
	$(document).ready(function () {

  $('input[name="authType"][value="{/literal}{$currentAuthType}{literal}"]').prop('checked', true).trigger('change');
});

$('input[name="authType"]').on('change', function() {
  if ($(this).val() === 'IP_WHITELIST') {
    $('#whitelist-table').show();
    $('#username_password-block').hide();

  } else {
    $('#whitelist-table').hide();
    $('#username_password-block').show();
  }
});

var ipwhitelist = {/literal}{if $ipWhitelist}{$ipWhitelist.whitelistedIps|json_encode}{else}[]{/if}{literal};
const mainPageUrl = 'clientarea.php?action=productdetails&id={/literal}{$serviceid}{literal}';

if(ipwhitelist !== null)
{
	ipwhitelist.forEach(ip => addIP(ip))
}	
function save()
{
	if($('input[name="authType"]').val() === 'IP_WHITELIST' && (!ipwhitelist || ipwhitelist.length === 0))
	{
		document.getElementById('whitelist-error').innerHTML = 'IP Whitelist must have at least 1 item';
		document.getElementById('whitelist-error').style.display = 'inline-block';
		return false;
	}
  fetch(window.location.href+'&act=save', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
	    ipwhitelist: ipwhitelist, // możesz też skrócić do samego `ipwhitelist`
	    auth:  $('input[name="authType"]').val()
  })
  })
  .then(response => {
  	window.location.href = mainPageUrl
  })
  .catch(error => {
    // obsługa błędu
    console.error(error);
  });
}
function removeIP(ip, row)
{
	ipwhitelist = ipwhitelist.filter(i => i !== ip.trim())
	document.getElementById('whitelist-table').deleteRow(row.parentNode.parentNode.rowIndex)

}
function testIP(ip)
{
	const regex = /^(?!0\.|10\.|100\.[6-9]\d\.|100\.1[0-1]\d\.|169\.254\.|172\.(1[6-9]|2\d|3[01])\.|192\.0\.0\.|192\.0\.2\.|192\.88\.99\.|192\.168\.|198\.18\.|198\.51\.100\.|203\.0\.113\.|22[4-9]\.|23[0-9]\.|24[0-9]\.|25[0-5]\.)(25[0-5]|2[0-4]\d|[01]?\d{1,2})\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})$/;

	return regex.test(ip);
}

function addIP(ip)
{
	if(!testIP(ip))
	{
		document.getElementById('whitelist-error').innerHTML = 'IP is incorrect.';
		document.getElementById('whitelist-error').style.display = 'inline-block';
		return;
	}
	if(ipwhitelist && ipwhitelist.length === 3)
	{
		document.getElementById('whitelist-error').innerHTML = 'Maximum number reached';
		document.getElementById('whitelist-error').style.display = 'inline-block';
		return;
	}
	if(!ipwhitelist.includes(ip.trim())) {
		ipwhitelist.push(ip.trim())
	}
	document.getElementById('whitelist-error').style.display = 'none';
	var table = document.getElementById("whitelist-table");
	document.getElementById("newIP").value=''
	var row = table.insertRow(-1);

	var cell1 = row.insertCell(0);
	var cell2 = row.insertCell(1);

	cell1.innerHTML = ip;
	cell2.innerHTML = '<button class="btn btn-xs btn-default" type="button" onclick="removeIP(\''+ip+'\', this)">Remove</button>';

}


</script>
<style>
#whitelist-error
{
	padding:3px;
	border:1px solid red;
	color:red;
}
</style>
{/literal}