<style>
	.notification_success {
		position: fixed;
		top: 20px;
		right: 20px;
		background-color: #51a351;
		color: white;
		padding: 15px;
		border-radius: 5px;
		z-index: 1000;
		transition: opacity 0.5s;
		box-shadow: 0 0 12px #000;
		cursor: pointer;
	}

	.notification_error {
		position: fixed;
		top: 20px;
		right: 20px;
		background-color: #AE342C;
		color: white;
		padding: 15px;
		border-radius: 5px;
		z-index: 1000;
		transition: opacity 0.5s;
		box-shadow: 0 0 12px #000;
		cursor: pointer;
	}
</style>
<div id="notificationSuccess" class="notification_success" style="display: none;">
	<div style="display: flex; align-items: center;">
    	<img style="margin-right: 10px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==">
    	<span id="notification-message-success"></span>
	</div>
</div>
<div id="notificationError" class="notification_error" style="display: none;">
	<div style="display: flex; align-items: center;">
    	<img style="margin-right: 10px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=">
    	<span id="notification-message-error"></span>
	</div>
</div>
<script tipe="module">
function removeErrorCssMsg() {
	$(".inputku").removeClass("border-danger");
	$("em").text('');
}

function tandaPemisahTitik(b){
	var _minus = false;
	if (b<0) _minus = true;

	b = b.toString();
	b=b.replace(".","");
	b=b.replace("-","");
	c = "";
	panjang = b.length;
	j = 0;

	for (i = panjang; i > 0; i--){
		j = j + 1;
		if (((j % 3) == 1) && (j != 1)){
			c = b.substr(i-1,1) + "." + c;
		} else {
			c = b.substr(i-1,1) + c;
		}
	}

	if (_minus) c = "-" + c ;

	return c;
}

function numbersonly(ini, e){
	if (e.keyCode>=49){

		if(e.keyCode<=57){
			a = ini.value.toString().replace(".","");
			b = a.replace(/[^\d]/g,"");
			b = (b=="0")?String.fromCharCode(e.keyCode):b + String.fromCharCode(e.keyCode);
			ini.value = tandaPemisahTitik(b);

			return false;
		}
		else if(e.keyCode<=105){
			if(e.keyCode>=96){
				//e.keycode = e.keycode - 47;
				a = ini.value.toString().replace(".","");
				b = a.replace(/[^\d]/g,"");
				b = (b=="0")?String.fromCharCode(e.keyCode-48):b + String.fromCharCode(e.keyCode-48);
				ini.value = tandaPemisahTitik(b);
				//alert(e.keycode);
				return false;
			}else {
				return false;
			}
		}
		else {
			return false;
		}
	}else if (e.keyCode==48){
		a = ini.value.replace(".","") + String.fromCharCode(e.keyCode);
		b = a.replace(/[^\d]/g,"");

		if (parseFloat(b)!=0){
			ini.value = tandaPemisahTitik(b);
			return false;
		} else {
			return false;
		}

	}else if (e.keyCode==95){
		a = ini.value.replace(".","") + String.fromCharCode(e.keyCode-48);
		b = a.replace(/[^\d]/g,"");

		if (parseFloat(b)!=0){
			ini.value = tandaPemisahTitik(b);
			return false;
		} else {
			return false;
		}
	}else if (e.keyCode==8 || e.keycode==46){
		a = ini.value.replace(".","");
		b = a.replace(/[^\d]/g,"");
		b = b.substr(0,b.length -1);

		if (tandaPemisahTitik(b)!=""){
			ini.value = tandaPemisahTitik(b);
		} else {
			ini.value = "";
		}

		return false;
	} else if (e.keyCode==9){
		return true;
	} else if (e.keyCode==17){
		return true;
	} else {
		//alert (e.keyCode);
		return false;
	}

}

function toastrku(flag, message)
{
	$.each(message, function (key, value) {
		var msg = '';
		var lengthnya = value.length;
		for (let i = 0; i < lengthnya; i++)
		{	
			if(0!=i && (lengthnya-1)==i)
				msg+=", ";
			
			msg+=value[i];
			
		}
		if('success'==flag)
			toastrSuccessBuild(msg);
		else if('error' ==flag)
			toastrErrorBuild(msg);
	});
}

function toastrSuccessBuild(message) {	
	const notification = document.getElementById('notificationSuccess');
	const messageElement = document.getElementById('notification-message-success');
	
	messageElement.textContent = message;
	notification.style.display = 'block';
	notification.style.opacity = '1';

	setTimeout(() => {
		notification.style.opacity = '0';
		setTimeout(() => {
			notification.style.display = 'none';
		}, 500);
	}, 3000);
}

function toastrErrorBuild(message) {
	const notification = document.getElementById('notificationError');
	const messageElement = document.getElementById('notification-message-error');
	
	messageElement.textContent = message;
	notification.style.display = 'block';
	notification.style.opacity = '1';

	setTimeout(() => {
		notification.style.opacity = '0';
		setTimeout(() => {
			notification.style.display = 'none';
		}, 500);
	}, 3000);
}
</script>
