170 lines
6.4 KiB
PHP
170 lines
6.4 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('page-title', 'Chat Support')
|
|
|
|
@section('content')
|
|
|
|
<div class="container py-4">
|
|
|
|
<h2 class="mb-4 fw-bold">Customer Support Chat</h2>
|
|
|
|
<div class="card shadow-sm">
|
|
<div class="card-body p-0">
|
|
|
|
@if($tickets->count() === 0)
|
|
<div class="p-4 text-center text-muted">
|
|
<h5>No customer chats yet.</h5>
|
|
</div>
|
|
@else
|
|
<ul class="list-group list-group-flush">
|
|
|
|
@foreach($tickets as $ticket)
|
|
@php
|
|
// Get last message
|
|
$lastMsg = $ticket->messages()->latest()->first();
|
|
@endphp
|
|
|
|
<li class="list-group-item py-3">
|
|
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
|
|
<!-- Left side: User info + last message -->
|
|
<div class="d-flex align-items-center gap-3">
|
|
|
|
<!-- Profile Circle -->
|
|
<div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center"
|
|
style="width: 45px; height: 45px; font-size: 18px;">
|
|
{{ strtoupper(substr($ticket->user->customer_name ?? $ticket->user->name, 0, 1)) }}
|
|
</div>
|
|
|
|
<div>
|
|
<!-- Customer Name -->
|
|
<h6 class="mb-1 fw-semibold">
|
|
{{ $ticket->user->customer_name ?? $ticket->user->name }}
|
|
</h6>
|
|
|
|
<!-- Last message preview -->
|
|
<small class="text-muted">
|
|
@if($lastMsg)
|
|
@if($lastMsg->message)
|
|
{{ Str::limit($lastMsg->message, 35) }}
|
|
@elseif($lastMsg->file_type === 'image')
|
|
📷 Image
|
|
@elseif($lastMsg->file_type === 'video')
|
|
🎥 Video
|
|
@else
|
|
📎 Attachment
|
|
@endif
|
|
@else
|
|
<i>No messages yet</i>
|
|
@endif
|
|
</small>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Right Side: Status + Button -->
|
|
<div class="text-end">
|
|
|
|
<!-- Ticket Status -->
|
|
<span class="badge
|
|
{{ $ticket->status === 'open' ? 'bg-success' : 'bg-danger' }}">
|
|
{{ ucfirst($ticket->status) }}
|
|
</span>
|
|
|
|
<!-- Open Chat Button -->
|
|
<a href="{{ route('admin.chat.open', $ticket->id) }}"
|
|
class="btn btn-sm btn-primary ms-2">
|
|
Open Chat →
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</li>
|
|
@endforeach
|
|
|
|
</ul>
|
|
@endif
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script>
|
|
// -------------------------------
|
|
// WAIT FOR ECHO READY (DEFINE IT)
|
|
// -------------------------------
|
|
function waitForEcho(callback, retries = 40) {
|
|
if (window.Echo) {
|
|
console.log('%c[ECHO] Ready (Admin List)', 'color: green; font-weight: bold;');
|
|
callback();
|
|
return;
|
|
}
|
|
|
|
if (retries <= 0) {
|
|
console.error('[ECHO] Failed to initialize');
|
|
return;
|
|
}
|
|
|
|
setTimeout(() => waitForEcho(callback, retries - 1), 200);
|
|
}
|
|
|
|
// -------------------------------
|
|
// LISTEN FOR REALTIME MESSAGES
|
|
// -------------------------------
|
|
waitForEcho(() => {
|
|
console.log('[ADMIN LIST] Listening for new messages...');
|
|
|
|
const globalBox = document.getElementById('globalNewMessageBox');
|
|
const globalCount = document.getElementById('globalNewMessageCount');
|
|
let totalNewMessages = 0;
|
|
|
|
window.Echo.private('admin.chat')
|
|
.listen('.NewChatMessage', (event) => {
|
|
|
|
// only USER → ADMIN messages
|
|
if (event.sender_type !== 'App\\Models\\User') return;
|
|
|
|
const ticketId = event.ticket_id;
|
|
|
|
// 1) UPDATE PER-TICKET BADGE
|
|
const badge = document.getElementById(`badge-${ticketId}`);
|
|
if (badge) {
|
|
let count = parseInt(badge.innerText || 0);
|
|
badge.innerText = count + 1;
|
|
badge.classList.remove('d-none');
|
|
}
|
|
|
|
// 2) UPDATE GLOBAL NEW MESSAGE COUNTER
|
|
totalNewMessages++;
|
|
if (globalBox && globalCount) {
|
|
globalBox.classList.remove('d-none');
|
|
globalCount.innerText = totalNewMessages;
|
|
}
|
|
|
|
// 3) त्या ticket ला यादीत सर्वात वर आणा आणि स्क्रोल करा
|
|
const listContainer = document.querySelector('.tickets-list');
|
|
const ticketEl = document.querySelector(`.ticket-item[data-ticket-id="${ticketId}"]`);
|
|
|
|
if (listContainer && ticketEl) {
|
|
if (ticketEl.previousElementSibling) {
|
|
listContainer.insertBefore(ticketEl, listContainer.firstElementChild);
|
|
}
|
|
|
|
const topOffset = ticketEl.offsetTop;
|
|
window.scrollTo({
|
|
top: listContainer.offsetTop + topOffset - 20,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
|
|
console.log('[ADMIN LIST] Badge/global counter updated for ticket', ticketId);
|
|
});
|
|
});
|
|
</script>
|
|
@endsection
|