<!DOCTYPE html>
<html lang="en">
  <!-- {{bh.[bhs]}} -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>POS Kasir Restoran</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="stylesheet" href="kitchen.css">
  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="index2.css">
  <link rel="stylesheet" href="split.css">
  <script src="jquery-3.6.4.min.js"></script>
  <script src="crud.js"></script>
  <script src="kirim.js"></script>
  <script src="print_manager.js"></script>
  <script src="report.js"></script>
  <script src="pos_bill.js"></script> 
  <script src="kitchen.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
   
<style>
    .report-iframe-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .report-iframe-container iframe {
        width: 95%;
        height: 95%;
        max-width: 1200px;
        background-color: white;
        border-radius: 8px;
    }



        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            
            font-family: 'Arial', sans-serif;
            overflow: hidden;
        } */

        .loading-container {
            text-align: center;
        }

        .loading-text {
            font-size: 2rem;
            color: rgb(230, 230, 230);
            margin-bottom: 2rem;
            font-weight: 300;
            letter-spacing: 2px;
            animation: fadeInOut 2s ease-in-out infinite;
        }

        .loading-dots {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 3rem;
        }

        .dot {
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            animation: bounce 1.4s ease-in-out infinite both;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
        }

        .dot:nth-child(1) { animation-delay: -0.32s; }
        .dot:nth-child(2) { animation-delay: -0.16s; }
        .dot:nth-child(3) { animation-delay: 0; }

        .loading-bar {
            width: 200px;
            height: 4px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 2px;
            overflow: hidden;
            margin: 0 auto;
        }

        .loading-progress {
            height: 100%;
            background: linear-gradient(90deg, #fff, #f0f0f0);
            border-radius: 2px;
            animation: progress 3.5s ease-in-out forwards;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
        }

        @keyframes fadeInOut {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        @keyframes bounce {
            0%, 80%, 100% {
                transform: scale(0.8);
                opacity: 0.5;
            }
            40% {
                transform: scale(1.2);
                opacity: 1;
            }
        }

        @keyframes progress {
            0% { width: 0%; }
            100% { width: 100%; }
        }

        .content {
            display: none;
            opacity: 0;
            transition: opacity 0.5s ease-in;
        }

        .content.show {
            display: block;
            opacity: 1;
        }










/* License Modal Styles */
.license-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 100000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.license-modal-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    max-width: 90vw;
    max-height: 90vh;
    width: 700px;
    height: 600px;
    display: flex;
    flex-direction: column;
    animation: slideIn 0.4s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.license-modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 25px;
    border-radius: 20px 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.license-modal-header h3 {
    margin: 0;
    font-size: 1.3em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.license-modal-header h3 i {
    color: #ffd700;
    font-size: 1.2em;
}

.license-modal-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.5em;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.license-modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.license-modal-body {
    flex: 1;
    padding: 0;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
}

.license-modal-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0 0 20px 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .license-modal-container {
        width: 95vw;
        height: 85vh;
        margin: 10px;
    }
    
    .license-modal-header {
        padding: 15px 20px;
    }
    
    .license-modal-header h3 {
        font-size: 1.1em;
    }
}



  
</style>
 </head>

<body>


    <div class="loading-container" id="loading" >
        <div class="loading-text">LOADING</div>
        <div class="loading-dots">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="loading-bar">
            <div class="loading-progress"></div>
        </div>
    </div>


    <script>
        document.documentElement.style.backgroundColor = '#000033';
        // Simulasi loading 3.5 detik
        setTimeout(() => {
            // document.documentElement.style.backgroundColor = '#E1E0E0';
            document.getElementById('loading').style.display = 'none';
            document.getElementById('content').classList.add('show');
        }, 1000);
    </script>



    <div id="main-content" style="position: absolute; top: 0px; left: -1000px; width: 10px; height: 100px; overflow: scroll; background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('image/login.jpg');" >
        <button id="close-button">Tutup</button>
        <div id="image-container">
            <p class="loading-message">Memuat gambar...</p>
        </div>
    </div>
  

  <div id="app" style="display:none">


    

    

<div v-if="showAdjustModal" class="kiosk-modal-overlay"> <div class="kiosk-modal-container">
        <div class="kiosk-modal-header">
            <h3><i class="fas fa-edit"></i> Pilih Transaksi untuk Disesuaikan</h3>
            <button @click="showAdjustModal = false" class="kiosk-close-btn">&times;</button>
        </div>
        <div class="kiosk-modal-body">
            <div class="kiosk-table-container">
                <div v-if="adjustIsLoading" class="kiosk-loading">
                    <div class="spinner"></div>
                    <span>Memuat data transaksi...</span>
                </div>
                <table v-else>
                    <thead>
                        <tr>
                            <th>Tanggal</th>
                            <th>Nomor Transaksi</th>
                            <th>Jumlah</th>
                            <th>Kasir</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-if="adjustTransactions.length === 0">
                            <td colspan="4">Tidak ada transaksi ditemukan.</td>
                        </tr>
                        <tr v-for="trx in adjustTransactions" :key="trx.nomor" @click="selectTransactionForAdjust(trx)">
                            <td>{{ new Date(trx.tanggal).toLocaleDateString('id-ID') }}</td>
                            <td>{{ trx.nomor }}</td>
                            <td>Rp {{ Number(trx.jumlah).toLocaleString('id-ID') }}</td>
                            <td>{{ trx.user }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>    



<div id="transactionSummaryModal" class="report-modal-overlay" style="display:none; z-index: 50000;">
    <div class="report-modal-content transaction-summary-content">
        <div class="confirm-header">
            <h3><i class="fas fa-money-check-alt"></i> Info Transaksi Berhasil</h3>
            <button @click="closeTransactionSummary()" class="confirm-close-btn">&times;</button>
        </div>
        <div class="confirm-body">
            <div class="confirm-row">
                <span class="confirm-label">No. Transaksi:</span>
                <span class="confirm-value highlight">{{ sbill.nomor }}</span>
            </div>
            <hr>
 <div class="confirm-row total-transaction">
    <span class="confirm-label">Total Belanja:</span>
    <span class="confirm-value">Rp {{ Math.round(sbill.total).toLocaleString('id-ID') }}</span>
</div>
<hr class="payment-divider">

<h4 style="margin-top: 10px; color: #7f8c8d;">Rincian Pembayaran:</h4>



<div v-for="payment in sbill.paymentBreakdown" :key="payment.name" class="confirm-row">
    <span class="confirm-label">{{ payment.name }}:</span>
    <span class="confirm-value">Rp {{ Math.round(payment.amount).toLocaleString('id-ID') }}</span>
</div>
<hr class="payment-divider">

<div class="confirm-row change-row">
    <span class="confirm-label">Kembalian:</span>
    <span class="confirm-value highlight">Rp {{ Math.abs(Math.round(sbill.kembalian)).toLocaleString('id-ID') }}</span>
</div>
        </div>
        
        <div class="confirm-actions">
            <button @click="closeTransactionSummary()" class="confirm-btn btn-primary">
                <i class="fas fa-undo"></i> Close & Kembali ke Meja
            </button>
        </div>
    </div>
</div>

<div v-if="showKioskModal" class="kiosk-modal-overlay">
    <div class="kiosk-modal-container">
        <div class="kiosk-modal-header">
            <h3><i class="fas fa-tablet-alt"></i> Baca Transaksi Kiosk</h3>
            <button @click="showKioskModal = false" class="kiosk-close-btn">&times;</button>
        </div>
        <div class="kiosk-modal-body">
            <div class="kiosk-search-bar">
                <input type="text" v-model="kioskSearchTerm" placeholder="Cari berdasarkan Kode Transaksi...">
            </div>
            <div class="kiosk-table-container">
                <div v-if="kioskIsLoading" class="kiosk-loading">
                    <div class="spinner"></div>
                    <span>Memuat data...</span>
                </div>
                <table v-else>
                    <thead>
                        <tr>
                            <th>Kode Transaksi</th>
                            <th>Nama Pelanggan</th>
                            <th>Total</th>
                            <th>Waktu</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-if="filteredKioskTransactions.length === 0">
                            <td colspan="4">Tidak ada transaksi ditemukan.</td>
                        </tr>
                        <tr v-for="trx in filteredKioskTransactions" :key="trx.id" @click="selectKioskTransaction(trx)">
                            <td>{{ trx.transaction_code }}</td>
                            <td>{{ trx.customer_name || '-' }}</td>
                            <td>Rp {{ Number(trx.total_amount).toLocaleString('id-ID') }}</td>
                            <td>{{ new Date(trx.created_at).toLocaleString('id-ID') }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


    <div class="burger-menu" onclick="toggleMenu()">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>

    <div class="jam"> {{jam}}</div> 

<div class="judul" @click="test()">
  <div id="message" class="message" style="z-index: 10000;"></div>
      <div id="jam"></div>
</div>    

<div id="passwordModal" class="report-modal-overlay" style="display:none;">
    <div class="report-modal-content">
        <iframe id="passwordFrame" src="" frameborder="0"></iframe>
    </div>
</div>    

 <div id="reportModal" class="report-modal-overlay" style="display:none;z-index: 40000;">
    <div class="report-modal-content">
        <button onclick="closeReportModal()" class="report-modal-close-btn">&times; Tutup Laporan</button>
        <iframe id="reportFrame" src="" frameborder="0"></iframe>
    </div>
</div>

<div v-if="showReportIframe" class="report-iframe-container">
    <iframe :src="reportIframeUrl" frameborder="0"></iframe>
</div>
   
        <div v-if="p_tampilkan_modal" class="p_modal-overlay" style="z-index: 99999;">
          <div class="p_modal-container">
            <div class="p_modal-content">
              <div class="p_modal-icon" :class="p_modalIconClass"></div>
              <div class="p_modal-message">{{ p_pesan_modal }}</div>
                <div v-if="p_tipe_modal == 'confirm'">
                    <button @click="p_handleConfirm(true)" class="p_modal-button p_confirm">Ya</button>
                    <button @click="p_handleConfirm(false)" class="p_modal-button p_cancel">Tidak</button>
                </div> 
                <button @click="p_closeModal" class="p_modal-button">OK</button>
             </div>
    
          </div>
        </div>
    
    <select v-model="bhs" style="z-index: 99999999;position: absolute;" class="bhs">
      <button>你好</button>
      <option value="ind">Indonesian</option>
      <option value="eng">English</option>
      <option value="chn">Chinese</option>
      <option value="jpn">Japanese</option>
      <option value="arb">Arabic</option>
    </select>


    <div class="menu" id="menu">
      <a href="#" onclick="menu('Menu Item')">Menu Item</a>
      <a href="#" onclick="menu('Category')">Category</a>
      <a href="#" onclick="menu('Top')">Top</a>
      <a href="#" onclick="menu('Lantai')">Lantai</a>
      <a href="#" onclick="menu('Report')">Report</a>
      <a href="#" onclick="menu('Disc')">Discount</a>
      <a href="#" onclick="menu('Setup')">Setup</a>
      <a href="#" onclick="cancelxMenu()">Cancel</a>
    </div>

    

    <div id="frame-modal">
      <div id="frame-kichen">
        
        <!-- Area ini akan berisi preview dan bisa di-scroll ke samping -->
        <div id="preview-scroll-area">
          <div id="preview-container">
            <!-- Konten preview akan dimasukkan oleh JavaScript di sini -->
          </div>
        </div>
    
        <!-- Area ini berisi tombol-tombol dan posisinya tetap di kanan -->
        <div id="preview-controls">
          <button id="masterPrintBtn">Kirim Semua Pesanan</button>
          <button id="closePreviewBtn" onclick="closePreviewModal()">Tutup</button>
        </div>
    
      </div>
    </div>

    

    <div class="modal-overlay" id="modalOverlay" style="z-index: 10000000000;">
      <!-- Modal Content -->
      <div class="bill-container">
          <h1>Restaurant Bill</h1>
          <div id="billDisplay" class="bill-content">Loading bill...</div>
          <button class="modal-btn" onclick="document.getElementById('modalOverlay').style.display = 'none';">OK</button>
      </div>
      </div>    

    <div class="toggle-button"  @click="showx" style=" width: 50px;
    height: 50px;
    background-color: lightblue;
    display: none;
    justify-content: center;
    z-index: 100000;
    position:absolute;
    align-items: center;
    cursor: pointer;
    border: 2px solid darkblue;">
          <!-- <button class="toggle-button" @click="toggleVisibility">
            {{ isVisible ? 'Sembunyikan' : 'Tampilkan' }} Appz
        </button>   -->
  </div>



      
  <div v-if="showSplit"  id="split" class="split-modal">
        <div class="split-container" style="display: block;z-index: 100000;">
          <header class="split-header">
              <!-- <h1>{{ masterTitle }}</h1> -->
              <h2>Split Bills</h2>
              <button class="split-btn split-btn-primary" @click="addGrid">Add Split Bill</button>              
          </header>
          
          <div class="split-app-container">
              <!-- Master Section -->
              <div class="split-master-section">
                  <div class="split-master-grid">
                      <div class="split-grid-header">
                         <button class="split-close" @click="xfungsi('split_ok')">Close</button>
                          <h3 class="split-grid-title">Master Bill</h3>
                      </div>
                      <div class="split-table-container">
                          <table>
                              <thead>
                                  <tr>
                                      <th>Name</th>
                                      <th style="text-align: center;">Qty</th>
                                  </tr>
                              </thead>
                              <tbody>
                                  <tr v-for="items in unsplitItems" 
                                      :key="items.id"
                                      :class="{ 'split-selected': selectedMasterItem === items.id }"
                                      @click="selectMasterItem(items.id)">
                                      <td>{{ items.name }}
                                          <div class="split-xtoppings-box" v-for="topping in items.toppings">
                                              <div class="split-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="split-cart-item-note">{{ items.note }}</div>
                                      </td>
                                      <td style="text-align: center;">{{ items.quantity }}</td>
                                  </tr>
                              </tbody>
                          </table>
                      </div>
                  </div>
              </div>
      
              <!-- Control Buttons -->
              <div class="split-control-buttons">
                <button class="split-control-button" @click="moveOnePiece">
                    Move 1pc
                    <span class="arrow-icon">→</span>
                </button>
                <button class="split-control-button" @click="moveEntireMenu">
                    Move Menu
                    <span class="arrow-icon">⇒</span>
                </button>
                <button class="split-control-button" @click="moveAllItems">
                    Move All
                    <span class="arrow-icon">⇛</span>
                </button>
                <div class="split-control-spacer"></div>
                <button class="split-control-buttonb" @click="returnOnePiece">
                    Return 1pc
                    <span class="arrow-icon">←</span>
                </button>
                <button class="split-control-buttonb" @click="returnEntireMenu">
                    Return Menu
                    <span class="arrow-icon">⇐</span>
                </button>
                <button class="split-control-buttonb" @click="returnAllItems">
                    Return All
                    <span class="arrow-icon">⇚</span>
                </button>
                <div class="split-control-spacer"></div>
                <button class="split-control-button2" @click="xfungsi('split_ok')">Close</button>
                <!-- <button class="split-control-button2" @click="showSplit=!showSplit">Cancel</button> -->
            </div>
            
      
              <!-- Split Section -->
              <div class="split-section">
                  <div class="split-header">

                  </div>
                  <div class="sp-grids">
                      <div v-for="code in gridCodes" 
                           :key="code"
                           class="split-grid"
                           :class="{ 'split-grid-selected': selectedGridCode === code }">
                          <div class="split-grid-header" @click="selectGrid(code)">
                              <h3 class="split-grid-title" @click="selectGrid(code)" >Bill {{ code }}  </h3>
                              <div class="split-grid-header-buttons">
                                  <!-- <button class="split-btn split-btn-primary" @click="handleBill(code)">Bill</button> -->
                                  <button class="split-btn split-btn-success" @click="selectGrid(code);handlePayment(code)">Payment</button>
                                  <button class="split-btn split-btn-danger" @click="selectGrid(code);removeGrid(code)">Remove</button>
                              </div>
                          </div>
                          <div class="split-table-container" @click="selectGrid(code)">
                              <table>
                                  <thead>
                                      <tr>
                                          <th>Name</th>
                                          <th style="text-align: center;">Qty</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                      <tr v-for="items in getGridItems(code)"
                                          :key="items.id"
                                          :class="{ 'split-selected': selectedSplitItem === items.id && selectedGridCode === code }"
                                          @click.stop="selectSplitItem(items.id)">
                                          <td  @click="selectGrid(code)">{{ items.name }}
                                              <div class="split-xtoppings-box" v-for="topping in items.toppings">
                                                  <div class="split-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="split-cart-item-note">{{ items.note }}</div>
                                          </td>
                                          <td style="text-align: center;">{{ items.quantity }}</td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
           
      
       </div>

 <div v-if="showPopup" class="mm-overlay" >
    <div class="mm-popup">
        <div class="mm-header">
            <h3 class="mm-title">Menu Options</h3>
            <button @click="showPopup = false" class="mm-close-btn">×</button>
        </div>
        <div class="mm-content">
            <div class="mm-button-grid">
                <button 
                    v-for="item in fungsi3" 
                    :key="item.id"
                    @click="xfungsi(item.fungsi)"
                    class="mm-btn">
                    <span v-if="!item.fungsi || item.fungsi.trim() === ''" 
                          style="na">
                          N/A
                    </span>
                    {{ item[this.bhs] }}
                </button>
            </div>
        </div>
    </div>
</div>

<div v-if="showPopupm" class="xmm-overlay" >
    <div class="mm-popup">
        <div class="mm-header">
            <h3 class="mm-title">Menu Options</h3>
            <button @click="showPopupm = false" class="mm-close-btn">×</button>
        </div>
        <div class="mm-content">
            <div class="mm-button-grid">
                <button 
                    v-for="item in fungsim" 
                    :key="item.id"
                    @click="xfungsi(item.fungsi)"
                    class="mm-btn">
                    <span v-if="!item.fungsi || item.fungsi.trim() === ''" 
                          class="na">
                          N/A
                    </span>
                    {{ item[this.bhs] }}
                </button>
            </div>
        </div>
    </div>
</div>
        
<div class="modal" v-if="isVisible">
<div id="appz" style="z-index: 1000000;position:absolute;">


  <div class="pp-judulkiri">
    table {{mejao.nama}}
  </div>
  <div class="pp-judul">
    Move Item
  </div>
  <div class="pp-judulkanan">
    table {{mejakanan}}
  </div>


  <div class="pp-container">
      <div class="pp-grid-container">
          <div class="pp-grid-header">
              <div class="pp-namax">Name</div>
              <div class="pp-quantityx">Qty</div>
          </div>
          <div class="pp-grid-content">
              <ul>
                  <li v-for="(item, index) in pesant" 
                      :key="item.id" 
                      @click="selectItem(index, 'left')"
                      class="pp-grid-item"
                      :class="{ 'pp-selected': selectedLeft === index }">
                      <div class="pp-nama">{{ item.name }}<br>

                        <div class="split-xtoppings-box" v-for="topping in item.toppings">
                          <div class="split-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="split-cart-item-note">{{ item.note }}</div>
  

                      </div>

                    

                      <div class="pp-quantity">{{ item.quantity }}</div>
                  </li>
              </ul>
          </div>
      </div>

      <div class="pp-controls">
        <button @click="moveRightOne">
          Pindah Kanan (pcs) →
        </button>
        <button @click="moveRightItem">
          Pindah Kanan (menu) ⇒
        </button>
        <button @click="moveRightAll">
          Pindah Kanan (ALL) ⇒⇒
        </button>
        <div class="pp-tengah">--</div>
        <button @click="moveLeftOne" class="pp-bawah">
          ← Pindah Kiri (pcs)
        </button>
        <button @click="moveLeftItem" class="pp-bawah">
          ⇐ Pindah Kiri (menu)
        </button>
        <button @click="moveLeftAll" class="pp-bawah">
          ⇐⇐ Pindah Kiri (ALL)
        </button>
        <div class="pp-ok">
          <button @click="save_ok"  class="ok_split">
            Save
          </button>
          <button @click="cancel_ok" class="pp-cancel">
            Cancel
          </button>
        </div>
      </div>

      <div class="pp-grid-container">
          <div class="pp-grid-header">
            <div class="pp-namax">Name</div>
            <div class="pp-quantityx">Qty</div>
          </div>
          <div class="pp-grid-content">
              <ul>
                  <li v-for="(item, index) in pesanp" 
                      :key="item.id" 
                      @click="selectItem(index, 'right')"
                      class="pp-grid-item"
                      :class="{ 'pp-selected': selectedRight === index }">
                      <div class="pp-nama">{{ item.name }}

                        <div class="split-xtoppings-box" v-for="topping in item.toppings">
                          <div class="split-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="split-cart-item-note">{{ item.note }}</div>

                      </div>
                      <div class="pp-quantity">{{ item.quantity }}</div>
                  </li>
              </ul>
          </div>
      </div>
  </div>
</div>
</div>





<div class="acustom-modal" id="confirmModal" v-show="shoconfbayar">
  <div class="confirm-modal-container">
    <!-- Header -->
    <div class="confirm-header">
      <h3><i class="fas fa-receipt"></i> Konfirmasi Pembayaran</h3>
      <button @click="hideConfirm()" class="confirm-close-btn">&times;</button>
    </div>

    <!-- Body -->
    <div class="confirm-body">
      <div class="confirm-row">
        <span class="confirm-label">Total Belanja:</span>
        <span class="confirm-value">Rp {{ Math.round(cartSubtotal).toLocaleString('id-ID') }}</span>
      </div>

      <div v-if="xtdiscf > 0" class="confirm-row">
        <span class="confirm-label">Diskon Faktur:</span>
        <span class="confirm-value" style="color: #e74c3c;">- Rp {{ Math.round(xtdiscf).toLocaleString('id-ID')
          }}</span>
      </div>
      <!-- <div v-if="xcash > 0" class="confirm-row">
        <span class="confirm-label">Tunai (Cash):</span>
        <span class="confirm-value">Rp {{ Math.round(xcash).toLocaleString('id-ID') }}</span>
      </div> -->
      <div v-for="payment in paymentBreakdown" :key="payment.name" class="confirm-row">
        <span class="confirm-label">{{ payment.name }}:</span>
        <span class="confirm-value">Rp {{ Math.round(payment.amount).toLocaleString('id-ID') }}</span>
      </div>

      <div class="confirm-row">
        <span class="confirm-label">Kembalian:</span>
        <span class="confirm-value highlight">Rp {{ Math.abs(Math.round(xkembali)).toLocaleString('id-ID') }}</span>
      </div>

      <div class="confirm-info">
        <i class="fas fa-info-circle"></i>
        <span>Apakah Anda yakin ingin menutup transaksi dan mencetak struk?</span>
      </div>
    </div>

        <!-- Actions -->
        <div class="confirm-actions">
            <button @click="xfungsi('tutup_batal')" class="confirm-btn btn-secondary">
                <i class="fas fa-times"></i> Batal
            </button>
            <button id="btn-tutup-ok" @click="xfungsi('tutup_ok')" class="confirm-btn btn-primary">
                <i class="fas fa-check"></i> Konfirmasi & Cetak
            </button>
        </div>

        <!-- Footer -->
        <div class="confirm-footer">
            <span>Transaksi #{{ no_jual }}</span>
        </div>
    </div>
</div>



<div id="overlogin" class="overlay">
    <div class="info-block top-left">
        <h3>{{pos.nama}}</h3>
        <p>{{pos.ket}}</p>
    </div>


    

<!-- Panel Lisensi -->
<div class="info-block license-panel">
    <div class="license-header">
        <h4><i class="fas fa-key"></i> Status Lisensi</h4>
    </div>
    <div class="license-content">
        <div class="license-row">
            <span class="license-label">ID Mesin:</span>
            <code id="license-id" class="license-id">Loading...</code>
        </div>
        <div class="license-row">
            <span class="license-label">Status:</span>
            <div id="license-status" class="license-status">Loading...</div>
        </div>
        <div class="license-actions">
            <button onclick="bukaModalVoucher()" class="license-btn primary">
                <i class="fas fa-ticket-alt"></i> Isi Voucher
            </button>
            <button onclick="kurangiMasaAktif()" class="license-btn secondary">
                <i class="fas fa-minus"></i> Test -1 Hari
            </button>
        </div>
    </div>
</div>

<div id="license-modal-overlay" class="license-modal-overlay" style="display: none;">
    <div class="license-modal-container">
        <div class="license-modal-header">
            <h3><i class="fas fa-ticket-alt"></i> Input Voucher Masa Aktif</h3>
            <button onclick="tutupModalVoucher()" class="license-modal-close-btn">&times;</button>
        </div>
        <div class="license-modal-body">
            <iframe id="license-iframe-keyboard" src="" frameborder="0"></iframe>
        </div>
    </div>
</div>

    <div class="login-panel">
        <div class="logo-container">
            <img src="image/Hokkaido.png" alt="Hokkaido-Ya">
        </div>

        <div class="login-header">
            <!-- <h1>Selamat Datang</h1> -->
            <p>Silakan masukkan ID & Kata Sandi Anda</p>
        </div>

        <div class="input-group-vue">
            <i class="fas fa-user"></i>
            <div id='userlog' class="input-display-vue" @click="selectInput(1)" :style="{ backgroundColor: ipilih === '1' ? 'rgba(255,255,255,0.1)' : 'transparent' }">{{ inputValue1 || 'ID Pengguna' }}</div>
        </div>

        <div class="input-group-vue">
            <i class="fas fa-lock"></i>
            <div id='passlog' class="input-display-vue" @click="selectInput(2)" :style="{ backgroundColor: ipilih === '2' ? 'rgba(255,255,255,0.1)' : 'transparent' }">{{ inputValue2 ? inputValue2.replace(/./g, '*') : 'Kata Sandi' }}</div>
        </div>

        <div class="keypad">
            <button @click="mlogin(ipilih, '1')">1</button>
            <button @click="mlogin(ipilih, '2')">2</button>
            <button @click="mlogin(ipilih, '3')">3</button>
            <button @click="mlogin(ipilih, 'Back')"><i class="fas fa-backspace"></i></button>

            <button @click="mlogin(ipilih, '4')">4</button>
            <button @click="mlogin(ipilih, '5')">5</button>
            <button @click="mlogin(ipilih, '6')">6</button>
            <button @click="mlogin(ipilih, 'C')">C</button>
            
            <button @click="mlogin(ipilih, '7')">7</button>
            <button @click="mlogin(ipilih, '8')">8</button>
            <button @click="mlogin(ipilih, '9')">9</button>
            <button class="keypad-login" @click="login()">Masuk</button>
            
            <button @click="mlogin(ipilih, '0')">0</button>
            <button @click="mlogin(ipilih, '.')">.</button>
            <button @click="mlogin(ipilih, '@')">@</button>
        </div>
    </div>

    <div class="info-block bottom-right" v-if="pos.register">
        <p><strong>Register Kasir:</strong> {{register.nama}}</p>
        <p><strong>Outlet:</strong> {{ncab}}</p>
        <p style="opacity: 0.7; margin-top: 5px;">{{pos.software}} Ver {{pos.software2}}</p>
    </div>
</div>

<div id="overadmin" v-if="overadmin" class="overlaya">

<div class="calculatoraa"> 
  <div class="otor">
    {{jenisdelete}}
   </div>
  <div  class="calculator-titela">{{ bh.userid[bhs] }} : </div>
  <div id='userlog' class="input-display1" @click="this.inputValue1='';selectInput(1)" :style="{ backgroundColor: ipilih === '1' ? '#909090' : '#404040' }">{{ inputValue1 }}</div>
  
  <div  class="calculator-titela">{{ bh.password[bhs] }}</div>
  <div id='passlog' class="input-display2" @click="this.inputValue2='';selectInput(2)" :style="{ backgroundColor: ipilih === '2' ? '#909090' : '#404040' }">{{ inputValue2.replace(/./g, '*') }}</div>
  
  <div class="keyboard">
    <button v-for="digit in digitsd" :key="digit" @click="this.mlogin(this.ipilih,digit.toString()  )   ">{{ digit }}</button>
  </div>
  <div class="keyboardla">
    <button @click="this.mlogin(this.ipilih,'Back')">⌫</button>
    <button @click="this.mlogin(this.ipilih,'C')" >C</button>
    <div class="divaa">
      <button class="entera" @click="this.otor()">Ok</button>
    </div>
  </div>
  </div>
</div>

<div class="bawah">
  {{nuser}}  Register: {{register.open ?' Open ':' close'}} {{register.open ? register.nama:'' }}
 </div> 

<div id="Fungsi" class="Fungsi">
  <div  v-for="(kotak, index) in currentPayment"
  :key="index"  
  class="bayar" :style="{
    left: kotak.kiri + '%',
    top: kotak.atas + '%',
    width: kotak.lebar + '%',
    height: kotak.tinggi + '%',
    backgroundColor: kotak.warna,
    fontsize: kotak.fontsize,
    color: kotak.fore,
    borderRadius: kotak.borderRadius + '%',
    
    position: paymentdinamis ? 'absolute' : 'static' // Ubah posisi sesuai dengan kondisi paymentdinamis
  }" @mousedown="pstartDrag(index, $event)" @contextmenu.prevent="pshowColorMenu(index, $event)"
  @click="pchangeMeja(kotak,index)">
  <span v-if="kotak.image == '1'" :style="{ color: kotak.fore }">{{ kotak.nama }}</span> <br>
  <img v-if="kotak.image !== '1'" :src="kotak.image" alt="Image" style="width: 100%; height: 100%;" draggable="false">
  </div>
  
  <div v-show="pshowContextMenu" class="context-menu-modern" @click.stop>
    <div class="cm-header">
        <h3>Button Settings</h3>
        <button class="cm-close-btn" @click="hideContextMenu()">&times;</button>
    </div>

    <div class="cm-body-single-column">

        <div class="cm-section">
            <h4><i class="fas fa-plus-circle"></i> Add New Button</h4>
            <div class="form-group-inline">
                <label for="gname">Label</label>
                <input type="text" id="gname" name="gname" class="form-control" placeholder="New Button Label">
                <button class="btn btn-success" onclick="ptambahMeja()"><i class="fas fa-plus"></i> Tambah Tombol</button>
            </div>
        </div>

        <hr class="cm-divider">

        <div class="cm-section">
            <h4><i class="fas fa-edit"></i> Update Button</h4>
            <div class="update-grid">
                <div class="update-column">
                    <div class="form-group">
                        <label for="guname"><i class="fas fa-tag"></i> Label</label>
                        <input type="text" id="guname" class="form-control" v-model="contenMeja">
                    </div>
                    <div class="form-group">
                        <label for="gufungsi"><i class="fas fa-cogs"></i> Fungsi</label>
                        <input type="text" id="gufungsi" class="form-control" v-model="contenMejafungsi">
                    </div>
                    <div class="form-group">
                        <label for="guimage"><i class="fas fa-image"></i> Image</label>
                        <div class="image-uploader">
                            <img :src="imagePreviewUrl || contenMejaimage" @error="onImageError" alt="Preview" class="image-preview">
                            <input type="text" id="guimage" class="form-control" v-model="contenMejaimage" placeholder="Image URL or upload">
                            <input type="file" id="p_imageUpload" @change="handleImageUpload" accept="image/*" style="display: none;">
                            <button class="btn-icon" onclick="document.getElementById('p_imageUpload').click()" title="Upload Image">
                                <i class="fas fa-upload"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="update-column">
                    <div class="form-group">
                        <label for="bgColorPicker"><i class="fas fa-palette"></i> Background Color</label>
                        <div class="color-picker-wrapper">
                            <input type="color" id="bgColorPicker" v-model="bselectedColor" @change="pchangeColor()" class="color-input">
                            <input type="text" class="form-control" v-model="bselectedColor">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="fgColorPicker"><i class="fas fa-font"></i> Text Color</label>
                        <div class="color-picker-wrapper">
                            <input type="color" id="fgColorPicker" v-model="fselectedColor" @change="ptchangeColor()" class="color-input">
                            <input type="text" id="gucolor" class="form-control" v-model="fselectedColor">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="gusize"><i class="fas fa-text-height"></i> Text Size</label>
                        <input type="text" id="gusize" class="form-control" v-model="contenMejasize" placeholder="e.g., 14px">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="cm-footer">
        <button class="btn btn-primary" onclick="pupdateMeja()"><i class="fas fa-save"></i> Update Tombol</button>
        <div class="footer-actions">
            <button class="btn btn-secondary" onclick="pcopyMeja()"><i class="fas fa-copy"></i> Copy</button>
            <button class="btn btn-secondary" onclick="ppasteMeja()"><i class="fas fa-paste"></i> Paste</button>
            <button class="btn btn-danger" onclick="pdeleteMeja()"><i class="fas fa-trash"></i> Hapus</button>
            <button class="btn" onclick="cancelMenu()" style="background-color: #7f8c8d;"><i class="fas fa-times"></i> Cancel</button>
        </div>
    </div>
</div>
  
  <div id="overlay2" class="overlay2">
    <div class="content">
      <h2 id="judul_alert" class="judul_alert">Pesan Penting</h2>
      <p id="pesan_alert" class="pesan_alert">Ini adalah pesan peringatan yang menarik!</p>
      <button id="btn_no" class="btn">Tidak</button>
      <button id="btn_yes" class="btn">Ya</button>
    </div>
  </div>
  
  
  </div>



<div id="Map" class="Map">
  <div class="map_label" v-show="move !== ''" >
    {{ move }}
  </div>
     <img id="lantai-img" src="image/lantai.jpg" draggable="false" >
     <div v-for="(kotak, index) in currentMejas" :key="index" class="kotak" :style="{
      left: kotak.left + '%',
      top: kotak.top + '%',
      width: kotak.width + '%',
      height: kotak.height + '%',
      backgroundColor: kotak.ada === '1' ? '#FFA500' : kotak.warna, // Memperbaiki baris ini
      borderRadius: kotak.borderRadius + '%'
    }" @mousedown="layer='meja';startDrag(index, $event)" @contextmenu.prevent="showColorMenu(index, $event)"
    @click="changeMeja(kotak,index)">
    <span v-if="kotak.image == '1'">{{ kotak.nama }}</span> <br>
    <span class="gt"> {{ Number(kotak.jumlah) !== 0 ? 'Rp.' + Math.round(parseFloat(kotak.jumlah)).toLocaleString('en-US') : '' }}</span><br>
    <span class="gti">{{ kotak.guest }}</span>
    <span class="gtix" v-if="kotak.split && kotak.split.trim() !== ''">Split</span>

    <img v-if="kotak.image !== '1'" :src="kotak.image" alt="Image" style="width: 100%; height: 100%;" draggable="false">
</div>

    <!-- <div v-show="showContextMenu" :style="{ left: contextMenuX + 'px', top: contextMenuY + 'px' }" class="context-menu  "> -->
<div v-show="showContextMenu" class="context-menu-modern" @click.stop>
    <div class="cm-header">
        <h3>Table Settings</h3>
        <button class="cm-close-btn" @click="cancelMenu()">&times;</button>
    </div>

    <div class="cm-body-single-column">

        <div class="cm-section">
            <h4><i class="fas fa-plus-circle"></i> Add New Table</h4>
            <div class="form-group-inline">
                <label for="fname">Label</label>
                <input type="text" id="fname" name="fname" class="form-control" placeholder="New Table Label">
                <button class="btn btn-success" onclick="tambahMeja()"><i class="fas fa-plus"></i> Tambah Meja</button>
            </div>
        </div>

        <hr class="cm-divider">

        <div class="cm-section">
            <h4><i class="fas fa-edit"></i> Update Table</h4>
            <div class="update-grid">
                <div class="update-column">
                    <div class="form-group">
                        <label for="funame"><i class="fas fa-tag"></i> Label</label>
                        <input type="text" id="funame" class="form-control" v-model="contenMeja">
                    </div>
                    <div class="form-group">
                        <label for="ftipe"><i class="fas fa-concierge-bell"></i> Tipe</label>
<div class="select-wrapper">
    <select id="ftipe" name="ftipee" class="form-control" v-model="contenMejatipe">
        <option v-for="tipe in tipeTransaksi" :key="tipe.kode" :value="tipe.kode">
            {{ tipe.kode }}. {{ tipe.nama.toUpperCase() }}
        </option>
    </select>
</div>
                    </div>
                    <div class="form-group">
                        <label for="fufungsi"><i class="fas fa-cogs"></i> Fungsi</label>
                        <input type="text" id="fufungsi" class="form-control" v-model="contenMejafungsi">
                    </div>
                </div>
                <div class="update-column">
                    <div class="form-group">
                        <label for="colorPicker"><i class="fas fa-palette"></i> Background Color</label>
                        <div class="color-picker-wrapper">
                            <input type="color" id="colorPicker" v-model="selectedColor" @change="changeColor()" class="color-input">
                            <input type="text" class="form-control" v-model="selectedColor">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="fuimage"><i class="fas fa-image"></i> Image</label>
                        <div class="image-uploader">
                            <img :src="imagePreviewUrl || contenMejaimage" @error="onImageError" alt="Preview" class="image-preview">
                            <input type="text" id="fuimage" class="form-control" v-model="contenMejaimage" placeholder="Image URL or upload">
                            <input type="file" id="imageUpload" @change="handleImageUpload" accept="image/*" style="display: none;">
                            <button class="btn-icon" onclick="document.getElementById('imageUpload').click()" title="Upload Image">
                                <i class="fas fa-upload"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="cm-footer">
        <button class="btn btn-primary" onclick="updateMeja()"><i class="fas fa-save"></i> Update Meja</button>
        <div class="footer-actions">
            <button class="btn btn-secondary" onclick="copyMeja()"><i class="fas fa-copy"></i> Copy</button>
            <button class="btn btn-secondary" onclick="pasteMeja()"><i class="fas fa-paste"></i> Paste</button>
            <button class="btn btn-danger" onclick="deleteMeja()"><i class="fas fa-trash"></i> Hapus</button>
            <button class="btn" onclick="cancelMenu()" style="background-color: #7f8c8d;"><i class="fas fa-times"></i> Cancel</button>
        </div>
    </div>
</div>
    <!-- <div class="bayar">
          <div class="buttonl" v-for="(top, index) in currentPayment" :key="index" @click="changeLantai(top)" >
            {{ top.nama }}   
          </div>
        </div> -->
    
    <div class="lantai">
      <div class="buttonl" v-for="(top, index) in lantai" :key="index" @click="changeLantai(top)"
        :class="{ 'selected-lantai': currentLantai === top.kode }">
        {{ top.nama }}
      </div>
    </div>
    <!--   
        <div class="meja">
          <div class="buttonm" v-for="(top, index) in currentMejas" :key="index" @click="changeMeja(top)">
            {{ top.nama }}
          </div>
        </div>
       -->
    </div>

    
        

<div class="qty-sides">
  <div 
    v-for="(q, index) in qty" 
    @click="setqty(q)" 
    :key="index" 
    class="qty"
    :style="{ backgroundColor: (this.pos.qty === 'Before' && q === this.bqty) ? '#8B0000' : '' }">
    {{ q }}
  </div>
  <div @click="setqty('>10')" class="qty-qty">
    >10
  </div>
</div>


    <!-- Cart side -->

    <div class="cart-sides">
      <div class="kerangjangmenu">
        <div class="cart-item-name2">{{bh.qty[bhs]}}</div> 
        <div class="cart-item-name1">{{bh.nama[bhs]}} </div>
        <div class="cart-item-name3">{{bh.disc[bhs]}}</div>
        <div class="cart-item-name4">{{bh.jumlah[bhs]}}</div>
        <div class="cart-item-name5">{{bh.user[bhs]}}</div>
        <div class="cart-item-name5">#</div>
      </div>

      <div class="belanja" @scroll="handlePosScroll">
        <div v-for="(itemx, index) in cart.filter(item => item.split === activeSplitFilter)"
        :key="index" @click="pilihcart(itemx,index)" :class="getClass(index)">
          <div class="cart-item">
            <div class="cart-item-quantity" v-if="!itemx.payment">{{ itemx.quantity }}</div>

            <div class="cart-item-name" v-bind:class="{ 
              'blue-background': itemx.payment >= '10',
              'red-background': itemx.payment === '06',
              'black-background': itemx.payment === ''
          }">
              {{ itemx.name }}
          </div>

            <!-- <div class="cart-item-disc"     v-if="(itemx.discp + itemx.discr)>0">{{ itemx.discp + itemx.discr }}</div> -->
            <!-- <div class="cart-item-disc"     >{{ Math.round(itemx.discp + itemx.discr) }}</div> -->
            <div class="cart-item-disc" v-if="!itemx.payment">
              {{ Math.round(itemx.discp) + Math.round(itemx.discr) }}
            </div>

            <div class="cart-item-price"    v-bind:class="{ 'yellow-background2': itemx.payment }" >{{ Math.round((itemx.harga * itemx.quantity)).toLocaleString('id-ID') }}</div>
           
            <div class="cart-item-ket" v-bind:class="{ 'yellow-background3': itemx.payment }">{{ itemx.user }}</div>
            <div class="cart-item-ket" v-bind:class="{ 'yellow-background3': itemx.payment }">
            
            
              <template v-if="itemx.cetak">
                <svg class="check-icon" 
                     width="16" 
                     height="16" 
                     viewBox="0 0 24 24" 
                     fill="none" 
                     stroke="currentColor">
                  <path d="M20 6L9 17L4 12" 
                        stroke-width="2" 
                        stroke-linecap="round" 
                        stroke-linejoin="round"/>
                </svg>
                <!-- <span class="text-uppercase">{{ itemx.cetak }}</span> -->
              </template>           
            
            
            </div>
          </div>

          <div class="xtoppings-box" v-for="topping in itemx.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="xpaket-box" v-if="itemx.paketItems && itemx.paketItems.length > 0">
                  <div class="cart-paket-item" v-for="paket in itemx.paketItems">
                    - {{ paket.quantity }} {{ paket.name }}
                  </div>
                </div>
      


          <div class="cart-item-note">{{ itemx.note }}</div>

        </div>
      </div>
      <div class="fungsi-sides">
        <div v-for="f in fungsi"  @click="xfungsi(f.fungsi)" :key="index" :class="f.fungsi">
          {{ f[this.bhs] }}
        </div>
      </div>

      <div class ="info">
        {{bh.table[bhs]}} : <span class="NamaMeja">{{mejao.nama}} </span>
        {{bh.cover[bhs]}}: {{mejao.cover}}<br> 
        {{bh.guest[bhs]}}: {{mejao.guest}}<br>  
        Member: {{mejao.nama_member}}
      </div>


<div class="subtotal">
        <div class="cart-total">
          <span class="subtotal"> {{bh.subtotal[bhs]}}: </span> <span class="subtotal2"> {{ Math.round(xsubtotal).toLocaleString('id-ID') }}
          </span>
        </div>
        <div class="cart-total">
          <span class="subtotal"> {{bh.total_discount[bhs]}}: </span> <span class="subtotal2"> {{ Math.round(xtdisc).toLocaleString('id-ID') }}
          </span>
        </div>
        
        <div v-if="xtdiscf > 0" class="cart-total">
          <span class="subtotal"> Disc. Faktur: </span> <span class="subtotal2"> {{ Math.round(xtdiscf).toLocaleString('id-ID') }}
          </span>
        </div>
        <div class="cart-total">
          <span class="subtotal"> {{bh.service[bhs]}}: {{pos.service}}%: </span> <span class="subtotal2"> {{ Math.round(xtservice).toLocaleString('id-ID') }}
          </span>
        </div>
      
        <div class="cart-total">
          <span class="subtotal"> {{bh.pajak[bhs]}} {{pos.pajak}}%: </span> <span class="subtotal2"> {{ Math.round(xtpajak).toLocaleString('id-ID') }}
          </span>
        </div>
        <div class="cart-total">
          <span class="subtotal"> {{bh.total[bhs]}}: </span> <span class="subtotal2"> {{ Math.round(cartSubtotal).toLocaleString('id-ID') }} </span>
        </div>
        <div class="cart-total">
          <span class="subtotal"> {{bh.pembayaran[bhs]}} : </span> <span class="subtotal2"> {{ Math.round(xpayment).toLocaleString('id-ID') }} </span>
        </div>
        <div class="cart-total">
          <span class="subtotal" :style="{ color: xkembali >= 0 ? 'black' : 'red' }">{{ xkembali >= 0 ? bh.kembali[bhs] : bh.kurang_bayar[bhs] }} : </span>
          <span class="subtotal2" :style="{ color: xkembali >= 0 ? 'black' : 'red' }">{{ Math.abs(Math.round(xkembali)).toLocaleString('id-ID') }} </span>
        </div>

        <span class="subtotali"> #{{bh.item_count[bhs]}}: </span> <span class="subtotali"> {{ Math.round(xitem).toLocaleString('id-ID') }} </span>
      </div>

        
  

      <div v-if="selectedPayment">
        <h3>Metode Pembayaran: {{ selectedPayment }}</h3>
        <button @click="checkout">Bayar</button>
      </div>
    </div>

    <div class="fungsi2-sides">
      <div v-for="f in fungsi2"  @click="xfungsi(f.fungsi)" :key="index" :class="f.kelas == '' ? 'fungsi2' : f.nama">
        {{ f[this.bhs] }}
      </div>
    </div>

    <div class="payment-optionss">
      <button @click="applyDiscount">Diskon 5%</button>
      <button @click="Kirim">kirim</button>
      <button @click="selectPayment('cash')">Kontan</button>
      <button @click="selectPayment('credit')">Kartu Kredit BCA</button>
      <button @click="selectPayment('debit')">Kartu Debet</button>
      <button @click="selectPayment('gopay')">GoPay</button>
      <button @click="selectPayment('voucher')">Voucher</button>
    </div>

    <!-- Menu side -->
    <div class="menu-side">
      <!-- <h2>Daftar Menu Makanan</h2> -->
      <div class="menu-top">
        <div class="buttony" v-for="(top, index) in menuTops" :key="index" @click="changeMenuTop(top.nama)"
          :class="{ 'selected-top': currentMenuTop === top.nama }">
          {{ top[bhs] }}
        </div>
      </div>
      <div class="menu-groups">
        <buttonx v-for="(group, index) in currentGroup" :key="index" @click="changeMenuGroup(group)"
          :class="{ 'selected-group': currentMenuGroup === group.kode }">
          {{ group[bhs] }}
        </buttonx>
      </div>

      <div class="menu-list">
        <!-- +++ PERUBAHAN DI SINI +++ -->
        <div v-for="(item, index) in currentMenu" :key="index" :class="['menu-item', 'menu-group-' + item.groupSlug]" :style="{ height: item.image ? '100%' : '60%' }">
          <div class="tombol" @click="item.x !== '1' ? pilihmenu(item) : null" :class="{ 'item-unavailable': item.x === '1' }">
            
            <div class="menu-image" v-if="item.image"  >
              <img id="menu_img" :src="item.image" :alt="" loading="lazy" />
            </div>
            <div class="menu-name">{{ item[bhs] }}</div>
            <div class="menu-price">{{ Math.round(item.price).toLocaleString('id-ID')  }}</div>
            <!-- Overlay akan muncul jika item.x adalah '1' -->
            <div v-if="item.x === '1'" class="sold-out-overlay">
                <img src="x.png" alt="Habis" />
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="menu-list">
        <div v-for="(item, index) in currentMenu" :key="index" :class="['menu-item', 'menu-group-' + item.groupSlug]" :style="{ height: item.image ? '100%' : '60%' }">
          <div class="tombol" @click="pilihmenu(item)">
            <div class="menu-image" v-if="item.image"  >
              <img id="menu_img" :src="item.image" :alt="" />
            </div>
            <div class="menu-name">{{ item[bhs] }}</div>
            <div class="menu-price">{{ Math.round(item.price).toLocaleString('id-ID')  }}</div>
          </div>
        </div>
      </div> -->

<!-- <div class="menu-list">
  <div v-for="(item, index) in currentMenu" :key="index" :class="['menu-item', 'menu-group-' + item.groupSlug]" :style="{ height: item.image ? '100%' : '60%' }">
    <div class="tombol" @click="pilihmenu(item)">
      <div class="menu-image">
        <img id="menu_img" v-if="item.image" :src="item.image" :alt="" />
      </div>
      <div class="menu-name">{{ item.name }}</div>
      <div class="menu-price">{{ item.price.toLocaleString('id-ID') }}</div>
    </div>
  </div>
</div> -->

    </div>

    <!-- Receipt modal -->
    <div v-if="isTransactionComplete" class="receipt-modal">
      <div class="receipt-content">
        <h2>Struk Belanja</h2>
        <div v-for="(item, index) in cart" :key="index" class="receipt-item">
          <div class="receipt-item-name">{{ item.name }}</div>
          <div class="receipt-item-quantity">{{ item.quantity }}</div>
          <div class="receipt-item-price">{{ (item.price * item.quantity).toLocaleString('id-ID', { style: 'currency',
            currency: 'IDR' }) }}</div>
        </div>
        <div class="receipt-subtotal">
          Subtotal: {{ cartSubtotal.toLocaleString('id-ID', { style: 'currency', currency: 'IDR' }) }}
        </div>
        <div class="receipt-service-fee">
          Service 5%: {{ serviceFee.toLocaleString('id-ID', { style: 'currency', currency: 'IDR' }) }}
        </div>
        <div class="receipt-tax">
          Pajak 10%: {{ taxAmount.toLocaleString('id-ID', { style: 'currency', currency: 'IDR' }) }}
        </div>
        <div class="receipt-discount" v-if="discount > 0">
          Diskon: {{ discount.toLocaleString('id-ID', { style: 'currency', currency: 'IDR' }) }}
        </div>
        <div class="receipt-total">
          Total: {{ grandTotal.toLocaleString('id-ID', { style: 'currency', currency: 'IDR' }) }}
        </div>
        <button @click="closeReceipt">Tutup</button>
      </div>
    </div>

    <div v-if="showToppings" class="toppings-modal">
      <div class="tutupin">
        <h2>{{ selectedMenuItem.paket ? bh.paket[bhs]+': ' :bh.condiment[bhs]+': ' }} {{ selectedMenuItem[bhs] }}</h2>
        <div class="topping-kel">
          <div class="toppings-box" v-for="(topping, index) in filtertoping" :key="index"
            

            :class="{ 'toppings-boxr': topping.max != null && topping.max != countSelectedItems(topping) && topping.wajib === true }">
            
            <!-- <xx v-if="topping.items.length>1"> -->
    
              <div class="header-toppings">
    
                {{ topping.Group }} {{ topping.wajib==false ? '(opsional)' :'' }} <x
                  v-if="topping.max==countSelectedItems(topping) || topping.wajib==false"> <span
                    style="color: green; font-weight: bold; font-size: larger;"> &#10004; </span> </x>
                <x v-else>
                  <y v-if="topping.wajib==true"> (Wajib) </y>
                  <z v-else> Optional</z>
                </x>
                <p v-if="topping.tipe=='C' && topping.max!=countSelectedItems(topping)">
                  <br> Max:{{topping.max}} terpilih:{{countSelectedItems(topping)}}
                </p>
              </div>
              <template v-if="topping.tipe === 'C'">
                <ul>
                  <li v-for="(item, subIndex) in topping.items" :key="item.nama_toping"
                    @click="checkToppingsLimit(topping,item)">
                    <input class="custom-checkbox" type="checkbox" v-model="item.checked"
                      :disabled="countSelectedItems(topping) >= topping.max && !item.checked">
                    {{ item.nama_toping }}
                    <hai v-if="item.harga > 0"> <span class="harga-toping"> +{{item.harga }}</span> </hai>
                  </li>
                </ul>
              </template>
              <template v-else-if="topping.tipe === 'R'">
                <ul>
                  <!-- aaaaaaaaa -->
                  <li v-for="(item, subIndex) in topping.items" :key="item.nama_toping" @click="selectCity(topping,item)">
                    <input type="radio" :name="'radio-' + index" :value="item.nama_toping" v-model="topping.pilih" >
                    {{ item.nama_toping }}
                  </li>
                </ul>
              </template>
            <!-- </xx>   -->
          </div>
        </div>
    
        <div class="tutup">
          <div class="tombola cancel" @click="showToppings = false">Cancel</div>
          <div class="tombola ok" @click="showToppings2(selectedMenuItem)">Ok</div>
        </div>
      </div>
    </div>

    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <p>yakin menghapus {{cart[currentcart].name }} ? </p>
        <div class="tutup">
          <div class="tombola ok" @click="confirmAction('No')">No</div>
          <div class="tombola cancel" @click="confirmAction('Yes')">Yes</div>
        </div>

        <!-- <div class="button_del" @click="confirmAction('Yes')"><span style="color: red">Yes</span></dov>
          <div class="button_del" @click="confirmAction('No')">No</div> -->
      </div>
    </div>

    <div v-if="showModalAngka" class="modal">


      <div class="calculator">
        <div class="calculator-titel" v-if="kbn=='Close_register' ">
            <span style="font-weight: normal;">Tutup Register Kasir:</span> {{ register.nama }}
            <br>
            <span style="font-weight: normal;">Masukan Saldo Akhir:</span>
        </div>

        <div class="calculator-titel" v-if="kbn=='qty' ">
          <!-- Masukan Jumlah {{cart[currentcart].name}} : -->
          Masukan Quantity :
        </div>
        <div class="calculator-titel" v-if="kbn=='payment' ">
          Masukan Jumlah Pembayaran {{edc}} :
        </div>
        <div class="calculator-titel" v-if="kbn=='cover' ">
          {{ bh.masukan_jumlah_tamu[bhs] }} :
        </div>    
        <div class="calculator-titel" v-if="kbn=='Open_register' ">
          {{ bh.Masukan_saldo[bhs] }} :
        </div>  
        <div class="input-display">{{ Number(inputValue).toLocaleString('id-ID') }}</div>
        <div class="form-group" v-if="kbn=='Open_register' ">
          <label>Shift:</label>
          <div class="checkbox-group">
              <label class="checkbox-label">
                  <input type="radio" v-model="selectedShift" value="1">
                  <span>Siang</span>
              </label>
              <label class="checkbox-label">
                  <input type="radio" v-model="selectedShift" value="2">
                  <span>Malam</span>
              </label>
          </div>
        </div>  

  
        <div class="keyboard">
          <button v-for="digit in digits" :key="digit" @click="if (kba) { this.inputValue = digit.toString(); kba = false } else { this.inputValue += digit.toString(); }" >{{ digit }}</button>
          <button @click="this.inputValue = ''">C</button>
        </div>
        <div class="keyboardp">
          <button @click="appendSpecial('Backspace')">⌫</button>
          <button @click="this.showModalAngka=false">Cancel</button>
          <div class="diva" v-if="kbn!=='payment'" >
            <button class="enter" @click="appendSpecial('Enter')">Ok</button>
          </div>
          <div class="divap" v-if="kbn=='payment'" >
            <button class="enterp" @click="appendSpecial('Enter')">Payment</button>
          </div>

        </div>

      </div>
    </div>


    <div v-if="showModalAngkakb" class="modal" style="z-index: 99999999;">
      <div class="calculatorkb">

        <!-- <div class="calculator-titelkb" v-if="kb_for == 1">
          Catatan untuk {{ cart[currentcart].name }} :
        </div> -->

<div class="calculator-titelkb" v-if="kb_for == 1 && cart[currentcart]">
  Catatan untuk {{ cart[currentcart].name }} :
</div>

        <div class="calculator-titelkb" v-if="kb_for == 2">
          Nama Tamu  :
        </div>
        <div class="calculator-titelkb" v-if="kb_for == 3">
          Nama menu  :
        </div>
        <div class="input-displaykb" :class="{ 'input-light': activeInput === 1, 'input-dark': activeInput == 2 }"   @click="this.activeInput=1">{{ inputV[1] }}</div>

        <div class="calculator-titelkb" v-if="kb_for == 3">
          Harga  :
        </div>
        <div class="input-displaykb"   :class="{ 'input-light': activeInput === 2, 'input-dark': activeInput == 1 }" v-if="kb_for == 3" @click="this.activeInput=2">{{ inputV[2] }}</div>



        <div class="keyboardkb">
          <button v-for="digit in digitskb1" :key="digit" @click="this.inputV[this.activeInput] += digit.toString()">{{ digit
            }}</button>
          <button class="B" @click="appendSpecial('Backspace')">⌫</button>
        </div>
        <div class="keyboardkb">
          <button v-for="digit in digitskb2" :key="digit" @click="this.inputV[this.activeInput] += digit.toString()">{{ digit
            }}</button>
          <div class="divac">
            <button class="C" @click="this.inputV[this.activeInput]= ''">Clear</button>
          </div>
        </div>
        <div class="keyboardkb2">
          <button v-for="digit in digitskb3" :key="digit" @click="this.inputV[this.activeInput] += digit.toString()">{{ digit
            }}</button>
          <div class="diva">
            <button class="enter2" @click="note('Enter')">Ok</button>
          </div>
        </div>

        <div class="keyboardkb3" >
          <button v-for="digit in digitskb4" :key="digit" @click="this.inputV[this.activeInput] += digit.toString()">{{ digit
            }}</button>
          <div class="divas">
            <button class="Space" @click="this.inputV[this.activeInput] += ' '">Space</button>
          </div>
          <div class="divac">
            <button class="Cancel" @click="this.showModalAngkakb=false">Cancel</bu tton>
          </div>
        </div>
        <div class="keyboardkb4" v-if="kb_for == 1" >
<button class="condiment" v-for="(item) in  condiment.filter(item => item.kode === cart[currentcart].condiment)" :key="index"
@click="inputV[1] += item[bhs] + ', ' " > {{item[bhs]}} </button>
        </div>
      </div>
    </div>    

    <div id="custom-alert" class="custom-alert">
      <div class="custom-alert-content">
        <h2 id="custom-alert-title" class="custom-alert-title">Pesan Penting</h2>
        <p id="custom-alert-message" class="custom-alert-message">Ini adalah pesan peringatan yang menarik!</p>
        <button id="custom-alert-button" class="custom-alert-button">Mengerti</button>
      </div>
    </div>
  
  </div>
  
  <div id="loading-overlay">
    <div class="spinner"></div>
 </div>
 


<script>

        // ff=localStorage.getItem('xpos');
        // alert(ff);
        //localStorage.clear();
        lisensi=false;
        kodeMesin = 'XX';
        xpos = JSON.parse(localStorage.getItem('xpos')) || {};
        BASE_URL = xpos.BASE_URL || "http://localhost/bener/pos2/";
   

        if (!xpos.cab || !xpos.brand) {
            // showModal();
            xcab = prompt("Masukkan nilai untuk kode Cabang :");// Setelah prompt pertama ditutup, 
            xbrand = '001';

    xpos = {};
    xpos.cab = xcab;
    xpos.brand = xbrand;

      localStorage.setItem('xpos', JSON.stringify(xpos));
    
    
        } else {
            xcab = xpos.cab;
            xbrand = xpos.brand;
        };
        cab=xcab;
        brand=xbrand;
        
        menuDataJson = ambil('menus', 'kode', '0', 'zzzz');
        alert(menuDataJson);
        console.log(`xcab: ${xcab}, xbrand: ${xbrand}`);










        window.onload = function() {
            const container = document.getElementById('image-container');
            const mainContent = document.getElementById('main-content');
            const closeButton = document.getElementById('close-button');

            // Menambahkan fungsi untuk tombol tutup
            closeButton.addEventListener('click', function() {
                mainContent.style.display = 'none';
            });

            try {
                const menuDataJson = ambil('menus', 'kode', '0', 'zzzz');
                const menuItems = JSON.parse(menuDataJson);
                container.innerHTML = ''; 

                if (menuItems.length === 0) {
                    container.innerHTML = '<p class="error-message">Tidak ada data menu yang ditemukan.</p>';
                    return;
                }

                menuItems.forEach(item => {
                    if (item.image && item.image.trim() !== '') {
                        const card = document.createElement('div');
                        card.className = 'menu-card';

                        const img = document.createElement('img');
                        img.src = item.image;
                        img.alt = '';
                        img.onerror = function() { this.style.display='none'; }; // Sembunyikan jika gambar error

                        const name = document.createElement('p');
                        name.textContent = item.name;

                        card.appendChild(img);
                        card.appendChild(name);
                        container.appendChild(card);
                    }
                });

            } catch (error) {
                container.innerHTML = '<p class="error-message">Gagal memuat data.</p>';
                console.error("Terjadi kesalahan:", error, "Data diterima:", menuDataJson);
            }
        };













        function showModal() {
            const modal = document.getElementById('settingsModal');
            if (!modal) {
                console.error('Modal element not found');
                return;
            }
            modal.style.display = 'flex';
            document.getElementById('brandInput').value = xpos.brand || '';
            document.getElementById('cabInput').value = xpos.cab || '';
            document.getElementById('brandInput').focus();
        }

        function saveSettings() {
        
    const cab = document.getElementById('cabInput').value.trim();
    const brand = document.getElementById('brandInput').value.trim();
    const errorMessage = document.getElementById('errorMessage');

    if (!cab || !brand) {
        if (errorMessage) {
            errorMessage.style.display = 'block';
            errorMessage.textContent = 'Please fill in both fields.';
        }
        return;
    }

    if (!/^\d+$/.test(cab) || !/^\d+$/.test(brand)) {
        if (errorMessage) {
            errorMessage.style.display = 'block';
            errorMessage.textContent = 'Please enter valid numeric codes.';
        }
        return;
    }

    // Pastikan xpos adalah objek
    if (typeof xpos !== 'object' || xpos === null) {
        xpos = {};
    }

    if (errorMessage) errorMessage.style.display = 'none';

}
    </script>

  <script src="vue.global.prod.js"></script>
  <script src="pos.js"></script>
  <script>


    function tutupJendelaDariIframe() {
      
        const reportModal = document.getElementById('reportModal');
        const reportFrame = document.getElementById('reportFrame');
        if (reportModal) {
            reportModal.style.display = 'none';
        }
        if (reportFrame) {
            // Mengosongkan iframe adalah praktik yang baik
            reportFrame.src = 'about:blank';
        }
    };
    
    function toggleMenu() {
            var menu = document.getElementById("menu");
            menu.classList.toggle("show-menu");
        }

        function menu(menuItem) {
            var menu = document.getElementById("menu");
            menu.classList.remove("show-menu");
            if (menuItem=='Setup') {
              window.location.href = "coba_set2.html"
            } 
            else if (menuItem=='Disc') {
              window.location.href = "coba_crud_masterd.html"
            }
            else if (menuItem=='Report') {
              window.location.href = "report.html"
            }
        }

        function cancelxMenu() {
            var menu = document.getElementById("menu");
            menu.classList.remove("show-menu");
        }

        // Tambahkan event listener untuk menutup menu jika diklik di luar menu
        document.addEventListener('click', function(event) {
            var menu = document.getElementById("menu");
            var burgerMenu = document.querySelector(".burger-menu");
            if (!menu.contains(event.target) && !burgerMenu.contains(event.target)) {
                menu.classList.remove("show-menu");
            }
        });  

        // Menambahkan konten dari file div3.html ke dalam elemen #div3-container
        // fetch('split.html')
        //     .then(response => response.text())
        //     .then(data => {
        //         document.getElementById('split').innerHTML = data;
        //     })
        //     .catch(error => console.error('Error loading div3.html:', error));

function toggleFullscreen() {
    if (true) {
            document.documentElement.requestFullscreen().catch(err => {
            console.error(`Error attempting to enable full-screen mode: ${err.message}`);
        });
    } else {
        // Jika sudah fullscreen, keluar dari mode fullscreen
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
    }
}
        

  </script>
 
<script>
  
  // --- Sistem Lisensi ---
// --- Sistem Lisensi dengan Modal ---
const KUNCI_RAHASIA = 'KunciSederhanaUntukAplikasiIni123';
const LOKASI_LISENSI = 'dataLisensiAplikasiSederhana';
const LOKASI_VOUCHER_BEKAS = 'voucherDigunakan';

function buatSignature(data, panjang=8){
    return CryptoJS.SHA1(data+KUNCI_RAHASIA).toString(CryptoJS.enc.Hex).substring(0,panjang).toUpperCase();
}

function buatIdUnikSederhana(){
    const chars='ABCDEFGHIJKLMNPQRSTUVWXYZ123456789';
    let result='';
    for(let i=0;i<8;i++){
        result+=chars.charAt(Math.floor(Math.random()*chars.length));
    }
    return result;
}

function buatLisensiBaru(){
    const idUnik=buatIdUnikSederhana();
    const tgl=new Date();
    let tglKadaluarsa=new Date();
    tglKadaluarsa.setDate(tgl.getDate()+30);
    const tglISO=tglKadaluarsa.toISOString();
    const signature=buatSignature(idUnik+tglISO);
    const dataLisensi={
        idUnik,
        tanggalInstall:tgl.toISOString(),
        tanggalKadaluarsa:tglISO,
        signature,
    };
    localStorage.setItem(LOKASI_LISENSI,JSON.stringify(dataLisensi));
}

function cekLisensi(){
    let data=localStorage.getItem(LOKASI_LISENSI);
    if(!data){
        buatLisensiBaru();
        data=localStorage.getItem(LOKASI_LISENSI);
    }
    const lisensi=JSON.parse(data);
    const{idUnik,tanggalKadaluarsa,signature}=lisensi;
    const sigHarusnya=buatSignature(idUnik+tanggalKadaluarsa);
    if(signature!==sigHarusnya){
        return{valid:false,idUnik:idUnik};
    }
    const hariIni=new Date();
    const tglKadaluarsaObj=new Date(tanggalKadaluarsa);
    const sisa=Math.ceil((tglKadaluarsaObj-hariIni)/(1000*60*60*24));
    return{
        valid:true,
        kadaluarsa:sisa<=0,
        sisaHari:sisa,
        idUnik:idUnik,
        tanggalKadaluarsa:tglKadaluarsaObj,
    };
}

function validasiVoucher(kodeVoucher){
    const kode=kodeVoucher.replace(/-/g,'').toUpperCase();
    if(kode.length!==16){
        alert("Format voucher salah.");
        return;
    }
    const bekas=JSON.parse(localStorage.getItem(LOKASI_VOUCHER_BEKAS))||[];
    if(bekas.includes(kode)){
        alert("Kode voucher ini sudah pernah digunakan!");
        return;
    }
    const lisensi=JSON.parse(localStorage.getItem(LOKASI_LISENSI));
    const idUnik=lisensi.idUnik;
    const hariStr=kode.substring(0,3);
    const idChecksum=kode.substring(3,8);
    const nonce=kode.substring(8,10);
    const sigVoucher=kode.substring(10,16);
    const idChecksumHarusnya=buatSignature(idUnik,5);
    if(idChecksum!==idChecksumHarusnya){
        alert("Kode voucher ini bukan untuk ID Mesin Anda!");
        return;
    }
    const sigHarusnya=buatSignature(hariStr+idChecksum+nonce,6);
    if(sigVoucher!==sigHarusnya){
        alert("Kode voucher tidak valid!");
        return;
    }
    const hari=parseInt(hariStr,10);
    let tglLama=new Date(lisensi.tanggalKadaluarsa);
    let basis=new Date()>tglLama?new Date():tglLama;
    let tglBaru=new Date(basis);
    tglBaru.setDate(basis.getDate()+hari);
    const tglISO=tglBaru.toISOString();
    const sigLisensiBaru=buatSignature(idUnik+tglISO);
    const lisensiBaru={...lisensi,tanggalKadaluarsa:tglISO,signature:sigLisensiBaru};
    localStorage.setItem(LOKASI_LISENSI,JSON.stringify(lisensiBaru));
    bekas.push(kode);
    localStorage.setItem(LOKASI_VOUCHER_BEKAS,JSON.stringify(bekas));
    alert(`SUKSES! Masa aktif ditambah ${hari} hari.`);
    
    // Refresh tampilan lisensi setelah sukses
    if(typeof refreshLicenseDisplay === 'function') {
        refreshLicenseDisplay();
    }
}

// Fungsi untuk mengurangi masa aktif (testing)
function kurangiMasaAktif(){
    if(!confirm('Kurangi masa aktif 1 hari?')) return;
    const lisensi=JSON.parse(localStorage.getItem(LOKASI_LISENSI));
    let tgl=new Date(lisensi.tanggalKadaluarsa);
    tgl.setDate(tgl.getDate()-1);
    const tglISO=tgl.toISOString();
    const sigBaru=buatSignature(lisensi.idUnik+tglISO);
    lisensi.tanggalKadaluarsa=tglISO;
    lisensi.signature=sigBaru;
    localStorage.setItem(LOKASI_LISENSI,JSON.stringify(lisensi));
    
    // Refresh tampilan lisensi
    if(typeof refreshLicenseDisplay === 'function') {
        refreshLicenseDisplay();
    }
}

// Fungsi untuk refresh tampilan lisensi
function refreshLicenseDisplay(){
    const status = cekLisensi();
    const statusDisplay = document.getElementById('license-status');
    const idDisplay = document.getElementById('license-id');
    
    if(idDisplay) {
        idDisplay.textContent = status.idUnik;
    }
    
    if(statusDisplay) {
        if (status.kadaluarsa || !status.valid) {
            lisensi=false;
            statusDisplay.textContent = 'Lisensi tidak aktif!';
            statusDisplay.className = 'license-status expired';
        } else {
            lisensi=true;
            let statusText = `Aktif sampai: ${status.tanggalKadaluarsa.toLocaleDateString('id-ID')}`;
            let statusClass = 'license-status valid';
            if (status.sisaHari <= 15) {
                statusText += ` (Sisa ${status.sisaHari} hari)`;
                statusClass = 'license-status warning';
            }
            statusDisplay.textContent = statusText;
            statusDisplay.className = statusClass;
        }
    }
}

// Modal Management
function bukaModalVoucher() {
    const modalOverlay = document.getElementById('license-modal-overlay');
    const iframeKeyboard = document.getElementById('license-iframe-keyboard');
    
    if(modalOverlay && iframeKeyboard) {
        iframeKeyboard.src = 'keyboard.html';
        modalOverlay.style.display = 'flex';
    }
}

function tutupModalVoucher() {
    const modalOverlay = document.getElementById('license-modal-overlay');
    const iframeKeyboard = document.getElementById('license-iframe-keyboard');
    
    if(modalOverlay && iframeKeyboard) {
        modalOverlay.style.display = 'none';
        iframeKeyboard.src = ''; // Kosongkan src untuk menghentikan proses
    }
}

// Event listener untuk komunikasi dari iframe
window.addEventListener('message', (event) => {
    if (event.data.action === 'submitVoucher') {
        validasiVoucher(event.data.voucher);
        tutupModalVoucher();
    }

    if (event.data.action === 'closeModal') {
        tutupModalVoucher();
    }
});
</script>
 
</body>

</html>


