@extends('admin.layout.content')

@section('content')
    <div class="container-fluid px-4 py-3 kasir-main-container">

        {{-- BARIS ATAS: JUDUL SAJA --}}
        <div class="d-flex align-items-center justify-content-between mb-4 kasir-header-section">
            <div class="d-flex align-items-center gap-3">
                <div class="p-2 rounded-3 text-success d-flex align-items-center justify-content-center kasir-icon-wrapper"
                    style="background-color: #e6f4ea;">
                    <span class="material-symbols-outlined" style="font-size: 28px; color: #10b981;">point_of_sale</span>
                </div>
                <div>
                    <h4 class="fw-bold text-slate-800 mb-0 kasir-main-title">Kasir Point of Sale</h4>
                    <p class="text-muted small mb-0 kasir-sub-title">Kelola penjualan langsung toko fisik Tanjoeng Farm
                        dengan cepat</p>
                </div>
            </div>
        </div>

        {{-- ALERT PESAN SUKSES / ERROR --}}
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm mb-4 kasir-alert-box"
                role="alert" style="background-color: #e6f4ea; color: #0f5132; padding-right: 3rem;">
                <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
                    <div class="d-flex align-items-center gap-2">
                        <span class="material-symbols-outlined">check_circle</span>
                        <span><strong>Sukses!</strong> {{ session('success') }}</span>
                    </div>
                    @if(session('print_receipt_id'))
                        <button type="button" class="btn btn-sm btn-success text-white fw-bold d-flex align-items-center gap-1 px-3 py-1.5"
                            style="background-color: #10b981; border-color: #10b981;"
                            onclick="window.open('{{ route('admin.history.receipt', ['type' => 'offline', 'id' => session('print_receipt_id')]) }}', '_blank', 'width=450,height=700,top=100,left=100')">
                            <span class="material-symbols-outlined" style="font-size: 18px;">print</span>
                            Cetak Nota
                        </button>
                    @endif
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" style="top: 50%; transform: translateY(-50%);"></button>
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm mb-4 kasir-alert-box"
                role="alert" style="background-color: #fde8e8; color: #842029;">
                <div class="d-flex align-items-center gap-2">
                    <span class="material-symbols-outlined">error</span>
                    <strong>Gagal Transaksi!</strong> {{ session('error') }}
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        {{-- NAVIGASI TAB KHUSUS MOBILE --}}
        <div class="d-flex d-lg-none mb-3 p-1 rounded-3 kasir-mobile-nav" style="background-color: #f1f5f9;">
            <button type="button" class="btn w-50 py-2.5 fw-bold kasir-tab-btn kasir-tab-active btn-success text-white"
                data-target="#kasir-products-pane">
                <span class="material-symbols-outlined align-middle me-1" style="font-size: 20px;">grid_view</span> Produk
            </button>
            <button type="button" class="btn w-50 py-2.5 fw-bold kasir-tab-btn btn-light text-dark position-relative"
                data-target="#kasir-cart-pane">
                <span class="material-symbols-outlined align-middle me-1" style="font-size: 20px;">shopping_basket</span>
                Keranjang
                <span
                    class="position-absolute top-50 start-100 translate-middle badge rounded-pill bg-danger d-none kasir-badge-count"
                    style="margin-left: -25px; font-size: 0.75rem;">0</span>
            </button>
        </div>

        {{-- INTERFACE UTAMA POS KASIR --}}
        <style>
            .kasir-search-card .input-group:hover .kasir-search-input,
            .kasir-search-card .input-group:hover .input-group-text {
                border-color: #10b981 !important;
            }
            .kasir-search-input:focus {
                border-color: #10b981 !important;
                box-shadow: none !important;
            }
            .kasir-search-card .input-group:focus-within .input-group-text {
                color: #10b981 !important;
                border-color: #10b981 !important;
            }
            .kasir-search-card .input-group {
                transition: all 0.2s ease-in-out;
            }
        </style>
        <div class="row g-3 kasir-main-row">

            {{-- SISI KIRI: DAFTAR PRODUK & PILIHAN --}}
            <div id="kasir-products-pane" class="col-lg-7 col-xl-8 kasir-tab-pane kasir-pane-active-mobile">
                <div class="card border-0 shadow-sm rounded-3 p-3 mb-3 kasir-search-card">
                    <div class="input-group">
                        <span class="input-group-text bg-transparent border-end-0 text-muted">
                            <span class="material-symbols-outlined fs-5">search</span>
                        </span>
                        <input type="text" id="search-product"
                            class="form-control border-start-0 ps-0 kasir-search-input"
                            placeholder="Ketik nama produk...">
                    </div>
                </div>

                <div class="row row-cols-2 row-cols-sm-2 row-cols-md-2 row-cols-xl-3 g-2 g-md-4 kasir-product-grid"
                    id="product-grid">
                    @php
                        $groupedProducts = $availableProducts->groupBy('product_id');
                    @endphp

                    @forelse($groupedProducts as $productId => $packages)
                        @php
                            $firstPackage = $packages->first();
                            $totalStock = $packages->sum('stock');

                            $variantsData = $packages
                                ->map(function ($pkg) {
                                    return [
                                        'package_id' => $pkg->package_id,
                                        'product_name' => $pkg->product->product_name,
                                        'weight' => $pkg->weight_in_kg,
                                        'unit' => $pkg->unit->unit_abbreviation,
                                        'price' => (int) $pkg->price,
                                        'stock' => (int) $pkg->stock,
                                    ];
                                })
                                ->values();

                            $searchKeywords = strtolower($firstPackage->product->product_name);

                            $productMedia = $firstPackage->product->media ?? collect();
                            $imageOnlyMedia = $productMedia->filter(function ($media) {
                                $path = $media->file_url ?? $media->file_name;
                                if (!$path) {
                                    return false;
                                }
                                $ext = strtolower(pathinfo($path, PATHINFO_EXTENSION));
                                return in_array($ext, ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp']);
                            });

                            $mainImageMedia =
                                $imageOnlyMedia->where('is_main', true)->first() ?? $imageOnlyMedia->first();
                            $imageUrl = null;

                            if ($mainImageMedia) {
                                $pathGambar = $mainImageMedia->file_url ?? $mainImageMedia->file_name;
                                if ($pathGambar) {
                                    if (preg_match('/^https?:\/\//', $pathGambar)) {
                                        $imageUrl = $pathGambar;
                                    } else {
                                        $cleanPath = ltrim($pathGambar, '/');
                                        if (!str_starts_with($cleanPath, 'storage/')) {
                                            if (!str_contains($cleanPath, 'product/')) {
                                                $cleanPath = 'product/' . $cleanPath;
                                            }
                                            $cleanPath = 'storage/' . $cleanPath;
                                        }
                                        $imageUrl = asset($cleanPath);
                                    }
                                }
                            }
                        @endphp

                        <div class="col product-card-item kasir-grid-item" data-name="{{ $searchKeywords }}">
                            <div class="card h-100 border-0 shadow-sm rounded-3 overflow-hidden position-relative {{ $totalStock > 0 ? 'btn-product-card' : '' }} kasir-item-card"
                                style="cursor: {{ $totalStock > 0 ? 'pointer' : 'not-allowed' }}; transition: transform 0.2s; {{ $totalStock <= 0 ? 'opacity: 0.65;' : '' }}"
                                data-product-name="{{ $firstPackage->product->product_name }}"
                                data-variants="{{ json_encode($variantsData) }}">

                                <div class="bg-light position-relative kasir-image-wrapper">
                                    @if ($imageUrl)
                                        <img src="{{ $imageUrl }}" alt="{{ $firstPackage->product->product_name }}"
                                            class="w-100 h-100 object-fit-cover shadow-inner"
                                            onerror="this.onerror=null; this.parentNode.innerHTML=`<div class='w-100 h-100 d-flex align-items-center justify-content-center text-muted' style='background-color: #f1f5f9;'><span class='material-symbols-outlined kasir-fallback-icon'>eco</span></div>`;">
                                    @else
                                        <div class="w-100 h-100 d-flex align-items-center justify-content-center text-muted"
                                            style="background-color: #f1f5f9;">
                                            <span class="material-symbols-outlined kasir-fallback-icon">eco</span>
                                        </div>
                                    @endif
                                    
                                    @if($totalStock > 0)
                                        <span class="position-absolute top-0 end-0 bg-dark text-white opacity-75 small px-2 py-0.5 m-2 rounded-pill kasir-stock-tag">
                                            Stok: {{ $totalStock }}
                                        </span>
                                    @else
                                        <span class="position-absolute top-0 end-0 bg-danger text-white small px-2 py-0.5 m-2 rounded-pill kasir-stock-tag fw-bold shadow-sm">
                                            HABIS
                                        </span>
                                    @endif
                                </div>

                                <div class="card-body p-3 d-flex flex-column justify-content-between kasir-card-body">
                                    <div class="mb-1">
                                        <h6 class="fw-bold text-slate-800 mb-2 text-truncate kasir-product-title">
                                            {{ $firstPackage->product->product_name }}
                                        </h6>
                                        <div class="d-flex flex-column gap-1 kasir-badges-wrapper">
                                            @if ($packages->count() == 1)
                                                <span
                                                    class="badge bg-light text-success border border-success-light kasir-variant-badge">
                                                    {{ $firstPackage->weight_in_kg }}
                                                    {{ $firstPackage->unit->unit_abbreviation }}
                                                </span>
                                                <span class="badge bg-white text-muted border kasir-price-badge">
                                                    Rp {{ number_format($firstPackage->price, 0, ',', '.') }}
                                                </span>
                                            @else
                                                <span
                                                    class="badge bg-light text-success border border-success-light kasir-variant-badge">
                                                    {{ $packages->count() }} Pilihan
                                                </span>
                                                <span class="badge bg-white text-muted border kasir-price-badge">
                                                    Min Rp {{ number_format($packages->min('price'), 0, ',', '.') }}
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-12 w-100 text-center py-5 text-muted kasir-empty-grid">
                            <span class="material-symbols-outlined fs-1 d-block mb-2">inventory_2</span>
                            Belum ada varian produk dengan stok tersedia.
                        </div>
                    @endforelse
                </div>
            </div>

            {{-- SISI KANAN: KERANJANG BELANJA & PEMBAYARAN --}}
            <div id="kasir-cart-pane" class="col-lg-5 col-xl-4 kasir-tab-pane kasir-pane-hidden-mobile">
                <div class="card border-0 shadow rounded-3 sticky-top kasir-cart-card" style="top: 20px; z-index: 10;">
                    <div class="card-header bg-white border-0 pt-4 px-4 pb-2 kasir-cart-header">
                        <h5 class="fw-bold text-slate-800 mb-0 d-flex align-items-center gap-2">
                            <span class="material-symbols-outlined text-success">shopping_basket</span>
                            Keranjang Belanja
                        </h5>
                    </div>

                    <form action="{{ route('admin.cashier.store') }}" method="POST" id="form-checkout">
                        @csrf
                        <input type="hidden" name="gateway_transaction_id" id="gateway_transaction_id" value="">
                        <input type="hidden" name="midtrans_token" id="midtrans_token" value="">

                        <div class="px-4 overflow-y-auto kasir-cart-items-wrapper" id="cart-wrapper"
                            style="max-height: 320px; min-height: 120px;">
                            <div class="text-center text-muted small py-4" id="cart-empty-state">
                                Keranjang kosong. Klik produk di sebelah kiri untuk menambahkan.
                            </div>
                            <ul class="list-group list-group-flush d-none kasir-cart-list" id="cart-list">
                            </ul>
                        </div>

                        <div class="bg-light p-4 border-top kasir-checkout-panel">
                            <div class="d-flex align-items-center justify-content-between mb-3 kasir-total-row">
                                <span class="text-muted fw-medium">Total Tagihan</span>
                                <span class="fw-bold text-slate-800 h4 mb-0" id="display-total">Rp 0</span>
                            </div>

                            <div class="mb-3 kasir-payment-method-box">
                                <label class="form-label small fw-bold text-muted mb-2">Metode Pembayaran</label>
                                <div class="row g-2">
                                    <div class="col">
                                        <input type="radio" class="btn-check" name="payment_method_pos" id="pay-cash"
                                            value="CASH" autocomplete="off" checked>
                                        <label
                                            class="btn btn-outline-success w-100 fw-semibold py-2 d-flex flex-column align-items-center justify-content-center gap-1"
                                            for="pay-cash" style="font-size: 0.85rem; line-height: 1;">
                                            <span class="material-symbols-outlined fs-4 mb-1">payments</span> 
                                            <span class="text-nowrap">TUNAI</span>
                                        </label>
                                    </div>
                                    <div class="col">
                                        <input type="radio" class="btn-check" name="payment_method_pos" id="pay-midtrans"
                                            value="MIDTRANS" autocomplete="off">
                                        <label
                                            class="btn btn-outline-success w-100 fw-semibold py-2 d-flex flex-column align-items-center justify-content-center gap-1"
                                            for="pay-midtrans" style="font-size: 0.85rem; line-height: 1;">
                                            <span class="material-symbols-outlined fs-4 mb-1">qr_code_2</span> 
                                            <span class="text-nowrap">NON TUNAI</span>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div id="wrapper-cash-calculator" class="kasir-cash-calculator">
                                <div class="mb-3">
                                    <label for="cash_received" class="form-label small fw-bold text-muted mb-1">Uang
                                        Diterima (Cash)</label>
                                    <div class="input-group">
                                        <span
                                            class="input-group-text bg-white border-end-0 fw-semibold text-muted">Rp</span>
                                        <input type="number"
                                            class="form-control border-start-0 fw-bold fs-5 text-end text-success"
                                            id="cash_received" name="cash_received" min="0" placeholder="0">
                                    </div>
                                </div>

                                <div class="p-3 rounded-3 mb-2 shadow-sm kasir-change-box" id="change-box"
                                    style="background-color: #f8fafc; border: 1px dashed #cbd5e1; transition: all 0.25s ease-in-out;">
                                    <div class="d-flex align-items-center gap-2 mb-1">
                                        <span class="fw-bold small text-muted" id="change-label">Uang Kembalian</span>
                                    </div>
                                    <div class="fw-bold h4 mb-0 text-muted ps-4" id="display-change">Rp 0</div>
                                </div>
                            </div>

                            <div id="wrapper-midtrans-info" class="d-none mb-2 kasir-midtrans-info">
                            <div class="alert alert-success border-0 small mb-0 py-2 d-flex align-items-center gap-2"
                                style="background-color: #e6f4ea; color: #0f5132;">
                                <span class="material-symbols-outlined fs-5">info</span>
                                Pembayaran akan diproses. Tersedia Non Tunai, GoPay, OVO, Transfer Bank & lainnya.
                            </div>
                            </div>

                            <button type="button"
                                class="btn btn-success w-100 text-white fw-bold py-3 mt-3 rounded-3 shadow-sm d-flex align-items-center justify-content-center gap-2 kasir-submit-btn"
                                id="btn-submit-checkout" style="background-color: #10b981; border-color: #10b981;"
                                disabled>
                                <span class="material-symbols-outlined">shopping_cart_checkout</span>
                                Beli
                            </button>
                        </div>

                        <div id="hidden-cart-inputs"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- FLOATING BOTTOM BAR MOBILE --}}
    <div class="fixed-bottom bg-white shadow-lg border-top p-3 d-none kasir-floating-bar" style="z-index: 1030;">
        <div class="d-flex align-items-center justify-content-between">
            <div>
                <span class="text-muted fw-medium d-block kasir-float-qty" style="font-size: 0.8rem;">0 Produk
                    Terpilih</span>
                <span class="fw-bold text-success h5 mb-0 kasir-float-total">Rp 0</span>
            </div>
            <button type="button"
                class="btn btn-success fw-bold px-4 py-2 rounded-3 d-flex align-items-center gap-2 kasir-float-view-btn"
                style="background-color: #10b981; border-color: #10b981;">
                Lihat Keranjang
                <span class="material-symbols-outlined" style="font-size: 18px;">arrow_forward</span>
            </button>
        </div>
    </div>

    {{-- MODAL INTERAKTIF: PILIH VARIAN SATUAN PRODUK --}}
    <div class="modal fade" id="modalSelectVariant" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered modal-sm" style="max-width: 360px;">
            <div class="modal-content border-0 shadow-lg rounded-3 kasir-modal-content">
                <div class="modal-header border-0 pt-4 px-4 pb-1">
                    <div>
                        <h5 class="fw-bold text-slate-800 mb-1">Pilih Satuan</h5>
                        <p class="text-muted small mb-0" id="variant-product-title"
                            style="font-size: 0.85rem; font-weight: 500; color: #10b981 !important;"></p>
                    </div>
                    <button type="button" class="btn-close align-self-start" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="d-grid gap-2" id="variant-options-container"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL PEMBAYARAN MIDTRANS dengan tema hijau --}}
    <div class="modal fade" id="modalQrisPayment" tabindex="-1" aria-hidden="true" data-bs-backdrop="static"
        data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered" style="max-width: 420px;">
            <div class="modal-content border-0 shadow-lg rounded-3" style="border-top: 4px solid #10b981 !important;">
                <div class="modal-header border-0 pt-4 px-4 pb-2" style="background-color: #f0fdf4;">
                    <div>
                        <h5 class="fw-bold text-slate-800 mb-1" style="color: #065f46 !important;">
                            <span class="material-symbols-outlined align-middle me-1" style="font-size: 22px; color: #10b981;">verified</span>
                            Pembayaran Non Tunai
                        </h5>
                            <p class="text-muted small mb-0" style="color: #047857 !important;">Scan Non Tunai / pilih metode pembayaran yang tersedia</p>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="btn-close-qris-modal"></button>
                </div>
                <div class="modal-body text-center px-4 pb-3">
                    <div id="qris-loading" class="py-4">
                        <div class="spinner-border mb-3" role="status" style="width: 3rem; height: 3rem; color: #10b981;">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="text-muted small" style="color: #047857 !important;">Menyiapkan sistem pembayaran...</p>
                    </div>
                    <div id="qris-code-container" class="d-none">
                        <div class="bg-white p-3 rounded-3 d-inline-block shadow-sm border mx-auto" style="max-width: 280px; border-color: #10b981 !important;">
                            <img id="qris-code-image" src="" alt="QRIS Code"
                                class="img-fluid w-100" style="image-rendering: pixelated;">
                        </div>
                        <p class="text-muted small mt-2 mb-0">
                            <span class="fw-bold" style="color: #065f46;" id="qris-total-display"></span>
                        </p>
                    </div>
                    <div id="qris-success-container" class="d-none py-4">
                        <div class="mb-3">
                            <span class="material-symbols-outlined" style="font-size: 64px; color: #10b981;">check_circle</span>
                        </div>
                        <h5 class="fw-bold" style="color: #065f46;">Pembayaran Berhasil!</h5>
                        <p class="text-muted small">Pembayaran telah dikonfirmasi. Menyimpan transaksi...</p>
                    </div>
                    <div id="qris-failed-container" class="d-none py-4">
                        <div class="text-danger mb-3">
                            <span class="material-symbols-outlined" style="font-size: 64px;">cancel</span>
                        </div>
                        <h5 class="fw-bold text-danger">Pembayaran Gagal!</h5>
                        <p class="text-muted small" id="qris-failed-message">Transaksi tidak dapat diproses.</p>
                    </div>
                </div>
                <div class="modal-footer border-0 px-4 pb-4 pt-0 justify-content-center" style="background-color: #f0fdf4;">
                    <button type="button" class="btn px-4 d-none text-white" id="btn-qris-done" data-bs-dismiss="modal"
                        style="background-color: #10b981; border-color: #10b981;">
                        <span class="material-symbols-outlined align-middle me-1" style="font-size: 18px;">check</span>
                        OK
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ asset('vendor/jquery/jquery.min.js') }}"></script>

    {{-- Midtrans Snap.js (Sandbox) --}}
    <script src="https://app.sandbox.midtrans.com/snap/snap.js"
        data-client-key="{{ $midtransClientKey }}"></script>

    <script>
        // =====================================================
        // CASHIER POS - MAIN SCRIPT
        // =====================================================
        $(document).ready(function() {
            let cart = {};
            let totalBill = 0;

            console.log('Cashier JS loaded');

            @if(session('print_receipt_id'))
                // Otomatis buka popup print nota
                setTimeout(function() {
                    let printUrl = '{{ route('admin.history.receipt', ['type' => 'offline', 'id' => session('print_receipt_id')]) }}';
                    window.open(printUrl, '_blank', 'width=450,height=700,top=100,left=100,menubar=no,status=no,titlebar=no,toolbar=no');
                }, 300);
            @endif

            // JS Perpindahan Tab Cantik di Mobile
            $('.kasir-tab-btn').on('click', function() {
                $('.kasir-tab-btn').removeClass('kasir-tab-active btn-success text-white').addClass('btn-light text-dark');
                $(this).addClass('kasir-tab-active btn-success text-white').removeClass('btn-light text-dark');
                let targetPane = $(this).data('target');
                $('.kasir-tab-pane').addClass('kasir-pane-hidden-mobile').removeClass('kasir-pane-active-mobile');
                $(targetPane).removeClass('kasir-pane-hidden-mobile').addClass('kasir-pane-active-mobile');
                manageFloatingBarVisibility();
            });

            $('.kasir-float-view-btn').on('click', function() {
                $('.kasir-tab-btn[data-target="#kasir-cart-pane"]').trigger('click');
            });

            // Fitur Pencarian Realtime
            $('#search-product').on('keyup', function() {
                let keyword = $(this).val().toLowerCase();
                $('.product-card-item').each(function() {
                    let keywordsData = $(this).data('name');
                    if (keywordsData.includes(keyword)) {
                        $(this).removeClass('d-none');
                    } else {
                        $(this).addClass('d-none');
                    }
                });
            });

            // Trigger Klik Card Utama Produk
            $('.btn-product-card').on('click', function() {
                let productName = $(this).data('product-name');
                let variants = $(this).data('variants');
                if (variants.length === 1) {
                    addToCart(variants[0]);
                } else {
                    $('#variant-product-title').text(productName);
                    let container = $('#variant-options-container');
                    container.empty();
                    variants.forEach(function(variant) {
                        let isOut = variant.stock <= 0;
                        let btnDisabled = isOut ? 'disabled' : '';
                        let badgeColor = isOut ? 'bg-danger text-white' : 'bg-light text-success fw-bold';
                        let stockLabel = isOut ? 'Habis' : 'Stok: ' + variant.stock;
                        let btnHtml = '<button type="button" class="btn text-start d-flex justify-content-between align-items-center py-2.5 px-3 btn-choose-variant" ' + btnDisabled + '>' +
                            '<div><span class="fw-bold text-dark d-block mb-0.5" style="font-size:0.95rem;">' + variant.weight + ' ' + variant.unit + '</span>' +
                            '<span class="text-muted small fw-medium">Rp ' + variant.price.toLocaleString('id-ID') + '</span></div>' +
                            '<span class="badge ' + badgeColor + ' xs-text">' + stockLabel + '</span></button>';
                        let $btnElement = $(btnHtml);
                        $btnElement.data('raw-data', variant);
                        container.append($btnElement);
                    });
                    $('#modalSelectVariant').modal('show');
                }
            });

            $(document).on('click', '.btn-choose-variant', function() {
                let selectedVariant = $(this).data('raw-data');
                addToCart(selectedVariant);
                $('#modalSelectVariant').modal('hide');
            });

            function addToCart(item) {
                let packageId = item.package_id;
                let productName = item.product_name;
                let weight = item.weight;
                let unit = item.unit;
                let price = parseInt(item.price);
                let maxStock = parseInt(item.stock);
                if (maxStock <= 0) { alert('Stok produk habis!'); return; }
                if (cart[packageId]) {
                    if (cart[packageId].quantity + 1 > maxStock) { alert('Batas stok maksimal tercapai!'); return; }
                    cart[packageId].quantity += 1;
                } else {
                    cart[packageId] = { package_id: packageId, name: productName, weight: weight, unit: unit, price: price, quantity: 1, maxStock: maxStock };
                }
                renderCart();
            }

            function renderCart() {
                let cartList = $('#cart-list');
                let emptyState = $('#cart-empty-state');
                let hiddenInputsContainer = $('#hidden-cart-inputs');
                cartList.empty();
                hiddenInputsContainer.empty();
                totalBill = 0;
                let totalItemsCount = 0;
                let itemKeys = Object.keys(cart);
                if (itemKeys.length === 0) {
                    cartList.addClass('d-none');
                    emptyState.removeClass('d-none');
                    $('#btn-submit-checkout').prop('disabled', true);
                    $('.kasir-badge-count').addClass('d-none').text('0');
                    updateCalculations();
                    manageFloatingBarVisibility();
                    return;
                }
                emptyState.addClass('d-none');
                cartList.removeClass('d-none');
                $('#btn-submit-checkout').prop('disabled', false);
                itemKeys.forEach(function(key, index) {
                    let item = cart[key];
                    let subTotal = item.price * item.quantity;
                    totalBill += subTotal;
                    totalItemsCount += item.quantity;
                    let rowHtml = '<li class="list-group-item px-0 py-3 border-bottom bg-transparent">' +
                        '<div class="d-flex align-items-center justify-content-between gap-2">' +
                        '<div style="flex:1;min-width:0;"><div class="fw-semibold text-slate-800 small text-truncate">' + item.name + '</div>' +
                        '<div class="text-muted xs-text mt-0.5">' + item.weight + ' ' + item.unit + ' × Rp ' + item.price.toLocaleString('id-ID') + '</div>' +
                        '<div class="fw-bold text-success small mt-0.5">Rp ' + subTotal.toLocaleString('id-ID') + '</div></div>' +
                        '<div class="d-flex align-items-center gap-2 flex-shrink-0">' +
                        '<div class="d-flex align-items-center border rounded bg-white">' +
                        '<button type="button" class="btn btn-sm btn-link text-decoration-none text-dark px-2 py-0 btn-change-qty" data-id="' + item.package_id + '" data-action="minus" style="font-size:1rem;font-weight:bold;">-</button>' +
                        '<span class="px-1 text-center font-monospace small" style="min-width:20px;">' + item.quantity + '</span>' +
                        '<button type="button" class="btn btn-sm btn-link text-decoration-none text-dark px-2 py-0 btn-change-qty" data-id="' + item.package_id + '" data-action="plus" style="font-size:1rem;font-weight:bold;">+</button></div>' +
                        '<button type="button" class="btn btn-sm btn-light border text-danger btn-remove-item p-1 d-flex align-items-center shadow-sm" data-id="' + item.package_id + '">' +
                        '<span class="material-symbols-outlined" style="font-size:18px;">delete</span></button></div></div></li>';
                    cartList.append(rowHtml);
                    hiddenInputsContainer.append(
                        '<input type="hidden" name="cart_items[' + index + '][package_id]" value="' + item.package_id + '">' +
                        '<input type="hidden" name="cart_items[' + index + '][quantity]" value="' + item.quantity + '">' +
                        '<input type="hidden" name="cart_items[' + index + '][unit_price]" value="' + item.price + '">' +
                        '<input type="hidden" name="cart_items[' + index + '][name]" value="' + item.name + '">'
                    );
                });
                $('.kasir-badge-count').removeClass('d-none').text(totalItemsCount);
                $('.kasir-float-qty').text(totalItemsCount + ' Produk Terpilih');
                $('.kasir-float-total').text('Rp ' + totalBill.toLocaleString('id-ID'));
                updateCalculations();
                manageFloatingBarVisibility();
            }

            function manageFloatingBarVisibility() {
                let isProductPaneActive = $('#kasir-products-pane').hasClass('kasir-pane-active-mobile');
                let hasItems = Object.keys(cart).length > 0;
                let isMobile = window.innerWidth < 992;
                if (isMobile && isProductPaneActive && hasItems) {
                    $('.kasir-floating-bar').removeClass('d-none').addClass('d-block');
                } else {
                    $('.kasir-floating-bar').addClass('d-none').removeClass('d-block');
                }
            }

            $(window).on('resize', function() { manageFloatingBarVisibility(); });

            $(document).on('click', '.btn-change-qty', function() {
                let id = $(this).data('id');
                let action = $(this).data('action');
                if (action === 'plus') {
                    if (cart[id].quantity + 1 > cart[id].maxStock) { alert('Stok tidak mencukupi.'); return; }
                    cart[id].quantity += 1;
                } else {
                    cart[id].quantity -= 1;
                    if (cart[id].quantity <= 0) delete cart[id];
                }
                renderCart();
            });

            $(document).on('click', '.btn-remove-item', function() {
                let id = $(this).data('id');
                delete cart[id];
                renderCart();
            });

            $('input[name="payment_method_pos"]').on('change', function() {
                if ($(this).val() === 'CASH') {
                    $('#wrapper-cash-calculator').removeClass('d-none');
                    $('#wrapper-midtrans-info').addClass('d-none');
                    $('#gateway_transaction_id').val('');
                    $('#midtrans_token').val('');
                } else {
                    $('#wrapper-cash-calculator').addClass('d-none');
                    $('#wrapper-midtrans-info').removeClass('d-none');
                    $('#cash_received').val('');
                }
                updateCalculations();
            });

            $('#cash_received').on('input', function() { updateCalculations(); });

            function updateCalculations() {
                $('#display-total').text('Rp ' + totalBill.toLocaleString('id-ID'));
                let paymentMethod = $('input[name="payment_method_pos"]:checked').val();
                if (paymentMethod === 'CASH') {
                    let cashReceived = parseInt($('#cash_received').val()) || 0;
                    if (totalBill === 0) {
                        $('#change-box').css({ 'background-color': '#f8fafc', 'border': '1px dashed #cbd5e1' });
                        $('#change-icon').text('payments').css('color', '#64748b');
                        $('#change-label').text('Uang Kembalian').css('color', '#64748b');
                        $('#display-change').text('Rp 0').css('color', '#64748b');
                        $('#btn-submit-checkout').prop('disabled', true);
                        return;
                    }
                    let change = cashReceived - totalBill;
                    if (change >= 0) {
                        $('#change-box').css({ 'background-color': '#e6f4ea', 'border': '1px solid #10b981' });
                        $('#change-icon').text('price_check').css('color', '#10b981');
                        $('#change-label').text(change === 0 ? 'Uang Pas' : 'Uang Kembalian').css('color', '#0f5132');
                        $('#display-change').text('Rp ' + change.toLocaleString('id-ID')).css('color', '#0f5132');
                        $('#btn-submit-checkout').prop('disabled', false);
                    } else {
                        $('#change-box').css({ 'background-color': '#fde8e8', 'border': '1px solid #f87171' });
                        $('#change-icon').text('warning').css('color', '#ef4444');
                        $('#change-label').text('Uang Kurang').css('color', '#842029');
                        $('#display-change').text('- Rp ' + Math.abs(change).toLocaleString('id-ID')).css('color', '#842029');
                        $('#btn-submit-checkout').prop('disabled', true);
                    }
                } else {
                    if (totalBill > 0) $('#btn-submit-checkout').prop('disabled', false);
                }
            }

            // ===========================================================
            // HANDLE TOMBOL BELI - CASH atau MIDTRANS
            // ===========================================================
            $('#btn-submit-checkout').on('click', function(e) {
                e.preventDefault();
                let paymentMethod = $('input[name="payment_method_pos"]:checked').val();

                if (totalBill <= 0) { alert('Keranjang belanja kosong!'); return; }

                if (paymentMethod === 'CASH') {
                    let cashReceived = parseInt($('#cash_received').val()) || 0;
                    if (cashReceived < totalBill) { alert('Uang tunai kurang!'); return; }
                    $('#form-checkout').submit();
                    return;
                }

                // MIDTRANS: Generate Snap token lalu buka popup
                let orderId = 'POS-' + Date.now() + '-' + Math.floor(Math.random() * 10000);
                let itemsData = [];
                Object.keys(cart).forEach(function(key) {
                    itemsData.push({
                        package_id: cart[key].package_id,
                        name: cart[key].name,
                        unit_price: cart[key].price,
                        quantity: cart[key].quantity
                    });
                });

                let $btn = $(this);
                $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2" role="status"></span> Memproses...');

                $.ajax({
                    url: '{{ route('admin.cashier.create-snap-token', ['code' => session('admin_route_code')]) }}',
                    method: 'POST',
                    dataType: 'json',
                    data: {
                        _token: '{{ csrf_token() }}',
                        order_id: orderId,
                        gross_amount: totalBill,
                        items: itemsData
                    },
                    success: function(response) {
                        console.log('Snap token response:', response);
                        if (response.success && response.token) {
                            $('#gateway_transaction_id').val(orderId);
                            $('#midtrans_token').val(response.token);
                            console.log('Opening Snap popup...');
                            snap.pay(response.token, {
                                onSuccess: function(result) {
                                    console.log('Snap success:', result);
                                    $('#gateway_transaction_id').val(orderId);
                                    $('#midtrans_token').val('success');
                                    showSuccessModalAndSubmit(orderId);
                                },
                                onPending: function(result) {
                                    console.log('Snap pending:', result);
                                    alert('Pembayaran masih diproses. Silakan cek status.');
                                    $btn.prop('disabled', false).html('<span class="material-symbols-outlined">shopping_cart_checkout</span> Beli');
                                },
                                onError: function(result) {
                                    console.log('Snap error:', result);
                                    alert('Pembayaran gagal: ' + (result.status_message || 'Error'));
                                    $btn.prop('disabled', false).html('<span class="material-symbols-outlined">shopping_cart_checkout</span> Beli');
                                },
                                onClose: function() {
                                    console.log('Snap closed');
                                    if ($('#midtrans_token').val() !== 'success') {
                                        $('#gateway_transaction_id').val('');
                                        $('#midtrans_token').val('');
                                        $btn.prop('disabled', false).html('<span class="material-symbols-outlined">shopping_cart_checkout</span> Beli');
                                    }
                                }
                            });
                        } else {
                            alert('Gagal: ' + (response.message || 'Token tidak valid'));
                            $btn.prop('disabled', false).html('<span class="material-symbols-outlined">shopping_cart_checkout</span> Beli');
                        }
                    },
                    error: function(xhr) {
                        console.error('AJAX error:', xhr.responseText);
                        alert('Gagal menghubungi server.');
                        $btn.prop('disabled', false).html('<span class="material-symbols-outlined">shopping_cart_checkout</span> Beli');
                    }
                });
            });

            // ===========================================================
            // FUNGSI: Tampilkan Modal Berhasil & Submit Otomatis
            // ===========================================================
            function showSuccessModalAndSubmit(orderId) {
                $('#qris-loading').addClass('d-none');
                $('#qris-code-container').addClass('d-none');
                $('#qris-success-container').removeClass('d-none');
                $('#btn-qris-done').removeClass('d-none');
                $('#modalQrisPayment').modal('show');

                // Submit form otomatis setelah 1.5 detik
                setTimeout(function() {
                    $('#form-checkout').off('submit').submit();
                }, 1500);
            }
        });
    </script>
@endsection