{% load static %}
{% load gravatar %}
{% load socialaccount %}
{% load user_score %}
{% providers_media_js %}
{% load i18n %}
{% load custom_tags %}
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
    a {
        color: black;
    }
    .chatbot {
        display: none;
        position: fixed;
        bottom: 7%;
        right: 1%;
        max-width: 400px;
        width: 100%;
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        height: 450px; /* Fixed height */
    }
    .chat-icon {
        position: fixed;
        bottom: 4%;
        right: 4%;
        background-color: rgb(209, 16, 16); /* Red color */
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    .chat-header {
        background-color: #e11d48; /* Red color */
        color: white;
        padding: 12px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
    .chat-log {
        max-height: 320px; /* Adjusted height */
        overflow-y: auto;
        height: 320px; /* Fixed height */
    }
    .loading {
        display: none;
        position: fixed;
        bottom: 100px;
        right: 10.5%;
        justify-content: center;
        align-items: center;
        padding: 10px;
        background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent background */
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const desktopDropdownButton = document.getElementById('dropdownButton');
        const desktopDropdownMenu = document.getElementById('dropdownMenu');

        if (desktopDropdownButton && desktopDropdownMenu) {
            desktopDropdownButton.addEventListener('click', () => {
                desktopDropdownMenu.classList.toggle('hidden');
            });
            document.addEventListener('click', (e) => {
                if (!desktopDropdownButton.contains(e.target) && !desktopDropdownMenu.contains(e.target)) {
                    desktopDropdownMenu.classList.add('hidden');
                }
            });
        }

        const mobileDropdownButton = document.getElementById('dropdown-toggle-mobile');
        const mobileDropdownMenu = document.getElementById('dropdown-mobile');
        if (mobileDropdownButton && mobileDropdownMenu) {
            mobileDropdownButton.addEventListener('click', () => {
                mobileDropdownMenu.classList.toggle('hidden');
            });
            document.addEventListener('click', (e) => {
                if (!mobileDropdownButton.contains(e.target) && !mobileDropdownMenu.contains(e.target)) {
                    mobileDropdownMenu.classList.add('hidden');
                }
            });
        }
    });
</script>
<nav class="fixed top-0 z-50 w-full bg-white border-[#F7F7F7] border-b-2 px-4 ">
    <div class="px-3 py-1 lg:px-5 lg:pl-3">
        <div class="flex items-center justify-between">
            <div class="flex items-center justify-start rtl:justify-end">
                <!-- Ham Menu -->
                <button id="hamburger-button"
                        data-drawer-target="logo-sidebar"
                        data-drawer-toggle="logo-sidebar"
                        aria-controls="logo-sidebar"
                        type="button"
                        class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
                    <svg class="w-8 h-8"
                         aria-hidden="true"
                         fill="currentColor"
                         viewBox="0 0 20 20"
                         xmlns="http://www.w3.org/2000/svg">
                        <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z">
                        </path>
                    </svg>
                </button>
                <!-- Logo -->
                <a href="{% url 'index' %}"
                   class="flex flex-col ms-2 md:me-24 items-start">
                    <img src="{% logo 'TRANSPARENT' %}"
                         class="max-w-[100px] lg:max-w-[200px]"
                         alt="Bug Bounty Logo"
                         width="100%"
                         height="100%">
                    <p class="inline-block text-base lg:text-xl mb-0">{% trans "Report Issues, Win Prizes" %}</p>
                </a>
            </div>
            <!-- Search Bar  -->
            <div class="column items-center gap-[8px] overflow-clip flex lg:w-[auto] lg:h-[auto]">
                <form class="relative lg:!px-[34px] mb-0 flex items-center"
                      action="{% url 'search' %}"
                      method="get">
                    <i class="lg:!flex hidden fa fa-search absolute left-[13px] text-[#9CA3AF] z-10 my-auto"></i>
                    <input type="text"
                           name="query"
                           placeholder="Search"
                           class="text-xl lg:text-base lg:ps-9 lg:scale-[1.4] w-[70px] lg:w-auto h-16 placeholder-[#9CA3AF] bg-[#EDEDED] outline-none p-5 font-semibold rounded-xl">
                </form>
                <a href="{% url 'report' %}"
                   class="flex lg:hidden ml-5 h-[38px] border border-black rounded-3xl p-2 shadow">
                    <img src="{% static 'images/report_issue.png' %}"
                         class="w-[25px] h-[28px] lg:max-w-[200px]"
                         alt="Report Issue Icon"
                         width="100%"
                         height="100%">
                </a>
                <a href="{% url 'report' %}"
                   class="lg:!inline-block hidden bg-red-500 hover:bg-red-600 h-[38px] py-[8px] px-[20px] whitespace-nowrap !text-2xl font-bold text-white leading-[21px] cursor-pointer hover:text-white hover:no-underline rounded-xl tracking-wide">
                    {% trans "Report an Issue" %}
                </a>
                <a href="{% url 'hunts' %}"
                   class="lg:!inline-block hidden bg-red-500 hover:bg-red-600 h-[38px] py-[8px] px-[20px] whitespace-nowrap !text-2xl font-bold text-white leading-[21px] cursor-pointer hover:text-white hover:no-underline rounded-xl tracking-wide">
                    {% trans "Bug Bounties" %}
                </a>
            </div>
            {% if request.user.is_authenticated %}
                <li class="h-[80px] flex justify-center items-center ">
                    <button id="dropdownButton"
                            class="relative flex items-center sm:gap-3 mr-[30px]"
                            type="button">
                        {% if request.user.userprofile.avatar %}
                            <img src="{{ request.user.userprofile.avatar }}"
                                 class="h-[30px] w-[30px] rounded-full "
                                 alt="User Avatar"
                                 width="30"
                                 height="30">
                        {% elif request.user.socialaccount_set.all.0.get_avatar_url %}
                            <img src="{{ request.user.socialaccount_set.all.0.get_avatar_url }}"
                                 class="h-[30px] w-[30px] rounded-full "
                                 alt="User Avatar"
                                 width="30"
                                 height="30">
                        {% else %}
                            {% gravatar request.user.email 30 '' 'gravatar rounded-full' %}
                        {% endif %}
                        <span class="absolute -right-[17px] -bottom-[25px] lg:-right-[25px] lg:-bottom-[25px] sm:static whitespace-nowrap"><span>{{ request.user.username }}</span> ({{ request.user|score|default:"0" }} Pts)
                        <i class="fa fa-caret-down text-red-500"></i>
                    </span>
                </button>
                <!-- Dropdown for User Avatar -->
                <div id="dropdownMenu"
                     class="z-50 hidden absolute bg-white top-32 right-5">
                    <ul class="flex flex-col gap-2 px-8 py-4 border shadow-xl rounded-lg left-auto">
                        <li>
                            <a href="{% url 'account_profile' %}">
                                <i class="fa fa-user fa-fw"></i> {% trans "User Profile" %}
                            </a>
                        </li>
                        <li>
                            <a href="{% env 'EXTENSION_URL' %}"
                               target="_new"
                               rel="noopener noreferrer">
                                <i class="fa fa-chrome fa-fw"></i>
                                {% trans "Add to chrome" %}
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'start_hunt' %}">
                                <i class="fa fa-play fa-fw"></i> {% trans "Start a Bug Hunt" %}
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'social' %}">
                                <i class="fa fa-share fa-fw"></i>
                                {% trans "Social" %}
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'account_change_password' %}">
                                <i class="fa fa-gear fa-fw"></i> {% trans "Change Password" %}
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'invite' %}">
                                <i class="fa fa-paper-plane fa-fw"></i> {% trans "Invite Friends" %}
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'company_view' %}">
                                <i class="fa fa-building fa-fw"></i> {% trans "Company Dashboard" %}
                            </a>
                        </li>
                        <!-- divider -->
                        <li class="border my-4 -mx-8"></li>
                        <li>
                            <a href="{% url 'account_logout' %}">
                                <i class="fa fa-sign-out fa-fw"></i> {% trans "Logout" %}
                            </a>
                        </li>
                    </ul>
                </div>
            </li>
        {% else %}
            <!-- Sign up and Log in Buttons -->
            <div class="flex items-center h-[80px]">
                <div class="hidden lg:!flex h-[80px] justify-center items-center ">
                    <a href="{% url 'account_signup' %}"
                       class="h-[38px] px-[25px] py-[9px] bg-red-500 hover:bg-red-600 hover:no-underline text-white font-bold text-2xl mr-[20px] hover:text-white">
                    {% trans "Signup" %}</a>
                    <a href="{% url 'account_login' %}"
                       data-toggle="modal"
                       class="h-[38px] px-[25px] py-[9px] bg-red-500 hover:bg-red-600 hover:no-underline text-white font-bold text-2xl mr-[20px] hover:text-white">
                    {% trans "Login" %}</a>
                </div>
                <!-- Log in icon -->
                <a href="{% url 'account_login' %}" class="block lg:hidden m-2">
                    <i class="fa fa-user !text-5xl text-red-500"></i>
                </a>
            </div>
        {% endif %}
    </div>
