{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> {% block title %}Multi Vendor E-Commerce Website{% endblock title %} </title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
    <link rel="stylesheet" href="{% static 'css/main.css' %}">
    <link rel="stylesheet" href="{% static 'css/wrapp.css' %}">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>
    .goog-te-gadget-icon {
    display:none;
    }
.goog-te-gadget-simple {
    background-color: #ffd907 !important;
    border:0 !important;
    font-size: 10pt;
   font-weight:400;
    display: inline-block;
    padding:10px 10px !important;
    cursor: pointer;
    zoom: 1;
}

.goog-te-gadget-simple  span {
   color:black !important;

}
.chatbot-toggler {
  position: fixed;
  bottom: 30px;
  right: 35px;
  outline: none;
  border: none;
  height: 50px;
  width: 50px;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ca373d;
  transition: all 0.2s ease;
}
body.show-chatbot .chatbot-toggler {
  transform: rotate(90deg);
}
.chatbot-toggler span {
  color: #fff;
  position: absolute;
}
.chatbot-toggler span:last-child,
body.show-chatbot .chatbot-toggler span:first-child  {
  opacity: 0;
}
body.show-chatbot .chatbot-toggler span:last-child {
  opacity: 1;
}
.chatbot {
  z-index: 100;
  position: fixed;
  right: 35px;
  bottom: 90px;
  width: 420px;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.5);
  transform-origin: bottom right;
  box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
              0 32px 64px -48px rgba(0,0,0,0.5);
  transition: all 0.1s ease;
}
body.show-chatbot .chatbot {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.chatbot header {
  padding: 16px 0;
  position: relative;
  text-align: center;
  color: #fff;
  background: #ca373d;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.chatbot header span {
  position: absolute;
  right: 15px;
  top: 50%;
  display: none;
  cursor: pointer;
  transform: translateY(-50%);
}
header h2 {
  font-size: 1.4rem;
}
.chatbot .chatbox {
  overflow-y: auto;
  height: 510px;
  padding: 30px 20px 100px;
}
.chatbot :where(.chatbox, textarea)::-webkit-scrollbar {
  width: 6px;
}
.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 25px;
}
.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 25px;
}
.chatbox .chat {
  display: flex;
  list-style: none;
}
.chatbox .outgoing {
  margin: 20px 0;
  justify-content: flex-end;
}
.chatbox .incoming span {
  width: 32px;
  height: 32px;
  color: #fff;
  cursor: default;
  text-align: center;
  line-height: 32px;
  align-self: flex-end;
  background: #ca373d;
  border-radius: 4px;
  margin: 0 10px 7px 0;
}
.chatbox .chat p {
  white-space: pre-wrap;
  padding: 12px 16px;
  border-radius: 10px 10px 0 10px;
  max-width: 75%;
  color: #fff;
  font-size: 0.95rem;
  background: #ca373d;
}
.chatbox .incoming p {
  border-radius: 10px 10px 10px 0;
}
.chatbox .chat p.error {
  color: #721c24;
  background: #f8d7da;
}
.chatbox .incoming p {
  color: #000;
  background: whitesmoke;
}
.chatbot .chat-input {
  display: flex;
  gap: 5px;
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #fff;
  padding: 3px 20px;
  border-top: 1px solid #ddd;
}
.chat-input textarea {
  height: 55px;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  max-height: 180px;
  padding: 15px 15px 15px 0;
  font-size: 0.95rem;
}
.chat-input span {
  align-self: flex-end;
  color: #ca373d;
  cursor: pointer;
  height: 55px;
  display: flex;
  align-items: center;
  visibility: hidden;
  font-size: 1.35rem;
}
.chat-input textarea:valid ~ span {
  visibility: visible;
}

