@extends('main_chatbot')

@section('content')
<style>

.msger {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    margin: 25px 10px;
    height: calc(100% - 50px);
    border: var(--border);
    border-radius: 5px;
    background: var(--msger-bg);
    box-shadow: 0 0 0 0;
    padding-top: 50px;
}

.msger-header{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
}

.msger-inputarea {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

.msger {
    margin: 0;
}

.left-msg .msg-img {
    margin: 0 0 0 10px;
}

</style>

<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="content content-chat">

    <section class="msger">
        <header class="msger-header">
            <div class="msger-header-title">
                <input type="text" id="id" hidden>
            </div>
            <div class="msger-header-options">
                <button id="delete-button">Borrar Historial</button>
            </div>
        </header>

        <main class="msger-chat" id="msger-chat"> </main>
        <form class="msger-inputarea">
            @csrf
            <input class="msger-input" placeholder="Escriba su mensaje..." require>
            <button type="submit" class="msger-send-btn">Enviar</button>
        </form>
    </section>

</div>


<script>

if (getCookie("id") == "") {
    uuid = uuidv4()
    document.cookie = "id=" + uuid
    document.getElementById("id").value = uuid
} else {
    document.getElementById("id").value = getCookie("id");
}
const USER_ID = document.getElementById("id").value;
getHistory()

const msgerForm = get(".msger-inputarea");
const msgerInput = get(".msger-input");
const msgerChat = get(".msger-chat");
const msgerSendBtn = get(".msger-send-btn");


// Icons made by Freepik from www.flaticon.com
const BOT_IMG = "/images/chat/chatbotmini.png";
const PERSON_IMG = "https://api.dicebear.com/5.x/micah/svg?seed=" + document.getElementById("id").value
const BOT_NAME = "ChatBot";
const PERSON_NAME = "Tu";

// Function to delete chat history records for a user ID using the API
function deleteChatHistory(userId) {
    if (!confirm("Esta seguro de eliminar el chat")) {
        return false
    }
    var formData = new FormData();
    formData.append('user_id', USER_ID);
    fetch('/chatbot_chat_delete/{{$id}}/{{$chatbotid}}/'+USER_ID, {
        method: 'POST',
        body: formData,
        headers: {'Content-Type': 'application/json', 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } 
    })
        .then(response => {
            if (!response.ok) {
                throw new Error('Error deleting chat history: ' + response.statusText);
            }
            deleteAllCookies()
            location.reload(); // Reload the page to update the chat history table
        })
        .catch(error => console.error(error));
}

// Event listener for the Delete button click
const deleteButton = document.querySelector('#delete-button');
deleteButton.addEventListener('click', event => {
    event.preventDefault();
    deleteChatHistory(USER_ID);
});

msgerForm.addEventListener("submit", event => {
    event.preventDefault();

    const msgText = msgerInput.value;
    if (!msgText) return;

    appendMessage(PERSON_NAME, PERSON_IMG, "right", msgText);
    msgerInput.value = "";

    sendMsg(msgText)
});

function getHistory() {
    var formData = new FormData();
    formData.append('user_id', USER_ID);
    fetch('/chatbot_chat_init/{{$id}}/{{$chatbotid}}/'+USER_ID, {method: 'POST', body: formData,  headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}})
        .then(response => response.json())
        .then(chatHistory => {
            for (const row of chatHistory) {
                if(row.human!=""){
                    appendMessage(PERSON_NAME, PERSON_IMG, "right", row.human);
                }
                appendMessage(BOT_NAME, BOT_IMG, "left", row.ia, "");
            }
        })
        .catch(error => console.error(error));
}

function appendMessage(name, img, side, text, id) {
    //   Simple solution for small apps
    const msgHTML = `
    <div class="msg ${side}-msg">
      <div class="msg-bubble">
        <div class="msg-info">
          <div class="msg-info-name">${name}</div>
          <div class="msg-info-time">${formatDate(new Date())}</div>
        </div>

        <div class="msg-text" id=${id}>${text}</div>
      </div>
    </div>
  `;

    msgerChat.insertAdjacentHTML("beforeend", msgHTML);
    msgerChat.scrollTop = msgerChat.scrollHeight;
    
}

function sendMsg(msg) {
    msgerSendBtn.disabled = true
    var formData = new FormData();
    formData.append('msg', msg);
    formData.append('user_id', USER_ID);
    fetch('/chatbot_msg/{{$id}}/{{$chatbotid}}/'+USER_ID, {method: 'POST', body: formData,  headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}})
        .then(response => response.json())
        .then(data => {
            let uuid = uuidv4()
            const eventSource = new EventSource(`/chatbot_openia_msg/${data.id}/{{$id}}/{{$chatbotid}}/`+USER_ID);
            appendMessage(BOT_NAME, BOT_IMG, "left", "", uuid);
            const div = document.getElementById(uuid);
            eventSource.onmessage = function (e) {
                if (e.data == "[DONE]") {
                    msgerSendBtn.disabled = false;
                    msgerChat.scrollTop = msgerChat.scrollHeight;
                    eventSource.close();
                } else {
                    let txt = JSON.parse(e.data).choices[0].delta.content
                    if (txt !== undefined) {
                        div.innerHTML += txt.replace(/(?:\r\n|\r|\n)/g, '<br>');
                    }
                }
            };
            eventSource.onerror = function (e) {
                msgerSendBtn.disabled = false
                console.log(e);
                eventSource.close();
            };
        })
        .catch(error => console.error(error));


}

// Utils
function get(selector, root = document) {
    return root.querySelector(selector);
}

function formatDate(date) {
    const h = "0" + date.getHours();
    const m = "0" + date.getMinutes();

    return `${h.slice(-2)}:${m.slice(-2)}`;
}

function random(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

function getCookie(cname) {
    let name = cname + "=";
    let decodedCookie = decodeURIComponent(document.cookie);
    let ca = decodedCookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function uuidv4() {
    return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
        (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
    );
}

function deleteAllCookies() {
    const cookies = document.cookie.split(";");

    for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i];
        const eqPos = cookie.indexOf("=");
        const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
        document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
    }
}   

</script>


@endsection