<!DOCTYPE html>
<html lang="nl" target="_top">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no, maximum-scale=1.0">

    <!-- PWA Meta Tags -->
    <meta name="theme-color" content="#5c2e2e">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Langemuur">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="De Langemuur">
    <meta name="msapplication-TileColor" content="#5c2e2e">
    <meta name="msapplication-TileImage" content="/icons/icon-144x144.png">

    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json">

    <!-- Favicon & Icons -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/icons/icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/icons/icon-192x192.png">
    <link rel="apple-touch-icon" sizes="167x167" href="/icons/icon-152x152.png">

    <!-- 样式与字体 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- FontAwesome - 强制使用 CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- 确保FontAwesome优先级 -->
    <style>
        .fas, .far, .fab, .fal, .fad, .fa-solid, .fa-regular, .fa-brands, .fa-light, .fa-duotone {
            font-family: "Font Awesome 6 Free" !important;
        }
    </style>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Libre+Barcode+128&family=Roboto&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">

    <!-- JS 第三方库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-database-compat.js"></script>
    <script type="text/javascript"
        id="google-translate-script"
        src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

    <!-- Firebase 初始化 -->
    <script>
        const firebaseConfig = {
            apiKey: "AIzaSyCRmQTQ2eYkavNh4C0pkggIaGbWz4iWE3Q",
            authDomain: "cislink.firebaseapp.com",
            databaseURL: "https://cislink-default-rtdb.europe-west1.firebasedatabase.app",
            projectId: "cislink",
            storageBucket: "cislink.firebasestorage.app",
            messagingSenderId: "295505146634",
            appId: "1:295505146634:web:4cfa3c9e00344060f7c0f3",
            measurementId: "G-CQ705CDDCV"
        };
        firebase.initializeApp(firebaseConfig);
        const database = firebase.database();
    </script>


    <!-- 本地样式表引用 -->
    <link rel="stylesheet" href="style-css.css">
    <link rel="stylesheet" href="notification-css.css">

    <title>Loading...</title>
</head>