</div>
</nav>
<div class="bg-gray-100">
    <div id="chatbot" class="chatbot">
        <div class="chat-header flex justify-between items-center">
            <h3 class="text-xl font-extrabold">Chat with BLT Bot</h3>
            <button id="closeChatbot" class="text-white text-2xl">×</button>
        </div>
        <div class="p-4">
            <div class="bg-red-100 p-3 rounded-lg mb-2 text-red-700">
                <p class="text-base">We reply immediately</p>
            </div>
            <div id="chat-log" class="chat-log bg-gray-50 p-3 rounded-lg"></div>
            <div class="flex" id="chat-message-input-container">
                <input id="chat-message-input"
                       type="text"
                       class="flex-grow p-2 border border-gray-300 rounded-l-lg"
                       placeholder="Enter your message...">
                <button id="chat-message-submit"
                        class="bg-red-600 text-white p-2 rounded-md ml-2">Send</button>
                <button id="chat-message-clear"
                        class="bg-gray-300 text-black p-2 rounded-md ml-2">Clear</button>
            </div>
        </div>
    </div>
    <div id="loading" class="loading">
        <svg class="animate-spin h-5 w-5 text-red-600"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
            </path>
        </svg>
        <span class="ml-2 text-gray-600">Loading...</span>
    </div>
    <div id="chatIcon" class="chat-icon z-99999">
        <svg class="w-10 h-10 text-white"
             aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
             fill="currentColor"
             viewBox="0 0 24 24">
            <path fill-rule="evenodd" d="M3.559 4.544c.355-.35.834-.544 1.33-.544H19.11c.496 0 .975.194 1.33.544.356.35.559.829.559 1.331v9.25c0 .502-.203.981-.559 1.331-.355.35-.834.544-1.33.544H15.5l-2.7 3.6a1 1 0 0 1-1.6 0L8.5 17H4.889c-.496 0-.975-.194-1.33-.544A1.868 1.868 0 0 1 3 15.125v-9.25c0-.502.203-.981.559-1.331ZM7.556 7.5a1 1 0 1 0 0 2h8a1 1 0 0 0 0-2h-8Zm0 3.5a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2H7.556Z" clip-rule="evenodd" />
        </svg>
    </div>
