<!doctype html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>تیکت پشتیبانی | یوزشیمی</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { height: 100%; background: #f5f7fa; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif; }
        body { overflow: hidden; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
        .support-wrapper { max-width: 800px; margin: 0 auto; height: 100%; background: #f5f7fa; display: flex; flex-direction: column; }
        .support-header { background: linear-gradient(135deg, #1b5e20, #2e7d32); padding: 16px; color: white; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
        .header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
        .header-title { display: flex; align-items: center; gap: 10px; }
        .header-title h1 { font-size: 1.1rem; font-weight: 700; }
        .header-btn { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: white; padding: 6px 12px; border-radius: 8px; font-size: 0.75rem; cursor: pointer; }
        .header-meta { display: flex; align-items: center; gap: 12px; font-size: 0.75rem; opacity: 0.9; }
        .status-dot { display: inline-block; width: 8px; height: 8px; background: #4caf50; border-radius: 50%; animation: pulse 1.5s infinite; margin-left: 4px; }
        @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
        .alert-box { background: #fff8e1; border-right: 3px solid #ff9800; padding: 10px 14px; margin: 10px 12px 0; border-radius: 10px; font-size: 0.75rem; color: #e65100; flex-shrink: 0; }
        .ticket-status-bar { background: white; margin: 10px 12px 0; padding: 12px 16px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
        .ticket-info-left { display: flex; align-items: center; gap: 10px; }
        .ticket-icon { width: 36px; height: 36px; background: linear-gradient(135deg, #e8f5e9, #c8e6c9); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
        .ticket-info-text h3 { font-size: 0.85rem; color: #2e7d32; font-weight: 700; }
        .ticket-info-text p { font-size: 0.7rem; color: #757575; margin-top: 2px; }
        .ticket-badge { padding: 6px 12px; border-radius: 20px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
        .badge-open { background: #e3f2fd; color: #1565c0; }
        .badge-replied { background: #e8f5e9; color: #2e7d32; }
        .chat-container { flex: 1; overflow-y: auto; padding: 12px; min-height: 0; -webkit-overflow-scrolling: touch; }
        .messages-container { display: flex; flex-direction: column; gap: 12px; }
        .ticket-msg { background: white; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; border-right: 4px solid #e0e0e0; }
        .ticket-msg.msg-user { border-right-color: #4caf50; }
        .ticket-msg.msg-admin { border-right-color: #1976d2; }
        .msg-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #fafafa; border-bottom: 1px solid #f0f0f0; }
        .msg-sender { display: flex; align-items: center; gap: 8px; }
        .msg-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: white; flex-shrink: 0; }
        .msg-user .msg-avatar { background: linear-gradient(135deg, #4caf50, #2e7d32); }
        .msg-admin .msg-avatar { background: linear-gradient(135deg, #1976d2, #0d47a1); }
        .msg-sender-name { font-size: 0.8rem; font-weight: 700; }
        .msg-user .msg-sender-name { color: #2e7d32; }
        .msg-admin .msg-sender-name { color: #1565c0; }
        .msg-sender-role { font-size: 0.65rem; color: #999; }
        .msg-time { font-size: 0.65rem; color: #999; font-family: monospace; }
        .msg-body { padding: 12px 14px; font-size: 0.85rem; line-height: 1.7; color: #333; white-space: pre-wrap; word-wrap: break-word; }
        .msg-footer { padding: 6px 14px 10px; display: flex; align-items: center; gap: 6px; font-size: 0.65rem; color: #999; }
        .empty-chat { text-align: center; padding: 50px 20px; color: #9e9e9e; background: white; border-radius: 12px; margin: 10px 0; }
        .empty-chat .icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
        .input-area { background: white; border-top: 1px solid #e0e0e0; padding: 10px 12px 12px; flex-shrink: 0; box-shadow: 0 -2px 8px rgba(0,0,0,0.05); }
        .input-wrapper { display: flex; gap: 8px; align-items: flex-end; }
        .message-input { flex: 1; border: 1.5px solid #e0e0e0; border-radius: 12px; padding: 10px 14px; font-size: 0.85rem; resize: none; font-family: inherit; max-height: 120px; background: #fafafa; }
        .message-input:focus { outline: none; border-color: #4caf50; background: white; }
        .send-btn { background: linear-gradient(135deg, #2e7d32, #4caf50); color: white; border: none; padding: 10px 18px; border-radius: 12px; font-weight: 600; font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; gap: 6px; }
        .send-btn:disabled { opacity: 0.6; cursor: not-allowed; }
        .char-counter { font-size: 0.65rem; color: #999; margin-top: 6px; text-align: left; }
        .toast-notif { position: fixed; bottom: 20px; left: 16px; right: 16px; padding: 12px 16px; border-radius: 12px; color: white; font-size: 0.8125rem; text-align: center; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
        .toast-success { background: #4caf50; }
        .toast-error { background: #f44336; }
        .guest-box { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; }
        .guest-box .icon { font-size: 64px; color: #c8e6c9; margin-bottom: 20px; }
        .login-btn { display: inline-block; background: linear-gradient(135deg, #2e7d32, #4caf50); color: white; padding: 12px 32px; border-radius: 30px; text-decoration: none; font-weight: 600; font-size: 0.85rem; }
    </style>
</head>
<body>
<div class="support-wrapper">
    <div class="support-header">
        <div class="header-top">
            <div class="header-title">
                <span style="font-size: 20px;">🎫</span>
                <h1>تیکت پشتیبانی</h1>
            </div>
            <button class="header-btn" id="refreshBtn">🔄 بروزرسانی</button>
        </div>
        <div class="header-meta">
            <span><span class="status-dot"></span> پشتیبان آنلاین</span>
            <span>|</span>
            <span>یوزشیمی</span>
        </div>
    </div>

            <div class="guest-box">
            <div class="icon">🔒</div>
            <h3>برای ارسال تیکت وارد سایت شوید</h3>
            <a href="/ver.php" class="login-btn">🚀 ورود به سایت</a>
        </div>
    </div>

<script>
const phcc = '';
const chatContainer = document.getElementById('chatContainer');
const sendBtn = document.getElementById('sendBtn');
const messageInput = document.getElementById('messageInput');
const charCountSpan = document.getElementById('charCount');
const refreshBtn = document.getElementById('refreshBtn');
const ticketBadge = document.getElementById('ticketBadge');
const ticketMeta = document.getElementById('ticketMeta');
let isLoading = false;

// ⚠️ مسیر API — از /cha/ به روت (یک پله بالا)
const GET_URL  = '../get_messages.php';
const SEND_URL = '../send_message.php';

function showToast(msg, type) {
    const t = document.createElement('div');
    t.className = 'toast-notif toast-' + type;
    t.textContent = msg;
    document.body.appendChild(t);
    setTimeout(() => { t.style.opacity = '0'; setTimeout(() => t.remove(), 300); }, 3000);
}
function escapeHtml(text) {
    const d = document.createElement('div'); d.textContent = text; return d.innerHTML;
}
function formatTime(timestamp) {
    const d = new Date(timestamp * 1000);
    return d.toLocaleDateString('fa-IR') + ' - ' + d.toLocaleTimeString('fa-IR', {hour:'2-digit', minute:'2-digit'});
}
function renderMessages(messages) {
    const container = document.getElementById('messagesContainer');
    if (!messages || messages.length === 0) {
        container.innerHTML = '<div class="empty-chat"><div class="icon">💬</div><h3>هنوز تیکتی ثبت نشده</h3><p>سوال یا مشکل خود را با ما در میان بگذارید</p></div>';
        if (ticketMeta) ticketMeta.textContent = 'هنوز پیامی ارسال نشده';
        if (ticketBadge) { ticketBadge.textContent = 'جدید'; ticketBadge.className = 'ticket-badge badge-open'; }
        return;
    }
    const lastMsg = messages[messages.length - 1];
    const lastIsAdmin = lastMsg.role === 'admin';
    if (ticketBadge) {
        ticketBadge.textContent = lastIsAdmin ? '✅ پاسخ داده شده' : '⏳ در انتظار پاسخ';
        ticketBadge.className = 'ticket-badge ' + (lastIsAdmin ? 'badge-replied' : 'badge-open');
    }
    if (ticketMeta) ticketMeta.textContent = messages.length + ' پیام در این تیکت';

    let html = '';
    messages.forEach(msg => {
        const isUser = msg.role === 'user';
        const timeText = msg.time ? formatTime(msg.time) : (msg.time_fa || '');
        const avatar = isUser ? '👤' : '🎧';
        const name = isUser ? 'شما' : 'پشتیبانی یوزشیمی';
        const role = isUser ? 'کاربر' : 'پشتیبان';
        html += `
            <div class="ticket-msg ${isUser ? 'msg-user' : 'msg-admin'}">
                <div class="msg-header">
                    <div class="msg-sender">
                        <div class="msg-avatar">${avatar}</div>
                        <div>
                            <div class="msg-sender-name">${name}</div>
                            <div class="msg-sender-role">${role}</div>
                        </div>
                    </div>
                    <div class="msg-time">${escapeHtml(timeText)}</div>
                </div>
                <div class="msg-body">${escapeHtml(msg.text)}</div>
                <div class="msg-footer">
                    <span>${isUser ? '📤 ارسال شده توسط شما' : '📥 پاسخ تیم پشتیبانی'}</span>
                </div>
            </div>
        `;
    });
    container.innerHTML = html;
    setTimeout(() => { chatContainer.scrollTop = chatContainer.scrollHeight; }, 50);
}
function loadMessages() {
    if (!phcc || isLoading) return;
    isLoading = true;
    fetch(GET_URL + '?phcc=' + encodeURIComponent(phcc) + '&t=' + Date.now())
        .then(r => r.json())
        .then(data => { if (data.success) renderMessages(data.messages); })
        .catch(() => {})
        .finally(() => { isLoading = false; });
}
function sendMessage() {
    if (!phcc) { showToast('لطفاً وارد شوید', 'error'); return; }
    const message = messageInput.value.trim();
    if (!message) { showToast('لطفاً پیام خود را وارد کنید', 'error'); return; }
    if (message.length > 500) { showToast('پیام طولانی است', 'error'); return; }
    const csrf = document.getElementById('csrfToken').value;
    sendBtn.disabled = true;
    sendBtn.innerHTML = '<span>⏳</span><span>ارسال...</span>';
    fetch(SEND_URL, {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: 'phcc=' + encodeURIComponent(phcc) + '&message=' + encodeURIComponent(message) + '&role=user&csrf_token=' + encodeURIComponent(csrf)
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            messageInput.value = '';
            updateCharCount();
            loadMessages();
            showToast('✅ پیام ارسال شد', 'success');
        } else { showToast(data.error || 'خطا', 'error'); }
    })
    .catch(() => showToast('خطای شبکه', 'error'))
    .finally(() => { sendBtn.disabled = false; sendBtn.innerHTML = '<span>📤</span><span>ارسال</span>'; });
}
function updateCharCount() { if (charCountSpan && messageInput) charCountSpan.textContent = messageInput.value.length; }
if (messageInput) {
    messageInput.addEventListener('input', updateCharCount);
    messageInput.addEventListener('keydown', e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } });
}
if (sendBtn) sendBtn.addEventListener('click', sendMessage);
if (refreshBtn) refreshBtn.addEventListener('click', loadMessages);
if (phcc) loadMessages();
</script>
</body>
</html><?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://yoozshimi.ir/blog/blog/خرید-فروش-مواد-شیمیایی-اگهی</loc>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
