<?php
// Unser "Wörterbuch" für den zweiten Slider (Position => Echter Wert)
$werteMap = [
    1 => 8,
    2 => 15,
    3 => 20,
    4 => 30,
    5 => 40
];

// Initialisierung der Variablen
$ergebnis = null;
$wert1 = 2; // Standardwert für Slider 1
$wert2_position = 3; // Standard-Position für Slider 2 (entspricht hier der 20)
$echter_wert2 = $werteMap[$wert2_position];

// Prüfen, ob das Formular abgeschickt wurde
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $wert1 = filter_input(INPUT_POST, 'slider1', FILTER_VALIDATE_INT) ?: 1;

    // Wir lesen die Position (1-5) des Sliders aus
    $wert2_position = filter_input(INPUT_POST, 'slider2', FILTER_VALIDATE_INT) ?: 1;

    // Zur Sicherheit prüfen, ob die Position in unserem Array existiert
    if (array_key_exists($wert2_position, $werteMap)) {
        $echter_wert2 = $werteMap[$wert2_position];
    } else {
        $echter_wert2 = $werteMap[1]; // Fallback auf den ersten Wert
    }

    // Die beiden echten Werte multiplizieren
    $ergebnis = $wert1 * $echter_wert2;
}
?>
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nutellarechner</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

    <div class="container">
        <h1><span class="span-dark">nutella</span><span class="span-red">rechner</span></h1>
        <p class="slogan">Für jede Nuss-Nougat-Creme geeignet.</p>

        <form method="POST" action="">
            <div class="form-group">
                <label for="slider1">
                    Brötchenhälften: <span id="display1"
                        class="value-display"><?= htmlspecialchars((string) $wert1) ?></span>
                </label>
                <input type="range" id="slider1" name="slider1" min="1" max="100" step="1"
                    value="<?= htmlspecialchars((string) $wert1) ?>"
                    oninput="document.getElementById('display1').innerText = this.value">
            </div>

            <div class="form-group">
                <label for="slider2">
                    So dick wird geschmiert: <span id="display2" class="value-display"></span>
                </label>
                <input type="range" id="slider2" name="slider2" min="1" max="5" step="1"
                    value="<?= htmlspecialchars((string) $wert2_position) ?>" oninput="updateSlider2(this.value)">
            </div>

            <button class="button-calc" role="button" type="submit">Rechnen</button>
        </form>

        <?php if ($ergebnis !== null): ?>
            <div class="result">
                <strong>Ergebnis:</strong> Du brauchst
                <strong><?= htmlspecialchars((string) $ergebnis) ?></strong> Gramm Nutella.
            </div>
        <?php endif; ?>

        <p class="werbung-title">Ich möchte lieber:</p>
        <div class="werbung-buttons">
            <button class="button-nudeln" role="button" onclick="window.location.href='https://nudelrechner.de';">Nudeln</button> <button class="button-mett" role="button" onclick="window.location.href='https://mettcalc.de';">Mettbrötchen</button> <button class="button-burger" role="button" onclick="window.location.href='https://burgerrechner.de';">Burger</button>
        </div>
    </div>

    <script>
        // Ein Objekt, das die Positionen (1-5) mit Texten UND deinen eigenen Zahlen verknüpft
        const sliderDaten = {
            1: { text: "sehr dünn", wert: 8 },
            2: { text: "dünn", wert: 15 },
            3: { text: "normal", wert: 20 },
            4: { text: "dick", wert: 30 },
            5: { text: "sehr dick", wert: 40 }
        };

        // Funktion, um Text und die echten Zahlen anzuzeigen
        function updateSlider2(position) {
            const daten = sliderDaten[position];
            document.getElementById('display2').innerText = daten.text;
        }

        // Startwert beim Laden setzen
        window.onload = function () {
            const startPosition = document.getElementById('slider2').value;
            updateSlider2(startPosition);
        };
    </script>

    <footer>
        <nav>
            <p>
                <a href="impressum.php">Impressum</a>
            </p>
            <p class="disclaimer">Disclaimer: <span class="span-dark">nutella</span><span class="span-red">rechner</span> ist ein privat betriebenes Projekt ohne kommerzielle Absichten und steht in keiner Beziehung zum Unternehmen Ferrero oder der Marke Nutella.</p>
        </nav>
    </footer>

</body>

</html>