@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;
            transition: all 0.2s;
        }

        .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-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;
            transition: all 0.2s;
        }

        .pos-btn-add:active {
            transform: scale(0.95);
        }

        /* 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;
        }

        .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-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: center;
            padding: 16px 0;
            border-bottom: 1px dashed #eee;
        }

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

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

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

        .cart-item-price {
            font-size: 13px;
            font-weight: 700;
            color: #111;
        }

        .btn-hapus-item {
            background: #ffeeee;
            color: #EF4444;
            border: none;
            border-radius: 8px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            margin-left: 12px;
        }

        /* =========================================================================
                       4. MODAL KONFIRMASI CUSTOM
                       ========================================================================= */
        .custom-confirm-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 10005;
            display: none;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(2px);
            opacity: 0;
            transition: opacity 0.2s;
        }

        .custom-confirm-overlay.active {
            display: flex;
            opacity: 1;
        }

        .custom-confirm-box {
            background: #fff;
            width: 85%;
            max-width: 300px;
            border-radius: 16px;
            padding: 24px 20px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            transform: scale(0.9);
            transition: transform 0.2s;
        }

        .custom-confirm-overlay.active .custom-confirm-box {
            transform: scale(1);
        }

        .custom-confirm-title {
            font-size: 16px;
            font-weight: 700;
            color: #111;
            margin-bottom: 8px;
        }

        .custom-confirm-msg {
            font-size: 13px;
            color: #666;
            margin-bottom: 24px;
            line-height: 1.4;
        }

        .custom-confirm-actions {
            display: flex;
            gap: 12px;
        }

        .btn-confirm-cancel {
            flex: 1;
            padding: 12px;
            border-radius: 10px;
            background: #f1f5f9;
            color: #475569;
            border: none;
            font-weight: 600;
            cursor: pointer;
        }

        .btn-confirm-delete {
            flex: 1;
            padding: 12px;
            border-radius: 10px;
            background: #EF4444;
            color: #fff;
            border: none;
            font-weight: 600;
            cursor: pointer;
        }
    </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" id="pos-category-list">
                <div class="pos-cat-btn active" onclick="setCategory('ALL', this)">Semua Menu</div>
                <div style="font-size: 12px; color: #999; margin-left: 10px;">Memuat kategori...</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" style="display:none;">0</span>
            </div>
            <div class="pos-cart-total">Rp 0</div>
            <button class="pos-btn-process" onclick="event.stopPropagation(); proceedToCheckout()">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;">
                    <div style="display: flex; align-items: center; gap: 14px;">
                        <div id="modal-img-container" style="display:flex;"></div>
                        <div>
                            <div id="modal-item-name" style="font-size: 16px; font-weight: 700; color:#111;">-</div>
                            <div id="modal-item-price"
                                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>
            </div>

            <div class="pos-sheet-footer">
                <span class="total" id="modal-total-price">0</span>
                <button class="btn-simpan-pos" onclick="addToCart()">Simpan ke Keranjang</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" id="cart-item-list">
            </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; display:none;">0</span>
                </div>
                <div style="font-size:16px; font-weight:700;" id="cart-modal-total-price">Rp 0</div>
                <button class="btn-simpan-pos" onclick="proceedToCheckout()">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 class="custom-confirm-overlay" id="modal-confirm-delete">
            <div class="custom-confirm-box">
                <div class="custom-confirm-title">Hapus Barang?</div>
                <div class="custom-confirm-msg" id="confirm-delete-msg">Apakah Anda yakin ingin menghapus barang ini dari
                    keranjang?</div>
                <div class="custom-confirm-actions">
                    <button class="btn-confirm-cancel" onclick="closeConfirmDelete()">Batal</button>
                    <button class="btn-confirm-delete" onclick="executeConfirmDelete()">Ya, Hapus</button>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('script')
    <script type="text/javascript">
        function resolveImageUrl(urlDariApi) {
            if (!urlDariApi || urlDariApi === '-' || urlDariApi.includes('filename=&')) {
                return 'NO_IMAGE';
            }

            // PERBAIKAN: Decode dulu untuk mencegah Double-Encoding (%2520) jika url sudah ada di dalam keranjang
            let decodedUrl = decodeURI(urlDariApi);

            let currentHost = window.location.hostname;
            let publicApiUrl = '';

            if (currentHost === 'localhost' || currentHost === '127.0.0.1') {
                publicApiUrl = 'http://localhost:8001/api/';
            } else {
                let domainParts = currentHost.split('.');
                if (domainParts.length > 2) {
                    domainParts[0] = 'api';
                    publicApiUrl = 'https://' + domainParts.join('.') + '/api/';
                } else {
                    publicApiUrl = 'https://api.' + currentHost + '/api/';
                }
            }

            let finalUrl = decodedUrl.replace('http://nginx:81/api/', publicApiUrl);

            // Cukup gunakan encodeURI standar, tidak perlu replace backslash lagi
            return encodeURI(finalUrl);
        }

        // ====================================================================
        // 1. STATE GLOBAL (VARIABEL)
        // ====================================================================
        let allProducts = [];
        let activeCategory = 'ALL';
        let searchQuery = '';
        let currentLimit = 20;

        let cart = JSON.parse(localStorage.getItem('pos_cart')) || [];
        let currentSelectedItem = null;

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

        const 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>`;


        // ====================================================================
        // 2. FUNGSI-FUNGSI GLOBAL
        // ====================================================================
        window.openCartModal = function() {
            $('#sidebar-overlay').addClass('active');
            $('#sheet-keranjang').addClass('active');
        };

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

        window.openDetailModal = function(kode_barang) {
            let item = allProducts.find(x => x.kode_barang === kode_barang);
            if (!item) return;

            let nama = item.nama;
            let harga = parseFloat(item.hna) || 0;

            // PERBAIKAN: Gunakan fungsi resolveImageUrl agar gambar di Modal muncul
            let safeImgUrl = resolveImageUrl(item.file_gambar);
            let gambar = safeImgUrl;

            currentSelectedItem = {
                kode: item.kode_barang,
                nama: nama,
                harga: harga,
                gambar: gambar
            };

            $('#sheet-detail-item .pos-sheet-title').text('Pesanan ' + nama);
            $('#modal-item-name').text(nama);
            $('#modal-item-price').text('Rp ' + new Intl.NumberFormat('id-ID').format(harga));
            $('#sheet-detail-item').data('harga-dasar', harga);

            let containerGambar = $('#modal-img-container');
            containerGambar.empty();

            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();
        };

        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 hargaDasar = parseInt($('#sheet-detail-item').data('harga-dasar')) || 0;
            let total = hargaDasar * qty;
            let formattedTotal = new Intl.NumberFormat('id-ID').format(total);
            $('#modal-total-price').text('Rp ' + formattedTotal);
        };

        window.saveCart = function() {
            localStorage.setItem('pos_cart', JSON.stringify(cart));
        };

        window.addToCart = function() {
            if (!currentSelectedItem) return;

            let qty = parseInt($('#qty-value').text());

            // Hilangkan pengecekan catatan karena catatan pesanan sudah dihapus
            let existingIndex = cart.findIndex(item => item.kode === currentSelectedItem.kode);

            if (existingIndex > -1) {
                cart[existingIndex].qty += qty;
            } else {
                cart.push({
                    kode: currentSelectedItem.kode,
                    nama: currentSelectedItem.nama,
                    harga: currentSelectedItem.harga,
                    gambar: currentSelectedItem.gambar,
                    qty: qty
                });
            }

            saveCart();
            renderCart();
            closeAllSheets();
        };

        window.removeFromCart = function(index) {
            cart.splice(index, 1);
            saveCart();
            renderCart();
        };

        let itemIndexToDelete = null;

        window.promptDeleteCartItem = function(index) {
            itemIndexToDelete = index;
            $('#confirm-delete-msg').html(`Hapus <b>${cart[index].nama}</b> dari keranjang?`);
            $('#modal-confirm-delete').addClass('active');
        };

        window.closeConfirmDelete = function() {
            itemIndexToDelete = null;
            $('#modal-confirm-delete').removeClass('active');
        };

        window.executeConfirmDelete = function() {
            if (itemIndexToDelete !== null) {
                removeFromCart(itemIndexToDelete);
                closeConfirmDelete();
            }
        };

        window.updateCartQty = function(index, change) {
            let newQty = cart[index].qty + change;

            if (newQty >= 1) {
                cart[index].qty = newQty;
                saveCart();
                renderCart();
            } else if (newQty === 0) {
                promptDeleteCartItem(index);
            }
        };

        window.renderCart = function() {
            let totalQty = 0;
            let totalPrice = 0;
            let html = '';

            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>`;

            if (cart.length === 0) {
                html =
                    '<div style="padding: 40px 20px; text-align: center; color: #999;">Keranjang belanja masih kosong.</div>';
            } else {
                cart.forEach((item, index) => {
                    totalQty += item.qty;
                    let subTotal = item.qty * item.harga;
                    totalPrice += subTotal;

                    let imgHtml = '';

                    let safeImgUrl = resolveImageUrl(item.gambar);

                    if (safeImgUrl !== 'NO_IMAGE') {
                        imgHtml = `
                        <img src="${safeImgUrl}" style="width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0;" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                        <div style="display:none; width: 48px; height: 48px; border-radius: 8px; align-items:center; justify-content:center; background:#f0f0f0; border: 1px solid #eee; flex-shrink: 0;">
                            ${svgIcon}
                        </div>`;
                    } else {
                        imgHtml = `
                        <div style="display:flex; width: 48px; height: 48px; border-radius: 8px; align-items:center; justify-content:center; background:#f0f0f0; border: 1px solid #eee; flex-shrink: 0;">
                            ${svgIcon}
                        </div>`;
                    }

                    // Hapus render catatan pesanan di keranjang
                    html += `
                    <div style="display: flex; align-items: center; padding: 16px 0; border-bottom: 1px dashed #eee; gap: 12px;">
                        
                        ${imgHtml}

                        <div style="flex: 1; min-width: 0;">
                            <div style="font-size: 14px; font-weight: 600; color: #111; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                ${item.nama}
                            </div>
                            <div style="font-size: 13px; font-weight: 700; color: #007bff;">
                                Rp ${new Intl.NumberFormat('id-ID').format(subTotal)}
                            </div>
                        </div>

                        <div style="display: flex; align-items: center; gap: 14px; flex-shrink: 0;">
                            
                            <div style="display: flex; align-items: center; gap: 8px;">
                                <button type="button" onclick="updateCartQty(${index}, -1)" style="width: 24px; height: 24px; border-radius: 50%; border: none; background: #111; display: flex; justify-content: center; align-items: center; color: #fff; cursor: pointer; padding: 0;">
                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                                </button>
                                
                                <span style="font-size: 14px; font-weight: 600; width: 16px; text-align: center; color: #111;">${item.qty}</span>
                                
                                <button type="button" onclick="updateCartQty(${index}, 1)" style="width: 24px; height: 24px; border-radius: 50%; border: none; background: #111; display: flex; justify-content: center; align-items: center; color: #fff; cursor: pointer; padding: 0;">
                                    <svg width="12" height="12" 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>
                                </button>
                            </div>
                            
                            <button onclick="promptDeleteCartItem(${index})" style="background: #ffeeee; border: none; border-radius: 6px; width: 28px; height: 28px; display: flex; justify-content: center; align-items: center; color: #EF4444; cursor: pointer; padding: 0;">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                            </button>
                        </div>

                    </div>`;
                });
            }

            $('#cart-item-list').html(html);

            let formattedTotal = 'Rp ' + new Intl.NumberFormat('id-ID').format(totalPrice);
            $('.pos-cart-total').text(formattedTotal);
            $('#cart-modal-total-price').text(formattedTotal);

            if (totalQty > 0) {
                $('.pos-cart-badge').text(totalQty).show();
            } else {
                $('.pos-cart-badge').hide();
            }
        };

        window.proceedToCheckout = function() {
            if (cart.length === 0) {
                alert("Keranjang masih kosong! Silakan tambah pesanan terlebih dahulu.");
                return;
            }
            window.location.href = "{{ route('saku-mobile.page.checkout-pos') }}";
        };

        window.loadMoreProducts = function() {
            currentLimit += 20;
            applyFilters();
        };

        window.setCategory = function(kode_klp, element) {
            $('.pos-cat-btn').removeClass('active');
            $(element).addClass('active');
            activeCategory = kode_klp;
            currentLimit = 20;
            applyFilters();
        };

        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();
                }
            });
        };

        function applyFilters() {
            let html = '';

            let filteredProducts = allProducts.filter(item => {
                let itemKlp = item.kode_klp ? String(item.kode_klp).trim().toUpperCase() : '';
                let activeKlp = activeCategory ? String(activeCategory).trim().toUpperCase() : 'ALL';
                let matchCategory = (activeKlp === 'ALL' || itemKlp === activeKlp);

                let namaBarang = item.nama ? String(item.nama).toLowerCase() : '';
                let matchSearch = namaBarang.includes(searchQuery);

                return matchCategory && matchSearch;
            });

            let productsToRender = filteredProducts.slice(0, currentLimit);

            if (productsToRender.length > 0) {
                productsToRender.forEach(item => {
                    let safeImgUrl = resolveImageUrl(item.file_gambar);
                    let hasImage = (safeImgUrl !== 'NO_IMAGE');

                    let imageHtml = '';
                    if (hasImage) {
                        imageHtml = `
                        <img src="${safeImgUrl}" 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;
                    let safeNama = item.nama ? item.nama.replace(/'/g, "\\'") : '';

                    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}')">
                            <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>`;
                });

                if (filteredProducts.length > currentLimit) {
                    html += `
                    <div style="padding: 24px 20px 40px; text-align: center;">
                        <button onclick="loadMoreProducts()" style="background: #e0f0ff; color: #007bff; border: none; padding: 10px 24px; border-radius: 24px; font-size: 13px; font-weight: 600; cursor: pointer; width: 100%; max-width: 200px; box-shadow: 0 2px 8px rgba(0,123,255,0.1);">
                            Tampilkan Lebih Banyak
                        </button>
                    </div>`;
                }

            } else {
                html = '<div style="padding: 40px 20px; text-align: center; color: #999;">Barang tidak ditemukan.</div>';
            }

            $('#pos-product-list').html(html);
        }

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

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

            $('.pos-search-input').on('input', function() {
                searchQuery = $(this).val().toLowerCase();
                currentLimit = 20;
                applyFilters();
            });

            $('.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 loadCategories() {
                $.ajax({
                    type: 'GET',
                    url: "{{ url('toko-master/barang-klp') }}",
                    dataType: 'json',
                    success: function(res) {
                        let html =
                            `<div class="pos-cat-btn active" onclick="setCategory('ALL', this)">Semua Menu</div>`;
                        let dataKategori = res.daftar || res.data || [];

                        if (dataKategori.length > 0) {
                            dataKategori.forEach(klp => {
                                html +=
                                    `<div class="pos-cat-btn" onclick="setCategory('${klp.kode_klp}', this)">${klp.nama}</div>`;
                            });
                        }
                        $('#pos-category-list').html(html);
                    }
                });
            }

            function loadBarang() {
                $.ajax({
                    type: 'GET',
                    url: "{{ url('toko-master/barang') }}",
                    dataType: 'json',
                    success: function(res) {
                        allProducts = res.daftar || res.data || [];
                        applyFilters();
                    },
                    error: function() {
                        $('#pos-product-list').html(
                            '<div style="padding: 40px 20px; text-align: center; color: #EF4444;">Gagal mengambil data barang dari server.</div>'
                        );
                    }
                });
            }

            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 = '';
                        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>'
                        );
                    }
                });
            }

            loadCategories();
            loadBarang();
            renderCart();
        });
    </script>
@endpush