38301-vm/chat.php

<?php
require_once 'includes/header.php';

if (!$user) {
    header('Location: login.php');
    exit;
}

$uid = str_pad($user['uid'], 6, '0', STR_PAD_LEFT);
?>

<div class="container py-5" style="max-width: 800px; min-height: 80vh;">
    <div class="d-flex align-items-center mb-4">
        <button onclick="history.back()" class="btn btn-dark rounded-circle me-3 border-secondary" style="width: 40px; height: 40px;">
            <i class="fas fa-arrow-left"></i>
        </button>
        <h2 class="fw-bold mb-0 text-white"><?php echo mt('Customer Service'); ?></h2>
    </div>

    <div class="card bg-dark border-secondary overflow-hidden shadow-lg" style="border-radius: 20px; height: 600px; display: flex; flex-direction: column;">
        <!-- Chat Header -->
        <div class="p-3 bg-secondary bg-opacity-10 border-bottom border-secondary d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center">
                <div class="position-relative">
                    <img src="https://ui-avatars.com/api/?name=Support&background=0046ff&color=fff" class="rounded-circle me-3" width="45">
                    <span class="position-absolute bottom-0 end-0 bg-success border border-white rounded-circle" style="width: 12px; height: 12px; margin-right: 15px; margin-bottom: 2px;"></span>
                </div>
                <div>
                    <h6 class="mb-0 text-white fw-bold">BITCrypto Support</h6>
                    <small class="text-success">Online • UID: <?php echo $uid; ?></small>
                </div>
            </div>
            <div class="text-muted small">
                <?php echo date('H:i'); ?>
            </div>
        </div>

        <!-- Chat Messages -->
        <div id="chat-messages" class="flex-grow-1 p-4 overflow-auto d-flex flex-column gap-3" style="background: rgba(0,0,0,0.2);">
            <div class="message-received">
                <div class="p-3 bg-secondary bg-opacity-25 rounded-4 text-white d-inline-block" style="max-width: 80%;">
                    <?php echo mt('Hello! Welcome to BITCrypto. How can we help you today?'); ?>
                </div>
                <div class="small text-muted mt-1 ms-2"><?php echo date('H:i'); ?></div>
            </div>
        </div>

        <!-- Chat Input -->
        <div class="p-3 border-top border-secondary bg-dark">
            <form id="chat-form" onsubmit="sendMessage(event)">
                <div class="input-group">
                    <button type="button" class="btn btn-dark border-secondary px-3"><i class="fas fa-plus"></i></button>
                    <input type="text" id="chat-input" class="form-control bg-secondary bg-opacity-10 border-secondary text-white shadow-none px-3" placeholder="<?php echo mt('Type a message...'); ?>" autocomplete="off">
                    <button type="submit" class="btn btn-primary px-4 fw-bold" style="background: var(--okx-blue); border: none;">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
    
    <div class="mt-4 p-4 bg-secondary bg-opacity-10 rounded-4 border border-secondary border-opacity-25">
        <div class="d-flex align-items-center gap-3">
            <i class="fas fa-info-circle text-primary fs-4"></i>
            <p class="mb-0 text-muted small">
                <?php echo mt('For security reasons, never share your login or trading passwords with anyone, including our support agents.'); ?>
            </p>
        </div>
    </div>
</div>

<style>
    .message-sent { align-self: flex-end; text-align: right; }
    .message-sent .content { background: var(--okx-blue); color: white; padding: 10px 18px; border-radius: 20px 20px 2px 20px; display: inline-block; max-width: 80%; }
    .message-received { align-self: flex-start; }
    .message-received .content { background: rgba(255,255,255,0.05); color: white; padding: 10px 18px; border-radius: 20px 20px 20px 2px; display: inline-block; max-width: 80%; }
</style>

<script>
function sendMessage(e) {
    e.preventDefault();
    const input = document.getElementById('chat-input');
    const text = input.value.trim();
    if (!text) return;

    const messages = document.getElementById('chat-messages');
    const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });

    const sentDiv = document.createElement('div');
    sentDiv.className = 'message-sent';
    sentDiv.innerHTML = `
        <div class="content">${text}</div>
        <div class="small text-muted mt-1 me-2">${time}</div>
    `;
    messages.appendChild(sentDiv);
    input.value = '';
    messages.scrollTop = messages.scrollHeight;

    // Simulated Bot Response
    setTimeout(() => {
        const receivedDiv = document.createElement('div');
        receivedDiv.className = 'message-received';
        receivedDiv.innerHTML = `
            <div class="content"><?php echo mt('Thank you for your message. An agent will be with you shortly.'); ?></div>
            <div class="small text-muted mt-1 ms-2">${time}</div>
        `;
        messages.appendChild(receivedDiv);
        messages.scrollTop = messages.scrollHeight;
    }, 1500);
}
</script>

<?php require_once 'includes/footer.php'; ?>