<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ASAS Request</title>
    <style>
        /* General styling for the page */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #fafafa;
            color: #333;
            margin: 0;
            padding: 20px;
        }

        h1 {
            text-align: center;
            font-size: 28px;
            color: #4CAF50;
            margin-bottom: 20px;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        label {
            font-size: 18px;
            margin-bottom: 10px;
            display: block;
            color: #555;
        }

        input, select, button {
            font-size: 16px;
            padding: 12px;
            margin: 10px 0;
            width: 100%;
            border-radius: 5px;
            border: 1px solid #ddd;
            box-sizing: border-box;
        }

        input[type="text"]:focus, select:focus, button:focus {
            outline: none;
            border-color: #4CAF50;
        }

        button {
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            border: none;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #45a049;
        }

        .alert {
            font-size: 18px;
            color: #4CAF50;
            text-align: center;
            margin-top: 20px;
            display: none;
        }

        /* Mobile responsiveness */
        @media (max-width: 600px) {
            .container {
                padding: 15px;
            }

            input, select, button {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>ASAS Request</h1>

        <!-- Input field for the message -->
        <label for="message">Enter your message:</label>
        <input type="text" id="message" placeholder="Type your message here" />

        <!-- Dropdown to select personnel -->
        <label for="personnel">Select Personnel:</label>
        <select id="personnel" multiple>
            <option value="All Personnel" id="allPersonnel">All Personnel</option>
            
            <!-- Grouped Personnel Roles -->
            <option value="Maintenance Personnel">Maintenance Personnel</option>
            <option value="Officer Personnel">Officer Personnel</option>
            <option value="Security Personnel">Security Personnel</option>
            <option value="Medical Personnel">Medical Personnel</option>
            <option value="Core Personnel">Core Personnel</option>
            <option value="Scientist Personnel">Scientist Personnel</option>
            <option value="Sus Personnel">Sus Personnel</option>
            <option value="Sussy Personnel">Sussy Personnel</option>
            <option value="Furry Personnel">Furry Personnel</option>
            <option value="Neko Personnel">Neko Personnel</option>
            <option value="Furry and Neko Personnel">Furry and Neko Personnel</option>
            <option value="Gamer Personnel">Gamer Personnel</option>
            <option value="Streamer Personnel">Streamer Personnel</option>
            <option value="Coder Personnel">Coder Personnel</option>
            <option value="Builder Personnel">Builder Personnel</option>
            <option value="Community Personnel">Community Personnel</option>
            <option value="Event Personnel">Event Personnel</option>
            <option value="Moderator Personnel">Moderator Personnel</option>
            <option value="Support Personnel">Support Personnel</option>
            <option value="Tech Personnel">Tech Personnel</option>
            <option value="Content Creator Personnel">Content Creator Personnel</option>
            <option value="Technical Personnel">Technical Personnel</option>
            <option value="Warhead Personnel">Warhead Personnel</option>
            <option value="Nuke Personnel">Nuke Personnel</option>
            
            <!-- Newly Added Personnel Roles -->
            <option value="AI Personnel">AI Personnel</option>
            <option value="Robot Personnel">Robot Personnel</option>
            <option value="Research Personnel">Research Personnel</option>
            <option value="Survival Personnel">Survival Personnel</option>

            <!-- Hospital Personnel and Group Personnel moved to the grouped section -->
            <option value="Hospital Personnel">Hospital Personnel</option>
            <option value="Group Personnel">Group Personnel</option>
            
            <!-- Gender-based Personnel Roles -->
            <option value="Gay Personnel">Gay Personnel</option>
            <option value="Lesbian Personnel">Lesbian Personnel</option>
            <option value="Trans Personnel">Trans Personnel</option>
            <option value="Bi Personnel">Bi Personnel</option>
            <option value="Queer Personnel">Queer Personnel</option>
            <option value="Asexual Personnel">Asexual Personnel</option>
            <option value="Pansexual Personnel">Pansexual Personnel</option>
            <option value="Non-binary Personnel">Non-binary Personnel</option>
        </select>

        <!-- Send Button -->
        <button onclick="sendToWebhook()">Send Message</button>

        <!-- Alert message -->
        <div class="alert" id="alert"></div>
    </div>

    <script>
        // Disable or enable the 'All Personnel' option based on selections
        document.getElementById('personnel').addEventListener('change', function () {
            const allPersonnelOption = document.getElementById('allPersonnel');
            const options = this.selectedOptions;

            // Check if "All Personnel" is selected
            const isAllSelected = Array.from(options).some(option => option.value === 'All Personnel');
            
            if (isAllSelected) {
                // Deselect all other options if "All Personnel" is selected
                for (let option of options) {
                    if (option.value !== 'All Personnel') {
                        option.selected = false;
                    }
                }

                // Disable other options until "All Personnel" is unselected
                Array.from(this.options).forEach(option => {
                    if (option.value !== 'All Personnel') {
                        option.disabled = true;
                    }
                });
            } else {
                // Enable all options when "All Personnel" is not selected
                Array.from(this.options).forEach(option => {
                    option.disabled = false;
                });
            }
        });

        function sendToWebhook() {
            const webhookUrl = 'https://discord.com/api/webhooks/1313612267077636189/xFXD0gK55upaWYyISwLwKdKFBUbDzfLVGb8EbcNiCEf5TWimeKZx4__9N4LGIpE9RpQi';  // Replace with your Discord webhook URL
            const message = document.getElementById('message').value;
            const personnelSelect = document.getElementById('personnel');
            const selectedPersonnel = Array.from(personnelSelect.selectedOptions).map(option => option.value);
            const alertBox = document.getElementById('alert');

            // Check if message field is empty or if no personnel is selected
            if (message === "" || selectedPersonnel.length === 0) {
                alertBox.style.display = 'block';
                alertBox.textContent = "Please enter a message and select personnel!";
                alertBox.style.color = 'red';
                return;
            }

            // Format the message based on selected personnel
            const formattedMessage = `ASAS: Attention ${selectedPersonnel.join(', ')} a person has requested: ${message}`;

            const data = {
                content: formattedMessage,  // Send the formatted message here
            };

            // Send message to the Discord webhook
            fetch(webhookUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),
            })
            .then(response => {
                if (response.ok) {
                    alertBox.style.display = 'block';
                    alertBox.textContent = "Message sent successfully!";
                    alertBox.style.color = '#4CAF50';
                    document.getElementById('message').value = '';  // Clear the message input field
                } else {
                    alertBox.style.display = 'block';
                    alertBox.textContent = "Error sending message.";
                    alertBox.style.color = 'red';
                }
            })
            .catch(error => {
                alertBox.style.display = 'block';
                alertBox.textContent = "Error: " + error;
                alertBox.style.color = 'red';
            });
        }
    </script>
</body>
</html>