<!DOCTYPE html>
<html>
<head>
	<title>Rechner zwischen Brutto-Netto-KoLe</title>
	<link rel="stylesheet" href="https://wtf-eg.de/css/style.css"/>
<style>
<!--
	@media only screen {
	}
-->
	@media only screen and (max-width: 600px){
		body #wrap { font-size: 2.1em; }
		input[type='number'],input+label { display: block;}
	}
	@media only screen and (min-width: 768px){
		label {
			display:inline-block;
			width: 12ex;
		}
		body #wrap {
			font-size: 1.2em;
		}
	}

	#wrap {
		display: inline-block;
	}
	div fieldset{
		margin: 0 auto;
		max-width: 50ex;
		padding: 2ex;
	}
	legend{
		margin-bottom: 0px;
	}
	.radiogroup > legend{
		min-width: 20ex;
		display: inline-block;
		float: left;
	}
	.radiogroup > label{
		display: inline;
	}
	label{ min-width: 20ex; }
	input[type='number']{text-align:right;}
	input[readonly='readonly']{background-color:#eee;}
	h1{
		font-size: 2em;
		text-align: center;
		margin: 1ex auto 2ex auto;
	}
	#center_footer {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
</head>
<body>
	<div id="#wrap">
	<h1>Rechner zwischen Brutto-Netto-KoLe</h1>
	<noscript>
		Dieser Rechner ist auf JavaScript angewiesen!
	</noscript>
<fieldset>
	<legend></legend>
	<section class="radiogroup">
		<legend>Eingangsgr&ouml;&szlig;e</legend><!--
		--><input accesskey="b" type="radio" name="b" value="e" id="bb" class="bb" checked="checked"/>&nbsp;<label for="bb"><u>B</u>rutto</label><!--
		--><input accesskey="n" type="radio" name="b" value="b" id="bn" class="bb"/>&nbsp;<label for="bn"><u>N</u>etto</label><!--
		--><input accesskey="k" type="radio" name="b" value="k" id="bk" class="bb"/>&nbsp;<label for="bk"><u>K</u>oLe</label>
	</section>
	<section>
		<div>
			<label for="e">Br<u>u</u>tto</label>
			<input accesskey="u" type="number" step="0.01" id="e" value="100.00"/>&thinsp;&euro;
		</div>
		<div>
			<label for="u">Umsatzsteuersatz</label>
			<input type="number" step="0.01" id="u" value="19.00"/>&thinsp;%
		</div>
		<div>
			<label for="us">Umsatzsteuer</label>
			<input readonly="readonly" type="number" step="0.01" id="us" value="0.00"/>&thinsp;&euro;
		</div>
		<div>
			<label for="n">N<u>e</u>tto</label>
			<input accesskey="e" type="number" step="0.01" id="n" value="0.00"/>&thinsp;&euro;
		</div>
		<div>
			<label for="ec">Entropie-Tarif</label><!-- ggf. k&uuml;nftig Grundlage wie Handbuch/Dokumentation verlinken -->
			<select id="ec">
				<option value="l" accesskey="l" name="low">Umsatz &leq; 1.000&nbsp;&euro;</option><!-- low: <=1 TEUR -->
				<option value="h" accesskey="h" name="high">Umsatz &gt; 1.000&nbsp;&euro;</option><!-- high: >1 TEUR -->
				<option value="c" accesskey="c" name="custom">nach&nbsp;Vereinbarung</option><!-- custom: separate agreement -->
			</select>
		</div>
		<div>
			<label for="z">Entropieumlagesatz</label>
			<input type="number" step="0.01" id="z" value="23.00"/>&thinsp;%
		</div>
		<div>
			<label for="eu">Entropieumlage</label>
			<input readonly="readonly" type="number" step="0.01" id="eu" value="23.00"/>&thinsp;&euro;
		</div>
		<div>
			<label for="k">K<u>o</u>Le</label>
			<input accesskey="o" type="number" step="0.01" id="k" value="0.00"/>&thinsp;&euro;
		</div>
	</section>
	<section>
		<button accesskey="r" id="b" type="button">Be<u>r</u>echnen</button>
	</section>

</fieldset>

	<script>
		var e=document.getElementById('e');
		var u=document.getElementById('u');
		var us=document.getElementById('us');
		var n=document.getElementById('n');
		var z=document.getElementById('z');
		var eu=document.getElementById('eu');
		var k=document.getElementById('k');
		var bb=document.getElementById('bb');
		var bn=document.getElementById('bn');
		var bk=document.getElementById('bk');
		var s = document.getElementById('b');
		var c = document.getElementById('ec');

		function getFormFloat(f){
			return parseFloat(f.value);
		}
		function roundCents(f){
			return f.toFixed(2);
		}

		s.addEventListener('click', function(){
			if(bk.checked){
				e.value = roundCents( getFormFloat(k) * ( 1 + getFormFloat(u) / 100 ) / ( 1 - getFormFloat(z) / 100 ) );
				n.value = roundCents( getFormFloat(k) / ( 1 - getFormFloat(z) / 100 ) );
			}else if(bb.checked){
				k.value = roundCents( getFormFloat(e) / ( 1 + getFormFloat(u) / 100 ) * ( 1 - getFormFloat(z) / 100 ) );
				n.value = roundCents( getFormFloat(e) / ( 1 + getFormFloat(u) / 100 ) );
			}else if(bn.checked){
				e.value = roundCents( getFormFloat(n) * ( 1 + getFormFloat(u) / 100 ) );
				k.value = roundCents( getFormFloat(n) * ( 1 - getFormFloat(z) / 100 ) );
			}
			us.value = roundCents(e.value * getFormFloat(u) / 100 );
			eu.value = roundCents(n.value * getFormFloat(z) / 100 );
		});
		e.addEventListener('change', function(){bb.checked = true;});
		n.addEventListener('change', function(){bn.checked = true;});
		c.addEventListener('change', function(){
			var selInd=this.selectedIndex;
			console.log('Entropie-Tarif: '+selInd+'('+z.disabled+': '+z.value+')');
			switch(selInd){
				case 0: //low: <1.000 EUR revenue
					//23.0 %
					z.value='23.00';
					z.disabled=true;
					break;;
				case 1: //high: >1.000 EUR revenue
					//11.5 %
					z.disabled=true;
					z.value='11.50';
					break;;
				case 2: //custom: according toseparate agreement
					z.disabled=false;
					//~ z.focus();
					break;;
			}
		});
		// set entropy tax to standard value
		c.selectedIndex=0;
		z.value='23.00';
		z.disabled=true;
		// calc
		s.click();
	</script>
	<div id="center_footer">
	<p>Der Quellcode befindet sich unter <a href="https://git.wtf-eg.de/wtf-eg/simplekolecalc">https://git.wtf-eg.de/wtf-eg/simplekolecalc</a>. </p>
	</div>
	</div>
</body>
</html>