@media (max-width: 490px) {
  .chatbot-toggler {
    right: 20px;
    bottom: 20px;
  }
  .chatbot {
    right: 0;
    bottom: 0;
    height: 100%;
    border-radius: 0;
    width: 100%;
    z-index : 4;
  }
  .chatbot .chatbox {
    height: 90%;
    padding: 25px 15px 100px;
  }
  .chatbot .chat-input {
    padding: 5px 15px;
  }
  .chatbot header span {
    display: block;
  }
}
    {% block css %}

    {% endblock css %}</style>
</head>

<body>

<button class="chatbot-toggler">
      <span class="material-symbols-rounded">mode_comment</span>
      <span class="material-symbols-outlined">close</span>
    </button>
    <div class="chatbot">
      <header>
        <h2>DNK Assistant</h2>
        <span class="close-btn material-symbols-outlined">close</span>
      </header>
      <ul class="chatbox">
        <li class="chat incoming">
          <span class="material-symbols-outlined">smart_toy</span>
          <p>Hi there 👋<br>How can I help you today?</p>
        </li>
      </ul>
      <div class="chat-input">
        <textarea placeholder="Enter a message..." spellcheck="false" required></textarea>
        <span id="send-btn" class="material-symbols-rounded">send</span>
      </div>
    </div>

<div class="wrapper">
  <div class="top_navbar" style="  z-index: 2;
  width: calc(100% - 20px);
  height: 77px;
  display: flex;
  position: fixed;
  top: 0px;">
    <div class="top_menu">
      <div class="logo">
         <img style="margin-bottom: 4px; width: 160px;" src="{% static 'images/logoepost.png' %}" alt="..">
      </div>

        <div class="search" style=" width: 60%; padding: 15px; margin-bottom:3px; margin-left: 100px; ">
            <select id="cats" style="border: 1px solid black;
                border-right: none;
                outline: none;
                margin-left: 20px;
                font-size: 16px;
                padding: 10px;
                width: 300px;">
                {% for category in categories %}
                <option id="{{category.title}}" value="{{category.title}}" style=" font-size: 16px; outline:none;">{{category.title}}</option>
                {% endfor %}
            </select>
            <input type="text" placeholder="Search For Product" style=" border: 1px solid black;
                    border-left: none;
                    outline: none;
                    margin-left: -5px;
                    font-size: 16px;
                    padding: 8px;
                    width: 300px;
                    height: 42.4px;">
            </input>
            <button id="subSearch" style="background-color: #ffd907; margin-left: 5px; height: 43.4px; outline: none; padding-right: 10px; padding-left: 10px; border: none; border-radius: 3px;">Search</button>
        </div>
        <div style="height: 44.4px;" id="google_translate_element"></div>

<!--      <ul>-->
<!--        <li><a href="#">-->
<!--          <i style=" color: #ca373d;" class="fas fa-search"></i>-->
<!--          </a></li>-->
<!--        <li><a style=" color: #ca373d;" href="{% url 'cart:cart' %}">-->
<!--          <i style=" color: #ca373d;" class="fa fa-shopping-cart"></i>-->
<!--          </a></li>-->
<!-- {% if request.user.is_authenticated %}-->
<!--        <li><a href="{% url 'vendor:logout' %}">-->
<!--          <i style=" color: #ca373d;" class="fas fa-sign-out-alt"></i>-->
<!--          </a></li>-->
<!-- {% else %}-->
<!--        <li><a href="{% url 'vendor:login' %}">-->
<!--          <i class="fas fa-user"></i>-->
<!--          </a></li>-->
<!-- {% endif %}-->
<!--      </ul>-->
        <ul>
        <button onclick="window.location.href = '{% url 'cart:cart' %}';" id="cart" style="margin-top: 9px;background-color: #ffd907;height: 41.4px;outline: none;padding-right: 21px;padding-left: 21px;border: none;border-radius: 3px;">Cart</button>
            {% if request.user.is_authenticated %}
            <button onclick="window.location.href = '{% url 'vendor:logout' %}';" id="logout" style="margin-left: 9px;margin-top: 9px;color: #ca373d;height: 41.4px;outline: none;padding-right: 21px;padding-left: 21px;background-color: #fff;border: 1px solid #ffd907;">LogOut</button>
            {% else %}
            <button onclick="window.location.href = '{% url 'vendor:login' %}';" id="login" style="margin-left: 9px;margin-top: 9px;color: #ca373d;height: 41.4px;outline: none;padding-right: 21px;padding-left: 21px;background-color: #fff;border: 1px solid #ffd907;">LogIn</button>
            {% endif %}

      </ul>
    </div>
  </div>

  <div class="sidebar" style="margin-bottom: 20px;
    box-shadow: 0px 5px 6px dimgray;
    display: flex;
    justify-content: center;
    z-index: 5;
    position: fixed;
    top: 70px;
    left: 0;
    background: #ca373d;
    width: 100%;
    height: 59px;
    border-bottom-left-radius: 0px;
    transition: all 0.3s ease;">
      <ul style="display: flex;
    flex-flow: row;">
          <li><a style="padding: 17px;" href="{% url 'core:home' %}">
          <span class="title" style="color: #fff;">Home</span>
        </a></li>
      {% if request.user.is_authenticated %}
        <li><a style="padding: 17px;" href="{% url 'vendor:edit-vendor' %}">
          <span class="title" style="color: #fff;">Edit Prof</span>
        </a></li>
      {% endif %}
