<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Customer Display</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.47/vue.global.min.js"></script>
    <style>
        /* --- General Styling --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        body {
            background: #1A1A1A;
            color: #FFF;
        }
        .container {
            display: grid;
            grid-template-columns: 65% 35%;
            height: 100vh;
            padding: 20px;
            gap: 20px;
        }
        .order-section {
            background: #2A2A2A;
            border-radius: 15px;
            padding: 11px 20px 17px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .promo-section {
            background: #2A2A2A;
            border-radius: 15px;
            padding: 20px;
            position: relative;
            overflow: hidden;
        }
        .header {
            background: #3A3A3A;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .table-info {
            background: #4A5568;
            padding: 8px 16px;
            border-radius: 8px;
            color: #FFF;
            font-weight: 500;
        }
        .total-amount {
            font-size: 1.6em;
            font-weight: bold;
            color: #4CAF50;
        }
        .order-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            overflow-y: auto;
            flex-grow: 1;
            padding-bottom: 20px;
        }
        .order-item {
            background: #3A3A3A;
            border-radius: 10px;
            transition: all 0.3s ease;
            display: flex;
            overflow: hidden;
            height: 120px;
            position: relative;
        }
        .item-image {
            width: 115px;
            height: 163px;
            object-fit: cover;
            flex-shrink: 0;
            overflow: hidden;
            margin-top: -23px;
        }
        .item-details {
            padding: 10px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        .item-name {
            font-weight: bold;
            margin-bottom: 3px;
            font-size: 1.1em;
        }
        .item-toppings {
            font-size: 0.8em;
            color: #AAA;
            margin-bottom: 5px;
            flex-grow: 1;
            overflow: hidden;
        }
        .item-discount-per-item {
            font-size: 0.8em;
            color: #F44336;
            font-weight: bold;
            margin-bottom: 3px;
        }
        .item-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .item-price {
            color: #4CAF50;
            font-weight: bold;
        }
        .item-discount-value {
            color: #FF5722;
            font-weight: bold;
            font-size: 0.9em;
            margin-right: 10px;
        }
        .quantity {
            background: #4CAF50;
            color: white;
            padding: 3px 8px;
            border-radius: 5px;
            text-align: center;
            font-weight: bold;
        }
        .summary-section {
            background: #3A3A3A;
            border-radius: 10px;
            padding: 6px 13px 1px 15px;
            margin-top: 10px;
        }
        .summary-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;
        }
        .summary-row.total {
            font-weight: bold;
            font-size: 1.9em;
            color: #4CAF50;
            border-top: 1px solid #555;
            padding-top: 0px;
            margin-top: 10px;
        }
        .discount-label {
            color: #F44336;
        }
        .discount-value {
            color: #F44336;
            font-weight: bold;
        }
        .promo-slider { height: 100%; position: relative; }
        .promo-slide { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; }
        .promo-slide.active { opacity: 1; }
        .promo-title { font-size: 3.6em; margin-bottom: 20px; color: #4CAF50; }
        .promo-text { font-size: 1.7em; line-height: 1.6; color: #DDD; }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #2A2A2A; }
        ::-webkit-scrollbar-thumb { background: #4CAF50; border-radius: 4px; }
        .no-orders { text-align: center; padding: 40px 20px; color: #888; font-size: 1.2em; grid-column: 1 / -1; }

        /* --- Popup Styling --- */
        .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10000;
        }
        .popup-content {
            background: #3A3A3A;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            width: 450px;
        }
        .payment-popup {
            background: #1A1A1A;
            border: 3px solid #4CAF50;
            padding: 40px;
        }
        .payment-popup-title {
            color: #4CAF50;
            text-align: center;
            margin-bottom: 20px;
            font-size: 2em;
        }
        .payment-detail-title {
            color: #FFF;
            font-size: 1.2em;
            margin-top: 15px;
            margin-bottom: 10px;
        }
        .total-transaction {
            font-size: 1.5em;
            color: #FFF;
            font-weight: bold;
        }
        .change-row {
            margin-top: 20px;
            border-top: 2px solid #555;
            padding-top: 15px;
            font-size: 2em;
            font-weight: bold;
        }
        .change-amount {
            color: #FFD700; 
        }
        .payment-divider {
            border-color: #555;
            margin: 15px 0;
        }
        .thank-you {
            text-align: center;
            color: #4CAF50;
            font-size: 1.8em;
            margin-top: 30px;
            text-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
        }
        /* Zoom Animation */
        .zoom-animation .popup-content {
            animation: zoomIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        @keyframes zoomIn {
            from {
                opacity: 0;
                transform: scale(0.8);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="order-section">
                <div class="header">
                    <h2>Current Orders</h2>
                    <div class="table-info">Table: {{ displayData.meja || '-' }}</div>
                    <div class="total-amount">Total: Rp {{ totalAmount.toLocaleString('id-ID') }}</div>
                </div>
                
                <div class="order-list" ref="orderListEl">
                    <div v-if="filteredCart.length === 0" class="no-orders">
                        No active orders
                    </div>
                    <div v-for="(item, index) in filteredCart" 
                         :key="index" 
                         class="order-item">
                        <img :src="item.image || 'https://via.placeholder.com/120x120?text=No+Image'" 
                             alt="Menu Item" 
                             class="item-image">
                        <div class="item-details">
                            <div class="item-name">{{ item.name }}</div>
                            <div v-if="(item.discp > 0 || item.discr > 0) && item.dname" class="item-discount-per-item">
                                Diskon: {{ item.dname }}
                            </div>

                            <div class="item-toppings">
                                <div v-if="item.toppings && item.toppings.length > 0">
                                    <div v-for="topping in item.toppings" :key="topping.toping">
                                        <template v-for="tp in topping.items">
                                            <span v-if="tp.checked">
                                                {{ tp.nama_toping }} {{ tp.price > 0 ? '(+' + tp.price.toLocaleString('id-ID') + ')' : '' }}
                                            </span>
                                        </template>
                                    </div>
                                </div>
                                <div v-else>No toppings</div>
                            </div>

                            <div class="item-footer">
                                <div class="item-price">Rp {{ Math.round((parseFloat(item.price) * item.quantity)).toLocaleString('id-ID') }}</div>
                                <div v-if="item.disc > 0" class="item-discount-value">
                                    - Rp {{ Math.round(item.disc).toLocaleString('id-ID') }}
                                </div>
                                <div class="quantity">{{ item.quantity }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="summary-section" v-if="filteredCart.length > 0 && displayData.totals">
                    <div class="summary-row">
                        <span>Subtotal:</span>
                        <span>Rp {{ displayData.totals.subtotal.toLocaleString('id-ID') }}</span>
                    </div>

                    <div v-if="displayData.totals.totalDiscount > displayData.totals.diskonFaktur" class="summary-row">
                        <span class="discount-label">Diskon Item:</span>
                        <span class="discount-value">- Rp {{ (displayData.totals.totalDiscount - (displayData.totals.diskonFaktur || 0)).toLocaleString('id-ID') }}</span>
                    </div>
                    
                    <div v-if="displayData.totals.diskonFaktur > 0" class="summary-row">
                        <span class="discount-label">Diskon Faktur:</span>
                        <span class="discount-value">- Rp {{ displayData.totals.diskonFaktur.toLocaleString('id-ID') }}</span>
                    </div>
                    
                    <div class="summary-row">
                        <span>Service (5%):</span>
                        <span>Rp {{ displayData.totals.service.toLocaleString('id-ID') }}</span>
                    </div>
                    <div class="summary-row">
                        <span>Tax (10%):</span>
                        <span>Rp {{ displayData.totals.tax.toLocaleString('id-ID') }}</span>
                    </div>
                    <div class="summary-row total">
                        <span>Total:</span>
                        <span>Rp {{ displayData.totals.grandTotal.toLocaleString('id-ID') }}</span>
                    </div>
                </div>
            </div>
            
            <div class="promo-section">
                <div class="promo-slider">
                    <div v-for="(promo, index) in promos" 
                         :key="index"
                         class="promo-slide"
                         :class="{ active: currentPromo === index }">
                        <h2 class="promo-title">{{ promo.title }}</h2>
                        <p class="promo-text">{{ promo.description }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="showTotalsPopup" class="popup-overlay">
            <div class="popup-content">
                <h3>Ringkasan Belanja</h3>
                <div class="summary-row">
                    <span>Subtotal:</span>
                    <span>Rp {{ displayData.totals.subtotal.toLocaleString('id-ID') }}</span>
                </div>
                <div class="summary-row">
                    <span>Diskon:</span>
                    <span>- Rp {{ displayData.totals.totalDiscount.toLocaleString('id-ID') }}</span>
                </div>
                <div class="summary-row">
                    <span>Service:</span>
                    <span>Rp {{ displayData.totals.service.toLocaleString('id-ID') }}</span>
                </div>
                <div class="summary-row">
                    <span>Pajak:</span>
                    <span>Rp {{ displayData.totals.tax.toLocaleString('id-ID') }}</span>
                </div>
                <div class="summary-row total">
                    <span>Total:</span>
                    <span>Rp {{ displayData.totals.grandTotal.toLocaleString('id-ID') }}</span>
                </div>
                <button @click="showTotalsPopup = false">Tutup</button>
            </div>
        </div>

        <div v-if="showPaymentPopup" class="popup-overlay zoom-animation">
            <div class="popup-content payment-popup">
                <h3 class="payment-popup-title">Detail Transaksi & Pembayaran</h3>
                <hr>
                
                <div class="summary-row total-transaction">
                    <span>Total Belanja:</span>
                    <span>Rp {{ displayData.totals.grandTotal.toLocaleString('id-ID') }}</span>
                </div>
                
                <hr class="payment-divider">
                
                <h4 class="payment-detail-title">Rincian Pembayaran:</h4>
                <div v-for="payment in paymentBreakdown" :key="payment.name" class="summary-row payment-item">
                    <span>{{ payment.name }}:</span>
                    <span>Rp {{ payment.amount.toLocaleString('id-ID') }}</span>
                </div>

                <hr class="payment-divider">

                <div class="summary-row change-row">
                    <span>Kembalian:</span>
                    <span class="change-amount">Rp {{ Math.abs(displayData.totals.change).toLocaleString('id-ID') }}</span>
                </div>
                
                <p class="thank-you">Terima Kasih!</p>
            </div>
        </div>
    </div>
    

<script>
        let xpos = JSON.parse(localStorage.getItem('xpos')) || {};
        var BASE_URL = xpos.BASE_URL || "http://localhost/bener/pos2/";
        xcab = xpos.cab;
        xbrand = xpos.brand;
 
    const { createApp, ref, computed, onMounted, watch, nextTick } = Vue;

    createApp({
        setup() {
            // --- STATE MANAGEMENT ---
            const displayData = ref({
                meja: '',
                cart: [],
                totals: null
            });
            const showTotalsPopup = ref(false);
            const showPaymentPopup = ref(false);
            const paymentTimeoutId = ref(null);
            const orderListEl = ref(null);

            // --- PROMOTIONS ---
            const promos = ref([
                 { title: 'Selamat Datang', description: 'Nikmati Makanan Terbaik di Kota Ini.' },
                 { title: 'Promo Spesial Hari Ini', description: 'Dapatkan diskon 20% untuk semua menu steak!' }
            ]);
            const currentPromo = ref(0);

            // --- COMPUTED PROPERTIES ---
            const filteredCart = computed(() => {
                return displayData.value.cart.filter(item => !item.payment || (item.payment === '06' && item.harga < 0));
            });

            const calculateCartSubtotal = (cart) => {
                if (!cart || cart.length === 0) return 0;

                let subtotal = cart.reduce((sum, item) => {
                    let itemTotal = parseFloat(item.price) * item.quantity;
                    if (item.toppings && item.toppings.length > 0) {
                        item.toppings.forEach(toppingGroup => {
                            toppingGroup.items.forEach(tp => {
                                if (tp.checked) {
                                    itemTotal += parseFloat(tp.price) * item.quantity;
                                }
                            });
                        });
                    }
                    return sum + Math.round(itemTotal);
                }, 0);

                return subtotal;
            };

            const totalAmount = computed(() => {
                if (displayData.value.totals && displayData.value.totals.grandTotal !== undefined) {
                    return displayData.value.totals.grandTotal;
                }
                return calculateCartSubtotal(filteredCart.value);
            });

            // Hitung detail pembayaran untuk popup
            const paymentBreakdown = computed(() => {
                const summary = {};
                // Filter item yang merupakan item pembayaran (payment tidak kosong dan bukan diskon faktur '06')
                const paymentItems = displayData.value.cart.filter(item => item.payment && item.payment !== '06');

                paymentItems.forEach(item => {
                    const name = item.name.toUpperCase();
                    if (!summary[name]) {
                        summary[name] = 0;
                    }
                    // Harga di sini adalah nominal yang dimasukkan kasir sebelum dikurangi kembalian
                    summary[name] += Math.round(item.harga);
                });

                return Object.keys(summary).map(name => ({
                    name: name,
                    amount: summary[name]
                }));
            });


            // --- CORE LOGIC ---
  // File: second.html -> setup() -> updateFromLocalStorage

const updateFromLocalStorage = () => {
    const data = localStorage.getItem('secondDisplay');
    if (!data) return;

    try {
        const parsed = JSON.parse(data);
        
        // --- LOGIKA SMART DISPLAY BARU ---
        
        // Cek apakah ada perintah yang terkait dengan popup pembayaran
        if (parsed.command === 'showPayment') {
            if (parsed.payload) displayData.value = parsed.payload;
            showTotalsPopup.value = false;
            showPaymentPopup.value = true;
            // Hapus timer otomatis karena penutupan dikontrol oleh POS
            if (paymentTimeoutId.value) clearTimeout(paymentTimeoutId.value);
            return; // Hentikan pemrosesan
        } 
        
        if (parsed.command === 'hidePayment') {
            // Perintah dari POS untuk menutup popup dan mereset tampilan
            showPaymentPopup.value = false;
            showTotalsPopup.value = false;
            if (paymentTimeoutId.value) clearTimeout(paymentTimeoutId.value);
            
            // Opsional: Reset data tampilan ke kosong setelah penutupan akhir
            if (!parsed.payload || (parsed.payload && parsed.payload.cart.length === 0)) {
                 displayData.value = { meja: '', cart: [], totals: null };
            }
            return; // Hentikan pemrosesan
        }

        // Jika bukan perintah showPayment/hidePayment, asumsikan ini adalah update order biasa ('default'/'update')
        if (parsed.payload) {
            displayData.value = parsed.payload;
        }
        
        // Pastikan popup total ditutup jika ada update order biasa
        if (parsed.command === 'default' && showTotalsPopup.value) {
            showTotalsPopup.value = false;
        }
        
    } catch (e) {
        console.error('Error parsing localStorage data', e);
    }
};

            // --- LIFECYCLE & WATCHERS ---
            onMounted(() => {
                updateFromLocalStorage();
                window.addEventListener('storage', updateFromLocalStorage);
                setInterval(() => {
                    currentPromo.value = (currentPromo.value + 1) % promos.value.length;
                }, 5000);
            });

            watch(filteredCart, (newCart, oldCart) => {
                if (orderListEl.value && newCart.length > (oldCart ? oldCart.length : 0)) {
                    nextTick(() => {
                        orderListEl.value.scrollTo({
                            top: orderListEl.value.scrollHeight,
                            behavior: 'smooth'
                        });
                    });
                }
            }, { deep: true });

            return {
                displayData,
                filteredCart,
                promos,
                currentPromo,
                showTotalsPopup,
                showPaymentPopup,
                orderListEl,
                totalAmount,
                paymentBreakdown
            };
        }
    }).mount('#app');
</script>
</body>
</html>