<body class="theme-boss">

    <!-- PIN invoer popup -->
    <div id="pin-modal" style="display:none;position:fixed;z-index:9999;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.5);align-items:center;justify-content:center;">
        <div style="background:#fff;padding:30px 20px;border-radius:8px;box-shadow:0 2px 10px #0003;max-width:90vw;width:320px;text-align:center;">
            <h5 style="color:#1e3a8a;">Voer uw pincode in</h5>
            <input id="pin-input" type="password" maxlength="4" minlength="3" pattern="[0-9]*" inputmode="numeric" style="font-size:2em;text-align:center;width:80%;margin:15px 0;border:2px solid #1e3a8a;border-radius:4px;padding:8px;color:#000;background:#fff;" autofocus />
            <div id="pin-error" style="color:#1e3a8a !important;font-weight:bold;font-size:1.5em;min-height:1.5em;">Vraag het personeel om de pincode.</div>
            <button id="pin-submit" style="margin-top:10px;background-color:#1e3a8a;border-color:#1e3a8a;color:#fff;" class="btn btn-primary">Bevestigen</button>
        </div>
    </div>

    <header>
        <div id="restaurant-name">
            <img id="titleImage" src="" width="40%" height="auto" style="opacity: 0.9;" alt="Boss Beemster logo" />
        </div>

        <div id="restName" class="notranslate" style="display: none;"></div>
        <div id="timer" class="notranslate" style="display: none;"></div>

        <div id="limiet_eten" class="notranslate" style="display: none;"></div>
        <div id="refreshURL" class="notranslate" style="display: none;"></div>
        <div id="webhook" class="notranslate" style="display: none;"></div>
        <div id="limiet_dessert" class="notranslate" style="display: none;"></div>
        <div id="aantal_pers" class="notranslate" style="display: none;"></div>
        <div id="lastInvoiceNum" class="notranslate" style="display: none;"></div>
        <div id="maxTijd" class="notranslate" style="display: none;"></div>
        <div id="eerste_ronde_tijd" class="notranslate" style="display: none;"></div>
        <div id="pythonAuth" class="notranslate" style="display: none;"></div>
        <div id="restNaam" class="notranslate" style="display: none;"></div>
        <div id="tafelNummer" class="notranslate" style="display: none;"></div>
        <div id="savedPin" class="notranslate" style="display: none;"></div>
        <div id="webhookHealthUrl" class="notranslate" style="display: none;"></div>
        <div id="tafelStatus" class="notranslate" style="display: none;"></div>
        <div id="packageType" class="notranslate" style="display: none;">normal</div>
    </header>


    <main class="main-container flex-row">


        <!-- //progress bar  -->
        <div class="full-screen-overlay" id="overlay">
            <div class="spinner"></div>
            
            <!-- Huisregels 欢迎页面内容容器 -->
            <div id="huisregels-container" style="display: none;">
                <div class="huisregels-scroll-content">
                    <div class="huisregels-header">
                        <img id="welcome-logo" src="" alt="Logo" style="max-width: 200px; margin: 20px auto; display: block;">
                        <h1 translate="yes">Welkom bij De Langemuur Vlissingen!</h1>
                    </div>

                    <div class="huisregels-text" id="huisregels-text">
                        <!-- Content will be loaded dynamically -->
                        <div style="text-align: center; padding: 20px;">
                            <div class="spinner" style="display: inline-block; position: relative;"></div>
                            <p>Laden...</p>
                        </div>
                    </div>
                </div>

                <!-- 底部固定区域 -->
                <div class="huisregels-footer">
                    <button id="akkord-btn" class="akkord-button" disabled>
                        <i class="fas fa-check-circle"></i>
                        <span translate="yes">Akkoord</span>
                    </button>
                    <p class="scroll-hint" id="scroll-hint" translate="yes">
                        Scroll naar beneden om akkoord te gaan
                    </p>
                </div>
            </div>
        </div>
        <div id="overlay-2" class="prevent-scroll"></div>

        <section class="menu-payment grid" id="menu-section">
            <!-- Your menu and payment section content goes here -->
            <div class="menu flex-row" id="menu">

            </div>

        </section>


        <section class="order flex-column" id="mainBody">
            <!-- Your order section content goes here -->
            <article class="receipt flex-column" width="95vw">
                <div class="company-info flex-column">
                    <!-- Restaurant logo -->
                    <!-- <img id="logo-img-receipt" src="" width="30%" height="auto"> -->

                    <!-- Tafelnummer en factuurnummer -->
                    <p id="tafel-nummer">Tafel - </p>
                    <p id="invoice-number"></p>

                    <!-- 查看账单按钮 - 亮金色 -->
                    <button id="view-bill-btn" style="display: none; margin-top: 10px; padding: 8px 16px; background: linear-gradient(180deg, #ffd700, #daa520); color: #1a1a1a; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; box-shadow: 0 2px 8px rgba(218, 165, 32, 0.4); transition: all 0.3s ease;">
                        <i class="fas fa-receipt"></i> Rekening bekijken
                    </button>
                </div>

                <div class="receipt-details">
                    <table class="details-table">
                        <thead>
                            <tr>
                                <td class="dotted-border" colspan="5"></td>
                            </tr>
                            <tr>
                                <td class="empty-border" colspan="5"></td>
                            </tr>
                            <tr>
                                <th class="order-image">Foto</th> <!-- Image column -->
                                <th class="description">Product</th>
                                <th class="quantity">Aantal</th>
                                <th class="price">Prijs</th>
                                <th class="delete">Bewerk</th>
                            </tr>
                            <tr>
                                <td class="dotted-border" colspan="5"></td>
                            </tr>
                            <tr>
                                <td class="empty-border" colspan="5"></td>
                            </tr>
                        </thead>
                        <tbody id="receipt-details">

                        </tbody>
                    </table>
                </div>
                <div class="receipt-summary" style="display: none;">
                    <table class="summary-table">
                        <tbody class="summary-table" id="total-summary">
                            <tr>
                                <td class="dotted-border" colspan="5"></td>
                            </tr>
                            <tr>
                                <td class="empty-border" colspan="5"></td>
                            </tr>
                            <tr>
                                <td class="notranslate">Totaal excl.：</td>
                                <td id="subtotal-summary">€0.00</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="notranslate">Btw：</td>
                                <td id="tax-summary">€0.00</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="notranslate">Totaal incl.：</td>
                                <td class="to-pay" id="grandtotal-summary">€0.00</td>
                                <td></td>
                            </tr>
                        </tbody>
                        <tbody class="summary-table" id="payment-summary">
                            <tr>
                                <td>Invoer bedrag:</td>
                                <td id="amount-paid">€0.00</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td id="tip-change-title">Wisselgeld:</td>
                                <td id="tip-change-value"></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>Betaalmethode:</td>
                                <td id="payment-type"></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="dotted-border" colspan="5"></td>
                            </tr>
                            <tr>
                                <td class="empty-border" colspan="5"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </article>



            <div class="orderBtn" id="orderBtns">
                <button id="order-history" class="order-action-btn">
                    <i class="fas fa-archive"></i>
                    <span class="notranslate">Historie</span>
                </button>
                <button id="show-bevestig-btn" class="order-action-btn">
                    <i class="fas fa-archive"></i>
                    <span class="notranslate">Laaste order</span>
                </button>
                <button id="order-verzend" class="order-action-btn">
                    <i class="fas fa-paper-plane"></i>
                    <span class="notranslate">Verzend</span>
                </button>
                <button id="order-clear" class="order-action-btn" style="background:#661414;color:#fff;">
                    <i class="fas fa-trash-alt"></i>
                    <span class="notranslate">Leegmaken</span>
                </button>
            </div>




            <!-- Dropdown menu for filtering -->

            </div>








            <div class="orderDataWindow  flex-column" id="orderHistoryFrame">
                <!-- This div represents the order data window with the ID "orderHistoryFrame" -->
                <p class="order-data-show" id="lastOrderPage"></p>
                <!-- This paragraph element with the ID "lastOrderPage" displays the order data -->
                <div class="close-paypad">
                    <!-- This div contains the close button for the order data window -->
                    <button class="btn" id="close-btn"><i class="fas fa-times" id="confirm-close"></i>afsluiten</button>
                    <!-- This button with the ID "confirm-close" serves as the close button for the order data window -->
                </div>
            </div>


            <div class="payment grid" id="payment-overlay">
                <!-- This div represents the payment overlay with the ID "payment-overlay" -->
            </div>


            <!-- this is the error message when ppl try to click on the order'verzend'button, while nothing was added -->
            <!-- HTML for the message box -->
            <div id="message-box"
                style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 10px; border-radius: 5px;">
            </div>

        </section>





        <!-- Add this code inside the <body> section of your HTML file -->
        <div id="message-container"></div>
        <div id="message-container-notAdd"></div>


        <!-- bevestiging, nadat heeft gedrukt op de knoop -->


        <div class="receipt-footer flex-row" id="categorie">
            <!-- Submenu containers -->
            <div class="submenu" id="drinksSubMenu" style="display: none;"></div>
            <div class="submenu" id="serviceSubMenu" style="display: none;"></div>

            <!-- 一级按钮容器 -->
            <a class="btn btn-outline-primary btn-lg active btn-menu btn-lvl1" href="#" role="button"
                aria-pressed="true" data-target="drinksSubMenu" id="btn-drink-main" translate="no">
                <i class="fa-solid fa-wine-glass" translate="no"></i> <span translate="yes">Dranken</span>
            </a>
            <!-- 新增：Service 一级按钮（占位，后续通过 Firebase config 注入名称与 target） -->
            <a class="btn btn-outline-primary btn-lg active btn-menu btn-lvl1" href="#" role="button"
               aria-pressed="true" id="btn-service-main" data-target="serviceSubMenu" data-config-key="serviceCat" translate="no">
                <i class="fa-solid fa-bell-concierge" translate="no"></i> <span translate="yes">Service</span>
            </a>
        </div>

        <!-- Level 1 Services Button -->
        <!-- <a class="btn btn-outline-primary btn-lg active btn-menu btn-lvl1" id="service-btn" href="#<?=Cat18id?>"
        role="button" aria-pressed="true">
        <?=Knop_service?>
      </a> -->
        </div>








        <div class="paypad flex-row" id="paypad">
            <!-- This div represents the paypad section -->
            <!-- This button with the ID "close-sale" serves as the confirmation button for the paypad section -->
            <table class="button-table">
                <tr>
                    <td>
                        <button class="paypad-btn span3-col btn btn-success" id="close-sale"
                            data-id="close-sale">Bevestigen</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="paypad-btn span3-col btn btn-danger" id="verzend-close">Annuleren</button>
                    </td>

                </tr>
            </table>

        </div>
        <div id="paypad-overlay"></div>

        <span id="searchIcon">&#128269;</span> <!-- Placeholder for magnifying lens icon -->
        <div id="searchContainer" class="hidden">
            <input type="text" id="searchBar" placeholder="Zoeken...">
            <span id="closeSearch">&#10006;</span> <!-- Placeholder for close icon -->
            <div id="searchResults" class="search-results"></div>
        </div>




        <!-- Button for order list -->
        <button id="toggle-order-list" class="custom-btn">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                class="bi bi-cart-check-fill" viewBox="0 0 16 16">
                <path
                    d="M.5 1a.5.5 0 0 0 0 1h1.11l.401 1.607 1.498 7.985A.5.5 0 0 0 4 12h1a2 2 0 1 0 0 4 2 2 0 0 0 0-4h7a2 2 0 1 0 0 4 2 2 0 0 0 0-4h1a.5.5 0 0 0 .491-.408l1.5-8A.5.5 0 0 0 14.5 3H2.89l-.405-1.621A.5.5 0 0 0 2 1zM6 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0m7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-1.646-7.646-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708" />
            </svg>
            <span id="order-count-badge" class="order-badge">0</span>
        </button>

        <!-- Button for toggling footer -->
        <button id="toggle-footer-btn" class="custom-btn floating-button">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-square-half"
                viewBox="0 0 16 16">
                <path
                    d="M8 15V1h6a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1zm6 1a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z" />
            </svg>
        </button>


    </main>

    <!-- 订单列表弹窗背景遮罩 -->
    <div id="order-modal-overlay" class="order-modal-overlay"></div>

    <!-- ///////////////////////////////////////////////////////////////////////////////// -->

    <div class="container" id="historyContainer">

        <!-- ///////////////////the overlay to cover the screen when dorpdown option is selected////////////////////// -->
        <div id="overlay-history">
            <div class="loader"></div>
        </div>

        <!-- //////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
        <button class="btn" id="close-btn1"><i class="fas fa-times" id="history-close"></i></button>

        <div class="history-details" id="history-panel">
            <table class="history-table">
                <div id="h3-heading">
                    <h5>Bestelgeschiedenis # - <span id="ronde"></span></h5>
                </div>
                <div id="time">
                    <p>Besteltijd: <span id="timestamp"></span> </P>
                </div>
                <thead>
                    <tr>
                        <th class="description">Naam</th>
                        <th class="quantity">Aantal</th>
                        <th class="price">Prijs</th>
                    </tr>
                </thead>
                <tbody id="history-details">
                    <!-- Table rows will be dynamically populated here -->
                </tbody>
            </table>
        </div>
        <div class="dropdown-container" id="orderHistories">
            <label for="filter-dropdown">Bezig met laden van bestelgeschiedenis...</label>

            <select id="filter-dropdown">
                <!-- Options will be dynamically populated -->
            </select>
        </div>
    </div>

    <!-- Translation Pop-Up for User Confirmation -->
    <div id="translate-popup">
        <div>
            <p>Wilt u deze pagina naar uw taal vertalen?</p>
            <button id="translate-yes">Ja</button>
            <button id="translate-no">Nee</button>
        </div>
    </div>
    <div id="google_translate_element" style="display: none;"></div>
    <!-- 并发控制: 批量处理 orderlist 写入 -->
    <script src="batch-orders-patch.js?v=2.2.1"></script>
    <script src="config.js?v=2.2.1"></script>
    <script src="firebase-loader.js?v=2.2.1"></script>
    <!-- <script src="welcome-screen.js?v=2.2.1"></script> -->  <!-- 已禁用：保留 pincode 验证，移除欢迎页面以简化流程 -->
    <script src="class-order-js.js?v=2.2.1"></script>
    <script src="script-js.js?v=2.2.1"></script>
    <script src="javascript.js?v=2.2.1"></script>
    <script src="food-info-js.js?v=2.2.1"></script>
    <script src="translation-js.js?v=2.2.1"></script>
    <script src="verificatie-realtimeListener-js.js?v=2.2.1"></script>
    <script src="sendingOrder.js?v=2.2.1"></script>
    <script src="whatsapp-module.js?v=2.2.1"></script>


    


        <!-- FAB (moved to end of body for Safari/iOS compatibility) -->
        <div id="fab-dial" class="fab-container" aria-label="Acties" aria-expanded="false">
            <button id="fab-main" class="fab-main" aria-haspopup="true" aria-controls="fab-actions">
                <span class="fab-icon" id="fab-icon-plus">＋</span>
                <span class="fab-icon hidden" id="fab-icon-close">✕</span>
            </button>
            <ul id="fab-actions" class="fab-actions" role="menu">
                <li role="menuitem">
                    <button class="fab-action" data-action="history" title="Historie">
                        <i class="fas fa-archive"></i>
                    </button>
                    <span class="fab-label">Historie</span>
                </li>
                <li role="menuitem">
                    <button class="fab-action" data-action="last" title="Laatste order">
                        <i class="fas fa-history"></i>
                    </button>
                    <span class="fab-label">Laatste</span>
                </li>
                <li role="menuitem">
                    <button class="fab-action fab-send" data-action="send" title="Verzend" style="position:relative;">
                        <i class="fas fa-paper-plane"></i>
                        <span id="fab-send-badge" class="fab-badge">0</span>
                    </button>
                    <span class="fab-label fab-label-strong">Verzend</span>
                </li>
                <li role="menuitem">
                    <button class="fab-action danger" data-action="clear" title="Leegmaken">
                        <i class="fas fa-trash"></i>
                    </button>
                    <span class="fab-label">Leegmaken</span>
                </li>
            </ul>
        </div>