<!--          regional prods div-->
<!--          <li><a style="padding: 17px;" target="__new" href="https://patilharshh.github.io/Products-Page/">-->
<!--          <span class="title" style="color: #fff;">RegionalProds</span>-->
<!--        </a></li>-->
<!--     {% for category in categories %}-->
<!--        <li><a style="padding: 17px;" href="{% url 'product:category' category.slug %}">-->
<!--          <span class="title" style="color: #fff;">{{category.title}}</span>-->
<!--        </a></li>-->
<!--    {% endfor %}-->

  {% if request.user.is_authenticated %}
        <li><a style="padding: 17px;" href="{% url 'vendor:logout' %}">
          <span class="title" style="color: #fff;">Sign Out</span>
        </a></li>
     {% else %}
        <li><a style="padding: 17px;" href="{% url 'vendor:login' %}">
          <span class="title" style="color: #fff;">Sign In</span>
        </a></li>
    {% endif %}
          <li><a style="padding: 17px;" href="{% url 'core:contact' %}">
          <span class="title" style="color: #fff;">About Us</span>
        </a></li>
    </ul>
  </div>

    <div class="main_container" style="margin-top: 137px;
  margin-left: 0px;">
        <section class="section">
            <div class="container">

                {% block content %}{% endblock content %}

            </div>
        </section>

        <footer class="footer" style="padding:2rem 2.5rem 3rem;">
        <div class="container">
            <h3 class="is-size-4 mb-4">Multi Vendor E-Commerce</h3>
                {% if request.user.is_authenticated %}
                    <a style="background-color: #ca373d; padding: 5px; color: #fff; text-decoration: none;" href="{% url 'vendor:vendor-admin' %}">Dash Board</a>
                {% else %}
                    <a style="background-color: #ca373d; padding: 5px; color: #fff; text-decoration: none;" href="{% url 'vendor:become-vendor' %}">Become Vendor</a>
                {% endif %}
            <a style="margin-left:40px; background-color: #ca373d; padding: 5px; color: #fff; text-decoration: none;" target="__new" href="https://patilharshh.github.io/Products-Page/">Shop By Region Wise</a>
                <a style=" margin-left:40px; background-color: #ca373d; padding: 5px; color: #fff; text-decoration: none;" href="/vendor/vendor-admin/">Vendor Admin</a>
            <a style=" margin-left:40px; background-color: #ca373d; padding: 5px; color: #fff; text-decoration: none;" href="/vendor/">All Vendors</a>
        </div>
    </footer>

    </div>

  </div>
<!--<footer class="footer" style="padding:2rem 14.5rem 6rem;">-->
<!--        <div class="container">-->
<!--            <h3 class="is-size-4 mb-4">Multi Vendor E-Commerce</h3>-->

