@extends('webview.saku.main')

@push('style')
    <style>
        /* =========================================================================
                                               1. RESET & GLOBAL SIDEBAR (DIPAKAI BERSAMA)
                                               ========================================================================= */
        body {
            background-color: #f4f6f9;
            margin: 0;
            padding: 0;
            font-family: 'Inter', sans-serif;
        }

        .app-container {
            background-color: #ffffff;
            min-height: 100vh;
            max-width: 480px;
            margin: 0 auto;
            position: relative;
            overflow-x: hidden;
        }

        /* Sidebar Hamburger Menu */
        .sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease;
            backdrop-filter: blur(2px);
        }

        .sidebar-overlay.active {
            display: block;
            opacity: 1;
        }

        .sidebar-menu {
            position: fixed;
            top: 0;
            left: -320px;
            width: 80%;
            max-width: 320px;
            height: 100%;
            background: #fff;
            z-index: 10000;
            transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
            border-radius: 0 12px 12px 0;
        }

        .sidebar-menu.active {
            left: 0;
        }

        .sidebar-header {
            padding: 40px 24px 24px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .btn-close-sidebar {
            position: absolute;
            top: 24px;
            right: 24px;
            background: none;
            border: none;
            font-size: 28px;
            cursor: pointer;
            color: #111;
            line-height: 1;
            font-weight: 300;
        }

        .profile-img {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 16px;
            border: 2px solid #eef2fa;
        }

        .profile-name {
            font-size: 18px;
            font-weight: 700;
            color: #111;
            margin: 0 0 4px 0;
        }

        .profile-email {
            font-size: 13px;
            color: #888;
            margin: 0;
            font-style: italic;
        }

        .sidebar-body {
            flex: 1;
            overflow-y: auto;
            padding: 16px 0;
        }

        .app-switch-item {
            display: flex;
            align-items: center;
            padding: 16px 24px;
            color: #111;
            text-decoration: none;
            transition: background 0.2s;
            cursor: pointer;
        }

        .app-switch-item:active {
            background-color: #f4f6f9;
        }

        .app-switch-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background-color: #eef2fa;
            color: #1976d2;
            margin-right: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 18px;
            font-weight: bold;
        }

        .app-switch-text {
            font-size: 14px;
            font-weight: 600;
            flex: 1;
        }

        .app-switch-active-indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #10B981;
        }

        /* =========================================================================
                                               2. STYLE KHUSUS POS KASIR
                                               ========================================================================= */
        .pos-header-bg {
            background-color: #0088ff;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgba(255, 255, 255, 0.1)' d='M0,160L80,144C160,128,320,96,480,112C640,128,800,192,960,192C1120,192,1280,128,1360,96L1440,64L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z'/%3E%3C/svg%3E"), linear-gradient(140deg, #32a6ff 0%, #007bff 100%);
            background-size: cover;
            background-position: center top;
            padding: 40px 20px 60px 20px;
            position: relative;
            z-index: 1;
        }

        .pos-header-top {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            gap: 12px;
        }

        .pos-title {
            color: #ffffff;
            font-size: 18px;
            font-weight: 700;
        }

        .pos-search-container {
            position: relative;
            width: 100%;
        }

        .pos-search-input {
            width: 100%;
            padding: 12px 16px 12px 40px;
            border-radius: 50px;
            border: none;
            outline: none;
            font-size: 14px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .pos-search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #666;
        }

        .pos-body {
            background-color: #ffffff;
            border-radius: 24px 24px 0 0;
            margin-top: -24px;
            padding: 20px 16px 120px 16px;
            min-height: 100vh;
            position: relative;
            z-index: 10;
        }

        /* Category Scroll */
        .pos-cat-scroll {
            display: flex;
            overflow-x: auto;
            gap: 10px;
            padding-bottom: 10px;
            margin-bottom: 10px;
            scrollbar-width: none;
            align-items: center;
        }

        .pos-cat-scroll::-webkit-scrollbar {
            display: none;
        }

        .pos-cat-btn {
            padding: 8px 16px;
            border-radius: 20px;
            background: #f4f6f9;
            color: #888;
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
            cursor: pointer;
            border: 1px solid #eee;
        }

        .pos-cat-btn.active {
            background: #007bff;
            color: #ffffff;
            border-color: #007bff;
        }

        .pos-cat-filter-icon {
            width: 34px;
            height: 34px;
            background: #f4f6f9;
            border: 1px solid #eee;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: #333;
        }

        /* Product List */
        .pos-product-item {
            display: flex;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .pos-product-img {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            object-fit: cover;
            margin-right: 14px;
            background: #eee;
            flex-shrink: 0;
        }

        .pos-product-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .pos-product-name {
            font-size: 15px;
            font-weight: 600;
            color: #222;
            margin-bottom: 2px;
        }

        .pos-product-var {
            font-size: 11px;
            font-style: italic;
            color: #888;
            margin-bottom: 4px;
        }

        .pos-product-price {
            font-size: 13px;
            font-weight: 700;
            color: #111;
            margin-bottom: 4px;
        }

        .pos-badge-order {
            display: inline-block;
            background-color: #F97316;
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 10px;
            align-self: flex-start;
        }

        .pos-btn-add {
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 20px;
            padding: 6px 14px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        /* Floating Cart Bottom Bar */
        .pos-cart-bar {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 480px;
            background: #fff;
            border-top: 1px solid #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            z-index: 999;
            padding-bottom: calc(15px + env(safe-area-inset-bottom));
            box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05);
            cursor: pointer;
        }

        .pos-cart-icon-wrapper {
            position: relative;
            width: 40px;
            height: 40px;
            background: #e0f0ff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #007bff;
        }

        .pos-cart-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #111;
            color: #fff;
            font-size: 10px;
            font-weight: bold;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #fff;
        }

        .pos-cart-total {
            font-size: 16px;
            font-weight: 700;
            color: #111;
            flex: 1;
            text-align: right;
            padding-right: 15px;
        }

        .pos-btn-process {
            background: #007bff;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 12px 24px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
        }

        /* HIDE STANDARD BOTTOM NAV IF IN POS MODE */
        body #navigation-bottom {
            display: none !important;
        }

        /* =========================================================================
                                               3. BOTTOM SHEETS POS
                                               ========================================================================= */
        .pos-bottom-sheet {
            position: fixed;
            bottom: -100%;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 480px;
            background: #fff;
            border-radius: 20px 20px 0 0;
            z-index: 10001;
            transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
        }

        .pos-bottom-sheet.active {
            bottom: 0;
        }

        .pos-sheet-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid #f0f0f0;
        }

        .pos-sheet-title {
            font-size: 16px;
            font-weight: 700;
            color: #111;
        }

        .pos-sheet-close {
            font-size: 24px;
            color: #999;
            cursor: pointer;
            line-height: 1;
        }

        .pos-sheet-body {
            padding: 20px;
            overflow-y: auto;
            flex: 1;
        }

        /* Form Element di Bottom Sheet */
        .pos-qty-control {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .btn-qty {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #f0f0f0;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            cursor: pointer;
            color: #333;
        }

        .btn-qty.dark {
            background: #111;
            color: #fff;
        }

        .qty-val {
            font-size: 16px;
            font-weight: 600;
        }

        .pos-section-label {
            font-size: 12px;
            font-weight: 700;
            color: #888;
            margin: 16px 0 8px;
            display: block;
        }

        .pos-opt-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #f9f9f9;
        }

        .pos-opt-label {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }

        .pos-opt-price {
            font-size: 13px;
            color: #666;
        }

        /* Custom Radio/Checkbox */
        .pos-radio,
        .pos-checkbox {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: #007bff;
        }

        .pos-input-text {
            width: 100%;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 12px;
            font-size: 13px;
            background: #f9f9f9;
            outline: none;
            margin-top: 8px;
        }

        .pos-input-text:focus {
            border-color: #007bff;
            background: #fff;
        }

        .pos-sheet-footer {
            padding: 16px 20px;
            border-top: 1px solid #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff;
            padding-bottom: calc(16px + env(safe-area-inset-bottom));
        }

        .pos-sheet-footer .total {
            font-size: 16px;
            font-weight: 700;
            color: #111;
        }

        .btn-simpan-pos {
            background: #0088ff;
            color: #fff;
            font-weight: 600;
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            cursor: pointer;
        }

        /* Keranjang Item */
        .cart-item {
            display: flex;
            align-items: flex-start;
            padding: 16px 0;
            border-bottom: 1px dashed #eee;
        }

        .cart-item-img {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            object-fit: cover;
            margin-right: 12px;
        }

        .cart-item-info {
            flex: 1;
        }

        .cart-item-name {
            font-size: 14px;
            font-weight: 600;
            color: #111;
            margin-bottom: 4px;
        }

        .cart-item-var {
            font-size: 11px;
            color: #888;
            margin-bottom: 4px;
        }

        .cart-item-price {
            font-size: 13px;
            font-weight: 700;
            color: #111;
        }
    </style>