<script>
// FAB: keep above footer and safe area on iOS
(function () {
    const dial = document.getElementById('fab-dial');
    const main = document.getElementById('fab-main');
    const plus = document.getElementById('fab-icon-plus');
    const close = document.getElementById('fab-icon-close');
    const footer = document.querySelector('.receipt-footer, #categorie'); // adjust if needed

    function setFabBottom() {
        const footerH = footer ? footer.getBoundingClientRect().height : 0;
        // 16px gap + safe area + footer height
        const px = 16 + footerH;
        dial.style.setProperty('--fab-bottom', `calc(env(safe-area-inset-bottom) + ${px}px)`);
    }

    // Toggle actions
    main?.addEventListener('click', () => {
        const expanded = dial.getAttribute('aria-expanded') === 'true';
        dial.setAttribute('aria-expanded', String(!expanded));
        plus?.classList.toggle('hidden', !expanded === true);
        close?.classList.toggle('hidden', expanded === true);
    });

    // Recompute on layout changes
    ['load','resize','orientationchange'].forEach(ev => window.addEventListener(ev, setFabBottom));
    if ('ResizeObserver' in window && footer) new ResizeObserver(setFabBottom).observe(footer);
    setFabBottom();

    // Optional: close when tapping outside actions
    document.addEventListener('click', (e) => {
        if (!dial.contains(e.target) && dial.getAttribute('aria-expanded') === 'true') {
            dial.setAttribute('aria-expanded', 'false');
            plus.classList.remove('hidden');
            close.classList.add('hidden');
        }
    }, true);
})();

