<?php require_once __DIR__ . '/engine/engine.php'; ?>
<?php require_once __DIR__ . '/engine/api-handling/api_helpers.php'; ?>
<?php require_once __DIR__ . '/views/header.php'; ?>
<?php require_once __DIR__ . '/views/navigation.php'; ?>

<main class="flex-grow-1">
	<section>
		<div class="container my-5">
	    	<div class="row">
				<div class="col-12">
					<div class="row">
						<div class="col-md-6 offset-md-3">
							<h3>Money Management </h3>
							<div class="card mt-4">
								<div class="card-body">
									<h5>Positionsgröße berechnen</h5>
									<form id="mmForm">
										<div class="mb-3">
											<label class="form-label">Depotgröße (€)</label>
											<input type="number" step="0.01" min="0.01" name="capital" class="form-control" id="mmCapital" placeholder="100000" required>
										</div>
										
										<div class="mb-3">
											<label class="form-label">Risiko pro Trade (%)</label>
											<input type="number" step="0.01" min="0.01" name="risk_percent" class="form-control" id="mmRisk" placeholder="0.5" required>
										</div>
										
										<div class="mb-3">
											<label class="form-label">Richtung</label>
											<select name="direction" class="form-select" id="mmDirection" required>
												<option value="long">Long</option>
												<option value="short">Short</option>
											</select>
										</div>
										
										<div class="mb-3">
											<label class="form-label">Aktueller Kurs (€)</label>
											<input type="number" step="0.01" min="0.01" name="entry_price" class="form-control" id="mmEntry" placeholder="Aktueller Kurs" required>
										</div>
										
										<div class="mb-3">
											<label class="form-label">Volatilität (%)</label>
											<input type="number" step="0.01" min="0.01" name="volatility" class="form-control" id="mmVola" placeholder="10" required>
										</div>
									
										<button type="submit" class="btn btn-dark w-100" id="mmCalcBtn">Berechnen</button>
									</form>
									
									<div id="mmResult" class="small mt-3"></div>

									<script>
									document.addEventListener("DOMContentLoaded", function () {
										document.getElementById("mmForm").addEventListener("submit", function (e) {
											e.preventDefault();
									
											const formData = new FormData(this);
									
											fetch("/execute/money-management/money-management_calculate.php", {
												method: "POST",
												body: formData
											})
											.then(res => res.json())
											.then(data => {
											  if (data.error) {
												mmResult.innerHTML = `<span class="text-danger">${data.error}</span>`;
												return;
											  }
											
											  const nf0 = new Intl.NumberFormat('de-DE', { maximumFractionDigits: 0 });
											  const nf2 = new Intl.NumberFormat('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
											
											  const anzahl = Number(data.anzahl_aktien) || 0;
											
											  mmResult.innerHTML = `
												<ul class="list-group list-group-flush text-start">
												  <li class="list-group-item px-0 bg-transparent"><strong>Anzahl Aktien:</strong> ${nf0.format(anzahl)}</li>
												  <li class="list-group-item px-0 bg-transparent"><strong>Maximales Risiko:</strong> ${nf2.format(data.max_risiko)} €</li>
												  <li class="list-group-item px-0 bg-transparent"><strong>Verlust pro Aktie:</strong> ${nf2.format(data.verlust_pro_aktie)} €</li>
												  <li class="list-group-item px-0 bg-transparent"><strong>Investiertes Kapital:</strong> ${nf2.format(data.investiertes_kapital)} €</li>
												  <li class="list-group-item px-0 bg-transparent"><strong>Tatsächliches Risiko:</strong> ${nf2.format(data.tatsaechliches_risiko)} €</li>
												  <li class="list-group-item px-0 bg-transparent"><strong>Stop-Loss-Kurs:</strong> ${nf2.format(data.stop_loss_kurs)} €</li>
												  <li class="list-group-item px-0 bg-transparent"><strong>Möglicher Gewinn (€) bei Zielkurs:</strong> ${nf2.format(data.potenzieller_gewinn)} €</li>
												  <li class="list-group-item px-0 bg-transparent"><strong>Möglicher Gewinn (%) bei Zielkurs:</strong> ${nf2.format(data.prozentualer_gewinn)} %</li>
												  <li class="list-group-item px-0 bg-transparent"><strong>Volatilität:</strong> ${nf2.format(data.volatilitaet)} %</li>
												  <li class="list-group-item px-0 bg-transparent"><strong>CRV:</strong> ${nf2.format(data.crv)}</li>
												</ul>
											  `;
											})
											.catch(err => {
												document.getElementById("mmResult").innerHTML = `<span class="text-danger">Fehler bei der Berechnung</span>`;
												console.error(err);
											});
										});
									});
									</script>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="col-md-6 offset-md-3 mt-4">
					<div class="card p-3">
						<h5>CRV & Gewinnwahrscheinlichkeit</h5>
						<form id="crvForm">
							<div class="mb-3">
								<label class="form-label">Chance (TP in €)</label>
								<input type="number" step="0.01" class="form-control" id="chance">
							</div>
							<div class="mb-3">
								<label class="form-label">Risiko (SL in €)</label>
								<input type="number" step="0.01" class="form-control" id="risiko">
							</div>
							<div class="mb-3">
								<label class="form-label">oder direkt CRV</label>
								<input type="number" step="0.01" class="form-control" id="crvInput">
							</div>
							<div class="mb-3">
								<label class="form-label">Gewinnwahrscheinlichkeit (%)</label>
								<input type="number" step="0.1" class="form-control" id="wahrscheinlichkeit" required>
							</div>
							<button type="submit" class="btn btn-dark w-100">Berechnen</button>
						</form>
						<div class="mt-3" id="result"></div>
					</div>
				</div>
				
				<script>
				document.getElementById('crvForm').addEventListener('submit', function(e){
					e.preventDefault();
					let chance = parseFloat(document.getElementById('chance').value);
					let risiko = parseFloat(document.getElementById('risiko').value);
					let crvInput = parseFloat(document.getElementById('crvInput').value);
					let pWin = parseFloat(document.getElementById('wahrscheinlichkeit').value)/100;
					
					// CRV bestimmen
					let crv = !isNaN(crvInput) && crvInput > 0 
								? crvInput 
								: (chance && risiko ? chance/risiko : NaN);
					
					if(isNaN(crv)){
						document.getElementById('result').innerHTML = `<p class="text-danger">Bitte CRV oder Chance & Risiko angeben.</p>`;
						return;
					}
					
					// Erwartungswert pro 1€ Risiko
					let ev = (pWin * crv) - (1-pWin);
					let profit = ev > 0 ? "Ja" : "Nein";
					
					document.getElementById('result').innerHTML = `
						<p><b>CRV:</b> ${crv.toFixed(2)} : 1</p>
						<p><b>Erwartungswert pro 1€ Risiko:</b> ${ev.toFixed(2)} €</p>
						<p><b>Langfristig profitabel?</b> ${profit}</p>
					`;
				});
				</script>
				
				<div class="col-12 mt-4">
					<h5 class="mb-3">Profitabilitäts-Heatmap</h5>
					<div class="table-responsive">
						<table class="table table-bordered text-center align-middle">
							<thead>
								<tr>
									<th>Verhältnis<br>Verlust : Gewinn</th>
									<th>20 %</th>
									<th>30 %</th>
									<th>40 %</th>
									<th>50 %</th>
									<th>60 %</th>
									<th>70 %</th>
									<th>80 %</th>
								</tr>
							</thead>
							<tbody>
								<tr>
								<th>1 : 1</th>
									<td class="table-danger"></td>
									<td class="table-danger"></td>
									<td class="table-danger"></td>
									<td class="table-warning"></td>
									<td class="table-success"></td>
									<td class="table-success"></td>
									<td class="table-success"></td>
								</tr>
								<tr>
								<th>1 : 2</th>
									<td class="table-danger"></td>
									<td class="table-danger"></td>
									<td class="table-success"></td>
									<td class="table-success"></td>
									<td class="table-success"></td>
									<td class="table-success"></td>
									<td class="table-success"></td>
								</tr>
								<tr>
								<th>1 : 3</th>
									<td class="table-danger"></td>
									<td class="table-success"></td>
									<td class="table-success"></td>
									<td class="table-success"></td>
									<td class="table-success"></td>
									<td class="table-success"></td>
									<td class="table-success"></td>
								</tr>
								<tr>
								<th>1 : 4</th>
									<td class="table-warning"></td>
									<td class="table-success"></td>
									<td class="table-success"></td>
									<td class="table-success"></td>
									<td class="table-success"></td>
									<td class="table-success"></td>
									<td class="table-success"></td>
								</tr>
								<tr>
									<th>1 : 5</th>
									<td class="table-success"></td>
									<td class="table-success"></td>
									<td class="table-success"></td>
									<td class="table-success"></td>
									<td class="table-success"></td>
									<td class="table-success"></td>
									<td class="table-success">unrealistisch</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>

			</div>
		</div>
    </section>
</main>

<?php require_once __DIR__ . '/views/footer.php'; ?>