@extends('layouts.sales.sales')

@section('title', 'Project Chat - Sales')

@section('content')



<div class="container py-3">

    <h4>Sales Chat for Project #{{ $quotationId }}</h4>
    <p class="text-muted mb-2">
        Logged in as <strong>{{ $userName }}</strong>
        <span class="badge bg-info text-dark text-uppercase ms-1">{{ $userRole }}</span>
    </p>

    <div class="card">
        <div class="card-body" id="chat-box" style="height: 420px; overflow-y:auto;">
            <ul id="messages" class="list-unstyled mb-0"></ul>
        </div>
    </div>

    <form id="chat-form" class="mt-3 d-flex gap-2">
        <input
            type="text"
            id="message"
            class="form-control"
            placeholder="Type a message..."
            autocomplete="off"
        >
        <button class="btn btn-primary" type="submit">Send</button>
    </form>

</div>

<script>
    window.QUOTATION_ID      = @json($quotationId);
    window.USER_NAME       = @json($userName);
    window.USER_ROLE       = @json($userRole);
    window.FIREBASE_CONFIG = @json($firebaseConfig);
</script>

<script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/11.0.1/firebase-app.js";
    import {
        getDatabase,
        ref,
        push,
        onChildAdded,
        serverTimestamp
    } from "https://www.gstatic.com/firebasejs/11.0.1/firebase-database.js";

    const firebaseConfig = window.FIREBASE_CONFIG;
    const app = initializeApp(firebaseConfig);
    const db  = getDatabase(app);

    const QUOTATION_ID = window.QUOTATION_ID;
    const USER_NAME  = window.USER_NAME;
    const USER_ROLE  = window.USER_ROLE;

    const form         = document.getElementById("chat-form");
    const messageInput = document.getElementById("message");
    const messagesList = document.getElementById("messages");
    const chatBox      = document.getElementById("chat-box");

    const messagesRef = ref(db, "chats/" + QUOTATION_ID + "/messages");

    form.addEventListener("submit", (e) => {
        e.preventDefault();

        const text = messageInput.value.trim();
        if (!text) return;

        push(messagesRef, {
            user_name: USER_NAME,
            role: USER_ROLE,
            text: text,
            time: serverTimestamp()
        });

        messageInput.value = "";
    });

    onChildAdded(messagesRef, (snapshot) => {
        const data = snapshot.val();
        if (!data) return;

        const li = document.createElement("li");
        const isMe = data.user_name === USER_NAME;

        li.style.display = 'flex';
        li.style.marginBottom = '6px';
        li.style.justifyContent = isMe ? 'flex-end' : 'flex-start';

        const bubble = document.createElement('div');
        bubble.style.padding = '8px 12px';
        bubble.style.borderRadius = '12px';
        bubble.style.maxWidth = '70%';
        bubble.style.fontSize = '14px';
        bubble.style.whiteSpace = 'pre-wrap';
        bubble.style.background = isMe ? '#d1f8ff' : '#f0f0f0';

        const header = document.createElement('div');
        header.style.fontSize = '11px';
        header.style.fontWeight = '600';
        header.style.marginBottom = '2px';
        header.textContent = `${data.user_name} (${String(data.role || '').toUpperCase()})`;

        const textDiv = document.createElement('div');
        textDiv.textContent = data.text ?? '';

        bubble.appendChild(header);
        bubble.appendChild(textDiv);
        li.appendChild(bubble);
        messagesList.appendChild(li);

        chatBox.scrollTop = chatBox.scrollHeight;
    });
</script>
@endsection