// 套餐类型切换功能
(function() {
    const packageTypeSelector = document.getElementById('packageTypeSelector');
    const packageTypeDisplay = document.getElementById('packageType');
    
    if (packageTypeSelector && packageTypeDisplay) {
        // 监听选择器变化
        packageTypeSelector.addEventListener('change', function() {
            const newPackageType = this.value;
            packageTypeDisplay.textContent = newPackageType;
            
            console.log('🍽️ 套餐类型切换为:', newPackageType);
            
            // 重新加载菜单以应用新的价格
            if (window.order && typeof window.order.loadMenuFromFirebase === 'function') {
                console.log('🔄 重新加载菜单以应用套餐价格...');
                window.order.loadMenuFromFirebase();
            }
        });
        
        // 初始化显示
        packageTypeDisplay.textContent = packageTypeSelector.value;
    }
})();

// 强制添加菜单按钮图标
document.addEventListener('DOMContentLoaded', function() {
    // 延迟执行以确保其他脚本完成
    setTimeout(function() {
        addMenuIcons();
        // 初始化购物车动画检查
        if (typeof checkAndUpdateCartAnimation === 'function') {
            checkAndUpdateCartAnimation();
        }
        
        // 监听DOM变化，如果按钮被重写则重新添加图标和检查购物车状态
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.type === 'childList' || mutation.type === 'characterData') {
                    addMenuIcons();
                    // 当订单表格发生变化时，更新购物车动画
                    if (typeof checkAndUpdateCartAnimation === 'function') {
                        checkAndUpdateCartAnimation();
                    }
                }
            });
        });
        
        // 监听按钮容器的变化
        const categorie = document.getElementById('categorie');
        if (categorie) {
            observer.observe(categorie, {
                childList: true,
                subtree: true,
                characterData: true
            });
        }
        
        // 专门监听订单表格的变化 - 更新为正确的ID
        const orderTableBody = document.getElementById('receipt-details');
        if (orderTableBody) {
            const orderObserver = new MutationObserver(function(mutations) {
                // 当订单表格内容变化时，更新购物车按钮状态
                if (typeof checkAndUpdateCartAnimation === 'function') {
                    setTimeout(checkAndUpdateCartAnimation, 100);
                }
            });
            
            orderObserver.observe(orderTableBody, {
                childList: true,
                subtree: true,
                characterData: true,
                attributes: true
            });
        }
        
        // 也监听传统的orderTableBody（如果存在）
        const legacyOrderTableBody = document.getElementById('orderTableBody');
        if (legacyOrderTableBody) {
            const legacyOrderObserver = new MutationObserver(function(mutations) {
                if (typeof checkAndUpdateCartAnimation === 'function') {
                    setTimeout(checkAndUpdateCartAnimation, 100);
                }
            });
            
            legacyOrderObserver.observe(legacyOrderTableBody, {
                childList: true,
                subtree: true,
                characterData: true,
                attributes: true
            });
        }
    }, 1000);
});

