<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Appeal your server ban and get your games back for our community.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="icon" href="favicon.jpg" type="image/x-icon">
    <title>Grallemole Appeal Form</title>
    <link rel="stylesheet" href="unbanStyle.css">
    <script src="https://www.google.com/recaptcha/enterprise.js?render=6LctZKwqAAAAAHwXAc-yJ1gwz6-xnkVHoD_1218P"></script>
</head>
<body>
    <header>
        <h1>GRALLEMOLE</h1>
    </header>
    <nav>
        <ul>
            <li><a href="https://grallemole.com/"><i class="fas fa-home"></i> Home</a></li>
            <li><a href="https://store.grallemole.com/"><i class="fas fa-dollar"></i> Store</a></li>
            <li>
                <a href="#"><i class="fas fa-book"></i> Rules</a>
                <div class="dropdown">
                    <a href="https://grallemole.com/DcRules">Discord</a>
                    <a href="https://grallemole.com/appeal">Ban appeal</a>
                </div>
            </li>    
            <li>
                <a href="#"><i class="fab fa-discord"></i> Discord APP</a>
                <div class="dropdown">
                    <a href="https://grallemole.com/bot">Invite App</a>
                    <a href="https://grallemole.com/documentation">Documentation</a>
                    <a href="https://grallemole.com/Bot-ToS">Terms of Service</a>
                    <a href="https://grallemole.com/Bot-PoP">Privacy Policy</a>
                </div>
            </li>
            <li><a href="https://grallemole.com/apelacija"><span class="flag-icon flag-icon-lv"></span> LV</a></li>
        </ul>
    </nav>

    <div class="form-container">
        <h2>Unban Appeal Form</h2>
        <form id="unbanForm" onsubmit="submitForm(event)">
            <div class="form-group">
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" placeholder="Enter your username" required>
            </div>
            <div class="form-group">
                <label for="email">E-mail:</label>
                <input type="email" id="email" name="email" placeholder="Enter your real email, for example, user@example.com" required>
            </div>
            <div class="form-group">
                <label for="platform">Platform:</label>
                <select id="platform" name="platform" required onchange="updateForm()">
                    <option value="">Select a platform</option>
                    <option value="Discord">Discord server</option>
                    <option value="Social Media">Social Media</option>
                    <option value="Purchased Unban">Purchased Unban(Only for DISCORD)</option>
                    <option value="Other">Other</option>
                </select>
            </div>
            <div id="dynamicFields">
            </div>
            <button type="submit" class="submit-btn">Submit Appeal</button>
        </form>
    </div>

    <script>
function updateForm() {
    const platform = document.getElementById("platform").value;
    const dynamicFields = document.getElementById("dynamicFields");
    dynamicFields.innerHTML = "";

    if (platform === "Discord") {
        dynamicFields.innerHTML = `
            <div class="form-group">
                <label for="usernameId">Username ID (Optional):</label>
                <input type="number" id="usernameId" name="usernameId" placeholder="Enter your user ID (if known + you will be unbanned faster)">
            </div>
            <div class="form-group">
                <label for="banReason">Reason for Ban:</label>
                <textarea id="banReason" name="banReason" required></textarea>
            </div>
            <div class="form-group">
                <label for="unbanReason">Why do you want the ban lifted:</label>
                <textarea id="unbanReason" name="unbanReason" required></textarea>
            </div>
        `;
    } else if (platform === "Purchased Unban") {
        dynamicFields.innerHTML = `
            <div class="form-group">
                <label for="transactionId">Transaction ID:</label>
                <input type="text" id="transactionId" name="transactionId" required>
            </div>
        `;
    } else if (platform === "Social Media") {
        dynamicFields.innerHTML = `
                    <div class="form-group">
                        <label for="banReason">Reason for Ban:</label>
                        <textarea id="banReason" name="banReason" required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="unbanReason">Why do you want the ban lifted:</label>
                        <textarea id="unbanReason" name="unbanReason" required></textarea>
                    </div>
                `;
    } else if (platform === "Other") {
        dynamicFields.innerHTML = `
            <div class="form-group">
                <label for="banReason">Reason for Ban:</label>
                <textarea id="banReason" name="banReason" required></textarea>
            </div>
            <div class="form-group">
                <label for="unbanReason">Why do you want the ban lifted:</label>
                <textarea id="unbanReason" name="unbanReason" required></textarea>
            </div>
        `;
    }
}

        function submitForm(event) {
            event.preventDefault();

            const form = document.getElementById("unbanForm");
            const formData = new FormData(form);

            const xhr = new XMLHttpRequest();
            xhr.open("POST", "send_appeal.php", true);
            xhr.onload = function () {
                if (xhr.status == 200) {
                    alert("Appeal successfully submitted!");
                } else {
                    alert("There was a problem submitting an appeal.");
                }
            };
            xhr.send(formData);
        }
    </script>

    <footer>
        <p>&copy; 2024 GRALLEMOLE</p>
        <p><a href="https://grallemole.com/Terms-Privacy-en">Terms & Privacy</a></p>
    </footer>
</body>
</html>
