<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced KDS System</title>
    <script src="https://unpkg.com/vue@3.2.0/dist/vue.global.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <!-- Pastikan file crud.js ada di direktori yang sama -->
    <script src="crud.js"></script>    
    <link rel="stylesheet" href="kds4.css">
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="header">
                <div class="flex gap-2 items-center">
                    <button class="btn btn-primary" @click="toggleDashboard">
                        {{ showDashboard ? '▼' : '▲' }} Dashboard
                    </button>
                    <button class="btn btn-primary" @click="toggleResumeDialog">
                        <span>📋</span> Resume
                    </button>
                    <h1 class="font-bold">Kitchen Display System (ID: {{ settings.kdsId }})</h1>
                </div>
                <div class="flex gap-2">
                    <button class="btn btn-gray" @click="undoAction" :disabled="!canUndo">
                        <span>↶</span> Undo
                    </button>
                    <button class="btn btn-gray" @click="redoAction" :disabled="!canRedo">
                        <span>↷</span> Redo
                    </button>
                    <button class="btn btn-primary" @click="openSettingsDialog">
                        <span>⚙️</span> Settings
                    </button>
                </div>
            </div>

            <div v-if="showDashboard" class="dashboard">
                <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 class="orders-container">
                <div class="orders-grid">
                    <div v-for="order in orders" 
                         :key="order.orderId" 
                         class="order-card"
                         :data-items="order.items.length">
                        
                        <div class="order-header">
                            <div class="flex justify-between items-center mb-2">
                                <div>
                                    <span class="font-bold">Table: {{ order.tableId }}</span>
                                    <span class="text-sm ml-2">({{ order.waiter }})</span>
                                </div>
                                <span class="order-timer">
                                    {{ calculateOrderTime(order) }}
                                </span>
                            </div>
                            <div class="text-sm text-gray">
                                Order Time: {{ formatDateTime(order.orderTime) }}
                            </div>
                        </div>

                        <div class="order-items">
                            <div v-for="item in order.items" 
                                 :key="item.id" 
                                 class="order-item"
                                 :class="getItemClass(item)"
                                 @click="cycleItemStatus(order.orderId, item)">
                                <div class="flex justify-between">
                                    <span class="font-bold">{{ item.name }}</span>
                                    <div class="quantity-info">
                                        <span class="main-qty">x{{ item.quantity }}</span>
                                        <div v-if="settings.showSimilarItems && getSimilarItems(order.orderId, item.name)" class="similar-items">
                                            <div v-for="similar in getSimilarItems(order.orderId, item.name)"
                                                 :key="similar.table"
                                                 class="text-sm similar-item">
                                                {{ similar.table }} +{{ similar.qty }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div v-if="item.note" class="text-sm text-gray mt-1">
                                    Note: {{ item.note }}
                                </div>
                                <div v-if="formatToppings(item.toppings)" class="text-sm text-primary mt-1">
                                    {{ formatToppings(item.toppings) }}
                                </div>
                            </div>
                        </div>

                        <div class="order-footer">
                            <div class="flex gap-2">
                                <button 
                                    @click="startAllItems(order)"
                                    class="btn btn-warning flex-1">
                                    <span>🔄</span> Start All
                                </button>
                                <button 
                                    @click="doneAll(order)"
                                    class="btn btn-success flex-1">
                                    <span>✓</span> Done All
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div v-if="showResumeDialog" class="resume-dialog">
                <div class="resume-content">
                    <div class="resume-header">
                        <h2>Unprocessed Items Summary</h2>
                        <button class="btn btn-gray" @click="toggleResumeDialog">✕</button>
                    </div>
                    <div class="resume-body">
                        <div v-for="(data, itemName) in getUnprocessedSummary()" 
                             :key="itemName" 
                             class="resume-item">
                            <div class="font-bold">{{ itemName }} = {{ data.total }}</div>
                            <div v-for="(qty, tableId) in data.tables" 
                                 :key="tableId" 
                                 class="resume-table">
                                Table {{ tableId }} = {{ qty }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div v-if="showSettingsDialog" class="resume-dialog">
                <div class="resume-content settings-content">
                    <div class="resume-header">
                        <h2>Settings</h2>
                        <button class="btn btn-gray" @click="closeSettingsDialog">✕</button>
                    </div>
                    <div class="resume-body">
                        <div class="settings-form">
                            <fieldset>
                                <legend>General</legend>
                                <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">
                                </div>
                                <div class="form-group">
                                    <label for="showSimilarItems">
                                        <input type="checkbox" id="showSimilarItems" v-model="tempSettings.showSimilarItems">
                                        Show similar item orders from other tables
                                    </label>
                                </div>
                            </fieldset>

                            <div class="settings-footer">
                                <button class="btn btn-success" @click="saveSettings">Save</button>
                                <button class="btn btn-gray" @click="closeSettingsDialog">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <script src="kds4.js"></script>
</body>
</html>