<!--            {% if request.user.is_authenticated %}-->
<!--                <a href="{% url 'vendor:vendor-admin' %}">Vendor Admin</a>-->
<!--            {% else %}-->
<!--                <a href="{% url 'vendor:become-vendor' %}">Become a Vendor</a>-->
<!--            {% endif %}-->

<!--            <br>-->
<!--            <a href="{% url 'vendor:vendors' %}">All Vendors</a>-->

<!--        </div>-->
<!--    </footer>-->

    <script src="{% static 'js/main.js' %}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script>$(".hamburger").click(function () {
  $(".wrapper").toggleClass("collapse");
});
</script>



<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: "en,hi,ar,es", layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>


    <script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
    {% block scripts %}
    <script>
        const chatbotToggler = document.querySelector(".chatbot-toggler");
const closeBtn = document.querySelector(".close-btn");
const chatbox = document.querySelector(".chatbox");
const chatInput = document.querySelector(".chat-input textarea");
const sendChatBtn = document.querySelector(".chat-input span");

let userMessage = null; // Variable to store user's message
const API_KEY = "PASTE-YOUR-API-KEY"; // Paste your API key here
const inputInitHeight = chatInput.scrollHeight;

const createChatLi = (message, className) => {
    // Create a chat <li> element with passed message and className
    const chatLi = document.createElement("li");
    chatLi.classList.add("chat", `${className}`);
    let chatContent = className === "outgoing" ? `<p></p>` : `<span class="material-symbols-outlined">smart_toy</span><p></p>`;
    chatLi.innerHTML = chatContent;
    chatLi.querySelector("p").textContent = message;
    return chatLi; // return chat <li> element
}

const generateResponse = (chatElement) => {
    const API_URL = "https://api.openai.com/v1/chat/completions";
    const messageElement = chatElement.querySelector("p");

    // Define the properties and message for the API request
    const requestOptions = {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${API_KEY}`
        },
        body: JSON.stringify({
            model: "gpt-3.5-turbo",
            messages: [{role: "user", content: userMessage}],
        })
    }

    // Send POST request to API, get response and set the reponse as paragraph text
    fetch(API_URL, requestOptions).then(res => res.json()).then(data => {
        messageElement.textContent = data.choices[0].message.content.trim();
    }).catch(() => {
        messageElement.textContent = "Yess you can become Vendor go to become vendor page to be vendor.";
    }).finally(() => chatbox.scrollTo(0, chatbox.scrollHeight));
}

const handleChat = () => {
    userMessage = chatInput.value.trim(); // Get user entered message and remove extra whitespace
    if(!userMessage) return;

    // Clear the input textarea and set its height to default
    chatInput.value = "";
    chatInput.style.height = `${inputInitHeight}px`;

    // Append the user's message to the chatbox
    chatbox.appendChild(createChatLi(userMessage, "outgoing"));
    chatbox.scrollTo(0, chatbox.scrollHeight);

    setTimeout(() => {
        // Display "Thinking..." message while waiting for the response
        const incomingChatLi = createChatLi("Thinking...", "incoming");
        chatbox.appendChild(incomingChatLi);
        chatbox.scrollTo(0, chatbox.scrollHeight);
        generateResponse(incomingChatLi);
    }, 600);
}

chatInput.addEventListener("input", () => {
    // Adjust the height of the input textarea based on its content
    chatInput.style.height = `${inputInitHeight}px`;
    chatInput.style.height = `${chatInput.scrollHeight}px`;
});

chatInput.addEventListener("keydown", (e) => {
    // If Enter key is pressed without Shift key and the window
    // width is greater than 800px, handle the chat
    if(e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) {
        e.preventDefault();
        handleChat();
    }
});

sendChatBtn.addEventListener("click", handleChat);
closeBtn.addEventListener("click", () => document.body.classList.remove("show-chatbot"));
chatbotToggler.addEventListener("click", () => document.body.classList.toggle("show-chatbot"));
    </script>
    {% endblock scripts %}

</body>
</html>