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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sales 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 Sales 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</br></p>
            <button id="close-tab">Close Tab</button>
        </div>
    </div>

    <script>
        const questions = [

            "What is your email?",
            "What is your discord username and ID?",
            "How would you describe our hosting services for Discord bots to a potential customer who’s unfamiliar with the technology?",
            "What key features of our Minecraft server hosting would you highlight to a customer who is a gaming enthusiast?",
            "How would you pitch a VPS hosting plan to a small business owner looking for reliable website hosting?",
            "If a potential customer is concerned about the cost of VPS hosting, how would you address their concerns while still making the sale?",
            "What are the main selling points of our DDoS protection for customers who are considering hosting a Minecraft server?",
            "How would you identify which hosting solution (Minecraft server, Discord bot, or VPS) is best suited for a potential customer’s needs?",
            "If a customer is unsure about whether they need a managed or unmanaged VPS, how would you explain the differences and help them make a decision?",
            "How would you convince a customer that our hosting service offers better value than our competitors?",
            "What steps would you take to follow up with a lead who has shown interest but hasn’t made a purchase yet?",
            "How do you handle objections from potential customers who are hesitant to switch from their current hosting provider?"
        ];

        let currentQuestion = 0;
        const answers = [];

        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();
            }
        });

        async function getWebhookUrl() {
            try {
                const response = await fetch('/webhook.txt/');
                const webhookUrl = await response.text();
                return webhookUrl.trim();
            } catch (error) {
                console.error('Error fetching the webhook URL:', error);
                return null;
            }
        }

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

            fetch('get-webhook-sales.php')
                .then(response => response.text())
                .then(webhookUrl => {
                    const embed = {
                        embeds: [
                            {
                                title: "Sales 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."));

                    setTimeout(() => {
                        submitButton.disabled = false;
                    }, 30000);
                })
                .catch(() => alert("Failed to fetch the webhook URL."));
        });

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

</html>
