<?php
include 'config.php';
checkLogin();
$page_title = "Panduan Pemakaian";
$active_page = "guide";
include 'layout.php';
$app_name = get_setting($conn, 'app_name') ?: 'Escobar Billing';
?>
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&family=Syne:wght@700;800&display=swap" rel="stylesheet">
<style>
:root{--c:#06b6d4;--cd:rgba(6,182,212,0.12);--g:#10b981;--gd:rgba(16,185,129,0.12);--r:#ef4444;--rd:rgba(239,68,68,0.12);--y:#f59e0b;--yd:rgba(245,158,11,0.1);--p:#8b5cf6;--pd:rgba(139,92,246,0.12);--b:#3b82f6;--bd:rgba(59,130,246,0.12);--glass:rgba(15,23,42,0.7);--border:rgba(255,255,255,0.07);--text:#e2e8f0;--muted:#64748b}
*{box-sizing:border-box}
body{font-family:"Space Grotesk",sans-serif;color:var(--text)}
.hero{background:linear-gradient(135deg,rgba(6,182,212,0.08),rgba(139,92,246,0.08));border:1px solid rgba(6,182,212,0.2);border-radius:24px;padding:40px;margin-bottom:24px;position:relative;overflow:hidden}
.hero h1{font-family:"Syne",sans-serif;font-size:2rem;font-weight:800;display:flex;align-items:center;gap:14px;margin-bottom:8px}
.hero h1 i{color:var(--c);font-size:2.3rem}
.hero p{color:#94a3b8;font-size:.97rem;line-height:1.7;max-width:620px;margin-bottom:16px}
.htags{display:flex;flex-wrap:wrap;gap:8px}
.htag{background:rgba(6,182,212,0.1);border:1px solid rgba(6,182,212,0.25);color:var(--c);padding:4px 13px;border-radius:20px;font-size:.73rem;font-weight:700;display:inline-flex;align-items:center;gap:5px}
.qnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.qnav a{background:rgba(255,255,255,0.04);border:1px solid var(--border);color:#94a3b8;padding:8px 15px;border-radius:10px;font-size:.8rem;font-weight:600;text-decoration:none;display:flex;align-items:center;gap:6px;transition:all .2s}
.qnav a:hover{border-color:var(--c);color:var(--c);background:var(--cd);transform:translateY(-2px)}
.sec{border:1px solid var(--border);border-radius:18px;margin-bottom:12px;overflow:hidden;transition:border-color .2s}
.sec:hover{border-color:rgba(6,182,212,0.2)}
.sec.open{border-color:rgba(6,182,212,0.3)}
.sec-h{padding:20px 26px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background .2s;user-select:none;background:rgba(15,23,42,0.5)}
.sec-h:hover{background:rgba(6,182,212,0.04)}
.sec.open .sec-h{background:rgba(6,182,212,0.06)}
.sec-l{display:flex;align-items:center;gap:14px}
.sec-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.sec-title{font-family:"Syne",sans-serif;font-size:1rem;font-weight:700}
.sec-sub{font-size:.76rem;color:var(--muted);margin-top:2px}
.chev{font-size:1.3rem;color:var(--muted);transition:transform .3s}
.sec.open .chev{transform:rotate(180deg);color:var(--c)}
.sec-body{max-height:0;overflow:hidden;transition:max-height .45s ease}
.sec.open .sec-body{max-height:9999px}
.sec-cnt{padding:6px 26px 26px}
.steps{margin:14px 0}
.step{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,0.04)}
.step:last-child{border-bottom:none}
.sn{width:36px;height:36px;min-width:36px;background:linear-gradient(135deg,var(--c),#0891b2);border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#000;font-size:.9rem;font-family:"JetBrains Mono",monospace}
.sb h4{font-size:.95rem;font-weight:700;color:#fff;margin-bottom:5px}
.sb p{color:#94a3b8;font-size:.86rem;line-height:1.75}
.box{border-radius:13px;padding:13px 16px;margin:12px 0;font-size:.84rem;display:flex;align-items:flex-start;gap:11px;line-height:1.7}
.box i{font-size:1.15rem;flex-shrink:0;margin-top:1px}
.box.info{background:var(--cd);border:1px solid rgba(6,182,212,0.25)}
.box.info i{color:var(--c)}
.box.warn{background:var(--yd);border:1px solid rgba(245,158,11,0.25)}
.box.warn i{color:var(--y)}
.box.danger{background:var(--rd);border:1px solid rgba(239,68,68,0.25)}
.box.danger i{color:var(--r)}
.box.ok{background:var(--gd);border:1px solid rgba(16,185,129,0.25)}
.box.ok i{color:var(--g)}
.box.tip{background:var(--pd);border:1px solid rgba(139,92,246,0.25)}
.box.tip i{color:var(--p)}
.gtbl{width:100%;border-collapse:collapse;margin:12px 0;font-size:.86rem}
.gtbl th{text-align:left;padding:10px 13px;background:rgba(0,0,0,0.3);color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.gtbl td{padding:11px 13px;border-bottom:1px solid rgba(255,255,255,0.04);color:#cbd5e1;vertical-align:top}
.gtbl tr:hover td{background:rgba(6,182,212,0.03)}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:7px;font-size:.73rem;font-weight:700;white-space:nowrap}
.badge.cyan{background:var(--cd);color:var(--c);border:1px solid rgba(6,182,212,0.25)}
.badge.green{background:var(--gd);color:var(--g);border:1px solid rgba(16,185,129,0.25)}
.badge.red{background:var(--rd);color:var(--r);border:1px solid rgba(239,68,68,0.25)}
.badge.yellow{background:var(--yd);color:var(--y);border:1px solid rgba(245,158,11,0.25)}
.badge.purple{background:var(--pd);color:var(--p);border:1px solid rgba(139,92,246,0.25)}
.badge.gray{background:rgba(100,116,139,.15);color:#94a3b8;border:1px solid rgba(100,116,139,.2)}
.code{font-family:"JetBrains Mono",monospace;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1);padding:2px 8px;border-radius:6px;font-size:.78rem;color:var(--c)}
.flow{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:18px 0}
.fstep{background:rgba(0,0,0,.3);border:1px solid var(--border);padding:11px 16px;border-radius:12px;text-align:center;font-size:.8rem;font-weight:700}
.fstep i{display:block;font-size:1.2rem;margin-bottom:4px;color:var(--c)}
.fstep.hl{border-color:var(--g);background:var(--gd)}
.fstep.hl i{color:var(--g)}
.farr{color:var(--muted);font-size:1.3rem;padding:0 5px}
.ggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:14px 0}
.gcard{background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:13px;padding:16px;transition:border-color .2s}
.gcard:hover{border-color:rgba(6,182,212,.3)}
.gcard .gci{font-size:1.5rem;margin-bottom:8px}
.gcard h4{font-size:.88rem;font-weight:700;color:#fff;margin-bottom:4px}
.gcard p{font-size:.78rem;color:#94a3b8;line-height:1.6}
.gdiv{border:none;border-top:1px solid rgba(255,255,255,.05);margin:18px 0}
.h3{font-family:"Syne",sans-serif;font-size:.97rem;font-weight:700;display:flex;align-items:center;gap:7px;margin:22px 0 10px}
.h3 i{font-size:1.1rem}
.h3.cyan i{color:var(--c)}
.h3.green i{color:var(--g)}
.h3.yellow i{color:var(--y)}
.h3.purple i{color:var(--p)}
.h3.red i{color:var(--r)}
.faq{border-bottom:1px solid rgba(255,255,255,.04)}
.faq:last-child{border-bottom:none}
.faqq{padding:14px 0;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:9px;font-size:.91rem;user-select:none}
.faqq i{color:var(--c);font-size:1.1rem;transition:transform .3s}
.faq.open .faqq i{transform:rotate(45deg)}
.faqa{display:none;padding:0 0 14px 28px;font-size:.85rem;color:#94a3b8;line-height:1.8}
.faq.open .faqa{display:block}
@media(max-width:768px){.hero{padding:26px 20px}.hero h1{font-size:1.4rem}.sec-cnt{padding:6px 18px 20px}.sec-h{padding:16px 18px}.flow{flex-direction:column}.farr{transform:rotate(90deg)}}
</style>

<!-- HERO -->
<div class="hero">
<h1><i class='bx bxs-book-content'></i> Panduan Pemakaian <?php echo htmlspecialchars($app_name); ?></h1>
<p>Panduan lengkap semua fitur billing rental PS/TV. Cocok untuk admin maupun operator baru yang belum pernah pakai sistem ini sebelumnya.</p>
<div class="htags">
<span class="htag"><i class='bx bx-play'></i> Start Sesi</span>
<span class="htag"><i class='bx bx-stop'></i> Billing & Stop</span>
<span class="htag"><i class='bx bx-food-menu'></i> FnB</span>
<span class="htag"><i class='bx bx-gift'></i> Voucher</span>
<span class="htag"><i class='bx bx-user'></i> Member VIP</span>
<span class="htag"><i class='bx bx-joystick'></i> Remote ADB</span>
<span class="htag"><i class='bx bx-plug'></i> Smart Plug</span>
<span class="htag"><i class='bx bx-calculator'></i> Closing</span>
<span class="htag"><i class='bx bx-shield'></i> Admin</span>
</div>
</div>

<!-- QUICK NAV -->
<div class="qnav">
<a href="#s1"><i class='bx bx-git-merge'></i> Alur Kerja</a>
<a href="#s2"><i class='bx bx-log-in'></i> Login</a>
<a href="#s3"><i class='bx bx-grid-alt'></i> Dashboard</a>
<a href="#s4"><i class='bx bx-play'></i> Start Sesi</a>
<a href="#s5"><i class='bx bx-cog'></i> Selama Sesi</a>
<a href="#s6"><i class='bx bx-stop'></i> Stop & Bayar</a>
<a href="#s7"><i class='bx bx-gift'></i> Voucher</a>
<a href="#s8"><i class='bx bx-food-menu'></i> FnB</a>
<a href="#s9"><i class='bx bx-user'></i> Member</a>
<a href="#s10"><i class='bx bx-joystick'></i> Remote ADB</a>
<a href="#s11"><i class='bx bxs-joystick'></i> Stik</a>
<a href="#s12"><i class='bx bx-plug'></i> Smart Plug</a>
<a href="#s13"><i class='bx bx-calculator'></i> Closing</a>
<a href="#s14"><i class='bx bx-history'></i> Riwayat</a>
<a href="#s15"><i class='bx bxl-whatsapp'></i> Laporan WA</a>
<a href="#s16"><i class='bx bx-id-card'></i> Absensi</a>
<a href="#s17"><i class='bx bx-shield'></i> Admin</a>
<a href="#s18"><i class='bx bx-help-circle'></i> FAQ</a>
</div>

<!-- S1: ALUR KERJA -->
<div class="sec open" id="s1">
<div class="sec-h" onclick="tog(this)">
<div class="sec-l"><div class="sec-icon" style="background:var(--cd);color:var(--c)"><i class='bx bx-git-merge'></i></div><div><div class="sec-title">Alur Kerja Umum</div><div class="sec-sub">Gambaran besar dari pelanggan datang hingga selesai</div></div></div>
<i class='bx bx-chevron-down chev'></i>
</div>
<div class="sec-body"><div class="sec-cnt">
<p style="color:#94a3b8;margin-bottom:16px">Alur kerja utama setiap kali ada pelanggan bermain:</p>
<div class="flow">
<div class="fstep"><i class='bx bx-user-plus'></i>Pelanggan<br>Datang</div><span class="farr">&#8594;</span>
<div class="fstep"><i class='bx bx-tv'></i>Pilih TV<br>Tersedia</div><span class="farr">&#8594;</span>
<div class="fstep"><i class='bx bx-package'></i>Pilih Paket<br>/ Open</div><span class="farr">&#8594;</span>
<div class="fstep hl"><i class='bx bx-play'></i>START<br>SESSION</div><span class="farr">&#8594;</span>
<div class="fstep"><i class='bx bx-timer'></i>Timer<br>Berjalan</div><span class="farr">&#8594;</span>
<div class="fstep" style="border-color:var(--r);background:var(--rd)"><i class='bx bx-stop' style="color:var(--r)"></i>STOP<br>&amp; Bayar</div>
</div>
<div class="box info"><i class='bx bx-info-circle'></i><div><b>2 Tipe Sesi:</b><br>&bull; <b>Paket Fixed</b> &mdash; durasi &amp; harga tetap, timer countdown mundur, sesi otomatis berhenti saat waktu habis.<br>&bull; <b>Open Bill</b> &mdash; tidak ada batas waktu, hitung per jam, timer count-up naik, dibayar saat kasir klik Stop.</div></div>
</div></div>
</div>

<!-- S2: LOGIN -->
<div class="sec" id="s2">
<div class="sec-h" onclick="tog(this)">
<div class="sec-l"><div class="sec-icon" style="background:var(--bd);color:var(--b)"><i class='bx bx-log-in'></i></div><div><div class="sec-title">Login ke Sistem</div><div class="sec-sub">Cara masuk sebagai admin atau operator</div></div></div>
<i class='bx bx-chevron-down chev'></i>
</div>
<div class="sec-body"><div class="sec-cnt">
<div class="steps">
<div class="step"><div class="sn">1</div><div class="sb"><h4>Buka Halaman Login</h4><p>Akses sistem melalui browser. Masukkan alamat server, contoh: <span class="code">localhost/escobarweb</span> atau IP server lokal di jaringan WiFi yang sama.</p></div></div>
<div class="step"><div class="sn">2</div><div class="sb"><h4>Masukkan Username &amp; Password</h4><p>Isi username dan password yang diberikan admin. Akun <span class="badge cyan">Admin</span> punya akses penuh. Akun <span class="badge gray">Pegawai</span> hanya mengakses fitur sesuai izin yang diatur admin.</p></div></div>
<div class="step"><div class="sn">3</div><div class="sb"><h4>Masuk ke Dashboard</h4><p>Setelah login berhasil, langsung diarahkan ke <b>Command Center (Dashboard)</b> &mdash; pusat kontrol semua unit TV.</p></div></div>
</div>
<div class="box warn"><i class='bx bx-lock'></i><div><b>Keamanan:</b> Jangan bagikan password ke orang lain. Setelah selesai shift, selalu klik tombol <b>Logout</b> di pojok kiri bawah sidebar.</div></div>
</div></div>
</div>

<!-- S3: DASHBOARD -->
<div class="sec" id="s3">
<div class="sec-h" onclick="tog(this)">
<div class="sec-l"><div class="sec-icon" style="background:var(--cd);color:var(--c)"><i class='bx bx-grid-alt'></i></div><div><div class="sec-title">Memahami Dashboard (Command Center)</div><div class="sec-sub">Penjelasan setiap elemen di halaman utama</div></div></div>
<i class='bx bx-chevron-down chev'></i>
</div>
<div class="sec-body"><div class="sec-cnt">
<div class="h3 cyan"><i class='bx bx-bar-chart-alt-2'></i> Status Bar</div>
<table class="gtbl"><thead><tr><th>Indikator</th><th>Artinya</th></tr></thead><tbody>
<tr><td><span class="badge green">&#9679; AKTIF</span></td><td>Jumlah TV yang sedang ada sesinya dan timer berjalan aktif</td></tr>
<tr><td><span class="badge yellow">&#9679; PAUSE</span></td><td>Jumlah TV yang sesinya sedang dijeda (timer berhenti sementara)</td></tr>
<tr><td><span class="badge gray">&#9679; FREE</span></td><td>Jumlah TV kosong/tersedia untuk sesi baru</td></tr>
<tr><td><span class="badge cyan">&#128250; TOTAL</span></td><td>Total seluruh unit TV yang terdaftar di sistem</td></tr>
</tbody></table>
<div class="h3 cyan"><i class='bx bx-tv'></i> Card TV &mdash; Status &amp; Warna Border</div>
<div class="ggrid">
<div class="gcard"><div class="gci">&#128309;</div><h4>Border Biru Normal</h4><p>TV tersedia (Available). Form start session aktif.</p></div>
<div class="gcard" style="border-color:rgba(16,185,129,.3)"><div class="gci">&#128994;</div><h4>Border Hijau (Active)</h4><p>Sesi sedang berjalan. Timer aktif bergerak.</p></div>
<div class="gcard" style="border-color:rgba(245,158,11,.3)"><div class="gci">&#128993;</div><h4>Border Kuning (Paused)</h4><p>Sesi dijeda. Timer berhenti, sisa waktu tersimpan.</p></div>
</div>
<div class="h3 cyan"><i class='bx bx-info-circle'></i> Elemen dalam Card TV</div>
<table class="gtbl"><thead><tr><th>Elemen</th><th>Fungsi</th></tr></thead><tbody>
<tr><td><b>Nama TV</b></td><td>Nama unit (misal: TV 01)</td></tr>
<tr><td><span class="badge green">&#9679; ADB ONLINE</span> / <span class="badge red">&#9679; ADB OFFLINE</span></td><td>Status koneksi ADB. Hijau = terkoneksi, merah = tidak terkoneksi</td></tr>
<tr><td><span class="badge cyan">&#9889; PLUG ON/OFF</span></td><td>Status smart plug Tuya (muncul jika ada plug terhubung)</td></tr>
<tr><td><b>Timer Besar</b></td><td>Sisa waktu (paket fixed) atau waktu berjalan (open bill). Berkedip merah saat waktu habis.</td></tr>
<tr><td><b>BILLING: Rp X</b></td><td>Tagihan berjalan real-time (hanya di mode Open Bill)</td></tr>
<tr><td><b>Player / FnB Order</b></td><td>Nama pelanggan dan total FnB yang sudah dipesan di sesi ini</td></tr>
<tr><td><b>Tombol Aksi</b></td><td>Pause, FnB, +Waktu, Pindah, Stop (muncul saat sesi aktif)</td></tr>
<tr><td><b>Remote Dock</b></td><td>5 tombol bulat di bawah kartu: Connect, Power, Vol-, Vol+, Home</td></tr>
</tbody></table>
</div></div>
</div>

<!-- S4: MULAI SESI -->
<div class="sec" id="s4">
<div class="sec-h" onclick="tog(this)">
<div class="sec-l"><div class="sec-icon" style="background:var(--gd);color:var(--g)"><i class='bx bx-play'></i></div><div><div class="sec-title">Memulai Sesi Bermain</div><div class="sec-sub">Start paket fixed, open bill, dengan/tanpa member, voucher menit</div></div></div>
<i class='bx bx-chevron-down chev'></i>
</div>
<div class="sec-body"><div class="sec-cnt">
<div class="h3 green"><i class='bx bx-package'></i> A. Start Paket Fixed (Durasi Tetap)</div>
<div class="steps">
<div class="step"><div class="sn">1</div><div class="sb"><h4>Pastikan TV Berstatus AVAILABLE</h4><p>Card TV yang bisa dipakai menampilkan form start session (tab PAKET dan OPEN).</p></div></div>
<div class="step"><div class="sn">2</div><div class="sb"><h4>Pilih Tab PAKET</h4><p>Klik tab <span class="badge cyan">&#128230; PAKET</span> di atas form (biasanya sudah aktif default).</p></div></div>
<div class="step"><div class="sn">3</div><div class="sb"><h4>Pilih Stik Controller</h4><p>Klik dropdown <b>"Pilih Stik..."</b> dan centang stik yang diberikan ke pelanggan. Boleh pilih lebih dari satu. Berguna untuk tracking stik agar tidak tertukar.</p></div></div>
<div class="step"><div class="sn">4</div><div class="sb"><h4>Pilih Paket</h4><p>Pilih paket dari dropdown. Tampil nama, durasi, dan harga. Contoh: <span class="code">1 Jam (Rp 8.000)</span>. Daftar paket diatur di menu <b>Paket &amp; Stok</b>.</p></div></div>
<div class="step"><div class="sn">5</div><div class="sb"><h4>Pilih Member (Opsional)</h4><p>Jika pelanggan adalah member VIP, pilih namanya. Saldo tampil di samping nama. Jika bukan member, biarkan di <b>"-- Tamu Regular (Cash) --"</b>.</p></div></div>
<div class="step"><div class="sn">6</div><div class="sb"><h4>Masukkan Voucher Menit (Opsional)</h4><p>Jika ada voucher gratis menit, ketik kode di kolom <span class="code">&#127873; Kode voucher menit</span> dan klik <b>CEK</b>. Jika valid, waktu bonus langsung ditambahkan ke sesi.</p></div></div>
<div class="step"><div class="sn">7</div><div class="sb"><h4>Klik START SESSION</h4><p>Klik <span class="badge cyan">&#9654; START SESSION</span>. Muncul pop-up konfirmasi status pembayaran.</p></div></div>
<div class="step"><div class="sn">8</div><div class="sb"><h4>Konfirmasi Pembayaran</h4><p>Pilih salah satu:<br>&bull; <span class="badge green">&#9989; SUDAH BAYAR</span> &mdash; Pilih metode (Cash/QRIS/Transfer/Debit) lalu klik <b>MULAI SESI</b>.<br>&bull; <span class="badge yellow">&#8987; BELUM BAYAR</span> &mdash; Sesi mulai dulu, bayar nanti saat stop. Timer tetap berjalan.<br><br><i>Catatan: untuk member, konfirmasi ini dilewati otomatis dan langsung pakai Member Saldo.</i></p></div></div>
</div>
<hr class="gdiv">
<div class="h3 green"><i class='bx bx-timer'></i> B. Start Open Bill (Bayar per Jam)</div>
<div class="steps">
<div class="step"><div class="sn">1</div><div class="sb"><h4>Klik Tab OPEN</h4><p>Klik tab <span class="badge cyan">&#9201; OPEN</span> di card TV yang tersedia.</p></div></div>
<div class="step"><div class="sn">2</div><div class="sb"><h4>Atur Rate per Jam</h4><p>Input tarif/jam sudah terisi default dari Settings. Ubah jika perlu. Contoh: <span class="code">10000</span> = Rp 10.000/jam.</p></div></div>
<div class="step"><div class="sn">3</div><div class="sb"><h4>Pilih Stik, Member, Voucher seperti biasa</h4><p>Sama seperti langkah 3-6 di atas. Voucher menit juga berlaku untuk open bill.</p></div></div>
<div class="step"><div class="sn">4</div><div class="sb"><h4>Klik START OPEN BILL</h4><p>Timer mulai naik dari 00:00:00 dan tagihan berjalan real-time di bawah timer: <b>BILLING: Rp X</b>.</p></div></div>
</div>
<div class="box info"><i class='bx bx-calculator'></i><div><b>Rumus Open Bill:</b> (Durasi jam &times; Rate/jam), dibulatkan ke atas sesuai pembulatan di Settings, tidak boleh di bawah minimum charge. Contoh: 40 menit &times; Rp 10.000/jam = Rp 6.667 &rarr; dibulatkan ke Rp 7.000.</div></div>
<div class="box warn"><i class='bx bx-error'></i><div><b>ADB Harus Online:</b> Agar timer tampil di TV, status ADB harus <span class="badge green">ONLINE</span>. Jika offline, klik &#128279; Connect di Remote Dock terlebih dahulu.</div></div>
</div></div>
</div>

<!-- S5: SELAMA SESI -->
<div class="sec" id="s5">
<div class="sec-h" onclick="tog(this)">
<div class="sec-l"><div class="sec-icon" style="background:var(--bd);color:var(--b)"><i class='bx bx-cog'></i></div><div><div class="sec-title">Selama Sesi Berjalan</div><div class="sec-sub">Pause, resume, tambah waktu, pindah TV, order FnB</div></div></div>
<i class='bx bx-chevron-down chev'></i>
</div>
<div class="sec-body"><div class="sec-cnt">
<table class="gtbl"><thead><tr><th>Tombol</th><th>Fungsi</th><th>Detail Penting</th></tr></thead><tbody>
<tr><td><span class="badge gray">&#9646;&#9646; Pause</span></td><td>Jeda timer sementara</td><td>Timer berhenti, sisa detik tersimpan di database. Overlay TV juga tampilkan status pause. Gunakan saat pelanggan istirahat.</td></tr>
<tr><td><span class="badge gray">&#9654; Resume</span></td><td>Lanjutkan setelah pause</td><td>Timer dilanjutkan dari sisa detik yang tersimpan. Target waktu dihitung ulang dari sekarang.</td></tr>
<tr><td><span class="badge cyan">+Waktu</span></td><td>Tambah durasi (hanya paket fixed)</td><td>Pilih paket tambahan dari modal. Waktu dan harga langsung ditambahkan ke sesi. Bisa dipakai bahkan setelah timer habis.</td></tr>
<tr><td><span class="badge gray">FnB</span></td><td>Order makanan/minuman</td><td>Stok langsung berkurang. Total FnB terakumulasi dan masuk ke billing saat stop.</td></tr>
<tr><td><span class="badge gray">Pindah</span></td><td>Pindah ke TV lain</td><td>Pilih TV tujuan yang Available. Sesi, timer, member, dan FnB dipindahkan sempurna. TV asal dimatikan, TV tujuan dinyalakan.</td></tr>
<tr><td><span class="badge red">Stop</span></td><td>Hentikan sesi &amp; billing</td><td>Buka modal billing dengan rincian biaya lengkap. Konfirmasi &rarr; sesi selesai, TV dimatikan otomatis.</td></tr>
</tbody></table>
<div class="box tip"><i class='bx bx-bulb'></i><div><b>Tips +Waktu setelah timer habis:</b> Jika timer menunjukkan "WAKTU HABIS" dan pelanggan mau lanjut, klik <span class="badge cyan">+Waktu</span>. Sistem tambah waktu dari sekarang, card TV kembali aktif, timer berjalan lagi.</div></div>
</div></div>
</div>

<!-- S6: STOP & BILLING -->
<div class="sec" id="s6">
<div class="sec-h" onclick="tog(this)">
<div class="sec-l"><div class="sec-icon" style="background:var(--rd);color:var(--r)"><i class='bx bx-stop'></i></div><div><div class="sec-title">Stop Sesi &amp; Proses Billing</div><div class="sec-sub">Manual stop, auto-stop timer habis, pembayaran saldo &amp; cash</div></div></div>
<i class='bx bx-chevron-down chev'></i>
</div>
<div class="sec-body"><div class="sec-cnt">
<div class="h3 red"><i class='bx bx-hand-up'></i> A. Manual Stop (Kasir Klik Stop)</div>
<div class="steps">
<div class="step"><div class="sn">1</div><div class="sb"><h4>Klik Tombol Stop</h4><p>Klik <span class="badge red">&#9634; Stop</span> di card TV. Sistem mengambil data billing dari server secara real-time.</p></div></div>
<div class="step"><div class="sn">2</div><div class="sb"><h4>Cek Detail Billing</h4><p>Modal "Konfirmasi Billing" muncul berisi: nama TV &amp; pelanggan, biaya sesi, durasi bermain, daftar FnB dipesan, untuk Open Bill ada detail perhitungan (rate/biaya aktual/min charge/pembulatan), dan Grand Total. Untuk member: info saldo tersedia dan sisa bayar cash.</p></div></div>
<div class="step"><div class="sn">3</div><div class="sb"><h4>Gunakan Voucher Diskon (Opsional)</h4><p>Di modal billing ada kolom <b>"Kode Voucher (Opsional)"</b>. Masukkan kode voucher nominal/persen &rarr; klik <b>CEK</b> &rarr; diskon langsung diterapkan ke Grand Total jika valid.</p></div></div>
<div class="step"><div class="sn">4</div><div class="sb"><h4>Pilih/Konfirmasi Metode Pembayaran</h4><p>Grid metode pembayaran muncul di bawah. Klik metode yang sesuai. Jika sudah bayar di awal, metode terisi otomatis tapi bisa diubah.</p></div></div>
<div class="step"><div class="sn">5</div><div class="sb"><h4>Klik Konfirmasi STOP</h4><p>Sistem memproses: potong saldo member (jika ada), simpan transaksi sebagai completed, matikan TV via ADB, matikan smart plug (jika ada). Halaman refresh otomatis.</p></div></div>
</div>
<hr class="gdiv">
<div class="h3 yellow"><i class='bx bx-alarm-exclamation'></i> B. Auto-Stop (Timer Habis Otomatis)</div>
<p style="color:#94a3b8;margin-bottom:12px">Saat countdown paket fixed mencapai 00:00:00:</p>
<div class="ggrid">
<div class="gcard"><div class="gci">&#128308;</div><h4>Timer Merah "WAKTU HABIS"</h4><p>Timer berubah merah berkedip dan menampilkan teks WAKTU HABIS.</p></div>
<div class="gcard"><div class="gci">&#128250;</div><h4>TV Dimatikan Otomatis</h4><p>Perintah stop dikirim ke TV via ADB. TV masuk sleep mode.</p></div>
<div class="gcard"><div class="gci">&#128276;</div><h4>Notifikasi Merah Muncul</h4><p>"TV X: SELESAI! Sistem telah mematikan TV otomatis."</p></div>
<div class="gcard"><div class="gci">&#128172;</div><h4>Modal Billing Otomatis</h4><p>Pop-up billing langsung muncul agar kasir segera proses pembayaran.</p></div>
</div>
<div class="box info"><i class='bx bx-info-circle'></i><div><b>Belum Bayar di Awal?</b> Jika saat start dipilih "Belum Bayar", saat timer habis muncul modal khusus <b>"TV INI BELUM BAYAR!"</b> yang meminta kasir pilih metode pembayaran sebelum sesi bisa ditutup.</div></div>
<hr class="gdiv">
<div class="h3 yellow"><i class='bx bx-wallet'></i> C. Pembayaran Saldo Member</div>
<table class="gtbl"><thead><tr><th>Kondisi Saldo</th><th>Yang Terjadi</th></tr></thead><tbody>
<tr><td>Saldo &ge; Grand Total</td><td>Tombol hijau "POTONG SALDO &amp; STOP". Saldo terpotong penuh otomatis tanpa perlu uang cash.</td></tr>
<tr><td>Saldo &lt; Grand Total</td><td>Kotak peringatan merah: menampilkan berapa yang dipotong dari saldo dan berapa "Sisa Bayar Cash" yang harus dibayar tunai pelanggan.</td></tr>
<tr><td>Saldo = 0 atau non-member</td><td>Pembayaran sepenuhnya via metode yang dipilih (Cash/QRIS/dll).</td></tr>
</tbody></table>
</div></div>
</div>

<!-- S7: VOUCHER -->
<div class="sec" id="s7">
<div class="sec-h" onclick="tog(this)">
<div class="sec-l"><div class="sec-icon" style="background:var(--pd);color:var(--p)"><i class='bx bx-gift'></i></div><div><div class="sec-title">Sistem Voucher</div><div class="sec-sub">Buat, kelola, dan gunakan voucher diskon &amp; gratis menit</div></div></div>
<i class='bx bx-chevron-down chev'></i>
</div>
<div class="sec-body"><div class="sec-cnt">
<div class="box info"><i class='bx bx-info-circle'></i><div><b>3 Jenis Voucher yang Tersedia:</b><br>&bull; <span class="badge green">Nominal</span> &mdash; Potongan harga tetap. Contoh: diskon Rp 5.000 dari total tagihan.<br>&bull; <span class="badge cyan">Persen</span> &mdash; Potongan persentase. Contoh: diskon 20% dari total tagihan.<br>&bull; <span class="badge purple">Menit</span> &mdash; Gratis waktu bermain. Contoh: gratis 30 menit tambahan. Dipakai saat Start Session, bukan saat billing.</div></div>
<div class="h3 purple"><i class='bx bx-plus-circle'></i> Cara Membuat Voucher Baru</div>
<div class="steps">
<div class="step"><div class="sn">1</div><div class="sb"><h4>Buka Menu Voucher</h4><p>Klik menu <b>Voucher</b> di sidebar.</p></div></div>
<div class="step"><div class="sn">2</div><div class="sb"><h4>Isi Form Buat Voucher</h4><p>&bull; <b>Jenis:</b> Pilih Nominal, Persen, atau Menit<br>&bull; <b>Nilai:</b> Angka diskon (5000 untuk Rp 5.000, 20 untuk 20%, 30 untuk 30 menit)<br>&bull; <b>Nama:</b> Nama voucher untuk identifikasi internal<br>&bull; <b>Kode Custom:</b> Suffix kustom (misal: PROMO &rarr; kode: CECOWEL-PROMO). Kosongkan untuk kode acak.<br>&bull; <b>Jumlah:</b> Buat banyak voucher sekaligus (maks. 100)<br>&bull; <b>Berlaku sampai:</b> Tanggal expired (opsional, kosong = tidak ada batas)</p></div></div>
<div class="step"><div class="sn">3</div><div class="sb"><h4>Klik Buat Voucher</h4><p>Kode dibuat otomatis dengan format <span class="code">CECOWEL-XXXX-XXXX</span>. Voucher langsung muncul di tabel.</p></div></div>
</div>
<div class="h3 purple"><i class='bx bx-tag'></i> Cara Menggunakan Voucher</div>
<table class="gtbl"><thead><tr><th>Jenis</th><th>Kapan Dipakai</th><th>Caranya</th></tr></thead><tbody>
<tr><td><span class="badge green">Nominal</span> / <span class="badge cyan">Persen</span></td><td>Saat Stop Billing</td><td>Di modal billing, masukkan kode di kolom "Kode Voucher (Opsional)" &rarr; klik CEK &rarr; diskon diterapkan ke Grand Total &rarr; klik stop.</td></tr>
<tr><td><span class="badge purple">Menit</span></td><td>Saat Start Session</td><td>Di form start session, masukkan kode di kolom "Kode voucher menit" &rarr; klik CEK &rarr; menit bonus ditambahkan ke durasi sesi.</td></tr>
</tbody></table>
<div class="h3 purple"><i class='bx bx-toggle-left'></i> Status Voucher</div>
<table class="gtbl"><thead><tr><th>Status</th><th>Artinya</th></tr></thead><tbody>
<tr><td><span class="badge green">Aktif</span></td><td>Voucher bisa digunakan</td></tr>
<tr><td><span class="badge gray">Nonaktif</span></td><td>Dinonaktifkan admin, tidak bisa dipakai</td></tr>
<tr><td><span class="badge cyan">Used</span></td><td>Sudah pernah dipakai (sekali pakai)</td></tr>
<tr><td><span class="badge red">Expired</span></td><td>Sudah melewati tanggal berlaku (otomatis expired)</td></tr>
</tbody></table>
</div></div>
</div>

<!-- S8: FNB -->
<div class="sec" id="s8">
<div class="sec-h" onclick="tog(this)">
<div class="sec-l"><div class="sec-icon" style="background:var(--yd);color:var(--y)"><i class='bx bx-food-menu'></i></div><div><div class="sec-title">Order Food &amp; Beverage (FnB)</div><div class="sec-sub">Cara pesan makanan/minuman saat sesi berjalan</div></div></div>
<i class='bx bx-chevron-down chev'></i>
</div>
<div class="sec-body"><div class="sec-cnt">
<div class="steps">
<div class="step"><div class="sn">1</div><div class="sb"><h4>Klik Tombol FnB di Card TV</h4><p>TV harus dalam sesi aktif. Klik tombol <span class="badge gray">FnB</span> di tombol aksi.</p></div></div>
<div class="step"><div class="sn">2</div><div class="sb"><h4>Pilih Item dari Dropdown</h4><p>Dropdown menampilkan semua item snack yang stoknya masih ada. Tampil nama, harga, dan sisa stok.</p></div></div>
<div class="step"><div class="sn">3</div><div class="sb"><h4>Isi Jumlah (Qty)</h4><p>Isi jumlah item yang dipesan. Default = 1.</p></div></div>
<div class="step"><div class="sn">4</div><div class="sb"><h4>Klik Tambah</h4><p>Stok otomatis berkurang. Total FnB di card TV langsung terupdate. Pesanan terakumulasi dan muncul di billing saat stop.</p></div></div>
</div>
<div class="box info"><i class='bx bx-info-circle'></i><div>Bisa order FnB berkali-kali selama sesi berjalan. Semua pesanan ditampilkan lengkap (nama item, qty, subtotal) di modal billing saat stop.</div></div>
<div class="box warn"><i class='bx bx-wallet'></i><div><b>FnB untuk Member dengan Saldo:</b> Jika saldo tidak cukup untuk FnB, muncul popup dengan pilihan: <b>Top-Up Saldo Dulu</b> atau <b>Bayar Cash</b> (FnB tetap masuk tapi tidak potong saldo).</div></div>
</div></div>
</div>

<!-- S9: MEMBER -->
<div class="sec" id="s9">
<div class="sec-h" onclick="tog(this)">
<div class="sec-l"><div class="sec-icon" style="background:var(--pd);color:var(--p)"><i class='bx bx-user'></i></div><div><div class="sec-title">Sistem Member VIP</div><div class="sec-sub">Daftar member, top up saldo, cara pakai saldo</div></div></div>
<i class='bx bx-chevron-down chev'></i>
</div>
<div class="sec-body"><div class="sec-cnt">
<div class="h3 purple"><i class='bx bx-user-plus'></i> Tambah Member Baru</div>
<div class="steps">
<div class="step"><div class="sn">1</div><div class="sb"><h4>Buka Menu Member VIP</h4><p>Klik menu <b>Member VIP</b> di sidebar (perlu izin dari admin).</p></div></div>
<div class="step"><div class="sn">2</div><div class="sb"><h4>Isi Data dan Simpan</h4><p>Isi nama member, nomor HP (opsional), dan saldo awal jika ada deposit pertama. Klik Simpan.</p></div></div>
</div>
<div class="h3 purple"><i class='bx bx-wallet-alt'></i> Top Up Saldo Member</div>
<table class="gtbl"><thead><tr><th>Cara</th><th>Lokasi</th><th>Langkah</th></tr></thead><tbody>
<tr><td>Via halaman Member</td><td>Menu Member VIP</td><td>Klik tombol Top Up di baris member &rarr; isi nominal &rarr; konfirmasi</td></tr>
<tr><td>Via halaman Riwayat</td><td>Menu Riwayat Transaksi</td><td>Klik tombol <b>+ Top Up Member</b> di atas &rarr; pilih member &rarr; isi nominal &rarr; simpan</td></tr>
<tr><td>Via Dashboard (saldo kurang)</td><td>Modal Saldo Kurang</td><td>Saat saldo tidak cukup, klik <b>TOP-UP SALDO DULU</b> di modal yang muncul</td></tr>
</tbody></table>
<div class="h3 purple"><i class='bx bx-money'></i> Cara Pakai Saldo Saat Sesi</div>
<div class="steps">
<div class="step"><div class="sn">1</div><div class="sb"><h4>Pilih Nama Member Saat Start</h4><p>Di form start session, pilih nama member dari dropdown. Saldo tampil di samping: <span class="code">Budi [Rp 50.000]</span>. Sistem otomatis memakai saldo sebagai metode bayar.</p></div></div>
<div class="step"><div class="sn">2</div><div class="sb"><h4>Saldo Dipotong Otomatis Saat Stop</h4><p>Jika saldo cukup: terpotong penuh. Jika kurang: saldo habis dulu, sisanya bayar cash. Jika saldo 0: bayar tunai biasa.</p></div></div>
</div>
<div class="box ok"><i class='bx bx-check-shield'></i><div><b>Saldo Tidak Pernah Negatif:</b> Sistem mencegah saldo member jadi minus. Jika saldo lebih kecil dari tagihan, hanya saldo yang ada yang dipotong, sisanya wajib bayar cash.</div></div>
</div></div>
</div>

<!-- S10: REMOTE ADB -->
<div class="sec" id="s10">
<div class="sec-h" onclick="tog(this)">
<div class="sec-l"><div class="sec-icon" style="background:var(--cd);color:var(--c)"><i class='bx bx-joystick'></i></div><div><div class="sec-title">Remote Control TV via ADB</div><div class="sec-sub">Kontrol TV dari dashboard tanpa menyentuh remote fisik</div></div></div>
<i class='bx bx-chevron-down chev'></i>
</div>
<div class="sec-body"><div class="sec-cnt">
<p style="color:#94a3b8;margin-bottom:14px">Di bawah setiap card TV ada <b>Remote Dock</b> dengan 5 tombol:</p>
<table class="gtbl"><thead><tr><th>Tombol</th><th>Ikon</th><th>Fungsi</th></tr></thead><tbody>
<tr><td><b>Connect</b></td><td>&#128279; hijau</td><td><b>Wajib klik ini dulu sebelum tombol lain berfungsi.</b> Menghubungkan ADB ke TV. Status berubah dari OFFLINE ke ONLINE. Tombol berputar selama proses koneksi (&plusmn;2 detik).</td></tr>
<tr><td><b>Power</b></td><td>&#9211;</td><td>Toggle power layar TV (nyala/mati layar).</td></tr>
<tr><td><b>Vol &minus;</b></td><td>&#128263;</td><td>Kecilkan volume TV satu langkah.</td></tr>
<tr><td><b>Vol +</b></td><td>&#128266;</td><td>Besarkan volume TV satu langkah.</td></tr>
<tr><td><b>Home</b></td><td>&#127968;</td><td>Tekan tombol Home di TV &mdash; kembali ke homescreen Android TV.</td></tr>
</tbody></table>
<div class="box warn"><i class='bx bx-error'></i><div><b>Syarat ADB Berfungsi:</b><br>1. TV dan server di jaringan WiFi yang sama<br>2. USB Debugging / ADB over WiFi diaktifkan di TV (Settings &rarr; Developer Options)<br>3. Path ADB sudah diset di Settings &rarr; Hardware Bridge<br>4. Klik Connect setelah halaman di-refresh atau server restart</div></div>
<div class="box tip"><i class='bx bx-bulb'></i><div><b>Auto Reconnect:</b> Sistem otomatis mencoba reconnect semua ADB setiap 2 menit. Jadi setelah klik Connect sekali, biasanya tidak perlu klik lagi kecuali ada gangguan jaringan.</div></div>
</div></div>
</div>

<!-- S11: STIK -->
<div class="sec" id="s11">
<div class="sec-h" onclick="tog(this)">
<div class="sec-l"><div class="sec-icon" style="background:rgba(249,115,22,.12);color:#f97316"><i class='bx bxs-joystick'></i></div><div><div class="sec-title">Management Stik Controller</div><div class="sec-sub">Daftar stik, tracking penggunaan, tambah stik baru</div></div></div>
<i class='bx bx-chevron-down chev'></i>
</div>
<div class="sec-body"><div class="sec-cnt">
<p style="color:#94a3b8;margin-bottom:14px">Fitur ini untuk tracking stik mana yang sedang dipakai agar tidak tertukar antar pelanggan.</p>
<div class="steps">
<div class="step"><div class="sn">1</div><div class="sb"><h4>Buka Menu Management Stik</h4><p>Klik menu <b>Management Stik</b> di sidebar.</p></div></div>
<div class="step"><div class="sn">2</div><div class="sb"><h4>Isi Nama Stik dan Simpan</h4><p>Isi nama/identitas stik, contoh: <span class="code">DualSense Putih A</span>. Klik Simpan. Stik muncul di daftar dengan status <span class="badge green">AVAILABLE</span>.</p></div></div>
</div>
<div class="box info"><i class='bx bx-info-circle'></i><div>Data stik yang dipakai dalam setiap sesi tersimpan di kolom <b>Stik</b> pada riwayat transaksi. Berguna untuk audit jika ada stik hilang atau rusak.</div></div>
</div></div>
</div>

<!-- S12: SMART PLUG -->
<div class="sec" id="s12">
<div class="sec-h" onclick="tog(this)">
<div class="sec-l"><div class="sec-icon" style="background:var(--gd);color:var(--g)"><i class='bx bx-plug'></i></div><div><div class="sec-title">Smart Plug Tuya (Listrik Otomatis)</div><div class="sec-sub">TV menyala/mati otomatis sesuai status sesi via smart plug</div></div></div>
<i class='bx bx-chevron-down chev'></i>
</div>
<div class="sec-body"><div class="sec-cnt">
<div class="box info"><i class='bx bx-info-circle'></i><div><b>Apa itu Smart Plug Tuya?</b> Stopkontak pintar yang bisa dikontrol lewat jaringan. Sistem menyalakan daya TV saat sesi dimulai dan mematikan saat sesi selesai &mdash; otomatis, tanpa sentuh fisik.</div></div>
<div class="h3 green"><i class='bx bx-plus'></i> Menambah Smart Plug (Admin Only)</div>
<div class="steps">
<div class="step"><div class="sn">1</div><div class="sb"><h4>Buka Menu Smart Plug Tuya</h4><p>Klik <b>Smart Plug Tuya</b> di sidebar. Hanya admin yang bisa akses.</p></div></div>
<div class="step"><div class="sn">2</div><div class="sb"><h4>Isi Data Perangkat</h4><p>Isi <b>Nama</b>, <b>Device ID</b>, <b>IP Address lokal</b> plug di WiFi, <b>Local Key</b>, dan <b>Version</b> (biasanya 3.3 atau 3.4). Data ini dari aplikasi Tuya Smart atau tinytuya scanner.</p></div></div>
<div class="step"><div class="sn">3</div><div class="sb"><h4>Pilih TV yang Dikontrol</h4><p>Pasangkan plug ke TV tertentu. Plug otomatis ON saat sesi dimulai dan OFF saat sesi selesai untuk TV tersebut.</p></div></div>
</div>
<div class="h3 green"><i class='bx bx-zap'></i> Kontrol Manual dari Dashboard</div>
<p style="color:#94a3b8;margin-bottom:12px">Di card TV ada tombol kecil <span class="badge green">&#9889; PLUG ON</span> atau <span class="badge red">&#9889; PLUG OFF</span>. Klik untuk toggle manual.</p>
<div class="box warn"><i class='bx bx-error'></i><div><b>Syarat:</b> Server harus terinstall <b>Python 3</b> dan library <b>tinytuya</b> (<span class="code">pip install tinytuya</span>). Smart plug harus di jaringan WiFi yang sama. Set path Python di Settings &rarr; Hardware Bridge.</div></div>
</div></div>
</div>

<!-- S13: CLOSING -->
<div class="sec" id="s13">
<div class="sec-h" onclick="tog(this)">
<div class="sec-l"><div class="sec-icon" style="background:var(--gd);color:var(--g)"><i class='bx bx-calculator'></i></div><div><div class="sec-title">Closing Shift &amp; Audit</div><div class="sec-sub">Laporan pendapatan harian dan log aktivitas operator</div></div></div>
<i class='bx bx-chevron-down chev'></i>
</div>
<div class="sec-body"><div class="sec-cnt">
<p style="color:#94a3b8;margin-bottom:14px">Digunakan di akhir shift untuk menghitung total pendapatan dan mengaudit aktivitas operator.</p>
<div class="h3 green"><i class='bx bx-money'></i> Tab 1 &mdash; Detail Pendapatan</div>
<table class="gtbl"><thead><tr><th>Item</th><th>Penjelasan</th></tr></thead><tbody>
<tr><td><b>Pendapatan Billing</b></td><td>Total transaksi rental completed dalam rentang tanggal</td></tr>
<tr><td><b>Penjualan F&amp;B</b></td><td>Total penjualan makanan/minuman</td></tr>
<tr><td><b>Deposit / Top Up</b></td><td>Total saldo yang di-top up member (bukan pendapatan tunai)</td></tr>
<tr><td><b>Grand Total</b></td><td>Jumlah semua &rarr; ini yang harus ada di laci kasir (dikurangi yang bayar via saldo member)</td></tr>
<tr><td><b>Bayar via Saldo</b></td><td>Jumlah yang dibayar menggunakan saldo member (tidak masuk uang fisik)</td></tr>
<tr><td><b>Bayar Saldo + Cash</b></td><td>Jumlah dari transaksi partial (saldo kurang, sisanya cash)</td></tr>
</tbody></table>
<div class="h3 green"><i class='bx bx-fingerprint'></i> Tab 2 &mdash; Log Aktivitas</div>
<p style="color:#94a3b8;margin-bottom:10px">Semua aktivitas operator tercatat otomatis:</p>
<table class="gtbl"><thead><tr><th>Aksi</th><th>Yang Dicatat</th></tr></thead><tbody>
<tr><td><span class="badge green">START</span></td><td>TV, paket, harga, stik, member/tamu, metode bayar, voucher menit</td></tr>
<tr><td><span class="badge red">STOP</span></td><td>TV, trx ID, durasi, total bayar, metode bayar, voucher diskon</td></tr>
<tr><td><span class="badge yellow">ORDER FNB</span></td><td>TV, item, qty, total harga</td></tr>
<tr><td><span class="badge cyan">ADD TIME</span></td><td>TV, paket tambahan, menit dan harga yang ditambah</td></tr>
<tr><td><span class="badge gray">MOVE</span></td><td>TV asal, TV tujuan, nomor transaksi</td></tr>
<tr><td><span class="badge gray">REMOTE ADB</span></td><td>TV, tombol yang ditekan</td></tr>
<tr><td><span class="badge purple">VOUCHER</span></td><td>Kode voucher, nilai diskon, transaksi yang dipakai</td></tr>
<tr><td><span class="badge green">TOPUP</span></td><td>Nama member, nominal, saldo baru</td></tr>
</tbody></table>
<div class="h3 green"><i class='bx bx-error-circle'></i> Anomali / Red Flag</div>
<p style="color:#94a3b8;margin-bottom:10px">Closing juga menampilkan daftar transaksi mencurigakan: sesi yang durasinya sangat pendek (&lt; 2 menit). Bisa menandakan kesalahan atau kecurangan.</p>
<div class="box warn"><i class='bx bx-error'></i><div><b>Selisih Uang:</b> Jika uang di laci lebih kecil dari Grand Total Closing, cek log aktivitas. Perhatikan transaksi bypass, delete, voucher, atau pembayaran via saldo member (tidak masuk uang fisik).</div></div>
</div></div>
</div>

<!-- S14: RIWAYAT -->
<div class="sec" id="s14">
<div class="sec-h" onclick="tog(this)">
<div class="sec-l"><div class="sec-icon" style="background:var(--bd);color:var(--b)"><i class='bx bx-history'></i></div><div><div class="sec-title">Riwayat Transaksi</div><div class="sec-sub">Lihat, filter, export PDF, dan kelola semua riwayat</div></div></div>
<i class='bx bx-chevron-down chev'></i>
</div>
<div class="sec-body"><div class="sec-cnt">
<p style="color:#94a3b8;margin-bottom:14px">Halaman Riwayat menampilkan data historis lengkap. Ada 3 tabel:</p>
<div class="ggrid">
<div class="gcard"><div class="gci" style="color:var(--c)">&#127918;</div><h4>Billing Rental</h4><p>Semua sesi selesai. Info: TV, paket, member/tamu, stik, durasi, metode bayar, diskon voucher, dan total.</p></div>
<div class="gcard"><div class="gci" style="color:var(--y)">&#127839;</div><h4>F&amp;B Orders</h4><p>Semua pesanan makanan/minuman dari sesi TV maupun direct sale dari kasir.</p></div>
<div class="gcard"><div class="gci" style="color:var(--g)">&#128179;</div><h4>Top Up Member</h4><p>Semua riwayat deposit/top up saldo. Tampil nama member, nominal, dan saldo terkini.</p></div>
</div>
<div class="h3 cyan"><i class='bx bx-filter'></i> Filter &amp; Export</div>
<table class="gtbl"><thead><tr><th>Fitur</th><th>Fungsi</th></tr></thead><tbody>
<tr><td><b>Filter Tanggal</b></td><td>Pilih rentang mulai-sampai tanggal untuk tampilkan data periode tertentu</td></tr>
<tr><td><b>Filter Tipe</b></td><td>Tampilkan Semua / Hanya Rental / Hanya F&amp;B / Hanya Top Up</td></tr>
<tr><td><b>Export PDF</b></td><td>Klik tombol Export PDF &rarr; isi periode &amp; nama operator &rarr; Buka Preview &rarr; Cetak/Save as PDF di browser</td></tr>
<tr><td><b>+ Top Up Member</b></td><td>Tombol shortcut untuk tambah top up saldo member langsung dari halaman ini</td></tr>
</tbody></table>
<div class="box danger"><i class='bx bx-trash'></i><div><b>Hapus Data:</b> Ada tombol hapus per baris dan tombol Hapus Massal per periode. <b>Data yang dihapus tidak bisa dikembalikan!</b> Gunakan dengan sangat hati-hati.</div></div>
</div></div>
</div>

<!-- S15: LAPORAN WA -->
<div class="sec" id="s15">
<div class="sec-h" onclick="tog(this)">
<div class="sec-l"><div class="sec-icon" style="background:rgba(37,211,102,.1);color:#25d366"><i class='bx bxl-whatsapp'></i></div><div><div class="sec-title">Laporan ke WhatsApp Admin</div><div class="sec-sub">Kirim ringkasan pendapatan harian ke WA owner/admin</div></div></div>
<i class='bx bx-chevron-down chev'></i>
</div>
<div class="sec-body"><div class="sec-cnt">
<div class="steps">
<div class="step"><div class="sn">1</div><div class="sb"><h4>Simpan Nomor WA Admin</h4><p>Buka menu <b>Laporan ke WA</b>. Di bagian bawah, masukkan nomor WhatsApp pemilik (format: 628xxxxxxxxx) lalu klik Simpan.</p></div></div>
<div class="step"><div class="sn">2</div><div class="sb"><h4>Pilih Tipe Laporan &amp; Kirim</h4><p>Pilih tipe: <b>Harian</b>, <b>Mingguan</b>, atau <b>Bulanan</b>. Klik tombol <b>Kirim Laporan</b>. Browser membuka WhatsApp Web/App dengan pesan laporan tersusun otomatis. Klik Send di WA.</p></div></div>
</div>
<div class="box info"><i class='bx bx-info-circle'></i><div>Isi laporan otomatis: pendapatan billing, FnB, total, unit aktif, jumlah transaksi selesai, tanggal, jam kirim, dan nama operator pengirim.</div></div>
</div></div>
</div>

<!-- S16: ABSENSI -->
<div class="sec" id="s16">
<div class="sec-h" onclick="tog(this)">
<div class="sec-l"><div class="sec-icon" style="background:var(--bd);color:var(--b)"><i class='bx bx-id-card'></i></div><div><div class="sec-title">Absensi Online Operator</div><div class="sec-sub">Rekam jam masuk dan jam keluar shift</div></div></div>
<i class='bx bx-chevron-down chev'></i>
</div>
<div class="sec-body"><div class="sec-cnt">
<div class="steps">
<div class="step"><div class="sn">1</div><div class="sb"><h4>Absen Masuk di Awal Shift</h4><p>Buka menu <b>Absensi Online</b>. Klik tombol <span class="badge green">ABSEN MASUK</span>. Jam masuk otomatis direkam. Tidak bisa absen masuk dua kali di hari yang sama.</p></div></div>
<div class="step"><div class="sn">2</div><div class="sb"><h4>Absen Keluar di Akhir Shift</h4><p>Klik tombol <span class="badge red">ABSEN KELUAR</span>. Jam keluar direkam dan durasi shift dihitung otomatis dalam menit. Tidak bisa absen keluar sebelum absen masuk.</p></div></div>
<div class="step"><div class="sn">3</div><div class="sb"><h4>Lihat Riwayat Kehadiran</h4><p>Di bagian bawah halaman ada tabel riwayat kehadiran dengan filter tanggal. Admin bisa melihat kehadiran semua operator.</p></div></div>
</div>
</div></div>
</div>

<!-- S17: ADMIN -->
<div class="sec" id="s17">
<div class="sec-h" onclick="tog(this)">
<div class="sec-l"><div class="sec-icon" style="background:var(--rd);color:var(--r)"><i class='bx bx-shield'></i></div><div><div class="sec-title">Pengaturan Admin (Settings)</div><div class="sec-sub">Konfigurasi sistem, izin operator, hardware, overlay TV</div></div></div>
<i class='bx bx-chevron-down chev'></i>
</div>
<div class="sec-body"><div class="sec-cnt">
<div class="box danger"><i class='bx bx-lock-alt'></i><div>Halaman Settings <b>hanya bisa diakses Admin</b>. Operator/Pegawai tidak bisa masuk ke halaman ini.</div></div>
<div class="h3 red"><i class='bx bx-cog'></i> Kartu Konfigurasi di Settings</div>
<table class="gtbl"><thead><tr><th>Kartu</th><th>Isi Pengaturan</th></tr></thead><tbody>
<tr><td><b>Status Lisensi</b></td><td>Info nama klien, serial key, status aktif/expired, sisa hari aktif. Data dari server lisensi.</td></tr>
<tr><td><b>Informasi Bisnis</b></td><td>Nama rental, tarif default open bill/jam, minimum charge, dan pembulatan harga.</td></tr>
<tr><td><b>Hardware Bridge</b></td><td>Path ADB executable (<span class="code">C:\platform-toolsdb.exe</span>) dan path Python untuk Tuya plug.</td></tr>
<tr><td><b>Aksi Expired</b></td><td>Pilih aksi saat timer habis: Sleep TV (default) atau Tampilkan Gambar (upload gambar custom).</td></tr>
<tr><td><b>Izin Akses Operator</b></td><td>Toggle on/off akses pegawai: Kontrol Unit TV, Manajemen Member, Stok &amp; FnB, Lihat Riwayat, Laporan Closing.</td></tr>
<tr><td><b>Overlay TV</b></td><td>Kustomisasi tampilan timer di TV: posisi (pojok kiri/kanan/bawah), warna (normal/warning/danger), ukuran font, tampilkan/sembunyikan info player.</td></tr>
<tr><td><b>Keamanan Akun</b></td><td>Ganti password admin. Wajib masukkan password lama untuk verifikasi.</td></tr>
</tbody></table>
<div class="h3 red"><i class='bx bx-user-badge'></i> Kelola Operator</div>
<table class="gtbl"><thead><tr><th>Fungsi</th><th>Caranya</th></tr></thead><tbody>
<tr><td>Tambah operator baru</td><td>Menu <b>Kelola Operator</b> &rarr; isi form kiri (Nama, Username, Password, Role) &rarr; klik Daftarkan</td></tr>
<tr><td>Hapus operator</td><td>Klik ikon tempat sampah di baris operator &rarr; konfirmasi hapus (tidak bisa hapus akun sendiri)</td></tr>
<tr><td>Atur izin akses</td><td>Settings &rarr; Izin Akses Operator &rarr; toggle fitur &rarr; klik Terapkan Izin. Pegawai perlu logout-login ulang agar perubahan aktif.</td></tr>
</tbody></table>
<div class="h3 red"><i class='bx bx-credit-card'></i> Menu Pembayaran</div>
<table class="gtbl"><thead><tr><th>Fungsi</th><th>Detail</th></tr></thead><tbody>
<tr><td>Aktifkan/nonaktifkan metode</td><td>Toggle metode. Yang aktif muncul di modal billing dan start session.</td></tr>
<tr><td>Tambah metode kustom</td><td>Isi nama metode baru (misal: OVO, GoPay) &rarr; simpan &rarr; langsung bisa dipilih di billing</td></tr>
<tr><td>Rekap hari ini</td><td>Ringkasan jumlah transaksi dan total per metode bayar untuk hari ini</td></tr>
</tbody></table>
</div></div>
</div>

<!-- S18: FAQ -->
<div class="sec" id="s18">
<div class="sec-h" onclick="tog(this)">
<div class="sec-l"><div class="sec-icon" style="background:var(--cd);color:var(--c)"><i class='bx bx-help-circle'></i></div><div><div class="sec-title">FAQ &mdash; Pertanyaan &amp; Masalah Umum</div><div class="sec-sub">Solusi cepat untuk masalah yang sering ditemui</div></div></div>
<i class='bx bx-chevron-down chev'></i>
</div>
<div class="sec-body"><div class="sec-cnt">

<div class="faq" onclick="this.classList.toggle('open')">
<div class="faqq"><i class='bx bx-plus-circle'></i> ADB selalu offline, TV tidak bisa dikontrol?</div>
<div class="faqa">Cek berurutan: (1) TV dan server di WiFi yang sama. (2) Aktifkan USB Debugging / ADB over Network di TV (Settings &rarr; Developer Options). (3) Pastikan path ADB di Settings benar. (4) Klik tombol &#128279; Connect di Remote Dock. (5) Jika masih gagal, buka Command Prompt dan jalankan <span class="code">adb kill-server</span> lalu <span class="code">adb start-server</span>, kemudian Connect lagi.</div>
</div>

<div class="faq" onclick="this.classList.toggle('open')">
<div class="faqq"><i class='bx bx-plus-circle'></i> Timer overlay di TV tidak muncul?</div>
<div class="faqa">Overlay butuh app Escobar TV Client di TV. Cek: (1) App sudah terinstall di TV Android. (2) Di TV: Settings &rarr; Accessibility &rarr; Escobar Accessibility Service &rarr; aktifkan. (3) Jangan pernah force-stop app tersebut karena mematikan accessibility service. (4) Jika masih tidak muncul, Connect ADB ulang dari dashboard lalu start sesi baru.</div>
</div>

<div class="faq" onclick="this.classList.toggle('open')">
<div class="faqq"><i class='bx bx-plus-circle'></i> Pelanggan mau tambah waktu setelah timer habis?</div>
<div class="faqa">Klik tombol <span class="badge cyan">+Waktu</span> di card TV. Pilih paket tambahan. Sistem otomatis tambah waktu dari sekarang. Card TV kembali aktif dan timer jalan lagi. Tidak perlu stop-start ulang.</div>
</div>

<div class="faq" onclick="this.classList.toggle('open')">
<div class="faqq"><i class='bx bx-plus-circle'></i> Billing muncul "Tidak ada transaksi aktif"?</div>
<div class="faqa">Terjadi karena timer habis dan auto-stop sudah berjalan. Data transaksi tetap tersimpan. Cukup klik Stop lagi &mdash; sistem menemukan transaksi terakhir dan billing tampil normal.</div>
</div>

<div class="faq" onclick="this.classList.toggle('open')">
<div class="faqq"><i class='bx bx-plus-circle'></i> Pegawai tidak bisa buka Riwayat padahal sudah diberi izin?</div>
<div class="faqa">Setelah admin klik Terapkan Izin di Settings, <b>pegawai harus logout dan login ulang</b> agar perubahan izin aktif. Izin di-cache di sesi login yang sedang berjalan.</div>
</div>

<div class="faq" onclick="this.classList.toggle('open')">
<div class="faqq"><i class='bx bx-plus-circle'></i> Halaman "Akses Diblokir / Lisensi Suspended"?</div>
<div class="faqa">Lisensi perlu diperbarui. Hubungi EscoDigital via WhatsApp: <b>+62 818 110 242</b>. Pastikan internet aktif saat login agar validasi lisensi berhasil. Jika internet sempat putus, ada toleransi 24 jam sebelum diblokir.</div>
</div>

<div class="faq" onclick="this.classList.toggle('open')">
<div class="faqq"><i class='bx bx-plus-circle'></i> Smart plug tidak merespons?</div>
<div class="faqa">(1) Pastikan Python terinstall. (2) Install tinytuya: <span class="code">pip install tinytuya</span>. (3) Verifikasi IP Address plug di jaringan WiFi yang sama. (4) Pastikan Device ID dan Local Key benar (dari app Tuya Smart). (5) Set path Python di Settings &rarr; Hardware Bridge.</div>
</div>

<div class="faq" onclick="this.classList.toggle('open')">
<div class="faqq"><i class='bx bx-plus-circle'></i> Uang di laci berbeda dari Grand Total Closing?</div>
<div class="faqa">Ini normal jika ada: (1) Pembayaran via saldo member (tidak masuk uang fisik). (2) Voucher diskon yang mengurangi tagihan. (3) Transaksi dengan status Pending (belum bayar). (4) Transaksi yang dihapus dari riwayat. Periksa log aktivitas di Closing &rarr; Tab Audit untuk investigasi detail.</div>
</div>

<div class="faq" onclick="this.classList.toggle('open')">
<div class="faqq"><i class='bx bx-plus-circle'></i> Bagaimana menambah TV/unit baru?</div>
<div class="faqa">Buka menu <b>Kelola Unit</b> di sidebar. Klik tambah unit. Isi nama TV (misal: TV 03) dan IP Address TV untuk ADB (misal: 192.168.1.103). Klik Simpan. Unit langsung muncul di Dashboard.</div>
</div>

<div class="faq" onclick="this.classList.toggle('open')">
<div class="faqq"><i class='bx bx-plus-circle'></i> Bagaimana cara menambah paket baru?</div>
<div class="faqa">Buka menu <b>Paket &amp; Stok</b>. Klik tambah paket. Isi nama paket, durasi (menit), dan harga. Klik Simpan. Paket langsung muncul di dropdown saat start session.</div>
</div>

</div></div>
</div>

<script>
function tog(h){h.closest('.sec').classList.toggle('open')}
document.querySelectorAll('.qnav a').forEach(a=>{
    a.addEventListener('click',function(e){
        e.preventDefault();
        const el=document.getElementById(this.getAttribute('href').slice(1));
        if(!el)return;
        if(!el.classList.contains('open'))el.classList.add('open');
        setTimeout(()=>el.scrollIntoView({behavior:'smooth',block:'start'}),50);
    });
});
</script>

<?php echo "</div></body></html>"; ?>