<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Sistem Pemesanan F&B</title>
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#00885a">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <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">
    <style> 
        html { 
            scroll-behavior: smooth; 
            scroll-padding-top: 104px;
        } 
    </style>
</head>
<body>

<div id="app" :class="{ 'noscroll': activeModal || isDetailVisible || alert.visible }">

<div class="cart-footer">
    <button @click="submitOrder" class="checkout-btn" :disabled="cart.length === 0 || isLoading">
        <span v-if="!isLoading">Konfirmasi Pesanan</span>
        <span v-else class="spinner-small"></span>
    </button>
</div>

    <div v-if="!appState.isReady" class="loading-screen">
        <div class="spinner"></div>
        <p>{{ appState.loadingMessage }}</p>
    </div>

    <div v-if="appState.isReady">
        
        <div v-if="uiState.currentView === 'login'" class="auth-container">
            <div class="auth-card">
                <h2 class="auth-title">Selamat Datang</h2>
                <p class="auth-subtitle" v-if="appConfig.loginMode === 3">Masuk untuk melanjutkan atau jelajahi sebagai tamu.</p>
                <div v-if="authError" class="auth-error">{{ authError }}</div>
                <div class="form-group"><input type="text" v-model="loginForm.username" placeholder="Username" @keyup.enter="handleLogin"></div>
                <div class="form-group"><input type="password" v-model="loginForm.password" placeholder="Password" @keyup.enter="handleLogin"></div>
                <button @click="handleLogin" class="btn-primary btn-full" :disabled="isLoading">
                    <span v-if="!isLoading">Login</span>
                    <span v-else class="spinner-small"></span>
                </button>
                <div class="auth-options">
                    <a href="#" v-if="appConfig.loginMode === 2 || appConfig.loginMode === 3" @click.prevent="uiState.currentView = 'register'">Buat Akun Baru</a>
                    <a href="#" v-if="appConfig.loginMode === 3" @click.prevent="loginAsGuest">Masuk sebagai Tamu</a>
                </div>
            </div>
        </div>

        <div v-if="uiState.currentView === 'register'" class="auth-container">
             <div class="auth-card">
                <h2 class="auth-title">Daftar Akun Baru</h2>
                <div v-if="authError" class="auth-error">{{ authError }}</div>
                <div class="form-group"><input type="text" v-model="registerForm.fullName" placeholder="Nama Lengkap"></div>
                <div class="form-group"><input type="text" v-model="registerForm.username" placeholder="Username"></div>
                <div class="form-group"><input type="password" v-model="registerForm.password" placeholder="Password"></div>
                <button @click="handleRegister" class="btn-primary btn-full" :disabled="isLoading">
                     <span v-if="!isLoading">Daftar</span>
                     <span v-else class="spinner-small"></span>
                </button>
                <div class="auth-options">
                    <a href="#" @click.prevent="uiState.currentView = 'login'">Sudah punya akun? Login</a>
                </div>
            </div>
        </div>

        <div v-if="uiState.currentView === 'tableSelect'" class="page-container">
            <header class="page-header"><h1>Pilih Meja</h1></header>
            <main class="page-content">
                <div v-if="isLoading" class="loading-overlay-transparent"><div class="spinner"></div></div>
                <div v-for="(mejaGroup, area) in groupedMeja" :key="area" class="table-area">
                    <h3>{{ area }}</h3>
                    <div class="table-grid">
                        <button v-for="meja in mejaGroup" :key="meja.id" @click="selectMeja(meja)" class="table-btn">
                            {{ meja.nama_meja }}
                        </button>
                    </div>
                </div>
            </main>
        </div>

        <div v-if="uiState.currentView === 'mainApp'">
            
            <div v-show="appState.subView === 'main'">
                <header class="main-header">
<div class="search-bar">
  <span class="material-icons-outlined">search</span>
  <input type="text" placeholder="Cari produk..." v-model="filters.q" @input="debounceSearch">
  <button v-if="filters.q" @click="clearSearch" class="clear-search-btn">
    <i class="material-icons-outlined">close</i>
  </button>
