
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Kitchen Display System</title>
    
    <!-- Load jQuery with specific version and integrity check -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    
    <!-- Fallback for jQuery if CDN fails -->
    <script>
        window.jQuery || document.write('<script src="jquery-3.6.0.min.js"><\/script>');
    </script>
    
    <!-- Then load other libraries -->
    <script src="https://unpkg.com/vue@3.2.0/dist/vue.global.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <script src="crud.js"></script>    
    <link rel="stylesheet" href="kds4.css">
</head>
<body class="fullscreen" :class="{ 'dark-mode': darkMode }">
    <div id="app">
        <div class="container">
            <div class="header">
                <div class="flex gap-2 items-center">
                    <button class="btn btn-icon" @click="toggleDashboard" :title="showDashboard ? 'Hide Dashboard' : 'Show Dashboard'">
                        <i class="fas" :class="showDashboard ? 'fa-chevron-down' : 'fa-chevron-up'"></i>
                    </button>
                    <button class="btn btn-icon" @click="toggleResumeDialog" title="Resume">
                        <i class="fas fa-clipboard-list"></i>
                    </button>
                    <h1 class="font-bold">Kitchen Display System <span class="kds-id">(ID: {{ settings.kdsId }})</span></h1>
                </div>
                <div class="flex gap-2">
                    <!-- Filter Dropdown -->
                    <div class="dropdown" v-click-outside="closeFilterDropdown">
                        <button class="btn btn-icon" @click="toggleFilterDropdown" title="Filter Orders">
                            <i class="fas fa-filter"></i>
                        </button>
                        <div v-if="showFilterDropdown" class="dropdown-menu">
                            <div class="filter-option">
                                <label>
                                    <input type="checkbox" v-model="filters.status.new"> New Orders
                                </label>
                            </div>
                            <div class="filter-option">
                                <label>
                                    <input type="checkbox" v-model="filters.status.cooking"> Cooking
                                </label>
                            </div>
                            <div class="filter-option">
                                <label>
                                    <input type="checkbox" v-model="filters.status.done"> Done
                                </label>
                            </div>
                            <hr>
                            <div class="filter-option">
                                <label>Waiter:</label>
                                <select v-model="filters.waiter">
                                    <option value="">All</option>
                                    <option v-for="waiter in uniqueWaiters" :key="waiter" :value="waiter">{{ waiter }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Zoom Controls -->
                    <div class="zoom-controls">
                        <button class="btn btn-icon" @click="decreaseZoom" title="Zoom Out">
                            <i class="fas fa-search-minus"></i>
                        </button>
                        <span class="zoom-level">{{ Math.round(settings.zoomLevel * 100) }}%</span>
                        <button class="btn btn-icon" @click="increaseZoom" title="Zoom In">
                            <i class="fas fa-search-plus"></i>
                        </button>
                        <button class="btn btn-icon" @click="resetZoom" title="Reset Zoom">
                            <i class="fas fa-compress"></i>
                        </button>
                    </div>
                    
                    <!-- Dark Mode Toggle -->
                    <button class="btn btn-icon" @click="toggleDarkMode" :title="darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'">
                        <i class="fas" :class="darkMode ? 'fa-sun' : 'fa-moon'"></i>
                    </button>
                    
                    <!-- Sound Toggle -->
                    <button class="btn btn-icon" @click="toggleSound" :title="settings.soundEnabled ? 'Disable Sound' : 'Enable Sound'">
                        <i class="fas" :class="settings.soundEnabled ? 'fa-volume-up' : 'fa-volume-mute'"></i>
                    </button>
                    
                    <button class="btn btn-icon" @click="undoAction" :disabled="!canUndo" title="Undo (Ctrl+Z)">
                        <i class="fas fa-undo"></i>
                    </button>
                    <button class="btn btn-icon" @click="redoAction" :disabled="!canRedo" title="Redo (Ctrl+Y)">
                        <i class="fas fa-redo"></i>
                    </button>
                    <button class="btn btn-icon" @click="openSettingsDialog" title="Settings">
                        <i class="fas fa-cog"></i>
                    </button>
                </div>
            </div>
            
            <div v-if="showDashboard" class="dashboard">
                <div class="dashboard-header">
                    <h2>Order Statistics</h2>
                    <div class="dashboard-actions">
                        <button class="btn btn-sm" @click="refreshStats">
                            <i class="fas fa-sync-alt"></i> Refresh
                        </button>
                    </div>
                </div>
                <div class="stats-container">
                    <div class="stats-summary">
                        <div class="stat-card">
                            <div class="stat-value">{{ totalOrders }}</div>
                            <div class="stat-label">Total Orders</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-value">{{ totalItems }}</div>
                            <div class="stat-label">Total Items</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-value">{{ avgOrderTime }}</div>
                            <div class="stat-label">Avg. Order Time</div>
                        </div>
                    </div>
                    <table class="stats-table">
                        <thead>
                            <tr>
                                <th>Item</th>
                                <th>Quantity</th>
                                <th>Fastest Time</th>
                                <th>Slowest Time</th>
                                <th>Average Time</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="stat in orderStats" :key="stat.name">
                                <td>{{ stat.name }}</td>
                                <td>{{ stat.qty }}</td>
                                <td>{{ formatTime(stat.fastest) }}</td>
                                <td>{{ formatTime(stat.slowest) }}</td>
                                <td>{{ formatTime(stat.average) }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="orders-container">
    <div class="orders-header">
        <h2>Active Orders</h2>
        <div class="orders-count">
            <span class="count-badge new">{{ newItemsCount }} New</span>
            <span class="count-badge cooking">{{ cookingItemsCount }} Cooking</span>
            <span class="count-badge done">{{ doneItemsCount }} Done</span>
        </div>
    </div>

    <div class="orders-wrapper">
        <div class="orders-scroll-container">
            <div v-for="order in filteredOrders" :key="order.orderId" class="order-card" :class="getOrderClass(order)">
                <div class="order-header">
                    <div class="flex justify-between items-center mb-2">
                        <div>
                            <span class="table-number">Table: {{ order.tableId }}</span>
                            <span class="waiter-name">({{ order.waiter }})</span>
                        </div>
                        <div class="order-meta">
                            <span class="order-timer" :class="getTimerClass(order)">
                                {{ calculateOrderTime(order) }}
                            </span>
                            <span class="order-priority" v-if="isOrderUrgent(order)">
                                <i class="fas fa-exclamation-triangle"></i> Urgent
                            </span>
                        </div>
                    </div>
                    <div class="order-time">
                        <i class="far fa-clock"></i> {{ formatDateTime(order.orderTime) }}
                    </div>
                </div>

                <div class="order-items-container">
                    <div class="order-items" :class="getItemContainerClass(order.items.length)">
                        <div v-for="item in order.items" :key="item.id" class="order-item"
                            :class="[getItemClass(item), { 'last-clicked': isLastClickedItem(order.orderId, item.id) }]"
                            @click="cycleItemStatus(order.orderId, item)">
                            <div class="item-content">
                                <div class="item-main">
                                    <div class="item-name">
                                        <span class="item-status-indicator"></span>
                                        {{ item.name }}
                                    </div>
                                    <div class="item-quantity">x{{ item.quantity }}</div>
                                </div>

                                <div v-if="item.note" class="item-note">
                                    <i class="fas fa-sticky-note"></i> {{ item.note }}
                                </div>

                                <div v-if="formatToppings(item.toppings)" class="item-toppings">
                                    <i class="fas fa-plus-circle"></i> {{ formatToppings(item.toppings) }}
                                </div>

                                <div v-if="item.paketItems && item.paketItems.length > 0" class="item-paket">
                                    <i class="fas fa-layer-group"></i> {{ formatPaketItems(item.paketItems) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="order-footer">
                    <div class="flex gap-2">
                        <button @click="startAllItems(order)" class="btn btn-warning flex-1"
                            :disabled="!hasNewItems(order)">
                            <i class="fas fa-fire"></i> Start All
                        </button>
                        <button @click="doneAll(order)" class="btn btn-success flex-1">
                            <i class="fas fa-check"></i> Done All
                        </button>
                    </div>
                </div>
            </div>

            <div v-if="filteredOrders.length === 0" class="no-orders">
                <i class="fas fa-clipboard-check"></i>
                <p>No orders match your current filters</p>
                <button class="btn btn-primary" @click="clearFilters">Clear Filters</button>
            </div>
        </div>
    </div>
</div>
            
            <!-- Resume Dialog -->
            <div v-if="showResumeDialog" class="modal-overlay" @click.self="toggleResumeDialog">
                <div class="modal-content resume-dialog">
                    <div class="modal-header">
                        <h2><i class="fas fa-clipboard-list"></i> Unprocessed Items Summary</h2>
                        <button class="btn btn-icon" @click="toggleResumeDialog">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div v-if="Object.keys(getUnprocessedSummary()).length === 0" class="empty-state">
                            <i class="fas fa-check-circle"></i>
                            <p>All items have been processed!</p>
                        </div>
                        <div v-else>
                            <div v-for="(data, itemName) in getUnprocessedSummary()" :key="itemName" class="resume-item">
                                <div class="resume-item-header">
                                    <div class="font-bold">{{ itemName }}</div>
                                    <div class="resume-quantity">{{ data.total }}</div>
                                </div>
                                <div class="resume-tables">
                                    <div v-for="(qty, tableId) in data.tables" :key="tableId" class="resume-table">
                                        <i class="fas fa-chair"></i> Table {{ tableId }}: {{ qty }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" @click="toggleResumeDialog">Close</button>
                    </div>
                </div>
            </div>
            
            <!-- Settings Dialog -->
            <div v-if="showSettingsDialog" class="modal-overlay" @click.self="closeSettingsDialog">
                <div class="modal-content settings-dialog">
                    <div class="modal-header">
                        <h2><i class="fas fa-cog"></i> Settings</h2>
                        <button class="btn btn-icon" @click="closeSettingsDialog">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="settings-form">
                            <div class="settings-section">
                                <h3>General</h3>
                                <div class="form-group">
                                    <label for="kdsId">KDS ID (1=Dapur, 2=Bar, dll.)</label>
                                    <input type="number" id="kdsId" v-model.number="tempSettings.kdsId">
                                </div>
                                <div class="form-group">
                                    <label for="refreshInterval">Data Refresh Interval (seconds)</label>
                                    <input type="number" id="refreshInterval" v-model.number="tempSettings.refreshIntervalSec" min="3">
                                </div>
                                <div class="form-group">
                                    <label for="urgentThreshold">Urgent Order Threshold (minutes)</label>
                                    <input type="number" id="urgentThreshold" v-model.number="tempSettings.urgentThreshold" min="1">
                                </div>
                            </div>
                            
                            <div class="settings-section">
                                <h3>Display</h3>
                                <div class="form-group checkbox-group">
                                    <label>
                                        <input type="checkbox" id="showSimilarItems" v-model="tempSettings.showSimilarItems">
                                        Show similar item orders from other tables
                                    </label>
                                </div>
                                <div class="form-group checkbox-group">
                                    <label>
                                        <input type="checkbox" id="darkMode" v-model="tempSettings.darkMode">
                                        Dark Mode
                                    </label>
                                </div>
                                <div class="form-group checkbox-group">
                                    <label>
                                        <input type="checkbox" id="soundEnabled" v-model="tempSettings.soundEnabled">
                                        Enable Sound Notifications
                                    </label>
                                </div>
                            </div>
                            
                            <div class="settings-section">
                                <h3>Notifications</h3>
                                <div class="form-group">
                                    <label for="newOrderSound">New Order Sound</label>
                                    <select id="newOrderSound" v-model="tempSettings.sounds.newOrder">
                                        <option value="bell">Bell</option>
                                        <option value="chime">Chime</option>
                                        <option value="alert">Alert</option>
                                        <option value="none">None</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="statusChangeSound">Status Change Sound</label>
                                    <select id="statusChangeSound" v-model="tempSettings.sounds.statusChange">
                                        <option value="click">Click</option>
                                        <option value="pop">Pop</option>
                                        <option value="none">None</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-success" @click="saveSettings">
                            <i class="fas fa-save"></i> Save
                        </button>
                        <button class="btn btn-gray" @click="closeSettingsDialog">Cancel</button>
                    </div>
                </div>
            </div>
            
            <!-- Help Dialog -->
            <div v-if="showHelpDialog" class="modal-overlay" @click.self="toggleHelpDialog">
                <div class="modal-content help-dialog">
                    <div class="modal-header">
                        <h2><i class="fas fa-question-circle"></i> Keyboard Shortcuts</h2>
                        <button class="btn btn-icon" @click="toggleHelpDialog">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="shortcuts-grid">
                            <div class="shortcut-item">
                                <div class="shortcut-key">Ctrl + Z</div>
                                <div class="shortcut-desc">Undo last action</div>
                            </div>
                            <div class="shortcut-item">
                                <div class="shortcut-key">Ctrl + Y</div>
                                <div class="shortcut-desc">Redo last action</div>
                            </div>
                            <div class="shortcut-item">
                                <div class="shortcut-key">D</div>
                                <div class="shortcut-desc">Toggle dashboard</div>
                            </div>
                            <div class="shortcut-item">
                                <div class="shortcut-key">R</div>
                                <div class="shortcut-desc">Toggle resume dialog</div>
                            </div>
                            <div class="shortcut-item">
                                <div class="shortcut-key">S</div>
                                <div class="shortcut-desc">Open settings</div>
                            </div>
                            <div class="shortcut-item">
                                <div class="shortcut-key">+ / -</div>
                                <div class="shortcut-desc">Zoom in/out</div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" @click="toggleHelpDialog">Close</button>
                    </div>
                </div>
            </div>
            
            <!-- Help Button -->
            <button class="help-button" @click="toggleHelpDialog" title="Keyboard Shortcuts">
                <i class="fas fa-keyboard"></i>
            </button>
        </div>
    </div>
    <script src="kds4.js"></script>
</body>
</html>


