File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090024/Shop24/chat.php

Back
<?php require_once __DIR__ . '/header.php'; // ตรวจสอบการล็อกอิน if (!is_logged_in()) { header('Location: login.php'); exit; } $user = current_user(); $order_id = filter_input(INPUT_GET, 'order_id', FILTER_VALIDATE_INT) ?: null; $target_user_id = filter_input(INPUT_GET, 'user_id', FILTER_VALIDATE_INT) ?: null; // ดึงรายการคำสั่งซื้อสำหรับเป็นตัวเลือกสนทนาฝั่งซ้าย if (is_admin()) { // ฝั่งแอดมิน: ดึงรายการคำสั่งซื้อทั้งหมดพร้อมชื่อผู้ซื้อ $stmt_chats = $pdo->query(" SELECT o.id AS order_id, o.created_at, o.total_price, o.status, u.id AS buyer_id, u.fullname AS buyer_name FROM orders o JOIN users u ON o.user_id = u.id ORDER BY o.id DESC "); $chat_list = $stmt_chats->fetchAll(); } else { // ฝั่งผู้ซื้อ: ดึงรายการคำสั่งซื้อของตนเอง $stmt_chats = $pdo->prepare(" SELECT o.id AS order_id, o.created_at, o.total_price, o.status FROM orders o WHERE o.user_id = ? ORDER BY o.id DESC "); $stmt_chats->execute([$user['id']]); $chat_list = $stmt_chats->fetchAll(); } // กำหนด default order_id หากไม่ได้ระบุมา if (!$order_id && !empty($chat_list)) { $order_id = $chat_list[0]['order_id']; } // ดึงรายละเอียดคำสั่งซื้อปัจจุบันที่แชทอยู่ $current_order = null; if ($order_id) { $stmt_ord = $pdo->prepare("SELECT o.*, u.fullname AS buyer_name FROM orders o JOIN users u ON o.user_id = u.id WHERE o.id = ?"); $stmt_ord->execute([$order_id]); $current_order = $stmt_ord->fetch(); } ?> <div class="row g-3"> <!-- Sidebar รายการแชท / คำสั่งซื้อ --> <div class="col-md-4 col-lg-3"> <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100"> <div class="card-header bg-white py-3 border-bottom"> <h6 class="fw-bold mb-0"> <i class="fa-solid fa-comments text-primary me-2"></i> <?= is_admin() ? 'รายการแชทลูกค้า' : 'คำสั่งซื้อที่สนทนา' ?> </h6> </div> <div class="list-group list-group-flush overflow-auto" style="max-height: 480px;"> <?php if (empty($chat_list)): ?> <div class="p-3 text-center text-muted small">ยังไม่มีรายการสั่งซื้อเพื่อเริ่มต้นแชท</div> <?php else: ?> <?php foreach ($chat_list as $c): ?> <?php $active = ($order_id == $c['order_id']) ? 'active bg-primary text-white' : 'text-dark'; $link_user = isset($c['buyer_id']) ? "&user_id={$c['buyer_id']}" : ""; ?> <a href="chat.php?order_id=<?= $c['order_id'] ?><?= $link_user ?>" class="list-group-item list-group-item-action p-3 <?= $active ?>"> <div class="d-flex justify-content-between align-items-center mb-1"> <span class="fw-bold small">#ORDER-<?= str_pad($c['order_id'], 5, '0', STR_PAD_LEFT) ?></span> <small class="<?= $order_id == $c['order_id'] ? 'text-white-50' : 'text-muted' ?>"><?= date('d/m H:i', strtotime($c['created_at'])) ?></small> </div> <small class="d-block text-truncate"> <?php if (is_admin()): ?> <i class="fa-solid fa-user me-1 opacity-75"></i> <?= htmlspecialchars($c['buyer_name']) ?> <?php else: ?> <i class="fa-solid fa-tag me-1 opacity-75"></i> ยอดรวม <?= format_price($c['total_price']) ?> <?php endif; ?> </small> </a> <?php endforeach; ?> <?php endif; ?> </div> </div> </div> <!-- Live Chat Window --> <div class="col-md-8 col-lg-9"> <div class="card border-0 shadow-sm rounded-4 overflow-hidden d-flex flex-column" style="height: 520px;"> <!-- Chat Header --> <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center"> <div class="d-flex align-items-center gap-2"> <div class="rounded-circle bg-primary bg-opacity-10 p-2 text-primary"> <i class="fa-solid fa-headset fs-5"></i> </div> <div> <h6 class="fw-bold mb-0"> <?php if (is_admin()): ?> แชทติดต่อผู้ซื้อ: <?= htmlspecialchars($current_order['buyer_name'] ?? 'ลูกค้า') ?> <?php else: ?> ช่องแชทติดต่อร้านค้าผู้ขาย (TechShop Support) <?php endif; ?> </h6> <?php if ($current_order): ?> <small class="text-muted">อ้างอิงคำสั่งซื้อ #ORDER-<?= str_pad($current_order['id'], 5, '0', STR_PAD_LEFT) ?> \| ยอดรวม <?= format_price($current_order['total_price']) ?></small> <?php endif; ?> </div> </div> <span class="badge bg-success rounded-pill px-3 py-1"><i class="fa-solid fa-circle me-1 small"></i>ออนไลน์</span> </div> <!-- Messages Scroll Box --> <div class="card-body p-3 overflow-auto bg-light flex-grow-1" id="chatMessagesBox" style="background-color: #f8fafc !important;"> <div class="text-center py-5 text-muted" id="chatLoading"> <div class="spinner-border spinner-border-sm text-primary me-2"></div> กำลังโหลดข้อความ... </div> </div> <!-- Chat Input Footer --> <div class="card-footer bg-white p-3 border-top"> <form id="chatForm" class="d-flex gap-2 align-items-center"> <input type="hidden" name="order_id" value="<?= $order_id ?>"> <input type="hidden" name="receiver_id" value="<?= is_admin() ? ($current_order['user_id'] ?? '') : '' ?>"> <input type="text" name="message" id="chatInputMessage" class="form-control rounded-pill px-3 py-2" placeholder="พิมพ์ข้อความที่ต้องการสอบถาม..." autocomplete="off" required> <button type="submit" class="btn btn-primary-custom rounded-pill px-4 py-2"> <i class="fa-solid fa-paper-plane me-1"></i> ส่ง </button> </form> </div> </div> </div> </div> <!-- Custom Style for Chat Bubbles --> <style> .chat-bubble { max-width: 75%; padding: 10px 16px; border-radius: 18px; font-size: 0.95rem; position: relative; word-break: break-word; } .chat-bubble-me { background: linear-gradient(135deg, #4f46e5, #4338ca); color: white; border-bottom-right-radius: 4px; margin-left: auto; } .chat-bubble-other { background: #ffffff; color: #1e293b; border-bottom-left-radius: 4px; border: 1px solid #e2e8f0; margin-right: auto; } .chat-meta { font-size: 0.75rem; opacity: 0.8; margin-top: 4px; display: block; } </style> <!-- Live Chat AJAX Script --> <script> const currentOrderId = <?= json_encode($order_id) ?>; const targetUserId = <?= json_encode($target_user_id) ?>; const chatBox = document.getElementById('chatMessagesBox'); const chatForm = document.getElementById('chatForm'); const chatInput = document.getElementById('chatInputMessage'); function fetchMessages() { let url = `chat_api.php?action=get&order_id=${currentOrderId \|\| ''}`; if (targetUserId) { url += `&other_user_id=${targetUserId}`; } fetch(url) .then(res => res.json()) .then(data => { if (data.success) { renderMessages(data.messages); } }) .catch(err => console.error('Chat fetch error:', err)); } function renderMessages(messages) { if (messages.length === 0) { chatBox.innerHTML = ` <div class="text-center py-5 text-muted"> <i class="fa-solid fa-comments display-4 opacity-50 mb-2"></i> <p>ยังไม่มีข้อความสนทนา เริ่มต้นพิมพ์ข้อความเพื่อติดต่อผู้ขายได้ทันที</p> </div> `; return; } let html = ''; messages.forEach(msg => { const bubbleClass = msg.is_me ? 'chat-bubble-me' : 'chat-bubble-other'; const senderBadge = msg.is_admin ? '<span class="badge bg-warning text-dark me-1">ผู้ขาย/แอดมิน</span>' : ''; html += ` <div class="d-flex mb-3 ${msg.is_me ? 'justify-content-end' : 'justify-content-start'}"> <div class="chat-bubble ${bubbleClass}"> ${!msg.is_me ? `<small class="fw-bold d-block mb-1 text-primary">${senderBadge}${msg.sender_name}</small>` : ''} <div>${msg.message}</div> <span class="chat-meta text-${msg.is_me ? 'white-50 text-end' : 'muted'}">${msg.time} น.</span> </div> </div> `; }); const isAtBottom = (chatBox.scrollHeight - chatBox.scrollTop <= chatBox.clientHeight + 100); chatBox.innerHTML = html; if (isAtBottom \|\| chatBox.dataset.initialScrolled !== "true") { chatBox.scrollTop = chatBox.scrollHeight; chatBox.dataset.initialScrolled = "true"; } } // ส่งข้อความเมื่อกด Submit chatForm.addEventListener('submit', function(e) { e.preventDefault(); const msg = chatInput.value.trim(); if (!msg) return; const formData = new FormData(chatForm); formData.append('action', 'send'); chatInput.value = ''; fetch('chat_api.php', { method: 'POST', body: formData }) .then(res => res.json()) .then(data => { if (data.success) { fetchMessages(); } else { alert(data.error \|\| 'เกิดข้อผิดพลาดในการส่งข้อความ'); } }); }); // โหลดข้อความครั้งแรก และทำ Auto-polling ทุกๆ 2.5 วินาที fetchMessages(); setInterval(fetchMessages, 2500); </script> <?php require_once __DIR__ . '/footer.php'; ?>

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.33 | proxy | phpinfo | Settings