</div>
                    <button class="header-icon-btn" @click="goToCart">
                        <span class="material-icons-outlined">shopping_cart</span>
                        <span v-if="cartItemCount > 0" class="cart-count">{{ cartItemCount }}</span>
                    </button>
                </header>

                <div class="category-scroll-bar" ref="categoryBar">
                    <button @click="scrollToElement('#bestseller-section')" class="category-btn">Best Seller</button>
                    <button @click="scrollToElement('#promo-section')" class="category-btn">Hot Promo</button>
                    <button 
                        v-for="category in categories" 
                        :key="category.id"
                        :class="{ 'active': category.id == activeCategoryId }"
                        @click="scrollToCategory(category.id)"
                        :ref="`categoryButton-${category.id}`"
                        class="category-btn">
                        {{ category.name }}
                    </button>
                </div>

                <main class="main-content-app">

                    
<section id="bestseller-section" v-if="bestSellerProducts.length > 0" class="horizontal-list-section"
    v-show="!filters.q">
    <h2>Best Seller</h2>
    <div class="product-carousel">
        <div v-for="product in bestSellerProducts" :key="'bs-'+product.id" class="product-card-small"
            @click="showProductDetail(product, $event)">
            <div class="product-image-container">
                <img :src="product.image_url || 'https://placehold.co/400x400/eee/ccc?text=No+Image'"
                    :alt="product.name" class="product-image">
            </div>
            <div class="product-info">
                <h3 class="product-name">{{ product.name }} hahaha</h3>
                
                <p class="product-price">{{ product.base_price_formatted }}</p>
            </div>
        </div>
    </div>
</section>

                    
                    
<section id="promo-section" v-if="promoProducts.length > 0" class="horizontal-list-section" v-show="!filters.q">
    <h2>🔥 Hot Promo</h2>
    <div class="product-carousel">
        <div v-for="product in promoProducts" :key="'promo-'+product.id" class="product-card-small" @click="showProductDetail(product, $event)">
            <div class="promo-badge" v-if="product.promo_type !== 'none'">
                <span v-if="product.promo_type === 'discount'">Disc {{ parseFloat(product.promo_value) }}%</span>
                <span v-if="product.promo_type === 'fixed_cut'">-{{ formatCurrency(product.promo_value) }}</span>
            </div>
            <div class="product-image-container">
                <img :src="product.image_url || 'https://placehold.co/400x400/eee/ccc?text=No+Image'" :alt="product.name" class="product-image">
            </div>
            <div class="product-info">
                <h3 class="product-name">{{ product.name }}</h3>
                <div class="promo-pricing">
                    <p class="product-price-strikethrough">{{ formatCurrency(product.base_price) }}</p>
                    <p class="product-description">{{ product.description }}</p>
                    <p class="product-price-promo">{{ formatCurrency(calculatePromoPrice(product)) }}</p>
                </div>
            </div>
        </div>
    </div>
