{% extends "snippets/layout.html" %}

{% block title 'Wie teuer ist eine Pizza im Verhältnis zum Flächeninhalt? | Maximilian Möhring' %}

{% block description "Berechnet die Preise für Pizza im Verhältnis zum Flächeninhalt. Lieber zwei kleine oder eine große Pizza kaufen?" %}
	
{% block css %}
		.main {
			font-size: inherit !important;
		}
		.show-pizza {
			height: 10cm;
			width: 10cm;
			background-color: #a10a09;
			border-radius: 50%;
			margin-left: 10px;
			margin-top: 20px;
			border: 0.5cm solid #fff38a;
		}
		math {
			font-size: 1.5rem;
		}
		.btn-tertiary {
			background-color: #fd8a02;
			margin-left: .01rem;
		}
		.btn-tertiary:hover {
			filter: brightness(0.85);
		}
		.btn-hide {
			background-color: grey;
		}
		.hidden {
			display: none;
		}
{% endblock %}

{% block main %}
<div class="container">

	<div class="flavor-text">
		<h1>Wie teuer ist eine Pizza im Verhältnis zum Flächeninhalt?</h1>
		Auch bekannt als: <em>Sollte man die kleinere oder größere Pizza nehmen? Ist es günstiger zwei Pizzen zu kaufen, oder eine zu teilen?</em>
	</div>
	<!-- 	Flächeninhalt: π * r^2
		Umfang: π * d
	-->
	<form id="preis">
		<label id="pizza-label-1" class="hidden">
			<h2>Erste Pizza</h2>
		</label>
		<div class="form-group">
			<label for="d1">Durchmesser in cm:</label>
			<input id="d1" class="form-control" type="number" step="0.1" placeholder="Durchmesser in cm" required>
		</div>

		<div class="form-group">
			<label for="p1">
				Preis in Euro:
			</label>
			<input id="p1" class="form-control" type="number" step="0.1" placeholder="Preis in €" required>
		</div>

		<div class="form-group">
			<label for="r1">
				<strong>(Optional)</strong> Randstärke in cm (Wie viel der Pizza ist Rand?)
			</label>
			<input id="r1" class="form-control" type="number" step="0.1" placeholder="Randstärke in cm">
		</div>

		<div class="form-group" id="submit-buttons">
			<button class="btn btn-primary" type="submit">Preis berechnen</button>
			<button id="compare" class="btn btn-tertiary" type="button">Vergleichen +</button>
		</div>
	</form>
	<form id="preis2" class="hidden">
		<label>
			<h2>Zweite Pizza</h2>
		</label>
		<div class="form-group">
			<label for="d2">Durchmesser in cm:</label>
			<input id="d2" class="form-control" type="number" step="0.1" placeholder="Durchmesser in cm" required>
		</div>

		<div class="form-group">
			<label for="p2">
				Preis in Euro:
			</label>
			<input id="p2" class="form-control" type="number" step="0.1" placeholder="Preis in €" required>
		</div>

		<div class="form-group">
			<label for="r2">
				<strong>(Optional)</strong> Randstärke in cm (Wie viel der Pizza ist Rand?)
			</label>
			<input id="r2" class="form-control" type="number" step="0.1" placeholder="Randstärke in cm">
		</div>

		<div class="form-group">
			<button class="btn btn-primary" type="submit">Preis berechnen</button>
			<button id="hide" class="btn btn-tertiary btn-hide" type="button">Verbergen -</button>
		</div>
	</form>

	<div id="rec" class="alert alert-info hidden">
	</div>
	<div id="result" class="hidden">
		<table class="table table-striped table-responsive-sm table-dark">
			<thead>
				<tr>
					<th>
						(~˘▾˘)~
					</th>
					<th id="pizza-head-1">
						Pizza
					</th>
					<th id="pizza-head-2" class="hidden">
						Pizza 2
					</th>
				</tr>
			</thead>

			<tbody>
				<tr>
					<th>
						Flächeninhalt<span class="Rand"> inklusive Rand</span>:
					</th>
					<td id="flächeninhalt1">
					</td>
					<td id="flächeninhalt2">
					</td>
				</tr>
				<tr class="Rand">
					<th>
						Flächeninhalt ohne Rand (nur Pizzabelag):
					</th>
					<td id="ohneRand1">
					</td>
					<td id="ohneRand2">
					</td>
				</tr>
				<tr class="Rand">
					<th>
						Flächeninhalt des Randes (ohne Belag!):
					</th>
					<td id="nurRand1">
					</td>
					<td id="nurRand2">
					</td>
				</tr>
				<tr class="Rand">
					<th>
						&#10132; Verhältnis Rand zu Belag (je höher, desto besser):
					</th>
					<td id="verhältnis1">
					</td>
					<td id="verhältnis2">
					</td>
				</tr>
				<tr>
					<th>
						&#10132; Wie viel Pizza-cm² pro Euro (inklusive Rand):
					</th>
					<td id="kostenVerhältnisMitRand1">
					</td>
					<td id="kostenVerhältnisMitRand2">
					</td>
				</tr>
				<tr class="Rand">
					<th>
						&#10132; Wie viel Pizza-cm² pro Euro (nur Belag):
					</th>
					<td id="kostenVerhältnisOhneRand1">
					</td>
					<td id="kostenVerhältnisOhneRand2">
					</td>
				</tr>
				<tr>
					<th>
						Anteilige Kosten nur für den Pizzabelag:
					</th>
					<td id="kostenOhneRand1">
					</td>
					<td id="kostenOhneRand2">
					</td>
				</tr>
				<tr class="Rand">
					<th>
						Anteilige Kosten nur für den Rand:
					</th>
					<td id="kostenNurRand1">
					</td>
					<td id="kostenNurRand2">
					</td>
				</tr>
			</tbody>
		</table>

		<div id="keinenRandAlert" class="hidden alert" style="padding-left: 0;">
			<em>Für genauere Angaben gib einen geschätzen Rand an.</em>
		</div>
	</div>

	<br>
	<span id="pizza-wrap" class="hidden">
		<p>Ungefähre Darstellung der Pizzagröße <a href="#disclaimer">*</a></p>
		<div id="pizza1" class="show-pizza"></div>
		<div id="pizza2" class="show-pizza hidden"></div>

		<p id="disclaimer"><strong>* Warnung: Sehr ungenau! Hängt von eurem Bildschirm ab und schwankt sogar um mehrere Centimeter!</strong></p>
	</span>