</div>
<script>
    document.getElementById('chatIcon').addEventListener('click', function() {
        document.getElementById('chatbot').style.display = 'block';
        this.style.display = 'none';
    });

    document.getElementById('closeChatbot').addEventListener('click', function() {
        document.getElementById('chatbot').style.display = 'none';
        document.getElementById('chatIcon').style.display = 'flex';
    });

    document.addEventListener('DOMContentLoaded', (event) => {
        const chatLog = document.querySelector('#chat-log');
        const chatInput = document.querySelector('#chat-message-input');
        const chatSubmit = document.querySelector('#chat-message-submit');
        const chatClear = document.querySelector('#chat-message-clear');
        const chatClose = document.querySelector('#closeChatbot');
        const loading = document.querySelector('#loading');

        chatSubmit.onclick = function() {
            const message = chatInput.value;
            chatInput.value = '';
            if (message.trim() === "") return;

            // Escape HTML meta-characters in the message
            const escapedMessage = message.replace(/</g , "&lt;").replace( />/g, "&gt;");

            chatLog.innerHTML += '<div class="bg-red-100 text-red-800 p-2 rounded-lg mb-2">You: ' + escapedMessage + '</div>';
            loading.style.display = 'flex';

            fetch('/api/chatbot/conversation/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ question: message }),
            })
            .then(response => {
                if (!response.ok) {
                    if (response.status === 429) {
                        throw new Error('Rate limit exceeded');
                    }
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                // Escape HTML meta-characters in the response
                const escapedAnswer = data.answer.replace(/</g , "&lt;").replace( />/g, "&gt;");
                
                chatLog.innerHTML += '<div class="bg-gray-100 text-gray-800 p-2 rounded-lg mb-2">Bot: ' + escapedAnswer + '</div>';
                chatLog.scrollTop = chatLog.scrollHeight;  // Scroll to the bottom
                loading.style.display = 'none';
            })
            .catch((error) => {
                if (error.message === 'Rate limit exceeded') {
                    chatLog.innerHTML += '<div class="bg-gray-100 text-gray-800 p-2 rounded-lg mb-2">Bot: The request limit has been reached. Please try again later.</div>';
                } else {
                    chatLog.innerHTML += '<div class="bg-gray-100 text-gray-800 p-2 rounded-lg mb-2">Bot: Sorry, I am unable to process your request at the moment. Please try again later.</div>';
                }
                chatLog.scrollTop = chatLog.scrollHeight;
                loading.style.display = 'none';
            });
        };

        function clearChat() {
            loading.style.display = 'flex';
            fetch('/api/chatbot/conversation/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ question: "exit" }),
            })
            .then(response => response.json())
            .then(data => {
                chatLog.innerHTML = '';
                loading.style.display = 'none';
            })
            .catch((error) => {
                console.error('Error:', error);
                loading.style.display = 'none';
            });
        }

        chatClear.onclick = clearChat;
        chatClose.onclick = clearChat;

        chatInput.addEventListener('keyup', function(event) {
            if (event.keyCode === 13) {  // Enter key
                chatSubmit.click();
            }
        });
    });
</script>