@endpush

@section('content')
    <div class="app-container">

        <div class="pos-header-bg">
            <div class="pos-header-top">
                <svg class="btn-burger" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#fff"
                    stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="cursor:pointer;">
                    <line x1="3" y1="12" x2="21" y2="12"></line>
                    <line x1="3" y1="6" x2="21" y2="6"></line>
                    <line x1="3" y1="18" x2="21" y2="18"></line>
                </svg>
                <span class="pos-title">POS</span>
            </div>
            <div class="pos-search-container">
                <svg class="pos-search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="11" cy="11" r="8"></circle>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
                <input type="text" class="pos-search-input" placeholder="Cari barang...">
            </div>
        </div>

        <div class="pos-body">
            <div class="pos-cat-scroll">
                <div class="pos-cat-btn active">Semua Menu</div>
                <div class="pos-cat-btn">Makanan</div>
                <div class="pos-cat-btn">Minuman</div>
                <div class="pos-cat-btn">Add On</div>
                <div class="pos-cat-filter-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="8" y1="6" x2="21" y2="6"></line>
                        <line x1="8" y1="12" x2="21" y2="12"></line>
                        <line x1="8" y1="18" x2="21" y2="18"></line>
                        <line x1="3" y1="6" x2="3.01" y2="6"></line>
                        <line x1="3" y1="12" x2="3.01" y2="12"></line>
                        <line x1="3" y1="18" x2="3.01" y2="18"></line>
                    </svg>
                </div>
            </div>

            <div class="pos-product-list" id="pos-product-list">
                <div style="padding: 40px 20px; text-align: center; color: #999;">
                    <div class="loader" style="width: 24px; height: 24px; margin-bottom: 10px;"></div>
                    Memuat menu...
                </div>
            </div>
        </div>

        <div class="pos-cart-bar" onclick="openCartModal()">
            <div class="pos-cart-icon-wrapper">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M16 6V4C16 1.79 14.21 0 12 0C9.79 0 8 1.79 8 4V6H2C1.45 6 1 6.45 1 7V22C1 23.1 1.9 24 3 24H21C22.1 24 23 23.1 23 22V7C23 6.45 22.55 6 22 6H16ZM10 4C10 2.9 10.9 2 12 2C13.1 2 14 2.9 14 4V6H10V4ZM21 22H3V8H8V10C8 10.55 8.45 11 9 11C9.55 11 10 10.55 10 10V8H14V10C14 10.55 14.45 11 15 11C15.55 11 16 10.55 16 10V8H21V22Z" />
                </svg>
                <span class="pos-cart-badge">4</span>
            </div>
            <div class="pos-cart-total">Rp 16.700.000</div>
            <button class="pos-btn-process"
                onclick="event.stopPropagation(); window.location.href='{{ route('saku-mobile.page.checkout-pos') }}'">Proses</button>
        </div>


        <div class="pos-bottom-sheet" id="sheet-detail-item">
            <div class="pos-sheet-header">
                <span class="pos-sheet-title">Pesanan Baru</span>
                <span class="pos-sheet-close" onclick="closeAllSheets()">&times;</span>
            </div>
            <div class="pos-sheet-body">

                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
                    <div style="display: flex; align-items: center; gap: 14px;">
                        <img src=""
                            style="width: 56px; height: 56px; border-radius: 12px; object-fit: cover; border: 1px solid #f0f0f0;">
                        <div>
                            <div style="font-size: 16px; font-weight: 700; color:#111;">-</div>
                            <div style="font-size: 13px; font-weight: 600; color:#333; margin-top:4px;">-</div>
                        </div>
                    </div>
                    <div class="pos-qty-control">
                        <button type="button" class="btn-qty dark" onclick="updateQty(-1)">-</button>
                        <span class="qty-val" id="qty-value">1</span>
                        <button type="button" class="btn-qty dark" onclick="updateQty(1)">+</button>
                    </div>
                </div>

                <span class="pos-section-label">Tentukan Varian<br><small style="font-weight:400; color:#999;">Hanya bisa
                        memilih satu</small></span>
                <div class="pos-opt-row">
                    <label class="pos-opt-label">
                        <input type="radio" name="varian" class="pos-radio variant-item" value="25000"
                            onchange="calculateTotal()"> Komplit
                    </label>
                    <span class="pos-opt-price">25.000</span>
                </div>
                <div class="pos-opt-row">
                    <label class="pos-opt-label">
                        <input type="radio" name="varian" class="pos-radio variant-item" value="18000"
                            onchange="calculateTotal()"> Bakso Saja
                    </label>
                    <span class="pos-opt-price">18.000</span>
                </div>
                <div class="pos-opt-row">
                    <label class="pos-opt-label">
                        <input type="radio" name="varian" class="pos-radio variant-item" value="12000" checked
                            onchange="calculateTotal()"> Bakso Tahu
                    </label>
                    <span class="pos-opt-price">12.000</span>
                </div>

                <span class="pos-section-label" style="margin-top:24px;">Tentukan Tambahan<br><small
                        style="font-weight:400; color:#999;">Bisa memilih lebih dari satu</small></span>
                <div class="pos-opt-row">
                    <label class="pos-opt-label">
                        <input type="checkbox" class="pos-checkbox addon-item" value="8000"
                            onchange="calculateTotal()"> Bakso Kecil
                    </label>
                    <span class="pos-opt-price">+8.000</span>
                </div>
                <div class="pos-opt-row">
                    <label class="pos-opt-label">
                        <input type="checkbox" class="pos-checkbox addon-item" value="10000"
                            onchange="calculateTotal()"> Bakso Urat
                    </label>
                    <span class="pos-opt-price">+10.000</span>
                </div>
                <div class="pos-opt-row">
                    <label class="pos-opt-label">
                        <input type="checkbox" class="pos-checkbox addon-item" value="4000"
                            onchange="calculateTotal()"> Mie Kuning
                    </label>
                    <span class="pos-opt-price">+4.000</span>
                </div>

                <span class="pos-section-label" style="margin-top:24px;">Catatan Tambahan</span>
                <textarea class="pos-input-text" rows="2" placeholder="Tulis disini..."></textarea>
            </div>
            <div class="pos-sheet-footer">
                <span class="total" id="modal-total-price">0</span>
                <button class="btn-simpan-pos" onclick="closeAllSheets()">Simpan</button>
            </div>
        </div>

        <div class="pos-bottom-sheet" id="sheet-keranjang">
            <div class="pos-sheet-header">
                <span class="pos-sheet-title">Keranjang Belanja</span>
                <span class="pos-sheet-close" onclick="closeAllSheets()">&times;</span>
            </div>
            <div class="pos-sheet-body">
                <div class="cart-item">
                    <img src="https://images.unsplash.com/photo-1604908176997-125f25cc6f3d?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
                        class="cart-item-img">
                    <div class="cart-item-info">
                        <div class="cart-item-name">2 x Nasi Goreng</div>
                        <div class="cart-item-var">Pedas, tanpa sayur</div>
                        <div class="cart-item-price">15.000</div>
                    </div>
                </div>

                <div class="cart-item">
                    <img src="https://images.unsplash.com/photo-1569718212165-3a8278d5f624?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80"
                        class="cart-item-img">
                    <div class="cart-item-info">
                        <div class="cart-item-name">1 x Mie Ayam</div>
                        <div class="cart-item-var">Sedang, tanpa sayur</div>
                        <div class="cart-item-price">18.000</div>
                    </div>
                </div>
            </div>
            <div class="pos-sheet-footer">
                <div class="pos-cart-icon-wrapper" style="background:transparent; color:#111;">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M16 6V4C16 1.79 14.21 0 12 0C9.79 0 8 1.79 8 4V6H2C1.45 6 1 6.45 1 7V22C1 23.1 1.9 24 3 24H21C22.1 24 23 23.1 23 22V7C23 6.45 22.55 6 22 6H16ZM10 4C10 2.9 10.9 2 12 2C13.1 2 14 2.9 14 4V6H10V4ZM21 22H3V8H8V10C8 10.55 8.45 11 9 11C9.55 11 10 10.55 10 10V8H14V10C14 10.55 14.45 11 15 11C15.55 11 16 10.55 16 10V8H21V22Z" />
                    </svg>
                    <span class="pos-cart-badge" style="top:0; right:0;">4</span>
                </div>
                <div style="font-size:16px; font-weight:700;">Rp 16.700.000</div>
                <button class="btn-simpan-pos"
                    onclick="window.location.href='{{ route('saku-mobile.page.checkout-pos') }}'">Proses</button>
            </div>
        </div>

        <div class="sidebar-overlay" id="sidebar-overlay"></div>
        <div class="sidebar-menu" id="sidebar-menu">
            <div class="sidebar-header">
                <button class="btn-close-sidebar" id="btn-close-sidebar">&times;</button>
                <img src="{{ Session::get('foto') ? config('api.url') . 'saku-auth/storage-file?filename=' . Session::get('foto') : asset('asset-webview/saku/images/accountant.png') }}"
                    class="profile-img" onerror="this.src='{{ asset('asset-webview/saku/images/accountant.png') }}'">
                <h4 class="profile-name">{{ Session::get('namaUser') ?? 'Nama Pengguna' }}</h4>
                <p class="profile-email">{{ Session::get('email') ?? 'email@mysai.co.id' }}</p>
            </div>
            <div class="sidebar-body" id="app-switch-list"></div>
        </div>

    </div>
