File Manager Lite

Dir: /home/codewavebd/public_html/resources/views/admin/chats

index.blade.php (12.94 KB)

Edit: index.blade.php

@extends('layouts.admin')

@section('title', 'Live Chat Console')
@section('page_title', 'Live Support Center')

@section('content')
<div class="row g-4" style="min-height: 600px;">
    
    <div class="col-md-4 d-flex flex-column">
        <div class="admin-card flex-fill d-flex flex-column p-0 overflow-hidden" style="max-height: 600px;">
            <div class="p-3 border-bottom border-secondary bg-dark">
                <h6 class="text-info font-heading mb-0"><i class="bi bi-chat-left-text me-2"></i>Active Conversations</h6>
            </div>
            
            <div class="list-group list-group-flush overflow-y-auto flex-fill" id="adminThreadsList" style="max-height: 530px;">
                <div class="text-center py-5 text-muted">Loading conversations...</div>
            </div>
        </div>
    </div>

<div class="col-md-8 d-flex flex-column">
        <div class="admin-card flex-fill d-flex flex-column p-0 overflow-hidden" style="max-height: 600px; min-height: 600px;">
            
            <div class="d-flex flex-column align-items-center justify-content-center flex-fill text-center py-5 my-auto" id="chatBlankState">
                <i class="bi bi-chat-dots text-secondary" style="font-size: 4rem;"></i>
                <h5 class="text-white font-heading mt-3">Select a Conversation</h5>
                <p class="text-muted small px-4">Choose a chat thread from the left menu to start messaging the visitor.</p>
            </div>

<div class="d-none flex-column flex-fill" id="activeChatInterface" style="height: 100%;">
                
                <div class="p-3 border-bottom border-secondary bg-dark d-flex align-items-center justify-content-between">
                    <div>
                        <h6 class="text-white mb-0" id="chatHeaderName">Visitor Name</h6>
                        <small class="text-muted d-block mt-1">
                            <span id="chatHeaderPhone" class="me-3"><i class="bi bi-phone"></i> -</span>
                            <span id="chatHeaderEmail"><i class="bi bi-envelope"></i> -</span>
                        </small>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge" id="chatHeaderStatusBadge">Open</span>
                        <button class="btn btn-sm btn-outline-danger" id="closeThreadBtn" title="Close Chat Session">
                            <i class="bi bi-check-lg me-1"></i> Close Thread
                        </button>
                    </div>
                </div>

<div class="flex-fill p-4 overflow-y-auto d-flex flex-column gap-3" id="adminMessagesContainer" style="background-color: rgba(0, 0, 0, 0.2); max-height: 400px; min-height: 400px;">
                    
                </div>

<div class="p-3 border-top border-secondary bg-dark" id="chatReplyFooter">
                    <div class="input-group">
                        <input type="text" id="adminMessageInput" class="form-control bg-dark border-secondary text-white py-2" placeholder="Type your reply here..." autocomplete="off">
                        <button class="btn btn-primary-glow px-4" type="button" id="sendAdminReplyBtn">
                            <i class="bi bi-send-fill me-1"></i> Send
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

let activeThreadId = null;
    let threadsPollInterval = null;
    let messagesPollInterval = null;
    let lastMessageCount = 0;

// Load Threads on Init
    loadThreads();
    threadsPollInterval = setInterval(loadThreads, 4000);

// Fetch and render thread list
    function loadThreads() {
        fetch("{{ route('admin.chats.threads') }}")
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    renderThreads(data.threads);
                }
            });
    }

function renderThreads(threads) {
        if (threads.length === 0) {
            threadsList.innerHTML = '<div class="text-center py-5 text-muted small">No active chat sessions.</div>';
            return;
        }

// Select thread to view chat
    function selectThread(id) {
        activeThreadId = id;
        
        // Highlight active item
        document.querySelectorAll('.chat-thread-item').forEach(item => {
            item.classList.remove('active');
            if (item.getAttribute('data-id') == id) {
                item.classList.add('active');
            }
        });

// Hide blank state and show interface
        blankState.classList.add('d-none');
        activeInterface.classList.remove('d-none');

// Fetch messages for selected thread
        loadMessages(id);
        
        // Setup Polling for messages
        clearInterval(messagesPollInterval);
        messagesPollInterval = setInterval(() => loadMessages(id), 3000);
    }

renderMessages(messages);
                }
            });
    }

// Autoscroll to bottom
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }

// Send reply message
    function sendReply() {
        if (!activeThreadId) return;
        const msg = replyInput.value.trim();
        if (!msg) return;

replyInput.value = '';
        
        fetch(`/admin/chats/${activeThreadId}/reply`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ message: msg })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                // Immediately refresh chat
                loadMessages(activeThreadId);
                loadThreads();
            }
        });
    }

sendReplyBtn.addEventListener('click', sendReply);
    replyInput.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') sendReply();
    });

// Close Thread Event
    closeThreadBtn.addEventListener('click', () => {
        if (!activeThreadId) return;
        
        if (confirm("Are you sure you want to close this chat thread?")) {
            fetch(`/admin/chats/${activeThreadId}/close`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    loadMessages(activeThreadId);
                    loadThreads();
                }
            });
        }
    });
});
</script>
@endsection