<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(to right, #e0f7fa, #e1f5fe);
            padding: 2rem;
        }

        .checkbox-wrapper {
            position: relative;
        }

        .checkbox-wrapper input[type="checkbox"] {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            cursor: pointer;
            margin: 0;
            width: 24px;
            height: 24px;
            border: 2px solid #3b82f6;
            border-radius: 4px;
            background-color: white;
            position: relative;
            transition: all 0.3s ease;
        }

        .checkbox-wrapper input[type="checkbox"]:checked {
            background-color: #3b82f6;
            border-color: #3b82f6;
        }

        .checkbox-wrapper input[type="checkbox"]:checked::after {
            content: '';
            position: absolute;
            top: 4px;
            left: 8px;
            width: 6px;
            height: 12px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        .toggle {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 25px;
        }

        .toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #b0bec5;
            transition: background-color 0.4s, transform 0.4s;
            border-radius: 25px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 19px;
            width: 19px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: transform 0.4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #3b82f6;
        }

        input:checked + .slider:before {
            transform: translateX(24px);
        }

        .button {
            position: relative;
            transition: all 0.3s ease-in-out;
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
            padding-block: 0.5rem;
            padding-inline: 1.25rem;
            background-color: #3b82f6;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #ffffff;
            gap: 10px;
            font-weight: bold;
            border: 3px solid #ffffff4d;
            outline: none;
            overflow: hidden;
            font-size: 15px;
        }

        .button:hover {
            transform: scale(1.05);
            background-color: #2563eb;
        }

        .button svg {
            width: 24px;
            height: 24px;
            transition: all 0.3s ease-in-out;
        }

        .button:hover svg {
            transform: translateX(4px);
        }
    </style>
</head>
<body>
    <div class="max-w-3xl mx-auto bg-white p-8 rounded-xl shadow-2xl">
        <div class="flex justify-between items-center mb-8">
    <span class="text-blue-500 font-semibold text-sm">
        <strong>Step 1:</strong> Submit Your Request
    </span>
    <span class="text-gray-400 font-semibold text-sm">
        <strong>Step 2:</strong> Await Request Review
    </span>
    <span class="text-gray-400 font-semibold text-sm">
        <strong>Step 3:</strong> Receive Files and Roles
    </span>
</div>

        <form class="space-y-6">
            <!-- PASTE QUESTION TYPES HERE -->
<form id="conference-form" class="space-y-6">
    <div>
        <label class="block text-gray-700 font-medium mb-2">Your Roblox Username</label>
        <input type="text" name="roblox_username" placeholder="Enter your Roblox username" class="w-full p-3 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200">
    </div>
    <div>
        <label class="block text-gray-700 font-medium mb-2">Discord Username (with ID)</label>
        <input type="text" name="discord_username" placeholder="Example: JohnDoe#1234" class="w-full p-3 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200">
    </div>
    <div>
        <label class="block text-gray-700 font-medium mb-2">Conference Title</label>
        <input type="text" name="conference_title" placeholder="Provide a concise and professional title for your conference" class="w-full p-3 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200">
    </div>
    <div>
        <label class="block text-gray-700 font-medium mb-2">Main Speaker(s)</label>
        <input type="text" name="main_speaker" placeholder="Enter the names of the main speaker(s)" class="w-full p-3 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200">
    </div>
    <div>
        <label class="block text-gray-700 font-medium mb-2">Preferred Date</label>
        <select name="preferred_date" class="w-full p-3 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200">
            <option value="2025-01-25">25th January 2025</option>
            <option value="2025-01-26">26th January 2025</option>
        </select>
    </div>
    <div>
        <label class="block text-gray-700 font-medium mb-2">Conference Description</label>
        <textarea name="conference_description" placeholder="Describe the purpose, topics, or goals of your conference" class="w-full p-3 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200"></textarea>
    </div>
    <div class="checkbox-wrapper">
        <input type="checkbox" id="booth-checkbox" name="has_booth">
        <label for="booth-checkbox">I confirm that I have a booth and understand that only booth owners can request a conference.</label>
    </div>
    <div>
        <button type="submit" class="button">
            Send
            <svg fill="currentColor" viewBox="0 0 24 24">
                <path
                    clip-rule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z"
                    fill-rule="evenodd"
                ></path>
            </svg>
        </button>
    </div>
</form>

<script>
    document.querySelector('form').addEventListener('submit', async function (e) {
        e.preventDefault(); // Prevent the form from reloading the page

        // Collect form data
        const formData = new FormData(e.target);
        const fields = {};

        // Iterate over form data and format it for the webhook
        formData.forEach((value, key) => {
            fields[key] = value.trim() || "N/A"; // Default to "N/A" for empty values
        });

        // Check if the "has_booth" checkbox is checked
        const hasBooth = !!fields["has_booth"];
        fields["has_booth"] = hasBooth ? "Yes" : "No";

        // Build the Discord embed object
        const embed = {
            username: "Conference Request Bot",
            avatar_url: "https://i.imgur.com/AfFp7pu.png", // Optional avatar
            embeds: [
                {
                    title: "📋 New Conference Request",
                    description: hasBooth
                        ? "A new request to host a conference has been submitted."
                        : "⚠️ A user submitted a request without confirming a booth.",
                    color: hasBooth ? 7506394 : 16711680, // Blue for normal, Red for alert
                    fields: Object.entries(fields).map(([key, value]) => ({
                        name: key
                            .replace(/_/g, " ") // Replace underscores with spaces
                            .replace(/(?:^|\s)\S/g, a => a.toUpperCase()), // Capitalize each word
                        value: value,
                        inline: false,
                    })),
                    footer: {
                        text: "Conference Request System | Powered by Discord Webhooks",
                    },
                    timestamp: new Date().toISOString(), // Add a timestamp
                },
            ],
        };

        const webhookURL = "https://discord.com/api/webhooks/1315400936902099064/SV5eX1wd4d9PUOgZqJadEbhEoz1KaoEjsM1_9jgQTelXZZoCU-89SvHfFYsg9zJ_hpG1"; // Replace with your webhook URL

        try {
            // Send the data to the Discord webhook
            const response = await fetch(webhookURL, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(embed),
            });

            if (response.ok) {
                alert("✅ Your conference request was submitted successfully!");
                e.target.reset(); // Reset the form after successful submission
            } else {
                const errorData = await response.json();
                console.error("Discord Webhook Error:", errorData);
                alert("❌ Failed to submit your request. Please try again.");
            }
        } catch (error) {
            console.error("Submission Error:", error);
            alert("❌ An error occurred. Please check your connection and try again.");
        }
    });
</script>

</body>
</html>
