<div class="container" style="display: block;z-index: 100000;">
    <header class="header">
        <h1>{{ masterTitle }}</h1>
    </header>
    
    <div class="app-container">
        <!-- Master Section -->
        <div class="master-section">
            <div class="master-grid">
                <div class="grid-header">
                    <h3 class="grid-title">Master Bill</h3>
                </div>
                <div class="table-container">
                    <table>
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Qty</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="items in unsplitItems" 
                                :key="items.id"
                                :class="{ selected: selectedMasterItem === items.id }"
                                @click="selectMasterItem(items.id)">
                                <td>{{ items.name }}
                                    <div class="xtoppings-box" v-for="topping in items.toppings">
                                        <div class="cart-toping" v-for="item in topping.items">
                                          <template v-if="item.checked">{{ item.nama_toping }}  {{ item.harga > 0 ? '( +'+item.harga.toLocaleString('id-ID')+' )'  : '' }}</template>
                                        </div>
                                      </div>
                                    <div class="cart-item-note">{{ items.note }}</div>
                                
                                </td>
                                <td>{{ items.quantity }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Control Buttons -->
        <div class="control-buttons">
            <button class="control-button" @click="moveOnePiece">→ Move 1pc</button>
            <button class="control-button" @click="moveEntireMenu">⇒ Move Menu</button>
            <button class="control-button" @click="moveAllItems">⇛ Move All</button>
            <div class="control-spacer"></div>
            <button class="control-button" @click="returnOnePiece">← Return 1pc</button>
            <button class="control-button" @click="returnEntireMenu">⇐ Return Menu</button>
            <button class="control-button" @click="returnAllItems">⇚ Return All</button>
        </div>

        <!-- Split Section -->
        <div class="split-section">
            <div class="split-header">
                <h2>Split Bills</h2>
                <button class="btn btn-primary" @click="addGrid">Add Split Bill</button>
            </div>
            <div class="split-grids">
                <div v-for="code in gridCodes" 
                     :key="code"
                     class="grid"
                     :class="{ 'grid-selected': selectedGridCode === code }">
                    <div class="grid-header">
                        <h3 class="grid-title">Bill {{ code }}</h3>
                        <div class="grid-header-buttons">
                            <button class="btn btn-primary" @click="handleBill(code)">Bill</button>
                            <button class="btn btn-success" @click="handlePayment(code)">Payment</button>
                            <button class="btn btn-danger" @click="removeGrid(code)">Remove</button>
                        </div>
                    </div>
                    <div class="table-container" @click="selectGrid(code)">
                        <table>
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Qty</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="items in getGridItems(code)"
                                    :key="items.id"
                                    :class="{ selected: selectedSplitItem === items.id && selectedGridCode === code }"
                                    @click.stop="selectSplitItem(items.id)">
                                    <td>{{ items.name }}
                                        <div class="xtoppings-box" v-for="topping in items.toppings">
                                            <div class="cart-toping" v-for="item in topping.items">
                                              <template v-if="item.checked">{{ item.nama_toping }}  {{ item.harga > 0 ? '( +'+item.harga.toLocaleString('id-ID')+' )'  : '' }}</template>
                                            </div>
                                          </div>
                                        <div class="cart-item-note">{{ items.note }}</div>
                                    </td>
                                    <td>{{ items.quantity }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
