<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Calculateur de Drop</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>🎲 Calculateur de Taux de Drop 🎲</h1>
        <form id="dropForm">
            <label for="baseRate">Taux de base :</label>
            <input type="text" id="baseRate" name="baseRate" placeholder="ex: 0.1% ou 1/1000" required>

            <label for="bonusPercent">Bonus de chance supplémentaire (%) :</label>
            <input type="number" id="bonusPercent" name="bonusPercent" placeholder="ex: 1000" required>

            <label for="multiplier">Multiplicateur (optionnel) :</label>
            <input type="number" id="multiplier" name="multiplier" placeholder="ex: 2" step="0.01" value="1"> 

            <label>
                <input type="checkbox" id="enableShiny" name="enableShiny"> Activer Shiny
            </label>
            <div id="shinyOptions" style="display:none;">
                <label for="shinyRate">Taux Shiny (par défaut 1/40) :</label>
                <input type="text" id="shinyRate" name="shinyRate" value="1/40">
            </div>

            <label>
                <input type="checkbox" id="enableMythic" name="enableMythic"> Activer Mythic
            </label>
            <div id="mythicOptions" style="display:none;">
                <label for="mythicRate">Taux Mythic (par défaut 1/100) :</label>
                <input type="text" id="mythicRate" name="mythicRate" value="1/100">
            </div>

            <button type="submit">Calculer</button>
        </form>

        <div id="result"></div>
    </div>
 <hr>
        <h2>📝 Bloc-note</h2>
        <textarea id="note" rows="6" style="width:100%;" placeholder="Note ici tout ce que tu veux garder en mémoire..."></textarea>
    </div>

    <script>
        document.getElementById("enableShiny").addEventListener("change", function() {
            document.getElementById("shinyOptions").style.display = this.checked ? "block" : "none";
        });

        document.getElementById("enableMythic").addEventListener("change", function() {
            document.getElementById("mythicOptions").style.display = this.checked ? "block" : "none";
        });

        document.getElementById("dropForm").addEventListener("submit", function(e) {
            e.preventDefault();

            const formData = new FormData(this);
            const xhr = new XMLHttpRequest();
            xhr.open("POST", "calculate.php", true);
            xhr.onload = function() {
                if (this.status === 200) {
                    document.getElementById("result").innerHTML = "<p>" + this.responseText + "</p>";
                }
            };
            xhr.send(formData);
        });

        // Bloc note stockage local
        const note = document.getElementById('note');
        note.value = localStorage.getItem('dropNote') || '';
        note.addEventListener('input', () => {
            localStorage.setItem('dropNote', note.value);
        });
    </script>
</body>
</html>