</section>

                    <section class="main-grid-section">
                        <div v-if="isLoading" class="loading-overlay-transparent">
                            <div class="spinner"></div>
                        </div>

                        <div v-else>
                            <div v-for="group in groupedProducts" :key="group.id" class="category-group" :id="`category-group-${group.id}`">
                                <h3 class="category-group-header" :data-category-id="group.id">{{ group.name }}</h3>
                                <div class="product-grid">
                                    <div v-for="product in group.products" :key="product.id" class="product-card" @click="showProductDetail(product, $event)">
                                        <div v-if="productIdsInCart.has(product.id)" class="in-cart-indicator">
                                            <span class="material-icons-outlined">shopping_cart</span>
                                        </div>
                                        <div class="product-image-container">
                                             <img :src="product.image_url || 'https://placehold.co/400x400/eee/ccc?text=No+Image'" :alt="product.name" class="product-image">
                                        </div>
                                        <div class="product-info">
                                            <h3 class="product-name">{{ product.name }}</h3>
                                            <p class="product-description">{{ product.description }} </p>
                                            <div v-if="product.promo_type !== 'none'">
                                                <div class="promo-pricing">
                                                    <p class="product-price-strikethrough" style="font-size: 0.8rem;">{{ formatCurrency(product.base_price) }}</p>
                                                    <p class="product-price-promo" style="font-size: 1rem;">{{ formatCurrency(calculatePromoPrice(product)) }}</p>
                                                </div>
                                            </div>
                                            <p v-else class="product-price">{{ formatCurrency(product.base_price) }}</p>
                                            <div class="product-meta">
                                                <span class="rating"><span class="material-icons-outlined">star</span> {{ product.rating }}</span>
                                                <span class="sold">Terjual {{ product.sold_count }}+</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </main>
            </div>

            <div v-if="appState.subView === 'cart'" class="page-container-sub">
                <header class="page-header">
                    <button @click="goToMain" class="back-btn"><span class="material-icons-outlined">arrow_back</span></button>
                    <h1>Keranjang</h1>
                    <div></div> 
                </header>
                <main class="page-content cart-content">
                    <div v-if="cart.length === 0" class="empty-state">
                        <span class="material-icons-outlined">remove_shopping_cart</span>
                        <p>Keranjangmu masih kosong</p>
                    </div>
                    <div v-else class="cart-items-list">
                        <div v-for="item in cart" :key="item.cartId" class="cart-item" :class="{'item-fade-out': item.isDeleting}">
                            <img :src="item.image_url" class="cart-item-image" @click="editCartItem(item)">
                            <div class="cart-item-details" @click="editCartItem(item)">
                                <p class="cart-item-name">{{ item.name }}</p>
                                <p class="cart-item-variant-info">{{ formatVariantInfo(item.details) }}</p>
                                <p class="cart-item-price">{{ formatCurrency(item.finalPrice) }}</p>
                            </div>
                            <div class="cart-item-controls">
                                <div class="quantity-control">
                                    <button @click="updateQuantity(item, -1)">-</button>
                                    <span>{{ item.quantity }}</span>
                                    <button @click="updateQuantity(item, 1)">+</button>
                                </div>
                                <button @click="confirmRemoveItem(item)" class="cart-item-delete-btn">
                                    <span class="material-icons-outlined">delete</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <footer v-if="cart.length > 0" class="cart-footer">
                        <div class="voucher-section">
                            <button @click="openModal('voucher')">
                                <span class="material-icons-outlined">sell</span>
                                <span>{{ appliedVoucher ? 'Promo terpasang!' : 'Makin hemat pakai promo' }}</span>
                                <span class="material-icons-outlined">chevron_right</span>
                            </button>
                             <div v-if="appliedVoucher" class="applied-voucher-info">
                                <span class="material-icons-outlined">check_circle</span>
                                Promo <strong>{{ appliedVoucher.code }}</strong> terpasang!
                            </div>
                        </div>
                        <div class="checkout-summary">
                            <div class="total-breakdown">
                                <div class="price-row">
                                    <span>Subtotal</span>
                                    <span>{{ formatCurrency(cartTotal) }}</span>
                                </div>
                                 <div v-if="appliedVoucher" class="price-row discount">
                                    <span>Diskon ({{ appliedVoucher.code }})</span>
                                    <span>-{{ formatCurrency(discountAmount) }}</span>
                                </div>
                            </div>
                            <div v-if="cart.length > 0" class="payment-section">
                                <h4>Pilih Metode Pembayaran</h4>
                                <div class="payment-options">
                                    <label v-for="method in paymentMethods" :key="method.id" class="payment-option">
                                        <input type="radio" :value="method.id" v-model="selectedPaymentMethod">
                                        <img :src="method.logo_url" :alt="method.name" v-if="method.logo_url">
                                        <span>{{ method.name }}</span>
                                    </label>
                                </div>
                            </div>                            
                            <div class="checkout-action">
                                <div class="final-total">
                                    <span class="label">Total</span>
                                    <span class="amount">{{ formatCurrency(finalTotal) }}</span>
                                </div>
                                <button class="checkout-btn" @click="processCheckout" :disabled="cart.length === 0 || isLoading">
                                     <span v-if="!isLoading">Bayar</span>
                                     <span v-else class="spinner-small"></span>
                                </button>
                            </div>
                        </div>
                    </footer>
                </main>
            </div>

            <transition name="slide-down">
                <div v-if="activeModal" class="modal-panel-overlay" @click.self="closeModal">
                    <div class="modal-panel">
                        <div class="modal-header">
                            <h3>{{ modalTitle }}</h3>
                            <button @click="closeModal" class="close-modal-btn">&times;</button>
                        </div>
                        <div class="modal-content">
                            <div v-if="activeModal === 'voucher'" class="voucher-options">
                                <div v-for="voucher in vouchers" :key="voucher.id" class="voucher-card" :class="{ disabled: cartTotal < voucher.min_purchase }" @click="cartTotal >= voucher.min_purchase && applyVoucher(voucher)">
                                    <div class="voucher-icon"><span class="material-icons-outlined">sell</span></div>
                                    <div class="voucher-details">
                                        <h4>{{ voucher.code }}</h4>
                                        <p>{{ voucher.description }}</p>
                                        <small v-if="voucher.min_purchase > 0">Min. belanja {{ formatCurrency(voucher.min_purchase) }}</small>
                                    </div>
                                </div>
                                 <p v-if="!vouchers.length" class="empty-state-text">Tidak ada voucher yang tersedia saat ini.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
            
            <transition name="modal-fade">
                <div v-if="isDetailVisible" class="modal-overlay" @click.self="closeDetailModal">
                    <div class="product-detail-modal" v-if="selectedProduct">
                        <button @click="closeDetailModal" class="detail-close-btn">&times;</button>
                        <img :src="modalSelectedVariant.image_url || selectedProduct.image_url || 'https://placehold.co/400x400/eee/ccc?text=No+Image'" :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-if="variantAttributes.length > 0" v-for="key in variantAttributes" :key="key" class="options-group">
                                    <h4>{{ variantLabels[key] || key.charAt(0).toUpperCase() + key.slice(1) }}</h4>
                                    <div class="options-buttons">
                                       <button v-for="option in getAvailableOptions(key)" :key="option" 
                                            class="option-btn" 
                                            :class="{ active: modalSelections[key] === option, disabled: !isVariantCombinationAvailable(key, option) }"
                                            :disabled="!isVariantCombinationAvailable(key, option)"
                                            @click="selectModalOption(key, option)">
                                            
                                            {{ option }}
                                            <span v-if="getPriceForOption(key, option) !== null" class="variant-price">
                                                {{ formatCurrency(getPriceForOption(key, option)) }}
                                            </span>
                                        </button>
                                    </div>
                                </div>

                                <div v-for="group in selectedProduct.condiment_groups" :key="group.id" 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 in group.options" :key="option.id" class="condiment-item">
                                            <input :type="group.type" :name="'condiment-' + group.id" :id="'condiment-' + group.id + '-' + option.id" :value="option" v-model="modalCondimentChoices[group.id]">
                                            <label :for="'condiment-' + group.id + '-' + option.id">{{ 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 > 0" 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-' + addon.id" :value="addon" v-model="modalSelectedAddons">
                                            <label :for="'addon-' + addon.id">{{ addon.name }}</label>
                                            <span class="price">+ {{ formatCurrency(addon.price) }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="detail-footer">
                                <div class="quantity-control detail-quantity">
                                    <button @click="modalQuantity > 1 ? modalQuantity-- : 1">-</button>
                                    <input type="number" v-model.number="modalQuantity" min="1">
                                    <button @click="modalQuantity++">+</button>
                                </div>
                                <div class="detail-price-stock">
                                    <span class="final-price">{{ formatCurrency(modalFinalPrice * modalQuantity) }}</span>
                                    <span v-if="modalSelectedVariant" class="stock-info" :class="{ 'out-of-stock': modalSelectedVariant.stock <= 0 }">
                                        Stok: {{ modalSelectedVariant.stock }}
                                    </span>
                                </div>
                                <button class="detail-add-to-cart-btn" :disabled="!isModalFormValid" @click="addProductToCart($event)">
                                    {{ editingCartId ? 'Update' : '+ Keranjang' }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
        </div>

        <div v-if="uiState.currentView === 'qrGenerator'" class="page-container">
            <header class="page-header"><h1>Generate QR Meja</h1></header>
            <main class="page-content">
                <div v-if="isLoading" class="loading-overlay-transparent"><div class="spinner"></div></div>
                 <div v-for="(mejaGroup, area) in groupedMeja" :key="area" class="table-area">
                    <h3>{{ area }}</h3>
                    <div class="table-grid">
                        <button v-for="meja in mejaGroup" :key="meja.id" @click="generateQrCode(meja)" class="table-btn">
                            {{ meja.nama_meja }}
                        </button>
                    </div>
                </div>
                <div v-if="generatedQrUrl" class="qr-result">
                    <h4>QR Code untuk Meja: {{ qrMejaName }}</h4>
                    <img :src="generatedQrUrl" alt="QR Code">
                    <p class="qr-link">{{ generatedLink }}</p>
                </div>
            </main>
        </div>
    </div>

    <transition name="modal-fade">
        <div v-if="alert.visible" class="custom-alert-overlay">
            <div class="custom-alert-box">
                <h3 class="alert-title">{{ alert.title }}</h3>
                <p class="alert-message" v-html="alert.message"></p>
                <div class="alert-buttons">
                    <button v-if="alert.type === 'confirm'" @click="handleAlertCancel" class="btn-secondary">
                        Batal
                    </button>
                    <button @click="handleAlertConfirm" class="btn-primary">
                        OK
                    </button>
                </div>
            </div>
        </div>
    </transition>

<div v-if="uiState.currentView === 'transactionSuccess'" class="transaction-success-view">
            <div class="success-card">
                <i class="material-icons-outlined success-icon">check_circle_outline</i>
                <h2>Pesanan Berhasil!</h2>
                <p>Terima kasih telah berbelanja dengan kami.</p>

                <div class="order-summary">
                    <p><strong>Nomor Pesanan:</strong> {{ transactionSuccessDetails.orderId }}</p>
                    <p><strong>Total Pembayaran:</strong> {{ formatCurrency(transactionSuccessDetails.totalAmount) }}</p>
                    <p><strong>Status Pembayaran:</strong> {{ transactionSuccessDetails.paymentStatus }}</p>
                    <p v-if="transactionSuccessDetails.mejaName"><strong>Meja:</strong> {{ transactionSuccessDetails.mejaName }}</p>
                </div>

                <div v-if="paymentQrUrl" class="payment-qr-area">
                    <h4>Scan untuk Melanjutkan Pembayaran</h4>
                    <img :src="paymentQrUrl" alt="QR Code Pembayaran" class="payment-qr-image">
                    <p class="qr-link">{{ transactionSuccessDetails.qrContent }}</p>
                </div>

                <button @click="backToMainFromSuccess" class="btn btn-primary">Kembali ke Beranda</button>
            </div>
        </div>    

</div> <script src="https://cdn.jsdelivr.net/npm/qrcode-generator/qrcode.js"></script>
<script type="module">
    import EscPosEncoder from 'https://cdn.jsdelivr.net/npm/esc-pos-encoder@3.0.0/+esm';
    window.EscPosEncoder = EscPosEncoder; // expose to global scope
</script>
<!-- <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script> -->
<script src="https://unpkg.com/vue@latest/dist/vue.global.js"></script>
<script src="main.js" type="module"></script>
</body>
</html>