document.addEventListener("DOMContentLoaded", function () {
    const toggle = document.getElementById("ethanicbot-toggle");
    const windowBox = document.getElementById("ethanicbot-window");
    const form = document.getElementById("ethanicbot-form");
    const input = document.getElementById("ethanicbot-input");
    const messagesDiv = document.getElementById("ethanicbot-messages");
    const typingDiv = document.getElementById("ethanicbot-typing");
  
    toggle.addEventListener("click", () => {
      windowBox.style.display = windowBox.style.display === "none" ? "flex" : "none";
    });
  
    form.addEventListener("submit", function (e) {
      e.preventDefault();
      const message = input.value.trim();
      if (!message) return;
  
      messagesDiv.innerHTML += `<div class="user">${message}</div>`;
      input.value = "";
      typingDiv.style.display = "block";
      messagesDiv.scrollTop = messagesDiv.scrollHeight;
  
      fetch("/ethanicbot/chat/", {
        method: "POST",
        headers: {
          "X-CSRFToken": document.querySelector("[name=csrfmiddlewaretoken]").value,
          "Content-Type": "application/x-www-form-urlencoded",
        },
        body: `message=${encodeURIComponent(message)}`
      })
      .then((res) => res.json())
      .then((data) => {
        typingDiv.style.display = "none";
        messagesDiv.innerHTML += `<div class="bot">${data.response}</div>`;
        messagesDiv.scrollTop = messagesDiv.scrollHeight;
      });
    });
  });