(function() {
    // Define the base URL for the API
    var apiBaseUrl = 'https://help.pluggable.io/wp-json/easysupport/v1';

    // Create the chat icon
    var chatIcon = document.createElement('div');
    chatIcon.style.position = 'fixed';
    chatIcon.style.bottom = '20px';
    chatIcon.style.right = '20px';
    chatIcon.style.width = '50px';
    chatIcon.style.height = '50px';
    chatIcon.style.backgroundColor = '#007bff';
    chatIcon.style.borderRadius = '50%';
    chatIcon.style.cursor = 'pointer';
    chatIcon.style.zIndex = '1000';
    chatIcon.innerHTML = '<i style="color: white; font-size: 24px; line-height: 50px; text-align: center; display: block;">💬</i>'; // Emoji or icon
    document.body.appendChild(chatIcon);

    // Create the form container
    var formContainer = document.createElement('div');
    formContainer.style.position = 'fixed';
    formContainer.style.bottom = '80px';
    formContainer.style.right = '20px';
    formContainer.style.width = '500px'; // Increased width
    formContainer.style.maxWidth = '90%'; // Increased width
    formContainer.style.maxHeight = '80%'; // Increased width
    formContainer.style.overflowY = 'auto';
    formContainer.style.backgroundColor = 'white';
    formContainer.style.border = '1px solid #ccc';
    formContainer.style.boxShadow = '0 0 10px rgba(0,0,0,0.2)';
    formContainer.style.padding = '10px';
    formContainer.style.borderRadius = '5px';
    formContainer.style.display = 'none'; // Hidden initially
    formContainer.style.zIndex = '99999';
    formContainer.innerHTML = `
        <h3 style="text-align: center; font-size: 22px; margin-top: 10px; margin-bottom: 5px;">Hi there, we're here.. 👋</h3>
        <p style="text-align: center; margin-bottom: 10px;">Reach out to us with any questions or issues you may have!</p>
        <form id="supportForm">
            <input type="text" id="name" name="name" required placeholder="Your Name" style="width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
            <input type="email" id="email" name="email" required placeholder="Your Email" style="width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
            <input type="text" id="subject" name="subject" required placeholder="Subject" style="width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
            <textarea id="description" name="description" required placeholder="Describe your issue" style="width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; height: 200px;"></textarea>
            <select id="product" name="product" style="width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
                <option value="">Loading...</option>
            </select>
            <select id="reason" name="reason" style="width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
                <option value="">Loading...</option>
            </select>
            <select id="urgency" name="urgency" style="width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
                <option value="">Loading...</option>
            </select>
            <input type="text" id="order" name="order" placeholder="Your order ID, if any" style="width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
            <button type="submit" id="submitButton" style="width: 100%; background-color: #007bff; color: white; border: none; padding: 10px; cursor: pointer; border-radius: 4px;">Submit</button>
        </form>
        <div id="messageContainer" style="text-align: center; display: none;">
            <p id="successMessage" style=""></p>
            <p id="errorMessage" style="color: red;"></p>
        </div>
    `;
    document.body.appendChild(formContainer);

    // Function to populate a dropdown with API data
    function populateDropdown(apiEndpoint, dropdownId, defaultOption) {
        fetch(apiBaseUrl + apiEndpoint)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    var dropdown = document.getElementById(dropdownId);
                    dropdown.innerHTML = `<option value="">${defaultOption}</option>`;
                    Object.keys(data.data).forEach(key => {
                        var option = document.createElement('option');
                        option.value = key;
                        option.textContent = data.data[key];
                        dropdown.appendChild(option);
                    });
                } else {
                    console.error(`Failed to load data for ${dropdownId}`);
                }
            })
            .catch(error => console.error(`Error fetching data for ${dropdownId}:`, error));
    }

    // Populate the Product, Reason, and Urgency dropdowns
    populateDropdown('/tickets/products', 'product', 'Select a Product');
    populateDropdown('/tickets/reasons', 'reason', 'Select a Reason');
    populateDropdown('/tickets/urgencies', 'urgency', 'Select an Urgency');

    // Toggle form visibility when the chat icon is clicked
    chatIcon.addEventListener('click', function() {
        formContainer.style.display = formContainer.style.display === 'none' ? 'block' : 'none';
    });

    // Form submission handler
    document.getElementById('supportForm').addEventListener('submit', function(event) {
        event.preventDefault();

        var submitButton = document.getElementById('submitButton');
        submitButton.textContent = 'Submitting...';
        submitButton.disabled = true; // Disable the button to prevent multiple submissions

        var name = document.getElementById('name').value;
        var email = document.getElementById('email').value;
        var subject = document.getElementById('subject').value;
        var description = document.getElementById('description').value;
        var product = document.getElementById('product').value;
        var reason = document.getElementById('reason').value;
        var urgency = document.getElementById('urgency').value;
        var order = document.getElementById('order').value;

        // Define the data to send
        var data = {
            name: name,
            email: email,
            title: subject,
            description: description,
            product: product,
            reason: reason,
            urgency: urgency,
            order: order
        };

        // Send the data using fetch API
        fetch(apiBaseUrl + '/tickets', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            var messageContainer = document.getElementById('messageContainer');
            var successMessage = document.getElementById('successMessage');
            var errorMessage = document.getElementById('errorMessage');

            // Reset the message container and display relevant messages
            successMessage.innerHTML = '';
            errorMessage.innerHTML = '';

            if (data.success) {
                // Display the success message from the API response
                successMessage.innerHTML = data.data.message;
                errorMessage.innerHTML = ''; // Clear any previous error messages
                document.getElementById('supportForm').style.display = 'none';
            } else {
                errorMessage.innerHTML = 'There was an error submitting your ticket.';
            }

            submitButton.textContent = 'Submit';
            submitButton.disabled = false; // Re-enable the button
            messageContainer.style.display = 'block';
        })
        .catch((error) => {
            var messageContainer = document.getElementById('messageContainer');
            var errorMessage = document.getElementById('errorMessage');

            // Reset the message container and display the error
            errorMessage.innerHTML = 'There was an error submitting your ticket. Please try again.';
            document.getElementById('supportForm').style.display = 'none';
            submitButton.textContent = 'Submit';
            submitButton.disabled = false; // Re-enable the button
            messageContainer.style.display = 'block';

            console.error('Error:', error);
        });
    });
})();