@push('css')
<style>
    /* Floating Chatbot Button */
    #chatbot-toggle {
        position: fixed;
        bottom: 45px;
        right: 38px;
        width: 60px;
        height: 60px;
        background-color: var(--vz-primary);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        transition: all 0.3s ease-in-out;
        font-size: 24px;
    }

    /* Glowing Animation */
    .glowing-animation {
        background-color: #F98D1E;
        box-shadow: 0 0 10px rgba(249, 141, 30, 0.5),
            0 0 20px rgba(249, 141, 30, 0.4),
            0 0 30px rgba(249, 141, 30, 0.3);
        animation: pulseGlow 2s ease-in-out infinite;
        border-radius: 50%;
        transition: transform 0.3s ease;
    }

    @keyframes pulseGlow {
        0%, 100% {
            box-shadow: 0 0 10px rgba(249, 141, 30, 0.4),
                0 0 20px rgba(249, 141, 30, 0.3),
                0 0 30px rgba(249, 141, 30, 0.2);
        }
        50% {
            box-shadow: 0 0 20px rgba(249, 141, 30, 0.6),
                0 0 30px rgba(249, 141, 30, 0.5),
                0 0 40px rgba(249, 141, 30, 0.4);
        }
    }

    /* Chat Container */
    #chatbot-container {
        position: fixed;
        bottom: 42px;
        right: 36px;
        width: 340px;
        height: 400px;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 14px;
        box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.25);
        font-family: 'Segoe UI', sans-serif;
        display: none;
        flex-direction: column;
        overflow: hidden;
        z-index: 1000;
    }

    /* Chatbot Header */
    #chatbot-header {
        background-color: var(--vz-primary);
        color: white;
        padding: 12px 16px;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: bold;
    }

    /* Close Button */
    #chatbot-close {
        font-size: 20px;
        cursor: pointer;
    }

    /* Chat Body */
    #chatbot-body {
        flex: 1;
        padding: 12px;
        overflow-y: auto;
        background: #f9f9f9;
        display: flex;
        flex-direction: column;
        scroll-behavior: smooth;
    }

    /* Message Styles */
    .message {
        position: relative;
        padding: 10px 16px;
        margin: 6px 0;
        border-radius: 20px;
        max-width: 80%;
        font-size: 14px;
        line-height: 1.4;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        word-wrap: break-word;
    }

    .user-message {
        background-color: rgba(0, 123, 255, 0.15);
        color: black;
        align-self: flex-end;
        margin-left: auto;
        border-bottom-right-radius: 0;
    }

    .bot-message {
        background-color: rgba(var(--vz-primary-rgb), 0.15);
        color: black;
        align-self: flex-start;
        margin-right: auto;
        border-bottom-left-radius: 0;
    }

    /* Typing Indicator */
    .typing-indicator {
        font-style: italic;
        font-size: 13px;
        color: #888;
        margin-top: 5px;
        margin-left: 5px;
    }

    /* Input Area */
    #chatbot-input-container {
        display: flex;
        align-items: center;
        padding: 10px;
        border-top: 1px solid #eee;
        background: #fff;
    }

    #chatbot-input {
        flex: 1;
        padding: 10px 15px;
        border: 1px solid #ccc;
        border-radius: 30px;
        font-size: 14px;
        outline: none;
        margin-right: 8px;
    }

    #chatbot-send {
        background: var(--vz-primary);
        border: none;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
        cursor: pointer;
    }
</style>
@endpush




<!-- Chatbot Floating Button -->
<div id="chatbot-toggle" class="glowing-animation">
    <i class="ri-message-2-fill" style="font-size: 30px; color: white;"></i>
</div>

<!-- Chatbot UI -->
<div id="chatbot-container" style="z-index: 9999">
    <div id="chatbot-header">
        Chatbot
        <span id="chatbot-close">&times;</span>
    </div>
    <div id="chatbot-body"></div>
    <div id="chatbot-input-container">
        <input type="text" id="chatbot-input" placeholder="Ask me something...">
        <button id="chatbot-send">
            <i class="ri-send-plane-2-fill"></i>
        </button>
    </div>
</div>


<!-- Scripts -->
@push('js')
    {{-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> --}}
    <script>
        $(document).ready(function() {
            $('#chatbot-toggle').click(function() {
                $('#chatbot-container').fadeIn();
                $(this).hide();
            });

            $('#chatbot-close').click(function() {
                $('#chatbot-container').fadeOut();
                $('#chatbot-toggle').show();
            });

            $('#chatbot-send').click(sendMessage);
            $('#chatbot-input').keypress(function(e) {
                if (e.which == 13) sendMessage();
            });

            function sendMessage() {
                const input = $('#chatbot-input');
                const body = $('#chatbot-body');
                const message = input.val().trim();

                if (message === '') return;

                body.append('<div class="message user-message">You: ' + message + '</div>');
                input.val('');
                body.append('<div class="typing-indicator" id="typing">Bot is typing...</div>');
                scrollToBottom();

                $.ajax({
                    url: '{{ route('chatbot.query') }}',
                    type: 'POST',
                    data: {
                        message: message,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        $('#typing').remove();
                        body.append('<div class="message bot-message">Bot: ' + response.reply +
                            '</div>');
                        scrollToBottom();
                    },
                    error: function() {
                        $('#typing').remove();
                        body.append(
                            '<div class="message bot-message">Bot: Sorry, something went wrong.</div>'
                        );
                        scrollToBottom();
                    }
                });
            }

            function scrollToBottom() {
                const body = $('#chatbot-body');
                body.scrollTop(body[0].scrollHeight);
            }
        });
    </script>
@endpush