<?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'>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

    :root {
        --glass: rgba(30, 41, 59, 0.6);
        --border: rgba(255, 255, 255, 0.08);
        --primary: #06b6d4;
        --primary-glow: rgba(6, 182, 212, 0.3);
        --green: #10b981;
        --red: #ef4444;
        --yellow: #f59e0b;
        --purple: #8b5cf6;
        --blue: #3b82f6;
    }

    body { font-family: 'Plus Jakarta Sans', sans-serif; }

    /* Hero Section */
    .guide-hero {
        background: linear-gradient(135deg, rgba(6,182,212,0.1) 0%, rgba(139,92,246,0.1) 100%);
        border: 1px solid var(--border);
        border-radius: 24px;
        padding: 40px;
        margin-bottom: 30px;
        position: relative;
        overflow: hidden;
    }
    .guide-hero::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(6,182,212,0.15) 0%, transparent 70%);
        pointer-events: none;
    }
    .guide-hero h1 {
        font-size: 2rem;
        font-weight: 800;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 15px;
    }
    .guide-hero h1 i { color: var(--primary); font-size: 2.5rem; }
    .guide-hero p { color: #94a3b8; font-size: 1rem; line-height: 1.6; max-width: 600px; }
    .guide-version {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(6,182,212,0.15);
        color: var(--primary);
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 700;
        margin-top: 15px;
    }

    /* Quick Nav */
    .quick-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 30px;
    }
    .quick-nav a {
        background: var(--glass);
        border: 1px solid var(--border);
        color: #94a3b8;
        padding: 10px 18px;
        border-radius: 12px;
        font-size: 0.85rem;
        font-weight: 600;
        text-decoration: none;
        transition: 0.3s;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .quick-nav a:hover {
        border-color: var(--primary);
        color: var(--primary);
        background: rgba(6,182,212,0.1);
        transform: translateY(-2px);
    }
    .quick-nav a i { font-size: 1.1rem; }

    /* Section Card */
    .guide-section {
        background: var(--glass);
        backdrop-filter: blur(10px);
        border: 1px solid var(--border);
        border-radius: 20px;
        margin-bottom: 20px;
        overflow: hidden;
        transition: 0.3s;
    }
    .guide-section:hover { border-color: rgba(6,182,212,0.3); }

    .section-header {
        padding: 25px 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        transition: 0.3s;
        user-select: none;
    }
    .section-header:hover { background: rgba(6,182,212,0.05); }
    .section-header-left {
        display: flex;
        align-items: center;
        gap: 15px;
    }
    .section-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
    }
    .section-header h2 { font-size: 1.1rem; font-weight: 800; margin: 0; }
    .section-header .subtitle { font-size: 0.8rem; color: #64748b; margin-top: 3px; }
    .section-chevron {
        font-size: 1.5rem;
        color: #64748b;
        transition: transform 0.3s;
    }
    .guide-section.open .section-chevron { transform: rotate(180deg); color: var(--primary); }

    .section-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
    }
    .guide-section.open .section-body { max-height: 5000px; }
    .section-content { padding: 0 30px 30px; }

    /* Steps */
    .steps { counter-reset: step-counter; }
    .step {
        display: flex;
        gap: 20px;
        padding: 20px 0;
        border-bottom: 1px solid rgba(255,255,255,0.04);
        position: relative;
    }
    .step:last-child { border-bottom: none; }
    .step-num {
        counter-increment: step-counter;
        width: 40px;
        height: 40px;
        min-width: 40px;
        background: linear-gradient(135deg, var(--primary), #0891b2);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        color: #000;
        font-size: 0.95rem;
    }
    .step-content h4 {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 6px;
        color: #fff;
    }
    .step-content p {
        color: #94a3b8;
        font-size: 0.9rem;
        line-height: 1.7;
    }

    /* Highlight box */
    .highlight-box {
        background: rgba(6,182,212,0.1);
        border: 1px solid rgba(6,182,212,0.2);
        border-radius: 14px;
        padding: 16px 20px;
        margin: 12px 0;
        font-size: 0.85rem;
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }
    .highlight-box i { color: var(--primary); font-size: 1.2rem; margin-top: 2px; }
    .highlight-box.warning {
        background: rgba(245,158,11,0.1);
        border-color: rgba(245,158,11,0.2);
    }
    .highlight-box.warning i { color: var(--yellow); }
    .highlight-box.danger {
        background: rgba(239,68,68,0.1);
        border-color: rgba(239,68,68,0.2);
    }
    .highlight-box.danger i { color: var(--red); }
    .highlight-box.success {
        background: rgba(16,185,129,0.1);
        border-color: rgba(16,185,129,0.2);
    }
    .highlight-box.success i { color: var(--green); }

    /* Code/Key style */
    .key {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: rgba(0,0,0,0.4);
        border: 1px solid rgba(255,255,255,0.1);
        padding: 3px 10px;
        border-radius: 8px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--primary);
    }

    /* Button visual reference */
    .btn-ref {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 700;
    }
    .btn-ref.green { background: rgba(16,185,129,0.2); color: #10b981; }
    .btn-ref.red { background: rgba(239,68,68,0.2); color: #ef4444; }
    .btn-ref.blue { background: rgba(6,182,212,0.2); color: #06b6d4; }
    .btn-ref.yellow { background: rgba(245,158,11,0.2); color: #f59e0b; }
    .btn-ref.purple { background: rgba(139,92,246,0.2); color: #8b5cf6; }

    /* Table */
    .guide-table {
        width: 100%;
        border-collapse: collapse;
        margin: 15px 0;
    }
    .guide-table th {
        text-align: left;
        padding: 12px 15px;
        background: rgba(0,0,0,0.3);
        color: #64748b;
        font-size: 0.75rem;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.5px;
    }
    .guide-table td {
        padding: 12px 15px;
        border-bottom: 1px solid rgba(255,255,255,0.04);
        font-size: 0.9rem;
        color: #cbd5e1;
    }
    .guide-table tr:hover { background: rgba(6,182,212,0.05); }

    /* FAQ */
    .faq-item {
        padding: 18px 0;
        border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .faq-item:last-child { border-bottom: none; }
    .faq-q {
        font-weight: 700;
        color: #fff;
        font-size: 0.95rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .faq-q i { color: var(--primary); font-size: 1.1rem; }
    .faq-a {
        color: #94a3b8;
        font-size: 0.9rem;
        line-height: 1.7;
        margin-top: 8px;
        padding-left: 28px;
        display: none;
    }
    .faq-item.open .faq-a { display: block; }
    .faq-item.open .faq-q i::before { content: "\eb8a"; }

    /* Flow diagram */
    .flow-diagram {
        display: flex;
        align-items: center;
        gap: 0;
        flex-wrap: wrap;
        margin: 20px 0;
    }
    .flow-step {
        background: rgba(0,0,0,0.3);
        border: 1px solid var(--border);
        padding: 12px 20px;
        border-radius: 12px;
        text-align: center;
        font-size: 0.85rem;
        font-weight: 700;
    }
    .flow-step i { display: block; font-size: 1.3rem; margin-bottom: 5px; color: var(--primary); }
    .flow-arrow { color: #334155; font-size: 1.5rem; padding: 0 8px; }

    @media (max-width: 768px) {
        .guide-hero { padding: 25px; }
        .guide-hero h1 { font-size: 1.4rem; }
        .section-header { padding: 18px 20px; }
        .section-content { padding: 0 20px 20px; }
        .quick-nav { gap: 8px; }
        .quick-nav a { padding: 8px 14px; font-size: 0.8rem; }
        .flow-diagram { flex-direction: column; }
        .flow-arrow { transform: rotate(90deg); }
    }
</style>

<!-- HERO -->
<div class="guide-hero">
    <h1><i class='bx bxs-book-content'></i> Panduan Pemakaian</h1>
    <p>Panduan lengkap penggunaan sistem <?= htmlspecialchars($app_name) ?>. Dari mulai start session, billing, FnB, sampai closing shift.</p>
    <div class="guide-version"><i class='bx bx-code-alt'></i> <?= htmlspecialchars($app_name) ?> — Billing System</div>
</div>

<!-- QUICK NAV -->
<div class="quick-nav">
    <a href="#sec-alur"><i class='bx bx-git-merge'></i> Alur Kerja</a>
    <a href="#sec-start"><i class='bx bx-play'></i> Mulai Sesi</a>
    <a href="#sec-during"><i class='bx bx-cog'></i> Selama Sesi</a>
    <a href="#sec-stop"><i class='bx bx-stop'></i> Stop & Billing</a>
    <a href="#sec-fnb"><i class='bx bx-food-menu'></i> FnB</a>
    <a href="#sec-remote"><i class='bx bx-joystick'></i> Remote TV</a>
    <a href="#sec-member"><i class='bx bx-user'></i> Member</a>
    <a href="#sec-closing"><i class='bx bx-calculator'></i> Closing</a>
    <a href="#sec-admin"><i class='bx bx-shield'></i> Admin</a>
    <a href="#sec-faq"><i class='bx bx-help-circle'></i> FAQ</a>
</div>

<!-- 1. ALUR KERJA UMUM -->
<div class="guide-section open" id="sec-alur">
    <div class="section-header" onclick="toggleSection(this)">
        <div class="section-header-left">
            <div class="section-icon" style="background:rgba(6,182,212,0.15); color:var(--primary);"><i class='bx bx-git-merge'></i></div>
            <div>
                <h2>Alur Kerja Umum</h2>
                <div class="subtitle">Gambaran besar cara kerja sistem billing</div>
            </div>
        </div>
        <i class='bx bx-chevron-down section-chevron'></i>
    </div>
    <div class="section-body">
        <div class="section-content">
            <p style="color:#94a3b8; margin-bottom:20px;">Berikut alur kerja utama dari awal pelanggan datang hingga selesai bermain:</p>
            
            <div class="flow-diagram">
                <div class="flow-step"><i class='bx bx-user-plus'></i> Pelanggan<br>Datang</div>
                <span class="flow-arrow">→</span>
                <div class="flow-step"><i class='bx bx-package'></i> Pilih<br>Paket/Open</div>
                <span class="flow-arrow">→</span>
                <div class="flow-step"><i class='bx bx-joystick'></i> Pilih<br>Stik</div>
                <span class="flow-arrow">→</span>
                <div class="flow-step" style="border-color:var(--green);"><i class='bx bx-play' style="color:var(--green);"></i> START<br>Session</div>
                <span class="flow-arrow">→</span>
                <div class="flow-step"><i class='bx bx-timer'></i> Timer<br>Berjalan</div>
                <span class="flow-arrow">→</span>
                <div class="flow-step" style="border-color:var(--red);"><i class='bx bx-stop' style="color:var(--red);"></i> STOP<br>& Bayar</div>
            </div>

            <div class="highlight-box">
                <i class='bx bx-info-circle'></i>
                <div>Sistem mendukung 2 tipe sesi: <b>Paket (Fixed)</b> — durasi & harga tetap, timer countdown. <b>Open Bill</b> — tanpa batas waktu, hitung per jam, timer count up.</div>
            </div>
        </div>
    </div>
</div>

<!-- 2. MULAI SESI -->
<div class="guide-section" id="sec-start">
    <div class="section-header" onclick="toggleSection(this)">
        <div class="section-header-left">
            <div class="section-icon" style="background:rgba(16,185,129,0.15); color:var(--green);"><i class='bx bx-play'></i></div>
            <div>
                <h2>Mulai Sesi Bermain</h2>
                <div class="subtitle">Cara start session paket fixed dan open bill</div>
            </div>
        </div>
        <i class='bx bx-chevron-down section-chevron'></i>
    </div>
    <div class="section-body">
        <div class="section-content">

            <h3 style="color:var(--green); margin-bottom:15px;"><i class='bx bx-package'></i> A. Start Paket (Fixed)</h3>
            <div class="steps">
                <div class="step">
                    <div class="step-num">1</div>
                    <div class="step-content">
                        <h4>Pilih TV yang Tersedia</h4>
                        <p>Di Dashboard, cari card TV yang berstatus <span class="btn-ref" style="background:rgba(100,116,139,0.2); color:#94a3b8;">AVAILABLE</span>. Card ini menampilkan form untuk memulai sesi.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-num">2</div>
                    <div class="step-content">
                        <h4>Pilih Stik Controller</h4>
                        <p>Klik dropdown <b>"Pilih Stik..."</b> lalu centang stik yang diberikan ke pelanggan. Bisa pilih lebih dari satu. Ini untuk tracking stik mana yang sedang dipakai.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-num">3</div>
                    <div class="step-content">
                        <h4>Pilih Paket</h4>
                        <p>Pilih paket dari dropdown. Setiap paket menampilkan nama, durasi, dan harga. Contoh: <span class="key">1 Jam (Rp 8.000)</span></p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-num">4</div>
                    <div class="step-content">
                        <h4>Pilih Member (Opsional)</h4>
                        <p>Jika pelanggan adalah member, pilih namanya dari dropdown. Jika bukan member, biarkan di pilihan <b>"Tamu Regular (Cash)"</b>.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-num">5</div>
                    <div class="step-content">
                        <h4>Klik START SESSION</h4>
                        <p>Klik tombol <span class="btn-ref blue"><i class='bx bx-play'></i> START SESSION</span>. Timer akan langsung berjalan countdown, dan TV akan otomatis dinyalakan via ADB.</p>
                    </div>
                </div>
            </div>

            <h3 style="color:var(--green); margin:30px 0 15px;"><i class='bx bx-timer'></i> B. Start Open Bill</h3>
            <div class="steps">
                <div class="step">
                    <div class="step-num">1</div>
                    <div class="step-content">
                        <h4>Klik Tab "OPEN"</h4>
                        <p>Di card TV yang tersedia, klik tab <span class="btn-ref blue"><i class='bx bx-timer'></i> OPEN</span> untuk beralih ke mode open bill.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-num">2</div>
                    <div class="step-content">
                        <h4>Atur Rate per Jam</h4>
                        <p>Masukkan tarif per jam (default sudah terisi dari Settings). Timer akan berjalan count-up dan billing dihitung otomatis.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-num">3</div>
                    <div class="step-content">
                        <h4>Klik START OPEN BILL</h4>
                        <p>Klik <span class="btn-ref green"><i class='bx bx-timer'></i> START OPEN BILL</span>. Timer menghitung naik, dan billing realtime terlihat di bawah timer.</p>
                    </div>
                </div>
            </div>

            <div class="highlight-box warning">
                <i class='bx bx-error'></i>
                <div><b>Penting:</b> Pastikan TV sudah terkoneksi ADB (status hijau "ADB ONLINE") sebelum start. Jika offline, klik tombol 🔗 Connect di remote dock terlebih dahulu.</div>
            </div>
        </div>
    </div>
</div>

<!-- 3. SELAMA SESI BERJALAN -->
<div class="guide-section" id="sec-during">
    <div class="section-header" onclick="toggleSection(this)">
        <div class="section-header-left">
            <div class="section-icon" style="background:rgba(59,130,246,0.15); color:var(--blue);"><i class='bx bx-cog'></i></div>
            <div>
                <h2>Selama Sesi Berjalan</h2>
                <div class="subtitle">Pause, resume, tambah waktu, pindah unit, order FnB</div>
            </div>
        </div>
        <i class='bx bx-chevron-down section-chevron'></i>
    </div>
    <div class="section-body">
        <div class="section-content">
            <p style="color:#94a3b8; margin-bottom:20px;">Saat sesi aktif, card TV menampilkan tombol-tombol aksi berikut:</p>

            <table class="guide-table">
                <thead>
                    <tr>
                        <th>Tombol</th>
                        <th>Fungsi</th>
                        <th>Keterangan</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><span class="btn-ref" style="background:rgba(255,255,255,0.05); color:#fff;"><i class='bx bx-pause'></i> Pause</span></td>
                        <td>Jeda timer sementara</td>
                        <td>Gunakan saat pelanggan istirahat sebentar (misal sholat). Timer berhenti, bisa di-resume kembali.</td>
                    </tr>
                    <tr>
                        <td><span class="btn-ref blue"><i class='bx bx-time-five'></i> +Waktu</span></td>
                        <td>Tambah durasi sesi</td>
                        <td>Khusus paket Fixed. Pilih paket tambahan, waktu & harga ditambahkan ke sesi yang berjalan. Bisa dipakai walau timer sudah habis.</td>
                    </tr>
                    <tr>
                        <td><span class="btn-ref" style="background:rgba(255,255,255,0.05); color:#fff;"><i class='bx bx-plus-circle'></i> FnB</span></td>
                        <td>Order makanan/minuman</td>
                        <td>Pilih item dari daftar snack, tentukan jumlah. Otomatis masuk ke billing saat stop.</td>
                    </tr>
                    <tr>
                        <td><span class="btn-ref" style="background:rgba(255,255,255,0.05); color:#fff;"><i class='bx bx-transfer'></i> Pindah</span></td>
                        <td>Pindah ke TV lain</td>
                        <td>Kalau TV bermasalah, pindahkan sesi ke TV lain yang tersedia tanpa kehilangan waktu.</td>
                    </tr>
                    <tr>
                        <td><span class="btn-ref red"><i class='bx bx-stop-circle'></i> Stop</span></td>
                        <td>Selesaikan sesi & bayar</td>
                        <td>Buka modal billing → konfirmasi → transaksi selesai.</td>
                    </tr>
                </tbody>
            </table>

            <div class="highlight-box">
                <i class='bx bx-info-circle'></i>
                <div><b>Tambah Waktu:</b> Jika timer sudah habis dan pelanggan mau lanjut, klik <span class="btn-ref blue"><i class='bx bx-time-five'></i> +Waktu</span> — sistem akan menghitung dari waktu sekarang. Jika timer masih jalan, waktu ditambahkan dari sisa yang ada.</div>
            </div>
        </div>
    </div>
</div>

<!-- 4. STOP & BILLING -->
<div class="guide-section" id="sec-stop">
    <div class="section-header" onclick="toggleSection(this)">
        <div class="section-header-left">
            <div class="section-icon" style="background:rgba(239,68,68,0.15); color:var(--red);"><i class='bx bx-stop'></i></div>
            <div>
                <h2>Stop Sesi & Billing</h2>
                <div class="subtitle">Cara menyelesaikan sesi dan memproses pembayaran</div>
            </div>
        </div>
        <i class='bx bx-chevron-down section-chevron'></i>
    </div>
    <div class="section-body">
        <div class="section-content">

            <h3 style="color:var(--red); margin-bottom:15px;"><i class='bx bx-user'></i> A. Manual Stop (Operator Klik)</h3>
            <div class="steps">
                <div class="step">
                    <div class="step-num">1</div>
                    <div class="step-content">
                        <h4>Klik Tombol Stop</h4>
                        <p>Klik <span class="btn-ref red"><i class='bx bx-stop-circle'></i> Stop</span> di card TV yang aktif.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-num">2</div>
                    <div class="step-content">
                        <h4>Cek Detail Billing</h4>
                        <p>Modal "Konfirmasi Billing" muncul dengan rincian: biaya sesi, durasi, daftar FnB (jika ada), dan <b>Grand Total</b>. Untuk Open Bill, detail perhitungan (rate, biaya aktual, min charge) juga ditampilkan.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-num">3</div>
                    <div class="step-content">
                        <h4>Konfirmasi Pembayaran</h4>
                        <p>Terima uang dari pelanggan, lalu klik <span class="btn-ref green"><i class='bx bx-check'></i> BAYAR & STOP</span>. Sesi selesai, TV dimatikan otomatis.</p>
                    </div>
                </div>
            </div>

            <h3 style="color:var(--yellow); margin:30px 0 15px;"><i class='bx bx-alarm-exclamation'></i> B. Auto-Stop (Timer Habis)</h3>
            <p style="color:#94a3b8; margin-bottom:15px;">Untuk paket Fixed, saat timer mencapai 00:00:00:</p>
            <div class="steps">
                <div class="step">
                    <div class="step-num">1</div>
                    <div class="step-content">
                        <h4>Notifikasi Otomatis</h4>
                        <p>Notifikasi merah muncul di pojok kanan atas: <b>"TV X: SELESAI! Sistem telah mematikan TV otomatis."</b> TV langsung dimatikan via ADB.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-num">2</div>
                    <div class="step-content">
                        <h4>Proses Pembayaran</h4>
                        <p>Klik tombol Stop di card TV tersebut (walaupun sudah auto-stop, billing tetap bisa dibuka). Detail biaya akan muncul normal.</p>
                    </div>
                </div>
            </div>

            <div class="highlight-box success">
                <i class='bx bx-check-shield'></i>
                <div><b>Aman:</b> Sistem menyimpan data transaksi meski timer sudah habis. Anda tetap bisa buka billing kapan saja untuk melihat detail dan memproses pembayaran.</div>
            </div>
        </div>
    </div>
</div>

<!-- 5. FnB -->
<div class="guide-section" id="sec-fnb">
    <div class="section-header" onclick="toggleSection(this)">
        <div class="section-header-left">
            <div class="section-icon" style="background:rgba(245,158,11,0.15); color:var(--yellow);"><i class='bx bx-food-menu'></i></div>
            <div>
                <h2>Order Food & Beverage</h2>
                <div class="subtitle">Cara menambahkan pesanan makanan dan minuman</div>
            </div>
        </div>
        <i class='bx bx-chevron-down section-chevron'></i>
    </div>
    <div class="section-body">
        <div class="section-content">
            <div class="steps">
                <div class="step">
                    <div class="step-num">1</div>
                    <div class="step-content">
                        <h4>Klik Tombol FnB</h4>
                        <p>Di card TV yang aktif, klik <span class="btn-ref" style="background:rgba(255,255,255,0.05); color:#fff;"><i class='bx bx-plus-circle'></i> FnB</span>.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-num">2</div>
                    <div class="step-content">
                        <h4>Pilih Item & Jumlah</h4>
                        <p>Dropdown menampilkan semua snack yang stoknya tersedia (nama, harga, sisa stok). Atur jumlah (qty) sesuai pesanan.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-num">3</div>
                    <div class="step-content">
                        <h4>Klik Tambah</h4>
                        <p>Klik <span class="btn-ref blue"><i class='bx bx-cart-add'></i> Tambah</span>. Stok otomatis berkurang. Order akan muncul di billing saat stop.</p>
                    </div>
                </div>
            </div>

            <div class="highlight-box">
                <i class='bx bx-info-circle'></i>
                <div>Bisa order FnB berkali-kali selama sesi berjalan. Semua pesanan terakumulasi dan ditampilkan di modal billing saat Stop.</div>
            </div>
        </div>
    </div>
</div>

<!-- 6. REMOTE CONTROL -->
<div class="guide-section" id="sec-remote">
    <div class="section-header" onclick="toggleSection(this)">
        <div class="section-header-left">
            <div class="section-icon" style="background:rgba(139,92,246,0.15); color:var(--purple);"><i class='bx bx-joystick'></i></div>
            <div>
                <h2>Remote Control TV (ADB)</h2>
                <div class="subtitle">Kontrol TV dari dashboard via Android Debug Bridge</div>
            </div>
        </div>
        <i class='bx bx-chevron-down section-chevron'></i>
    </div>
    <div class="section-body">
        <div class="section-content">
            <p style="color:#94a3b8; margin-bottom:15px;">Di bagian bawah setiap card TV ada <b>Remote Dock</b> dengan 5 tombol:</p>
            
            <table class="guide-table">
                <thead>
                    <tr><th>Tombol</th><th>Ikon</th><th>Fungsi</th></tr>
                </thead>
                <tbody>
                    <tr><td><b>Connect</b></td><td><i class='bx bx-link' style="color:var(--green);"></i></td><td>Hubungkan ADB ke TV. Harus dilakukan dulu sebelum kontrol lain bisa berfungsi. Status berubah jadi "ADB ONLINE" (hijau).</td></tr>
                    <tr><td><b>Power</b></td><td><i class='bx bx-power-off' style="color:var(--primary);"></i></td><td>Nyalakan/matikan layar TV.</td></tr>
                    <tr><td><b>Vol −</b></td><td><i class='bx bx-volume-low' style="color:var(--primary);"></i></td><td>Kecilkan volume TV.</td></tr>
                    <tr><td><b>Vol +</b></td><td><i class='bx bx-volume-full' style="color:var(--primary);"></i></td><td>Besarkan volume TV.</td></tr>
                    <tr><td><b>Home</b></td><td><i class='bx bx-home-alt' style="color:var(--primary);"></i></td><td>Tekan tombol Home di TV (kembali ke home screen).</td></tr>
                </tbody>
            </table>

            <div class="highlight-box warning">
                <i class='bx bx-error'></i>
                <div><b>Syarat ADB:</b> TV harus tersambung ke jaringan Wi-Fi yang sama dengan server. Path ADB harus diset di Settings → Hardware Bridge. Status ADB auto-refresh setiap 10 detik.</div>
            </div>
        </div>
    </div>
</div>

<!-- 7. MEMBER -->
<div class="guide-section" id="sec-member">
    <div class="section-header" onclick="toggleSection(this)">
        <div class="section-header-left">
            <div class="section-icon" style="background:rgba(168,85,247,0.15); color:var(--purple);"><i class='bx bx-user'></i></div>
            <div>
                <h2>Sistem Member VIP</h2>
                <div class="subtitle">Kelola member, top up saldo, dan penggunaan member</div>
            </div>
        </div>
        <i class='bx bx-chevron-down section-chevron'></i>
    </div>
    <div class="section-body">
        <div class="section-content">
            <div class="steps">
                <div class="step">
                    <div class="step-num">1</div>
                    <div class="step-content">
                        <h4>Tambah Member Baru</h4>
                        <p>Buka menu <b>Member VIP</b> di sidebar. Isi nama, nomor HP, dan saldo awal (jika ada). Klik Simpan.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-num">2</div>
                    <div class="step-content">
                        <h4>Top Up Saldo</h4>
                        <p>Di halaman Member, klik tombol Top Up pada member yang diinginkan. Masukkan jumlah deposit. Saldo langsung bertambah.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-num">3</div>
                    <div class="step-content">
                        <h4>Gunakan Saat Start Session</h4>
                        <p>Saat memulai sesi di Dashboard, pilih nama member dari dropdown. Saldo member akan digunakan untuk pembayaran otomatis.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 8. CLOSING SHIFT -->
<div class="guide-section" id="sec-closing">
    <div class="section-header" onclick="toggleSection(this)">
        <div class="section-header-left">
            <div class="section-icon" style="background:rgba(16,185,129,0.15); color:var(--green);"><i class='bx bx-calculator'></i></div>
            <div>
                <h2>Closing Shift & Audit</h2>
                <div class="subtitle">Laporan keuangan harian dan log aktivitas operator</div>
            </div>
        </div>
        <i class='bx bx-chevron-down section-chevron'></i>
    </div>
    <div class="section-body">
        <div class="section-content">
            <p style="color:#94a3b8; margin-bottom:20px;">Halaman Closing menampilkan 2 tab utama:</p>

            <h3 style="color:var(--green); margin-bottom:15px;"><i class='bx bx-money'></i> Tab 1: Detail Pendapatan</h3>
            <p style="color:#94a3b8; margin-bottom:15px;">Menampilkan breakdown keuangan: total billing rental, penjualan FnB, top up member, dan <b>Grand Total</b> yang harus ada di laci kasir.</p>

            <h3 style="color:var(--primary); margin:25px 0 15px;"><i class='bx bx-fingerprint'></i> Tab 2: Log Aktivitas</h3>
            <p style="color:#94a3b8; margin-bottom:15px;">Semua aktivitas operator tercatat otomatis:</p>

            <table class="guide-table">
                <thead><tr><th>Aksi</th><th>Yang Dicatat</th></tr></thead>
                <tbody>
                    <tr><td><span class="btn-ref green">START</span></td><td>Nama TV, paket, harga, stik yang dipakai, member/tamu</td></tr>
                    <tr><td><span class="btn-ref red">STOP</span></td><td>Nama TV, trx ID, durasi bermain, total bayar, tipe paket</td></tr>
                    <tr><td><span class="btn-ref yellow">ORDER FNB</span></td><td>Nama TV, item yang dipesan, qty, total harga</td></tr>
                    <tr><td><span class="btn-ref blue">ADD TIME</span></td><td>Nama TV, paket tambahan, menit & harga yang ditambah</td></tr>
                    <tr><td><span class="btn-ref purple">REMOTE</span></td><td>Nama TV, tombol yang ditekan (Power/Volume/Home)</td></tr>
                    <tr><td><span class="btn-ref purple">ADB CONNECT</span></td><td>Nama TV, IP address</td></tr>
                </tbody>
            </table>

            <div class="highlight-box">
                <i class='bx bx-info-circle'></i>
                <div>Gunakan filter di atas halaman Closing untuk melihat data per tanggal, per operator, dan per jenis aksi. Statistik ringkas tersedia di bagian atas tabel log.</div>
            </div>
        </div>
    </div>
</div>

<!-- 9. ADMIN SETTINGS -->
<div class="guide-section" id="sec-admin">
    <div class="section-header" onclick="toggleSection(this)">
        <div class="section-header-left">
            <div class="section-icon" style="background:rgba(239,68,68,0.15); color:var(--red);"><i class='bx bx-shield'></i></div>
            <div>
                <h2>Pengaturan Admin</h2>
                <div class="subtitle">Konfigurasi sistem, izin operator, dan keamanan</div>
            </div>
        </div>
        <i class='bx bx-chevron-down section-chevron'></i>
    </div>
    <div class="section-body">
        <div class="section-content">
            <p style="color:#94a3b8; margin-bottom:20px;">Halaman Settings (hanya admin) terdiri dari beberapa kartu konfigurasi:</p>

            <table class="guide-table">
                <thead><tr><th>Kartu</th><th>Fungsi</th></tr></thead>
                <tbody>
                    <tr><td><b>Status Lisensi</b></td><td>Menampilkan pemilik lisensi, serial key, status (Active/Expired), dan sisa hari aktif. Data dari server lisensi.</td></tr>
                    <tr><td><b>Informasi Bisnis</b></td><td>Ubah nama rental, tarif per jam (open bill), minimum tarif, dan pembulatan harga.</td></tr>
                    <tr><td><b>Hardware Bridge</b></td><td>Set path ADB executable. Contoh Windows: <span class="key">C:\platform-tools\adb.exe</span></td></tr>
                    <tr><td><b>Izin Akses Operator</b></td><td>Toggle on/off akses pegawai: kontrol unit, member, stok FnB, riwayat, closing.</td></tr>
                    <tr><td><b>Keamanan Akun</b></td><td>Ganti password admin. Wajib masukkan password lama untuk konfirmasi.</td></tr>
                </tbody>
            </table>

            <div class="highlight-box danger">
                <i class='bx bx-lock-alt'></i>
                <div><b>Perhatian:</b> Hanya akun dengan role <b>Admin</b> yang bisa mengakses halaman Settings. Operator hanya melihat menu sesuai izin yang diberikan admin.</div>
            </div>
        </div>
    </div>
</div>

<!-- 10. FAQ -->
<div class="guide-section" id="sec-faq">
    <div class="section-header" onclick="toggleSection(this)">
        <div class="section-header-left">
            <div class="section-icon" style="background:rgba(6,182,212,0.15); color:var(--primary);"><i class='bx bx-help-circle'></i></div>
            <div>
                <h2>FAQ — Pertanyaan Umum</h2>
                <div class="subtitle">Solusi masalah yang sering ditemui</div>
            </div>
        </div>
        <i class='bx bx-chevron-down section-chevron'></i>
    </div>
    <div class="section-body">
        <div class="section-content">
            <div class="faq-item" onclick="this.classList.toggle('open')">
                <div class="faq-q"><i class='bx bx-plus-circle'></i> TV tidak bisa dikontrol (ADB offline)?</div>
                <div class="faq-a">
                    Pastikan: (1) TV dan server/komputer terhubung ke Wi-Fi yang sama. (2) Path ADB sudah benar di Settings → Hardware Bridge. (3) Klik tombol Connect 🔗 di remote dock. (4) USB Debugging di TV sudah diaktifkan. Jika masih gagal, restart ADB server via command prompt: <span class="key">adb kill-server && adb start-server</span>
                </div>
            </div>
            <div class="faq-item" onclick="this.classList.toggle('open')">
                <div class="faq-q"><i class='bx bx-plus-circle'></i> Billing muncul "Tidak ada transaksi aktif"?</div>
                <div class="faq-a">
                    Ini terjadi jika timer sudah habis dan auto-stop berjalan. Cukup klik tombol Stop lagi — sistem sudah menyimpan data transaksi dan billing akan tampil normal.
                </div>
            </div>
            <div class="faq-item" onclick="this.classList.toggle('open')">
                <div class="faq-q"><i class='bx bx-plus-circle'></i> Durasi menampilkan "0m 0d" padahal sudah bermain?</div>
                <div class="faq-a">
                    Ini sudah diperbaiki di versi terbaru. Durasi sekarang menampilkan detik (contoh: "0m 45d" untuk 45 detik). Pastikan Anda menggunakan file process.php versi terbaru.
                </div>
            </div>
            <div class="faq-item" onclick="this.classList.toggle('open')">
                <div class="faq-q"><i class='bx bx-plus-circle'></i> Pelanggan mau tambah waktu setelah timer habis?</div>
                <div class="faq-a">
                    Klik tombol <span class="btn-ref blue"><i class='bx bx-time-five'></i> +Waktu</span>. Meskipun timer sudah habis, sistem akan menambah waktu dari sekarang. Card TV kembali ke status Active dan timer berjalan lagi.
                </div>
            </div>
            <div class="faq-item" onclick="this.classList.toggle('open')">
                <div class="faq-q"><i class='bx bx-plus-circle'></i> Bagaimana cara menambah paket baru?</div>
                <div class="faq-a">
                    Buka menu <b>Paket & Stok</b> di sidebar. Klik tombol tambah, isi nama paket, durasi (menit), dan harga. Klik Simpan. Paket langsung muncul di dropdown saat start session.
                </div>
            </div>
            <div class="faq-item" onclick="this.classList.toggle('open')">
                <div class="faq-q"><i class='bx bx-plus-circle'></i> Uang di laci kurang dari Grand Total di Closing?</div>
                <div class="faq-a">
                    Cek log aktivitas di tab Audit — lihat apakah ada transaksi yang tidak wajar. Selisih minus adalah tanggung jawab operator yang bertugas. Pastikan semua pembayaran tunai dimasukkan ke laci.
                </div>
            </div>
            <div class="faq-item" onclick="this.classList.toggle('open')">
                <div class="faq-q"><i class='bx bx-plus-circle'></i> Status lisensi "Menunggu Koneksi Server"?</div>
                <div class="faq-a">
                    Server harus terhubung ke internet untuk validasi lisensi. Pastikan koneksi internet aktif, lalu logout dan login kembali agar sistem re-validasi lisensi.
                </div>
            </div>
            <div class="faq-item" onclick="this.classList.toggle('open')">
                <div class="faq-q"><i class='bx bx-plus-circle'></i> Bagaimana menambah TV/unit baru?</div>
                <div class="faq-a">
                    Buka menu <b>Kelola Unit</b> di sidebar. Klik tambah unit, isi nama TV dan IP Address TV (untuk ADB). Klik Simpan. Unit baru langsung muncul di Dashboard.
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function toggleSection(header) {
    const section = header.closest('.guide-section');
    section.classList.toggle('open');
}

// Smooth scroll for quick nav
document.querySelectorAll('.quick-nav a').forEach(a => {
    a.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            // Open the section
            if (!target.classList.contains('open')) {
                target.classList.add('open');
            }
            // Scroll to it
            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    });
});
</script>

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