{% extends 'base.html' %}
{% load i18n static %}

{% block title %}{{ _("HaikalBot") }}{% endblock title %}

{% block content %}
<style>

#chatbox {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    height: 200px;
    overflow-y: scroll;
    background-color: #f9f9f9;
}

</style>
    
<div class="container p-2">
  <div class="card shadow-sm rounded shadow">
    <div class="card-header bg-primary text-white">
      <h4 class="mb-0">{% trans 'HaikalBot' %}</h4>
    </div>
    <div class="card-body">
      
      <div id="chatbox">
        <p><b>{% trans 'HaikalBot' %}:</b> {% trans 'Hello! How can I assist you today?' %}</p>
      </div>
        <label for="userMessage"></label>
        <input class="form-control form-control-sm" 
               type="text" id="userMessage" 
               placeholder="{% trans 'Type your message here...' %}" />
      <button class="btn btn-sm btn-success m-2" onclick="sendMessage()">{% trans 'Send' %}</button>
    </div>
  </div>
    
    <!-- Script to send to api -->
    <script>
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let cookie of cookies) {
            cookie = cookie.trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

    const csrfToken = getCookie('csrftoken');
        
        
        async function sendMessage() {
    const userMessage = document.getElementById("userMessage").value;

    if (!userMessage.trim()) {
        alert("Please enter a message.");
        return;
    }

    const response = await fetch("", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRFToken": csrfToken,
        },
        body: JSON.stringify({ message: userMessage }),
    });

    if (response) {
        const data = await response.json();
        const chatbox = document.getElementById("chatbox");
        chatbox.innerHTML += `<p><b>{% trans 'You' %}:</b> ${userMessage}</p>`;
        chatbox.innerHTML += `<p><b>{% trans 'HaikalBot' %}:</b> ${data.response}</p>`;
        document.getElementById("userMessage").value = "";
        chatbox.scrollTop = chatbox.scrollHeight;
    } else {
        alert("An error occurred.");
    }
}
    </script>
  

</div>
{% endblock content %}