@endsection

@push('script')
    <script type="text/javascript">
        // ==========================================
        // FUNGSI MODAL POS
        // ==========================================
        const svgPlaceholder =
            `<div class="pos-product-img placeholder-img" style="display:flex; align-items:center; justify-content:center; background:#f0f0f0; border: 1px solid #eee;"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></div>`;

        const svgModalPlaceholder =
            `<div class="placeholder-img" style="width: 56px; height: 56px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background:#f0f0f0; border: 1px solid #f0f0f0;"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></div>`;

        window.openDetailModal = function(kode, nama, harga, gambar) {
            $('#sheet-detail-item .pos-sheet-title').text('Pesanan ' + nama);
            $('#sheet-detail-item .pos-sheet-body > div:first-child > div:first-child > div > div:nth-child(1)').text(
                nama);
            $('#sheet-detail-item .pos-sheet-body > div:first-child > div:first-child > div > div:nth-child(2)').text(
                'Rp ' + new Intl.NumberFormat('id-ID').format(harga));

            let containerGambar = $('#sheet-detail-item .pos-sheet-body > div:first-child > div:first-child');
            containerGambar.find('img, div.placeholder-img').remove();

            let svgIcon =
                `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>`;

            // LOGIKA BARU: Hindari injeksi HTML di onerror
            if (gambar !== 'NO_IMAGE') {
                containerGambar.prepend(`
                        <img src="${gambar}" class="placeholder-img" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" style="width: 56px; height: 56px; border-radius: 12px; object-fit: cover; border: 1px solid #f0f0f0; flex-shrink: 0;">
                        <div class="placeholder-img" style="display:none; width: 56px; height: 56px; border-radius: 12px; align-items:center; justify-content:center; background:#f0f0f0; border: 1px solid #f0f0f0; flex-shrink: 0;">
                            ${svgIcon}
                        </div>
                    `);
            } else {
                containerGambar.prepend(`
                        <div class="placeholder-img" style="display:flex; width: 56px; height: 56px; border-radius: 12px; align-items:center; justify-content:center; background:#f0f0f0; border: 1px solid #f0f0f0; flex-shrink: 0;">
                            ${svgIcon}
                        </div>
                    `);
            }

            $('#qty-value').text(1);
            $('#sidebar-overlay').addClass('active');
            $('#sheet-detail-item').addClass('active');

            calculateTotal();
        };

        function openCartModal() {
            $('#sidebar-overlay').addClass('active');
            $('#sheet-keranjang').addClass('active');
        }

        function closeAllSheets() {
            $('.pos-bottom-sheet').removeClass('active');
            $('#sidebar-overlay').removeClass('active');
        }

        $('#sidebar-overlay').click(function() {
            closeAllSheets();
        });

        // ==========================================
        // FUNGSI KALKULATOR TOTAL HARGA ITEM
        // ==========================================
        window.updateQty = function(change) {
            let currentQty = parseInt($('#qty-value').text());
            let newQty = currentQty + change;

            if (newQty >= 1) {
                $('#qty-value').text(newQty);
                calculateTotal();
            }
        };

        window.calculateTotal = function() {
            let qty = parseInt($('#qty-value').text());
            let total = 0;

            let variantPrice = parseInt($('.variant-item:checked').val()) || 0;
            total += variantPrice;

            $('.addon-item:checked').each(function() {
                total += parseInt($(this).val()) || 0;
            });

            total = total * qty;

            let formattedTotal = new Intl.NumberFormat('id-ID').format(total);
            $('#modal-total-price').text(formattedTotal);
        };


        $(document).ready(function() {
            // Setup global csrf token
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                xhrFields: {
                    withCredentials: true // <--- HANYA TAMBAH BARIS INI
                }
            });

            var currentModuleCode = "{{ Session::get('kodeMenuMobile') }}";

            // ====================================================================
            // LOGIKA LOAD DATA BARANG (MASTER) DINAMIS
            // ====================================================================
            function loadBarang() {
                $.ajax({
                    type: 'GET',
                    url: "{{ url('toko-master/barang') }}",
                    dataType: 'json',
                    success: function(res) {
                        let html = '';
                        let dataBarang = res.data || res.daftar || [];

                        if (dataBarang.length > 0) {
                            dataBarang.forEach(item => {
                                let hasImage = (item.file_gambar && item.file_gambar !== '-' &&
                                    item.file_gambar !== null && item.file_gambar.trim() !==
                                    '');
                                let imgUrl = hasImage ? item.file_gambar : 'NO_IMAGE';

                                // Sanitasi nama barang agar tanda kutip satu (') tidak merusak onclick (Contoh: "Jum'at")
                                let safeNama = item.nama ? item.nama.replace(/'/g, "\\'") : '';
                                let safeImgUrl = imgUrl.replace(/'/g, "\\'");

                                // Ikon SVG default
                                let svgIcon =
                                    `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>`;
                                let imageHtml = '';

                                // LOGIKA BARU: Hindari injeksi HTML di onerror. Pakai element tersembunyi.
                                if (hasImage) {
                                    imageHtml = `
                                        <img src="${imgUrl}" class="pos-product-img" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                        <div class="pos-product-img placeholder-img" style="display:none; align-items:center; justify-content:center; background:#f0f0f0; border: 1px solid #eee; flex-shrink: 0;">
                                            ${svgIcon}
                                        </div>`;
                                } else {
                                    imageHtml = `
                                        <div class="pos-product-img placeholder-img" style="display:flex; align-items:center; justify-content:center; background:#f0f0f0; border: 1px solid #eee; flex-shrink: 0;">
                                            ${svgIcon}
                                        </div>`;
                                }

                                let hargaJual = parseFloat(item.hna) || 0;

                                html += `
                                <div class="pos-product-item">
                                    ${imageHtml}
                                    <div class="pos-product-info">
                                        <div class="pos-product-name">${item.nama}</div>
                                        <div class="pos-product-var">Satuan: ${item.satuan || '-'}</div>
                                        <div class="pos-product-price">Rp ${new Intl.NumberFormat('id-ID').format(hargaJual)}</div>
                                    </div>
                                    <button class="pos-btn-add" onclick="openDetailModal('${item.kode_barang}', '${safeNama}', ${hargaJual}, '${safeImgUrl}')">
                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg> Tambah
                                    </button>
                                </div>`;
                            });

                            $('#pos-product-list').html(html);
                        } else {
                            $('#pos-product-list').html(
                                '<div style="padding: 40px 20px; text-align: center; color: #EF4444;">Belum ada data barang.</div>'
                            );
                        }
                    },
                    error: function() {
                        $('#pos-product-list').html(
                            '<div style="padding: 40px 20px; text-align: center; color: #EF4444;">Gagal mengambil data barang dari server.</div>'
                        );
                    }
                });
            }

            // Panggil saat halaman selesai dimuat!
            loadBarang();

            // ====================================================================
            // LOGIKA SIDEBAR BURGER MENU (SWITCH APP) - WHITELIST FILTER
            // ====================================================================
            $('.btn-burger').click(function() {
                $('#sidebar-overlay').addClass('active');
                $('#sidebar-menu').addClass('active');
                loadAppList();
            });

            $('#btn-close-sidebar').click(function() {
                $('#sidebar-overlay').removeClass('active');
                $('#sidebar-menu').removeClass('active');
            });

            function loadAppList() {
                $('#app-switch-list').html(
                    '<div style="padding: 20px; text-align: center; color: #999; font-size: 12px;">Memuat akses aplikasi...</div>'
                );

                $.ajax({
                    type: 'GET',
                    url: "{{ url('admin-auth/menu-home') }}",
                    data: {
                        top: 100,
                        menu_aktif: currentModuleCode
                    },
                    dataType: 'json',
                    success: function(res) {
                        let html = '';

                        // HANYA MODUL INI YANG BOLEH TAMPIL
                        const allowedModules = ['MOB-UKM', 'POS-01', 'POS', 'KUG-S', 'B-SMK'];

                        if (res.status && res.data && res.data.length > 0) {
                            res.data.forEach(app => {
                                if (allowedModules.includes(app.kode_klp)) {

                                    let activeDot = app.kode_klp == currentModuleCode ?
                                        `<div class="app-switch-active-indicator"></div>` : ``;

                                    let firstLetter = app.nama_klp.charAt(0).toUpperCase();

                                    html += `
                                    <div class="app-switch-item" onclick="switchApp('${app.kode_klp}')">
                                        <div class="app-switch-icon">${firstLetter}</div>
                                        <span class="app-switch-text">${app.nama_klp}</span>
                                        ${activeDot}
                                    </div>
                                    `;
                                }
                            });

                            if (html === '') {
                                html =
                                    '<div style="padding: 20px; text-align: center; color: #EF4444; font-size: 13px;">Belum ada akses modul untuk akun ini.</div>';
                            }

                            $('#app-switch-list').html(html);
                        } else {
                            $('#app-switch-list').html(
                                '<div style="padding: 20px; text-align: center; color: #EF4444; font-size: 13px;">Tidak ada modul tersedia.</div>'
                            );
                        }
                    },
                    error: function() {
                        $('#app-switch-list').html(
                            '<div style="padding: 20px; text-align: center; color: #EF4444; font-size: 13px;">Gagal memuat modul dari server.</div>'
                        );
                    }
                });
            }

            // Fungsi untuk mengganti Session Modul
            window.switchApp = function(appCode) {
                if (appCode == currentModuleCode) return;

                $.ajax({
                    type: 'POST',
                    url: "{{ route('saku-mobile.data.switch-menu') }}",
                    data: {
                        kode_klp: appCode
                    },
                    success: function(res) {
                        if (res.status) {
                            window.location.reload();
                        } else {
                            alert("Gagal berpindah modul.");
                        }
                    }
                });
            };

        });
    </script>
@endpush