function addMenuIcons() {
    const buttons = [
        { id: 'btn-drink-main', icon: 'fa-wine-glass', text: 'Dranken' },
        { id: 'btn-service-main', icon: 'fa-bell-concierge', text: 'Service' }
    ];
    
    buttons.forEach(function(btn) {
        const element = document.getElementById(btn.id);
        
        // 更安全的元素检查
        if (element && typeof element.setAttribute === 'function') {
            const hasIcon = element.querySelector('i.fa-solid');
            
            // 如果按钮没有图标，添加图标但保持现有文本
            if (!hasIcon) {
                const span = element.querySelector('span[translate="yes"]');
                let currentText = btn.text; // 默认文本
                
                // 如果已经有span，保持其当前文本（可能已被翻译）
                if (span && span.textContent && span.textContent.trim()) {
                    currentText = span.textContent.trim();
                }
                
                element.innerHTML = `<i class="fa-solid ${btn.icon}" translate="no"></i> <span translate="yes">${currentText}</span>`;
                element.setAttribute('translate', 'no');
                console.log('🎨 Added icon to', btn.id, 'with text:', currentText);
            }
        } else if (!element) {
            console.warn('⚠️ Button not found:', btn.id);
        } else {
            console.warn('⚠️ Invalid element or missing setAttribute method for:', btn.id);
        }
    });
}

