Update cafe.html

cafe.html

@@ -121,7 +121,6 @@
 
         .arch-shape { border-radius: 50% 50% 1rem 1rem / 35% 35% 1rem 1rem; }
 
-        /* Chat Markdown */
         .chat-markdown { line-height: 1.85; word-wrap: break-word; overflow-wrap: break-word; }
         .chat-markdown > * + * { margin-top: 0.6em; }
         .chat-markdown h1, .chat-markdown h2, .chat-markdown h3,
@@ -189,7 +188,6 @@
         .chat-markdown tr:last-child td { border-bottom: none; }
         .chat-markdown img { max-width: 100%; border-radius: 10px; border: 2px solid rgba(201, 169, 97, 0.3); }
 
-        /* Typing dots */
         .typing-dots span {
             display: inline-block; width: 6px; height: 6px;
             border-radius: 50%; background: #c9a961;
@@ -202,7 +200,6 @@
             30% { transform: translateY(-8px); opacity: 1; }
         }
 
-        /* Buttons */
         .btn-primary {
             background: linear-gradient(135deg, #c9a961 0%, #9c7d3a 100%);
             color: #1a0d07; font-weight: 800;
@@ -240,7 +237,6 @@
             transform: translateY(-1px);
         }
 
-        /* Drop zone */
         .drop-zone {
             position: relative;
             border: 2px dashed rgba(201, 169, 97, 0.3);
@@ -259,7 +255,7 @@
             pointer-events: none;
         }
 
-        /* Order cards */
+        /* کارت سفارش - با افکت ویژه برای سفارشات چندگانه */
         .order-card {
             background: linear-gradient(135deg, rgba(45, 24, 16, 0.6), rgba(26, 13, 7, 0.5));
             border: 1px solid rgba(201, 169, 97, 0.2);
@@ -270,6 +266,28 @@
             box-shadow: 0 12px 30px -10px rgba(139, 30, 63, 0.3);
             transform: translateY(-2px);
         }
+        .order-card.multi-order {
+            border: 1px solid rgba(194, 61, 95, 0.5);
+            background: linear-gradient(135deg, rgba(90, 16, 40, 0.25), rgba(26, 13, 7, 0.5));
+        }
+        .order-card.multi-order::before {
+            content: '';
+            position: absolute;
+            top: -1px; left: -1px; right: -1px; bottom: -1px;
+            border-radius: inherit;
+            background: linear-gradient(135deg, rgba(201, 169, 97, 0.3), transparent);
+            z-index: -1;
+            pointer-events: none;
+        }
+
+        /* Badge برای تعداد سفارش‌ها */
+        .orders-count-badge {
+            background: linear-gradient(135deg, #8b1e3f, #5a1028);
+            color: #f5e6d3;
+            border: 1px solid rgba(201, 169, 97, 0.5);
+            font-family: 'Lalezar', serif;
+            animation: pulseGlow 2s ease-in-out infinite;
+        }
 
         .menu-row { transition: all 0.3s ease; }
         .menu-row:hover { background: rgba(201, 169, 97, 0.05); }
@@ -280,7 +298,6 @@
             box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
         }
 
-        /* Checkbox */
         input[type="checkbox"] {
             appearance: none; width: 18px; height: 18px;
             border: 2px solid rgba(201, 169, 97, 0.4);
@@ -342,7 +359,6 @@
 
         button, .no-select { -webkit-user-select: none; user-select: none; }
 
-        /* ============ MAIN LAYOUT ============ */
         .app-wrapper {
             display: flex;
             flex-direction: column;
@@ -351,8 +367,6 @@
             overflow: hidden;
         }
 
-        /* ============ CHAT COLUMN HEIGHT CONTROL ============ */
-        /* چت هرگز بزرگ‌تر از viewport نمی‌شود و اسکرول داخلی دارد */
         .chat-column {
             display: flex;
             flex-direction: column;
@@ -375,7 +389,6 @@
             flex-shrink: 0;
         }
 
-        /* Desktop: ستون چت کل ارتفاع main را می‌گیرد */
         @media (min-width: 1024px) {
             .main-grid {
                 overflow: hidden !important;
@@ -392,14 +405,12 @@
             }
         }
 
-        /* Tablet & Mobile: main scroll می‌کند، چت ارتفاع مشخص */
         @media (max-width: 1023px) {
             .main-grid {
                 overflow-y: auto;
                 overflow-x: hidden;
             }
             .chat-column {
-                /* ارتفاع کنترل‌شده: حداکثر 65vh ولی نه کمتر از 400px */
                 height: 65vh;
                 height: calc(var(--vh, 1vh) * 65);
                 min-height: 380px;
@@ -408,7 +419,6 @@
             }
         }
 
-        /* Small Mobile */
         @media (max-width: 480px) {
             .chat-column {
                 height: 60vh;
@@ -418,7 +428,6 @@
             }
         }
 
-        /* Landscape mobile */
         @media (max-height: 500px) and (orientation: landscape) {
             .chat-column {
                 height: 75vh !important;
@@ -426,7 +435,6 @@
             }
         }
 
-        /* iPad Portrait */
         @media (min-width: 768px) and (max-width: 1023px) {
             .chat-column {
                 height: 70vh;
@@ -486,7 +494,7 @@
         <!-- Main grid -->
         <main class="main-grid flex-1 min-h-0 w-full mx-auto p-3 md:p-5 lg:p-6 grid grid-cols-1 lg:grid-cols-12 gap-3 md:gap-5 lg:gap-6 z-10 relative max-w-7xl">
 
-            <!-- Right column: orders + menu + upload -->
+            <!-- Right column -->
             <section class="left-column lg:col-span-7 flex flex-col gap-3 md:gap-5 lg:gap-6 min-h-0">
 
                 <!-- Live orders -->
@@ -505,7 +513,7 @@
                                         سفارشات جدید آشپزخانه
                                         <span class="w-2 h-2 rounded-full bg-rug-light animate-pulse flex-shrink-0"></span>
                                     </h2>
-                                    <p class="text-[9px] md:text-[10px] text-cream/50 mt-0.5 truncate">لیست سفارشات در صف آماده‌سازی</p>
+                                    <p class="text-[9px] md:text-[10px] text-cream/50 mt-0.5 truncate">گروه‌بندی شده بر اساس میز (ادغام خودکار)</p>
                                 </div>
                             </div>
                             <button onclick="fetchActiveOrders()" class="btn-ghost text-[9px] md:text-[10px] flex items-center gap-1 px-2 md:px-3 py-1.5 rounded-lg md:rounded-xl flex-shrink-0">
@@ -649,7 +657,6 @@
                 <div class="chat-column glass-card-azure rounded-2xl md:rounded-3xl shadow-xl relative">
                     <div class="absolute inset-0 bg-arch opacity-15 pointer-events-none"></div>
 
-                    <!-- Chat header -->
                     <div class="chat-header-box relative px-3.5 md:px-5 py-2.5 md:py-3 border-b border-turk/25 flex items-center gap-2.5 bg-gradient-to-l from-azure-950/60 to-azure-900/40">
                         <div class="w-9 h-9 md:w-10 md:h-10 rounded-xl bg-gradient-to-br from-turk/30 to-azure-700/30 border border-turk/40 flex items-center justify-center shadow-mosque flex-shrink-0">
                             <svg class="w-5 h-5 md:w-6 md:h-6 text-turk-glow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
@@ -666,7 +673,6 @@
                         </div>
                     </div>
 
-                    <!-- Chat messages (SCROLLABLE - this is the key fix) -->
                     <div id="chatMessages" class="chat-messages-container p-3 md:p-4 space-y-3 relative">
                         <div class="flex gap-2 md:gap-2.5 max-w-[88%]">
                             <div class="w-7 h-7 md:w-8 md:h-8 rounded-xl bg-gradient-to-br from-turk/20 to-azure-700/20 border border-turk/30 flex items-center justify-center flex-shrink-0">
@@ -678,7 +684,6 @@
                         </div>
                     </div>
 
-                    <!-- Chat loader -->
                     <div id="chatLoader" class="chat-loader-box hidden relative px-3 py-2 md:px-4 md:py-2.5 flex items-center justify-between bg-azure-950/70 text-[9px] md:text-[10px] text-turk-light font-semibold border-t border-turk/20">
                         <div class="flex items-center gap-2">
                             <div class="typing-dots flex gap-1">
@@ -691,7 +696,6 @@
                         </button>
                     </div>
 
-                    <!-- Chat input -->
                     <form id="chatForm" onsubmit="sendAdminMessage(event)" class="chat-input-box relative p-2 md:p-3 border-t border-turk/20 bg-bazaar-950/60 flex gap-2 safe-bottom">
                         <input type="text" id="chatInput" placeholder="تغییر وضعیت یا ویرایش منو..." autocomplete="off"
                                class="flex-1 min-w-0 bg-azure-950/60 border border-azure-700/40 text-xs md:text-sm text-cream placeholder-ochre/40 rounded-lg md:rounded-xl px-3 md:px-4 py-2 md:py-3 focus:outline-none focus:border-ochre/60 transition-all duration-300">
@@ -705,7 +709,6 @@
             </section>
         </main>
 
-        <!-- Footer -->
         <footer class="flex-shrink-0 border-t border-ochre/15 py-2.5 md:py-3 text-center text-[9px] md:text-[10px] text-cream/40 bg-bazaar-950/60 backdrop-blur safe-bottom">
             طراحی و توسعه توسط الگوریتم داده نسترن | با الهام از فرهنگ تبریز © ۲۰۲۶
         </footer>
@@ -721,7 +724,6 @@
         window.addEventListener('resize', setVh);
         window.addEventListener('orientationchange', () => setTimeout(setVh, 100));
 
-        // ============ AUTO SCROLL HELPER ============
         function scrollChatToBottom(smooth = true) {
             const chatScroll = document.getElementById('chatMessages');
             if (chatScroll) {
@@ -733,13 +735,11 @@
             }
         }
 
-        // Auto scroll on resize (keyboard open/close)
         window.addEventListener('resize', () => {
             setVh();
             setTimeout(scrollChatToBottom, 150);
         });
 
-        // ============ MARKED CONFIG ============
         marked.setOptions({ sanitize: true, breaks: true });
 
         let chatHistory = [
@@ -752,11 +752,9 @@
             fetchActiveOrders();
             fetchCurrentMenu();
             setInterval(fetchActiveOrders, 10000);
-            // Initial scroll to bottom
             setTimeout(scrollChatToBottom, 100);
         });
 
-        // Mobile keyboard handling
         const chatInput = document.getElementById('chatInput');
         if (chatInput) {
             chatInput.addEventListener('focus', () => {
@@ -765,7 +763,7 @@
             });
         }
 
-        // ============ ORDER FUNCTIONS ============
+        // ============ ORDER FUNCTIONS - با ادغام سفارشات هر میز ============
         async function fetchActiveOrders() {
             const container = document.getElementById('ordersContainer');
             try {
@@ -784,10 +782,47 @@
                         `;
                         return;
                     }
-                    container.innerHTML = '';
+
+                    // ✅ گروه‌بندی سفارشات بر اساس میز
+                    const tableGroups = {};
                     orders.forEach(order => {
-                        let itemsHtml = '';
+                        const tableKey = String(order.table);
+                        if (!tableGroups[tableKey]) {
+                            tableGroups[tableKey] = {
+                                table: order.table,
+                                orderIds: [],
+                                items: {},   // name -> {name, quantity}
+                                timestamps: [],
+                                totalItemCount: 0
+                            };
+                        }
+                        const group = tableGroups[tableKey];
+                        group.orderIds.push(order.id);
+                        group.timestamps.push(order.timestamp);
+                        group.totalItemCount += order.items.reduce((sum, it) => sum + it.quantity, 0);
+
+                        // ✅ ادغام آیتم‌های تکراری با جمع تعداد
                         order.items.forEach(item => {
+                            if (group.items[item.name]) {
+                                group.items[item.name].quantity += item.quantity;
+                            } else {
+                                group.items[item.name] = { name: item.name, quantity: item.quantity };
+                            }
+                        });
+                    });
+
+                    container.innerHTML = '';
+                    // مرتب‌سازی بر اساس جدیدترین timestamp هر گروه
+                    const sortedGroups = Object.values(tableGroups).sort((a, b) => {
+                        const aMax = Math.max(...a.timestamps);
+                        const bMax = Math.max(...b.timestamps);
+                        return bMax - aMax;
+                    });
+
+                    sortedGroups.forEach(group => {
+                        const itemsArray = Object.values(group.items);
+                        let itemsHtml = '';
+                        itemsArray.forEach(item => {
                             itemsHtml += `
                                 <div class="flex items-center justify-between text-[10px] md:text-[11px] bg-bazaar-950/60 px-2.5 py-1.5 md:px-3 md:py-2 rounded-lg border border-ochre/20">
                                     <span class="text-cream font-bold flex items-center gap-2 min-w-0">
@@ -798,33 +833,65 @@
                                 </div>
                             `;
                         });
-                        const timeString = new Date(order.timestamp * 1000).toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' });
+
+                        // محاسبه زمان‌ها
+                        const firstTime = new Date(Math.min(...group.timestamps) * 1000).toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' });
+                        const lastTime = new Date(Math.max(...group.timestamps) * 1000).toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' });
+                        const orderCount = group.orderIds.length;
+                        const isMulti = orderCount > 1;
+
+                        // نمایش زمان
+                        let timeDisplay = '';
+                        if (isMulti) {
+                            timeDisplay = `<span class="text-[9px] md:text-[10px] text-turk-light/70 font-medium flex items-center gap-1 flex-shrink-0">
+                                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                                </svg>
+                                ${firstTime} → ${lastTime}
+                            </span>`;
+                        } else {
+                            timeDisplay = `<span class="text-[9px] md:text-[10px] text-turk-light/70 font-medium flex items-center gap-1 flex-shrink-0">
+                                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                                </svg>
+                                ${lastTime}
+                            </span>`;
+                        }
+
+                        // Badge برای سفارشات چندگانه
+                        const multiBadge = isMulti ? `
+                            <span class="orders-count-badge text-[10px] md:text-[11px] px-2 py-0.5 rounded-md flex items-center gap-1 flex-shrink-0">
+                                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
+                                </svg>
+                                ${orderCount} سفارش
+                            </span>
+                        ` : '';
+
+                        const orderIdsJson = JSON.stringify(group.orderIds).replace(/"/g, '&quot;');
+
                         const cardHtml = `
-                            <div class="order-card rounded-xl md:rounded-2xl p-3 md:p-4 flex flex-col md:flex-row justify-between items-start md:items-center gap-2.5 md:gap-3">
+                            <div class="order-card ${isMulti ? 'multi-order' : ''} relative rounded-xl md:rounded-2xl p-3 md:p-4 flex flex-col md:flex-row justify-between items-start md:items-center gap-2.5 md:gap-3">
                                 <div class="flex-1 space-y-2 w-full min-w-0">
                                     <div class="flex items-center justify-between md:justify-start gap-2 md:gap-3 w-full flex-wrap">
                                         <span class="badge-table text-[10px] md:text-xs font-bold px-2.5 md:px-3 py-1 rounded-lg flex items-center gap-1.5 flex-shrink-0">
                                             <svg class="w-3 h-3 md:w-3.5 md:h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                                 <path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                                             </svg>
-                                            میز ${order.table}
-                                        </span>
-                                        <span class="text-[9px] md:text-[10px] text-turk-light/70 font-medium flex items-center gap-1 flex-shrink-0">
-                                            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
-                                            </svg>
-                                            ${timeString}
+                                            میز ${group.table}
                                         </span>
+                                        ${multiBadge}
+                                        ${timeDisplay}
                                     </div>
                                     <div class="grid grid-cols-1 sm:grid-cols-2 gap-1 md:gap-1.5 mt-1.5 md:mt-2">
                                         ${itemsHtml}
                                     </div>
                                 </div>
-                                <button onclick="completeOrder(${order.id})" class="w-full md:w-auto btn-ghost hover:bg-emerald-dark/40 hover:border-emerald-light/50 hover:text-emerald-light px-3 md:px-4 py-2 md:py-2.5 rounded-lg md:rounded-xl text-[9px] md:text-[10px] font-bold flex items-center justify-center gap-1.5 flex-shrink-0 group">
+                                <button onclick='completeOrdersForTable(${orderIdsJson})' class="w-full md:w-auto btn-ghost hover:bg-emerald-dark/40 hover:border-emerald-light/50 hover:text-emerald-light px-3 md:px-4 py-2 md:py-2.5 rounded-lg md:rounded-xl text-[9px] md:text-[10px] font-bold flex items-center justify-center gap-1.5 flex-shrink-0 group">
                                     <svg class="w-3.5 h-3.5 md:w-4 md:h-4 transition-transform group-hover:scale-110" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                         <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                                     </svg>
-                                    تحویل نهایی شد
+                                    تحویل نهایی ${isMulti ? `(${orderCount} سفارش)` : 'شد'}
                                 </button>
                             </div>
                         `;
@@ -838,18 +905,35 @@
             }
         }
 
-        async function completeOrder(orderId) {
+        // ✅ تکمیل همه سفارش‌های یک میز (چندگانه)
+        async function completeOrdersForTable(orderIds) {
+            if (!Array.isArray(orderIds) || orderIds.length === 0) return;
             try {
-                const response = await fetch('/api/admin/complete_order', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ order_id: orderId })
-                });
-                const result = await response.json();
-                if (response.ok && result.success) {
+                // انجام sequential همه درخواست‌ها
+                let successCount = 0;
+                let failCount = 0;
+                for (const orderId of orderIds) {
+                    try {
+                        const response = await fetch('/api/admin/complete_order', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ order_id: orderId })
+                        });
+                        const result = await response.json();
+                        if (response.ok && result.success) {
+                            successCount++;
+                        } else {
+                            failCount++;
+                        }
+                    } catch (e) {
+                        failCount++;
+                    }
+                }
+                if (failCount === 0) {
                     fetchActiveOrders();
                 } else {
-                    alert(result.error || "خطا در نهایی‌سازی.");
+                    alert(`${successCount} سفارش تکمیل شد. ${failCount} خطا رخ داد.`);
+                    fetchActiveOrders();
                 }
             } catch (err) {
                 alert("خطای شبکه: " + err.message);
@@ -1219,7 +1303,6 @@
             }
 
             container.insertAdjacentHTML('beforeend', html);
-            // Always scroll to bottom after adding message
             scrollChatToBottom(true);
             return bubbleId;
         }