<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kiosk Profesional v8 - Final</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
    
    <link rel="stylesheet" href="style.css">
    </head>
<body>

<div id="app">

    <transition name="fade">
    <div v-if="currentView === 'welcome'" class="full-view welcome-screen">
        <div class="welcome-content">
            <h1 class="welcome-title">Selamat Datang!</h1>
            <p class="welcome-subtitle">Silakan masukkan data Anda untuk memulai.</p>
            <div class="welcome-form">
                <div class="input-container">
                    <input type="text" v-model.trim="customerName" placeholder=" " id="customerNameInput" @focus="showKeyboard('customerName')" readonly>
                    <label for="customerNameInput">Nama Anda (Wajib)</label>
                    <span class="material-icons-outlined input-icon">person</span>
                </div>
                <div class="input-container">
                    <input type="tel" v-model.trim="customerPhone" placeholder=" " id="customerPhoneInput" @focus="showKeyboard('customerPhone')" readonly>
                    <label for="customerPhoneInput">Nomor HP (Opsional)</label>
                    <span class="material-icons-outlined input-icon">phone_iphone</span>
                </div>
                <button @click="startShopping" class="start-btn" >
                    <span class="material-icons-outlined">shopping_bag</span>Mulai Belanja
                </button>
            </div>
        </div>
        <transition name="slide-up">
            <div v-if="isKeyboardVisible && currentView === 'welcome'" class="virtual-keyboard-container">
                 <div class="virtual-keyboard">
                    <div class="keyboard-header">Mengetik untuk: {{ keyboardTarget === 'customerName' ? 'Nama Anda' : 'Nomor HP' }}</div>
                    <div class="keyboard-row" v-for="(row, rowIndex) in keyboardLayout" :key="rowIndex">
                        <button v-for="key in row" :key="key" class="keyboard-key" :class="getKeyClass(key)" @click="handleKeyPress(key)">
                            <span v-if="key === 'Backspace'" class="material-icons-outlined">backspace</span>
                            <span v-else-if="key === 'Enter'" class="material-icons-outlined">keyboard_return</span>
                            <span v-else>{{ key }}</span>
                        </button>
                    </div>
                </div>
            </div>
        </transition>
    </div>
    </transition>


    <div v-if="currentView === 'kiosk'" class="main-layout">
        <aside class="sidebar">
            <h1><span class="material-icons-outlined">storefront</span>Kiosk Mart</h1>
            <ul v-if="sidebarTab === 'kategori'" class="filter-list">
                 <li class="filter-item best-seller" :class="{ active: isBestSellerActive }" @click="selectBestSeller">
                    <span class="material-icons-outlined">star</span>Produk Terlaris
                </li>
                <li class="filter-item" :class="{ active: activeCategory === null && !isBestSellerActive }" @click="selectHierarchicalFilter('category', null)"><span class="material-icons-outlined">apps</span>Semua Kategori</li>
                
                <li v-for="categoryName in flatCategories" :key="categoryName" class="filter-item" :class="{ active: activeCategory === categoryName }" @click="selectHierarchicalFilter('category', categoryName)">
                    <span class="material-icons-outlined">subdirectory_arrow_right</span>
                    <span class="flex-grow">{{ categoryName }}</span>
                </li>
            </ul>
            
            <ul v-if="sidebarTab === 'brand'" class="filter-list brand-list">
                <li class="filter-item" :class="{ active: activeBrand === null }" @click="selectHierarchicalFilter('brand', null)"><span class="material-icons-outlined">label</span>Semua Brand</li>
                
                <template v-for="(brand, brandName) in structuredBrands">
                    <li class="filter-item brand-item" :class="{ active: activeBrand === brandName && !isSidebarNodeOpen(brandName) }" @click.stop="Object.keys(brand._children).length > 0 ? toggleSidebarNode(brandName) : selectHierarchicalFilter('brand', brandName)">
                        <img :src="getBrandLogo(brandName)" :alt="brandName" class="brand-logo"/>
                        <span class="flex-grow">{{ brandName }}</span>
                        <span v-if="Object.keys(brand._children).length > 0" class="material-icons-outlined chevron" :class="{ 'is-open': isSidebarNodeOpen(brandName) }">expand_more</span>
                    </li>
                    <transition name="slide-down-fade">
                        <ul v-show="isSidebarNodeOpen(brandName)" class="filter-list-child">
                             <li class="filter-item" :class="{ active: activeBrand === brandName }" @click.stop="selectHierarchicalFilter('brand', brandName)">Semua {{ brandName }}</li>
                             <template v-for="(series, seriesName) in brand._children">
                                <li class="filter-item" :class="{ active: activeBrand === `${brandName} / ${seriesName}` && !isSidebarNodeOpen(`${brandName}/${seriesName}`) }" @click.stop="Object.keys(series._children).length > 0 ? toggleSidebarNode(`${brandName} / ${seriesName}`) : selectHierarchicalFilter('brand', `${brandName} / ${seriesName}`)">
                                    <span class="material-icons-outlined">subdirectory_arrow_right</span>
                                    <span class="flex-grow">{{ seriesName }}</span>
                                    <span v-if="Object.keys(series._children).length > 0" class="material-icons-outlined chevron" :class="{ 'is-open': isSidebarNodeOpen(`${brandName} / ${seriesName}`) }">expand_more</span>
                                </li>
                                <transition name="slide-down-fade">
                                    <ul v-show="isSidebarNodeOpen(`${brandName} / ${seriesName}`)" class="filter-list-grandchild">
                                        <li class="filter-item" :class="{ active: activeBrand === `${brandName} / ${seriesName}` }" @click.stop="selectHierarchicalFilter('brand', `${brandName} / ${seriesName}`)">Semua {{ seriesName }}</li>
                                        <template v-for="(sub, subName) in series._children">
                                            <li class="filter-item" :class="{ active: activeBrand === `${brandName} / ${seriesName} / ${subName}` }" @click.stop="selectHierarchicalFilter('brand', `${brandName} / ${seriesName} / ${subName}`)">
                                            {{ subName }}
                                            </li>
                                        </template>
                                    </ul>
                                </transition>
                             </template>
                        </ul>
                    </transition>
                </template>
            </ul>
        </aside>

        <main class="main-content">
            <header class="header">
                <div class="search-bar">
                    <span class="material-icons-outlined">search</span>
                    <input type="text" placeholder="Cari produk..." v-model="searchQuery" @focus="showKeyboard('searchQuery')" readonly>
                    <!-- PERBAIKAN: Tombol clear yang berfungsi dengan baik -->
                    <button v-if="searchQuery" @click="clearSearch" class="clear-search-btn">
                        <span class="material-icons-outlined">close</span>
                    </button>
                </div>
                <button class="cart-button" @click="goToCart">
                    <span class="material-icons-outlined">shopping_cart</span>Keranjang
                    <span v-if="cartItemCount > 0" class="cart-count">{{ cartItemCount }}</span>
                </button>
            </header>
            <transition-group name="product-list" tag="div" class="product-grid">
                <div v-for="product in filteredProducts" :key="product.id" class="product-card" :class="{ 'out-of-stock': isProductOutOfStock(product) }" @click="!isProductOutOfStock(product) && showProductDetail(product)">
                    <div v-if="isInCart(product)" class="in-cart-indicator">
                        <span class="material-icons-outlined">check_circle</span>Di Keranjang
                    </div>
                    <div v-if="isProductOutOfStock(product)" class="stock-overlay"><span class="stock-overlay-text">Stok Habis</span></div>
                    <img :src="product.variants[0].image_url" :alt="product.name" class="product-image">
                    <div class="product-info">
                       <p class="product-brand">{{ product.brand_name.split(' / ')[0] }}</p>
                        <h3 class="product-name">{{ product.name }}</h3>
                        
                        <p class="product-description">{{ product.description }}</p>
                        <p class="product-price">{{ formatCurrency(product.base_price) }}</p>
                        <div class="product-card-footer">
                            <button v-if="!isSimpleProduct(product)" class="view-options-btn"><span class="material-icons-outlined">tune</span>Pilih Opsi</button>
                            <button v-else @click.stop="addToCartSimple(product, $event)" class="add-to-cart-btn-direct" :disabled="isProductOutOfStock(product)"><span class="material-icons-outlined">add_shopping_cart</span>Tambah</button>
                        </div>
                    </div>
                </div>
            </transition-group>
        </main>
    </div>

    <div v-if="currentView === 'cart'" class="full-view cart-view">
        <div class="cart-view-header">
            <h1>Keranjang Belanja</h1>
            <button @click="backToKiosk" class="back-btn"><span class="material-icons-outlined">arrow_back</span>Lanjut Belanja</button>
        </div>
        <div v-if="cart.length > 0" class="cart-view-content">
            <div class="cart-items-container">
                <div v-for="item in cart" :key="item.cartId" class="cart-item">
                    <img :src="item.image" :alt="item.name" class="cart-item-img">
                    <div class="cart-item-info">
                        <h4>{{ item.name }}</h4>
                        <p class="cart-item-details" v-if="Object.keys(item.variant).filter(k => variantAttributes.includes(k)).length > 0">
                            {{ Object.keys(item.variant).filter(k => variantAttributes.includes(k)).map(k => item.variant[k]).join(', ') }}
                        </p>
                        <ul v-if="item.condiments && item.condiments.length" class="cart-item-addons">
                            <li v-for="condiment in item.condiments" :key="condiment.name">* {{ condiment.name }}</li>
                        </ul>
                         <ul v-if="item.addons && item.addons.length" class="cart-item-addons">
                            <li v-for="addon in item.addons" :key="addon.id">+ {{ addon.name }}</li>
                        </ul>
                        <input type="text" v-model="item.note" placeholder="Tambah catatan..." class="cart-note-input">
                    </div>
                    <div class="cart-item-actions">
                        <button @click="decrementQuantity(item.cartId)">-</button>
                        <span>{{ item.quantity }}</span>
                        <button @click="incrementQuantity(item.cartId)">+</button>
                    </div>
                    <div class="cart-item-price-total">
                        {{ formatCurrency(item.finalPrice * item.quantity) }}
                    </div>
                    <button class="remove-item-btn" @click="removeFromCart(item.cartId)">&times;</button>
                </div>
            </div>
            <div class="cart-summary-container">
                <h3>Ringkasan Pesanan</h3>
                <p>Nama: <strong>{{ customerName }}</strong></p>
                <p>No. HP: <strong>{{ customerPhone || '-' }}</strong></p>
                <hr>
                <div class="cart-total"><span>Total</span><span>{{ formatCurrency(cartTotal) }}</span></div>
                <button class="checkout-btn" @click="submitOrder">Konfirmasi Pesanan</button>
                <button class="cancel-btn" @click="cancelOrder">Batalkan Transaksi</button>
            </div>
        </div>
        <div v-else class="cart-empty">
            <span class="material-icons-outlined">remove_shopping_cart</span>
            <p>Keranjang Anda masih kosong.</p>
        </div>
    </div>
    
    <div v-if="currentView === 'success'" class="full-view success-screen">
        <span class="material-icons-outlined">check_circle</span>
        <h1>Pesanan Diterima!</h1>
        <p>Terima kasih, <strong>{{ customerName }}</strong>. Pesanan Anda sedang diproses.</p>
        
        <div v-if="lastTransactionId" class="qr-code-container">
            <p>Pindai untuk detail transaksi:</p>
            <img :src="`https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${lastTransactionId}`" alt="QR Code Transaksi">
        </div>

        <p>Nomor Transaksi Anda:</p>
        <div class="trx-id">{{ lastTransactionId }}</div>
        <button @click="startNewOrder" class="new-order-btn">Buat Pesanan Baru</button>
    </div>

    <transition name="modal-fade">
        <div v-if="isDetailVisible" class="modal-overlay" @click.self="closeDetailModal">
            <div class="product-detail-modal">
                <button @click="closeDetailModal" class="detail-close-btn">&times;</button>
                <img :src="modalSelectedVariant.image_url" :alt="selectedProduct.name" class="detail-image">
                <div class="detail-info">
                    <div>
                        <p class="brand">{{ selectedProduct.brand_name }}</p>
                        <h2>{{ selectedProduct.name }}</h2>
                        <p class="description">{{ selectedProduct.description }}</p>
                        
                        <div v-for="(key, index) in variantAttributes" :key="key" class="options-group">
                            <h4>{{ variantLabels[key] || key.charAt(0).toUpperCase() + key.slice(1) }}: <strong>{{ modalSelections[key] }}</strong></h4>
                            <div class="options-buttons">
                                <button v-for="option in getAvailableOptions(key, index)" :key="option" 
                                class="option-btn" 
                                :class="{ active: modalSelections[key] === option, disabled: !isVariantCombinationAvailable(key, option) }" 
                                @click="!isVariantCombinationAvailable(key, option) ? null : selectModalOption(key, option, index)">
                                    {{ option }}
                                </button>
                            </div>
                        </div>

                        <!-- PERBAIKAN: Gunakan uniqueId untuk setiap condiment group -->
                        <div v-if="selectedProduct.condiment_groups && selectedProduct.condiment_groups.length" v-for="group in selectedProduct.condiment_groups" :key="group.uniqueId" class="options-group">
                            <h4>{{ group.title }} <span v-if="group.is_required" class="required">(Wajib)</span></h4>
                             <div class="condiment-list">
                                <div v-for="(option, optIndex) in group.options" :key="`${group.uniqueId}-${optIndex}`" class="condiment-item">
                                    <!-- PERBAIKAN: Gunakan uniqueId untuk name dan id attribute -->
                                    <input :type="group.type" 
                                           :name="`group-${group.uniqueId}`" 
                                           :id="`option-${group.uniqueId}-${optIndex}`" 
                                           :value="option" 
                                           v-model="modalCondimentChoices[group.uniqueId]">
                                    <label :for="`option-${group.uniqueId}-${optIndex}`">{{ option.name }} <span v-if="option.price > 0" class="price">(+{{formatCurrency(option.price)}})</span></label>
                                </div>
                            </div>
                        </div>

                        <div v-if="selectedProduct.addons && selectedProduct.addons.length" class="options-group">
                            <h4>Opsi Tambahan:</h4>
                            <div class="addon-list">
                                <div v-for="addon in selectedProduct.addons" :key="addon.id" class="addon-item">
                                    <input type="checkbox" :id="addon.id" :value="addon" v-model="modalSelectedAddons">
                                    <label :for="addon.id">{{ addon.name }}</label>
                                    <span class="price">+ {{ formatCurrency(addon.price) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="detail-footer">
                        <div class="detail-price-stock">
                            <span class="final-price">{{ formatCurrency(modalFinalPrice) }}</span>
                            <span v-if="modalSelectedVariant" class="stock-info" :class="modalSelectedVariant.stock > 0 ? 'available' : 'out-of-stock'">
                                {{ modalSelectedVariant.stock > 0 ? `Stok: ${modalSelectedVariant.stock}` : 'Stok Habis' }}
                            </span>
                        </div>
                        <button class="detail-add-to-cart-btn" :disabled="!isModalFormValid" @click="addProductToCart($event)">
                            Tambah ke Keranjang
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
    
    <transition name="zoom-fade">
        <div v-if="isKeyboardVisible && currentView === 'kiosk'" class="keyboard-overlay" @click.self="hideKeyboard">
             <div class="virtual-keyboard">
                <div class="keyboard-row" v-for="(row, rowIndex) in keyboardLayout" :key="rowIndex">
                    <button v-for="key in row" :key="key" class="keyboard-key" :class="getKeyClass(key)" @click="handleKeyPress(key)">
                        <span v-if="key === 'Backspace'" class="material-icons-outlined">backspace</span>
                        <span v-else-if="key === 'Enter'" class="material-icons-outlined">keyboard_return</span>
                        <span v-else>{{ key }}</span>
                    </button>
                </div>
            </div>
        </div>
    </transition>

</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
    <script src="main.js" type="module"></script>
<script src="crud.js"></script> 
</body>
</html>