// 调试翻译功能
setTimeout(function() {
    console.log('🔍 翻译系统调试信息:');
    console.log('- 当前语言:', document.documentElement.lang);
    console.log('- 可用翻译:', window.customTranslations);
    console.log('- Google翻译元素:', document.getElementById("google_translate_element"));
    
    // 添加清除翻译缓存的全局函数
    window.clearTranslationCache = function() {
        // 清除所有翻译相关的localStorage数据
        const keysToRemove = [
            'translations_cache',
            'translations_timestamp', 
            'translation_user_preference',
            'customTranslations',
            'translationsLastUpdated'
        ];
        
        let removedCount = 0;
        keysToRemove.forEach(function(key) {
            if (localStorage.getItem(key)) {
                localStorage.removeItem(key);
                removedCount++;
                console.log('🗑️ 已清除:', key);
            }
        });
        
        console.log(`✅ 翻译缓存清除完成！共清除 ${removedCount} 个缓存项`);
        console.log('💡 刷新页面以重新加载翻译数据');
        
        // 可选：自动刷新页面
        if (confirm('翻译缓存已清除！是否要刷新页面以重新加载翻译数据？')) {
            window.location.reload();
        }
    };
    
    console.log('💡 要清除翻译缓存，请在控制台输入: clearTranslationCache()');
    
    // 检查按钮的翻译属性
    ['btn-drink-main', 'btn-service-main'].forEach(function(id) {
        const btn = document.getElementById(id);
        if (btn) {
            console.log(`- ${id} translate属性:`, btn.getAttribute('translate'));
            const span = btn.querySelector('span');
            if (span) {
                console.log(`  文本span translate属性:`, span.getAttribute('translate'));
                console.log(`  文本内容:`, span.textContent);
            }
        }
    });
}, 2000);
</script>

<!-- PWA Handler (Install Prompt) -->
<script src="pwa-handler.js"></script>

<!-- QR Scanner for PWA Mode -->
<script src="qr-scanner.js"></script>

<!-- PWA Service Worker Registration -->
<script>
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
            .then((registration) => {
                console.log('[PWA] Service Worker registered:', registration.scope);

                // Check for updates
                registration.addEventListener('updatefound', () => {
                    const newWorker = registration.installing;
                    newWorker.addEventListener('statechange', () => {
                        if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                            console.log('[PWA] New version available');
                        }
                    });
                });
            })
            .catch((error) => {
                console.log('[PWA] Service Worker registration failed:', error);
            });
    });
}
</script>
</body>

</html>