<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Support Rep Application</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background: url('https://i.ibb.co/7WRX1pH/6.webp') no-repeat center center fixed;
            background-size: cover;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            padding: 20px;
        }

        .card {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 600px;
            padding: 20px;
            text-align: center;
        }

        .progress-bar {
            height: 10px;
            width: 100%;
            background: #ddd;
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .progress {
            height: 100%;
            width: 0%;
            background: var(--bar-color, #8934eb);
            transition: width 0.3s ease;
        }

        .question {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .question-number {
            font-size: 16px;
            color: #555;
            margin-bottom: 20px;
        }

        .answer-box {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }

        .buttons {
            display: flex;
            justify-content: space-between;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #8934eb;
            color: white;
        }

        button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="card" id="welcome-screen">
            <h1>Welcome to the Support Rep Application</h1>
            <p>Please fill out this application to the best of your ability. Click the button below to start.</p>
            <button id="start-application">Start Application</button>
        </div>

        <div class="card" id="form-screen" style="display: none;">
            <div class="progress-bar">
                <div class="progress" id="progress"></div>
            </div>
            <div class="question-number" id="question-number"></div>
            <div class="question" id="question">Question will appear here</div>
            <input type="text" id="answer" class="answer-box" placeholder="Type your answer here...">
            <div class="buttons">
                <button id="back" disabled>Back</button>
                <button id="next">Next</button>
            </div>
            <button id="submit" style="margin-top: 20px; display: none;">Submit</button>
        </div>

        <div class="card" id="end-screen" style="display: none;">
            <h1>Thank You!</h1>
            <p>Your application has been submitted successfully.<br>The "Close Tab" button doesn't work so just close the tab yourself lol</p>
            <button id="close-tab">Close Tab</button>
        </div>
    </div>

    <script>
        const questions = [
            "What is your email?",
            "What is your Discord username and ID?",
            "Have you worked in customer service before?",
            "Do you know how VPS or game servers work?",
            "What would you do if a Minecraft server is running slow?",
            "How would you explain a server issue to someone who doesn’t understand hosting?",
            "How do you work with others to help solve problems?",
            "What would you do if a Discord bot isn’t working?",
            "How would you help someone who can’t log into their server?",
            "What do you know about Minecraft server types like Spigot or Forge?",
            "What would you do if a server is using too much CPU?",
            "How do you choose which customer problem to fix first?"
        ];

        let currentQuestion = 0;
        const answers = [];
        const webhookBase64 = "aHR0cHM6Ly9kaXNjb3JkLmNvbS9hcGkvd2ViaG9va3MvMTMyMTczNDMzMjU0ODY0NDg5NS9PaWI2Mm8wdUVMMC1qbE54eHFkVEtvU0FlbDJ4SzZLWXdUaFVTbDdHdHFuMHJhc2w3RUpFWUMyck00ZnRsYmE1c3VBSA=="; 

        const welcomeScreen = document.getElementById("welcome-screen");
        const formScreen = document.getElementById("form-screen");
        const endScreen = document.getElementById("end-screen");

        const questionElement = document.getElementById("question");
        const questionNumberElement = document.getElementById("question-number");
        const progressElement = document.getElementById("progress");
        const answerInput = document.getElementById("answer");
        const backButton = document.getElementById("back");
        const nextButton = document.getElementById("next");
        const submitButton = document.getElementById("submit");
        const closeTabButton = document.getElementById("close-tab");

        document.getElementById("start-application").addEventListener("click", () => {
            welcomeScreen.style.display = "none";
            formScreen.style.display = "block";
            updateUI();
        });

        closeTabButton.addEventListener("click", () => {
            window.open('', '_self', '');
            window.close();
        });

        function updateUI() {
            questionNumberElement.textContent = `${currentQuestion + 1}/${questions.length}`;
            questionElement.textContent = questions[currentQuestion];
            answerInput.value = answers[currentQuestion] || "";
            progressElement.style.width = ((currentQuestion + 1) / questions.length) * 100 + "%";
            backButton.disabled = currentQuestion === 0;
            nextButton.style.display = currentQuestion === questions.length - 1 ? "none" : "inline-block";
            submitButton.style.display = currentQuestion === questions.length - 1 ? "inline-block" : "none";
        }

        backButton.addEventListener("click", () => {
            if (currentQuestion > 0) {
                answers[currentQuestion] = answerInput.value;
                currentQuestion--;
                updateUI();
            }
        });

        nextButton.addEventListener("click", () => {
            answers[currentQuestion] = answerInput.value;
            if (currentQuestion < questions.length - 1) {
                currentQuestion++;
                updateUI();
            }
        });

        function decodeBase64(base64String) {
            return atob(base64String.trim());
        }

        submitButton.addEventListener("click", () => {
            submitButton.disabled = true;
            answers[currentQuestion] = answerInput.value;

            const webhookUrl = decodeBase64(webhookBase64);

            const embed = {
                embeds: [
                    {
                        title: "Support Rep Application",
                        color: 3066993,
                        fields: questions.map((question, index) => ({
                            name: question,
                            value: answers[index] || "No answer provided",
                        })),
                        timestamp: new Date().toISOString(),
                    },
                ],
            };

            fetch(webhookUrl, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(embed),
            })
                .then(() => {
                    formScreen.style.display = "none";
                    endScreen.style.display = "block";
                })
                .catch(() => alert("Failed to submit the application."))
                .finally(() => {
                    setTimeout(() => {
                        submitButton.disabled = false;
                    }, 30000);
                });
        });

        updateUI();
    </script>
</body>

</html>
