<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kitchen Display System</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="kds.css">
</head>
<body>
    <div id="app" class="kds-container">
        <!-- Menu Button -->
        <div class="menu-button-container">
            <button class="menu-button" @click="toggleMenu">
                <i class="bi bi-list"></i>
            </button>
        </div>
        <!-- Menu Sidebar -->
        <div class="menu-sidebar" :class="{ 'active': menuActive }">
            <div class="menu-header">
                <h4>KDS Menu</h4>
                <button class="close-menu" @click="toggleMenu">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
            <div class="menu-content">
                <div class="mb-4">
                    <h6>Filter Meja</h6>
                    <div class="table-filter-container">
                        <button class="table-filter-btn" @click="showTableSelector = !showTableSelector">
                            <i class="bi bi-grid-3x3-gap"></i> 
                            {{ selectedTable || 'Semua Meja' }}
                        </button>
                        <button class="clear-filter-btn" v-if="selectedTable" @click="clearTableFilter">
                            <i class="bi bi-x-circle"></i>
                        </button>
                    </div>
                    <div class="table-selector" v-if="showTableSelector">
                        <div class="table-grid">
                            <div 
                                v-for="table in availableTables" 
                                :key="table"
                                class="table-item"
                                :class="{ 'selected': selectedTable === table }"
                                @click="selectTable(table)"
                            >
                                {{ table }}
                            </div>
                        </div>
                        <div class="table-selector-footer">
                            <button class="btn btn-sm btn-secondary" @click="showTableSelector = false">Tutup</button>
                        </div>
                    </div>
                </div>
                
                <div class="mb-4">
                    <h6>Pengaturan Tampilan</h6>
                    
                    <!-- Lebar Item Menu -->
                    <div class="mb-3">
                        <label for="itemWidthSlider" class="form-label d-flex justify-content-between">
                            <span>Lebar Item Menu</span>
                            <span class="badge bg-primary">{{ itemWidthSetting }}px</span>
                        </label>
                        <input type="range" class="form-range" id="itemWidthSlider" 
                               v-model.number="itemWidthSetting" min="100" max="250" step="10">
                        <div class="d-flex justify-content-between">
                            <small>100px</small>
                            <small>250px</small>
                        </div>
                    </div>
                    
                    <!-- Ukuran Font -->
                    <div class="mb-3">
                        <label for="fontSizeSlider" class="form-label d-flex justify-content-between">
                            <span>Ukuran Font</span>
                            <span class="badge bg-primary">{{ fontSizeSetting }}%</span>
                        </label>
                        <input type="range" class="form-range" id="fontSizeSlider" 
                               v-model.number="fontSizeSetting" min="75" max="200" step="5">
                        <div class="d-flex justify-content-between">
                            <small>75%</small>
                            <small>200%</small>
                        </div>
                    </div>
                    
                    <!-- Line Spacing -->
                    <div class="mb-3">
                        <label for="lineSpacingSlider" class="form-label d-flex justify-content-between">
                            <span>Jarak Antar Baris</span>
                            <span class="badge bg-primary">{{ lineSpacingSetting }}%</span>
                        </label>
                        <input type="range" class="form-range" id="lineSpacingSlider" 
                               v-model.number="lineSpacingSetting" min="80" max="200" step="5">
                        <div class="d-flex justify-content-between">
                            <small>80%</small>
                            <small>200%</small>
                        </div>
                    </div>
                    
                    <!-- Tinggi Tumpukan -->
                    <div class="mb-3">
                        <label for="stackHeightSlider" class="form-label d-flex justify-content-between">
                            <span>Tinggi Tumpukan</span>
                            <span class="badge bg-primary">{{ stackHeightSetting }}%</span>
                        </label>
                        <input type="range" class="form-range" id="stackHeightSlider" 
                               v-model.number="stackHeightSetting" min="50" max="95" step="5">
                        <div class="d-flex justify-content-between">
                            <small>50%</small>
                            <small>95%</small>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <button class="btn btn-sm btn-outline-secondary w-100" @click="resetDisplaySettings">
                            <i class="bi bi-arrow-clockwise"></i> Reset Pengaturan
                        </button>
                    </div>
                </div>
                
                <div class="mb-4">
                    <h6>Pengaturan Sistem</h6>
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" v-model="autoRefresh" id="autoRefreshSwitch">
                        <label class="form-check-label" for="autoRefreshSwitch">
                            Auto Refresh
                        </label>
                    </div>
                    <div class="mb-3" v-if="autoRefresh">
                        <label for="refreshInterval" class="form-label">Interval (detik)</label>
                        <input type="number" class="form-control form-control-sm" id="refreshInterval" v-model.number="refreshInterval" min="1" max="60">
                    </div>
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" v-model="soundEnabled" id="soundEnabledSwitch">
                        <label class="form-check-label" for="soundEnabledSwitch">
                            Notifikasi Suara
                        </label>
                    </div>
                    <div class="mb-3">
                        <label for="kdsStation" class="form-label">KDS Station</label>
                        <select class="form-select form-select-sm" id="kdsStation" v-model="currentKdsId">
                            <option value="5">KDS 5</option>
                            <option value="6">KDS 6</option>
                        </select>
                    </div>
                </div>
                
                <div class="mb-4">
                    <h6>Statistik</h6>
                    <div class="stats-container">
                        <div class="stat-item">
                            <div class="stat-value">{{ newOrdersCount }}</div>
                            <div class="stat-label">Baru</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">{{ cookingOrdersCount }}</div>
                            <div class="stat-label">Masak</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">{{ doneOrdersCount }}</div>
                            <div class="stat-label">Selesai</div>
                        </div>
                    </div>
                </div>
                
                <div class="mb-4">
                    <button class="btn btn-sm btn-danger w-100" @click="clearCompletedOrders">
                        <i class="bi bi-trash"></i> Hapus Selesai
                    </button>
                </div>
                
                <div class="mb-4">
                    <button class="btn btn-sm btn-info w-100" @click="openReport">
                        <i class="bi bi-graph-up"></i> Laporan & Dashboard
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Report Modal -->
        <div class="report-modal" v-if="showReport">
            <div class="report-header">
                <h4>Laporan & Dashboard</h4>
                <button class="close-report" @click="closeReport">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
            <div class="report-content">
                <iframe src="reportkds.html" frameborder="0"></iframe>
            </div>
        </div>
        
        <!-- Main KDS Display -->
        <div class="kds-main">
            <!-- Top Bar with Filters and Actions -->
            <div class="top-bar">
                <!-- Status Indicators -->
                <div class="status-indicators">
                    <div class="status-indicator" 
                         v-for="status in statusOptions" 
                         :key="status.value"
                         :class="[status.value, { 'active': globalFilter === status.value }]"
                         @click="setGlobalFilter(status.value)">
                        <div class="status-color"></div>
                        <div class="status-label">{{ status.label }}</div>
                        <div class="status-count">{{ getStatusCount(status.value) }}</div>
                    </div>
                </div>
                
                <!-- Action Buttons -->
                <div class="action-buttons">
                    <button class="action-btn undo" @click="undoLastAction" :disabled="!canUndo">
                        <i class="bi bi-arrow-counterclockwise"></i> Undo
                    </button>
                    <button class="action-btn redo" @click="redoLastAction" :disabled="!canRedo">
                        <i class="bi bi-arrow-clockwise"></i> Redo
                    </button>
                </div>
            </div>
            
            <!-- Orders Container -->
            <div class="orders-container" ref="ordersContainer">
                <div v-if="filteredOrders.length === 0" class="empty-state">
                    <i class="bi bi-inbox display-1 text-muted"></i>
                    <h4 class="mt-3 text-muted">Tidak ada pesanan</h4>
                    <p class="text-muted">Semua pesanan telah selesai diproses</p>
                </div>
                
                <div v-else class="orders-scroll">
                    <order-card
                        v-for="transaction in sortedTransactions"
                        :key="transaction.transactionId"
                        :transaction="transaction"
                        :item-width="itemWidthSetting"
                        :card-height="cardHeight"
                        :font-size="fontSizeSetting"
                        :line-spacing="lineSpacingSetting"
                        :stack-height="stackHeightSetting"
                        @start-all="handleStartAll"
                        @done-all="handleDoneAll"
                        @toggle-item-status="toggleItemStatus"
                    ></order-card>
                </div>
            </div>
        </div>
        
        <!-- Notification Container -->
        <div class="notification-container">
            <div 
                v-for="(notification, index) in notifications" 
                :key="index"
                class="notification"
                :class="notification.type"
                @click="removeNotification(index)"
            >
                <div class="notification-icon">
                    <i :class="getNotificationIcon(notification.type)"></i>
                </div>
                <div class="notification-message">{{ notification.message }}</div>
            </div>
        </div>
        
        <!-- Audio elements for sounds -->
        <audio ref="beepSound" src="beep.mp3"></audio>
        <audio ref="beep2Sound" src="beep2.mp3"></audio>
    </div>
    
    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
    <script src="crud.js"></script>
    <script src="kds.js"></script>
</body>
</html>