</div>

	<script>
	var hatKeinenRand = true;
	var bestRatioMitRand = [];
	var bestRatio = [];
	var rec = "";
	function calc(id) {
			d = document.getElementById('d' + id).value.replace(",", ".");
			p = document.getElementById('p' + id).value.replace(",", ".");
			r = document.getElementById('r' + id).value.replace(",", ".");

			f = ( Math.PI * Math.pow((d/2),2) );
			fr = ( Math.PI * Math.pow((d/2)-r,2) );
			frpp = (( Math.PI * Math.pow((d)/2,2) ) - ( Math.PI * Math.pow((d/2)-r,2) ));
			v = fr / frpp;
			fp = f / p;
			frp = fr / p;
			pf = p / f;
			fpr = pf * fr;
			fprpp = pf * frpp;

			document.getElementById('flächeninhalt' + id).innerHTML =  f.toFixed(2) + " cm²";
			document.getElementById('ohneRand' + id).innerHTML =  fr.toFixed(2) + " cm²";
			document.getElementById('nurRand' + id).innerHTML =  frpp.toFixed(2) + " cm²";

			document.getElementById('verhältnis' + id).innerHTML =  "1 : " + v.toFixed(2);
			bestRatio.push(v.toFixed(2));

			document.getElementById('kostenVerhältnisMitRand' + id).innerHTML =  fp.toFixed(2) + " <math><mfrac><mi>cm²</mi><mi>€</mi></math><!-- <br><br> (entspricht " + pf.toFixed(2) + " <math><mfrac><mi>€</mi><mi>cm²</mi></math>)-->";
			bestRatioMitRand.push(fp.toFixed(2));
			document.getElementById('kostenVerhältnisOhneRand' + id).innerHTML =  frp.toFixed(2) + " <math><mfrac><mi>cm²</mi><mi>€</mi></math><!-- <br><br> (entspricht " + pf.toFixed(2) + " <math><mfrac><mi>€</mi><mi>cm²</mi></math>)-->";

			document.getElementById('kostenOhneRand' + id).innerHTML =  fpr.toFixed(2) + " €";
			document.getElementById('kostenNurRand' + id).innerHTML =  fprpp.toFixed(2) + " €";

			document.getElementById('pizza' + id).style.width = d + "cm";
			document.getElementById('pizza' + id).style.height= d + "cm";
			if ( r ) {
				document.getElementById('pizza' + id).style.border= r + "cm solid rgb(230, 219, 128)";
			} else {
				document.getElementById('pizza' + id).style.border = 0;
			}
			document.body.style.zoom = 1.0;

			if ( 0 != r ) {
				hatKeinenRand = false;
			}

	};
	function clicked(both = false) {
			document.getElementById('result').classList.remove("hidden");
			document.getElementById('pizza-wrap').classList.remove("hidden");
			calc("1");
			if( both ) {
				calc("2");
			}

			if ( hatKeinenRand ) {
				// Keinen Rand angegeben, muss also auch nicht angezeigt werden
				document.querySelectorAll('.Rand').forEach(function(item) {
					item.classList.add('hidden');
				});
			} else {
				// Zeige auch die Ergebnisse, die den Rand berücksichtigen
				document.querySelectorAll('.Rand').forEach(function(item) {
					item.classList.remove('hidden');
				});
			}

			if ( bestRatioMitRand.length > 1 && bestRatioMitRand[0] != bestRatioMitRand[1] ) {
				if ( bestRatioMitRand[0] > bestRatioMitRand[1] ) {
					rec = "Das beste Preis-Leistungs-Verhältnis hat <strong>Pizza 1</strong>.";
				} else {
					rec = "Das beste Preis-Leistungs-Verhältnis hat <strong>Pizza 2</strong>.";
				}

				if ( ! hatKeinenRand && bestRatio[0] != bestRatio[1] ) {
					if ( bestRatio[0] > bestRatio[1] ) {
						rec = rec + " Das beste Verhältnis zwischen Rand und Belag hat <strong>Pizza 1</strong>.";
					} else {
						rec = rec + " Das beste Verhältnis zwischen Rand und Belag hat <strong>Pizza 2</strong>.";
					}
				}
			}

			if ( rec ) {
				// Zeig Empfehlung an
				document.getElementById('rec').classList.remove("hidden");
				document.getElementById('rec').innerHTML = rec;

				// Scrolle zur korrekten Stelle
				document.getElementById('rec').scrollIntoView({
					behavior: 'smooth'
				});
			} else {
				// Scrolle zur korrekten Stelle, wenn keine Rec angezeigt wird
				document.getElementById('result').scrollIntoView({
					behavior: 'smooth'
				});
			}

			if ( hatKeinenRand ) {
				document.getElementById('keinenRandAlert').classList.remove("hidden");
			} else {
				document.getElementById('keinenRandAlert').classList.add("hidden");
			}

			// back to default
			bestRatio = [];
			bestRatioMitRand = [];
			hatKeinenRand = true;
	};
	window.addEventListener("load",function() {
		document.getElementById('preis').addEventListener("submit", function(e) {
			e.preventDefault(); // before the code
			clicked();
		});
		document.getElementById('compare').addEventListener("click", function(e){
			document.getElementById('preis2').classList.remove("hidden");
			document.getElementById('pizza-label-1').classList.remove("hidden");
			document.getElementById('submit-buttons').classList.add("hidden");
		});
		document.getElementById('hide').addEventListener("click", function(e){
			document.getElementById('preis2').classList.add("hidden");
			document.getElementById('pizza-label-1').classList.add("hidden");
			document.getElementById('submit-buttons').classList.remove("hidden");
		});
		document.getElementById('preis2').addEventListener("submit",function(e) {
			e.preventDefault(); // before the code

			document.getElementById('pizza-head-1').innerHTML = "Pizza 1";
			document.getElementById('pizza-head-2').classList.remove("hidden");
			document.getElementById('pizza2').classList.remove("hidden");

			clicked(true);
		});
	});
	if ('serviceWorker' in navigator){
		navigator.serviceWorker.register('serviceworker.js').then(function(registration){
			console.log('ServiceWorker registration successful with scope: ', registration.scope);
		}).catch(function(err){
			console.log('ServiceWorker registration failed: ', err);
		});
	}
	</script>
{% endblock %}