@extends('webview.saku.main')

@push('style')
    <style>
        body {
            background-color: #f8fafc;
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding: 0;
        }

        .app-container {
            background-color: #f8fafc;
            min-height: 100vh;
            max-width: 480px;
            margin: 0 auto;
            position: relative;
            padding-bottom: 100px;
        }

        body #navigation-bottom {
            display: none !important;
        }

        /* Header Detail Pembelian */
        .co-header {
            background: #fff;
            padding: 20px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
        }

        .co-btn-back {
            background: none;
            border: none;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            color: #111;
            cursor: pointer;
        }

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

        /* Section Card */
        .co-section {
            background: #fff;
            padding: 20px 16px;
            margin-bottom: 12px;
        }

        .co-section-title {
            font-size: 15px;
            font-weight: 700;
            color: #111;
            margin-bottom: 16px;
        }

        .co-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .co-row:last-child {
            border-bottom: none;
        }

        .co-label {
            font-size: 13px;
            font-weight: 600;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        .co-value {
            font-size: 13px;
            color: #666;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            flex: 1;
        }

        .date-auto-text {
            font-size: 13px;
            color: #333;
            font-weight: 500;
            text-align: right;
        }

        .req-star {
            color: #EF4444;
        }

        /* Pesanan / Total */
        .co-pesanan-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            cursor: pointer;
        }

        .badge-info {
            width: 16px;
            height: 16px;
            background: #007bff;
            color: #fff;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: bold;
            margin-left: 6px;
        }

        .co-total-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid #f0f0f0;
        }

        .co-total-label {
            font-size: 14px;
            font-weight: 600;
            color: #111;
        }

        .co-total-price {
            font-size: 16px;
            font-weight: 800;
            color: #111;
        }

        /* List Item Pesanan */
        #pesanan-list-container {
            display: none;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px dashed #eee;
        }

        .pesanan-item-row {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            margin-bottom: 12px;
        }

        .pesanan-item-row:last-child {
            margin-bottom: 0;
        }

        .pi-name {
            font-weight: 600;
            color: #333;
            margin-bottom: 2px;
        }

        .pi-price {
            font-weight: 700;
            color: #111;
        }

        /* Pembayaran Radio Pills */
        .pay-methods {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
        }

        .pay-pill {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 600;
            color: #555;
            cursor: pointer;
        }

        .pay-radio {
            width: 16px;
            height: 16px;
            accent-color: #007bff;
            cursor: pointer;
        }

        /* Dynamic Content - Tunai */
        .pay-tunai-wrapper {
            background: #f8fafc;
            border-radius: 12px;
            padding: 16px;
            border: 1px solid #e2e8f0;
        }

        .pay-input-group {
            background: #fff;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            padding: 12px 16px;
            font-size: 20px;
            font-weight: 700;
            color: #111;
            display: flex;
            align-items: center;
        }

        .pay-input-group input {
            border: none;
            outline: none;
            width: 100%;
            font-size: 20px;
            font-weight: 700;
            color: #111;
        }

        .pay-chips {
            display: flex;
            gap: 8px;
            margin-top: 12px;
            overflow-x: auto;
            padding-bottom: 4px;
            scrollbar-width: none;
        }

        .pay-chips::-webkit-scrollbar {
            display: none;
        }

        .pay-chip {
            background: #007bff;
            color: #fff;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
            cursor: pointer;
        }

        /* Dynamic Content - Kamera */
        .pay-cam-wrapper {
            border: 2px dashed #cbd5e1;
            border-radius: 12px;
            padding: 30px 20px;
            text-align: center;
            background: #f8fafc;
        }

        .cam-icon {
            width: 48px;
            height: 48px;
            background: #e0f0ff;
            color: #007bff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
        }

        .cam-text {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 16px;
        }

        .btn-kamera {
            background: #007bff;
            color: #fff;
            border: none;
            padding: 8px 24px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }

        .pay-preview-wrapper {
            display: none;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 16px;
            text-align: center;
            background: #fff;
        }

        .preview-img {
            max-width: 100%;
            max-height: 200px;
            border-radius: 8px;
            margin-bottom: 16px;
            object-fit: contain;
        }

        /* Footer Proses */
        .co-footer {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 480px;
            background: #fff;
            padding: 16px 20px;
            border-top: 1px solid #f0f0f0;
            z-index: 100;
            padding-bottom: calc(16px + env(safe-area-inset-bottom));
        }

        .btn-proses-orange {
            width: 100%;
            background: #F97316;
            color: #fff;
            border: none;
            padding: 16px;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
        }

        .btn-proses-orange:disabled {
            background: #ccc;
            box-shadow: none;
            cursor: not-allowed;
        }

        .chevron-icon {
            transition: transform 0.3s;
        }

        .chevron-icon.open {
            transform: rotate(180deg);
        }

        /* =========================================================================
                       SUCCESS SCREEN (NOTA MOCKUP)
                       ========================================================================= */
        #success-screen {
            display: none;
            padding-bottom: 100px;
        }

        .ss-header {
            padding: 20px 16px;
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            color: #111;
        }

        .ss-info-card {
            background: #fff;
            border-radius: 12px;
            padding: 16px;
            margin: 0 16px 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
        }

        .ss-info-label {
            color: #555;
            font-size: 14px;
        }

        .ss-info-val {
            font-weight: 700;
            color: #111;
            font-size: 14px;
        }

        .ss-receipt {
            background: #fff;
            border-radius: 12px;
            padding: 24px;
            margin: 0 16px 24px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
        }

        .ss-receipt-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .ss-receipt-logo {
            height: 30px;
        }

        .ss-receipt-no {
            font-weight: 800;
            font-size: 16px;
            color: #111;
        }

        .ss-receipt-title {
            font-size: 18px;
            font-weight: 800;
            color: #111;
            margin-bottom: 4px;
        }

        .ss-receipt-subtitle {
            font-size: 10px;
            color: #888;
            text-transform: uppercase;
            margin-bottom: 24px;
            letter-spacing: 0.5px;
        }

        .ss-item-row {
            display: flex;
            font-size: 13px;
            color: #111;
            margin-bottom: 10px;
        }

        .ss-item-qty {
            width: 24px;
            font-weight: 600;
        }

        .ss-item-name {
            flex: 1;
            padding-right: 12px;
        }

        .ss-item-price {
            width: 70px;
            text-align: right;
            color: #555;
        }

        .ss-item-sub {
            width: 80px;
            text-align: right;
            font-weight: 600;
        }

        .ss-divider {
            border-top: 1px dashed #e2e8f0;
            margin: 16px 0;
        }

        .ss-sum-row {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            margin-bottom: 8px;
            color: #555;
        }

        .ss-sum-row.bold {
            font-weight: 800;
            font-size: 14px;
            color: #111;
            margin-top: 4px;
        }

        .ss-sum-val {
            color: #111;
            font-weight: 600;
        }

        .btn-cetak-selesai {
            width: 100%;
            background: #F97316;
            color: #fff;
            border: none;
            padding: 20px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            border-radius: 0;
        }

        /* =========================================================================
                       MODAL TRANSAKSI SELESAI
                       ========================================================================= */
        .modal-success-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;
        }

        .modal-success-overlay.active {
            display: flex;
            opacity: 1;
        }

        .modal-success-box {
            background: #fff;
            width: 85%;
            max-width: 320px;
            border-radius: 20px;
            padding: 30px 20px 24px;
            text-align: center;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            transform: scale(0.8);
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .modal-success-overlay.active .modal-success-box {
            transform: scale(1);
        }

        .icon-success-circle {
            width: 72px;
            height: 72px;
            background: #10B981;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
        }

        .modal-success-title {
            font-size: 18px;
            font-weight: 800;
            color: #111;
            margin-bottom: 8px;
        }

        .modal-success-msg {
            font-size: 14px;
            color: #555;
            margin-bottom: 24px;
            line-height: 1.5;
        }

        .btn-success-ok {
            width: 100%;
            padding: 14px;
            border-radius: 12px;
            background: #0088ff;
            color: #fff;
            border: none;
            font-weight: 700;
            font-size: 15px;
            cursor: pointer;
        }
    </style>
@endpush

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

        <div id="checkout-form-container">
            <div class="co-header">
                <button class="co-btn-back" onclick="window.history.back()">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <line x1="19" y1="12" x2="5" y2="12"></line>
                        <polyline points="12 19 5 12 12 5"></polyline>
                    </svg>
                </button>
                <span class="co-title">Detail Pembelian</span>
            </div>

            <div class="co-section">
                <div class="co-section-title">Informasi Pengajuan</div>
                <div class="co-row">
                    <div class="co-label">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#F97316"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                            <line x1="16" y1="2" x2="16" y2="6"></line>
                            <line x1="8" y1="2" x2="8" y2="6"></line>
                            <line x1="3" y1="10" x2="21" y2="10"></line>
                        </svg>
                        Tanggal <span class="req-star">*</span>
                    </div>
                    <div class="co-value">
                        <span id="text-tanggal-jam" class="date-auto-text">Memuat...</span>
                        <input type="hidden" name="tanggal_input" id="input-tanggal-jam">
                    </div>
                </div>
            </div>

            <div class="co-section">
                <div class="co-pesanan-header" onclick="togglePesanan()">
                    <span class="co-label" style="font-size:15px;">Pesanan <span class="badge-info"
                            id="badge-qty">0</span></span>
                    <svg id="icon-pesanan" class="chevron-icon" width="16" height="16" viewBox="0 0 24 24"
                        fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="6 9 12 15 18 9"></polyline>
                    </svg>
                </div>

                <div id="pesanan-list-container"></div>

                <div class="co-total-row">
                    <span class="co-total-label">Total</span>
                    <span class="co-total-price" id="text-total-price">Rp 0</span>
                </div>
            </div>

            <div class="co-section" style="margin-bottom:0;">
                <div class="co-section-title">Pembayaran</div>

                <div class="pay-methods" id="pay-method-list">
                    <div style="font-size: 12px; color: #999;">Memuat metode pembayaran...</div>
                </div>

                <div id="content-tunai" class="pay-tunai-wrapper" style="display: none;">
                    <div style="font-size:11px; color:#888; margin-bottom:6px; font-weight:600;">Jumlah Pembayaran</div>
                    <div class="pay-input-group">
                        <span style="font-size:16px; color:#888; margin-right:8px;">Rp</span>
                        <input type="text" id="input-nominal" placeholder="0" inputmode="numeric">
                    </div>
                    <div class="pay-chips" id="pay-chip-container"></div>
                </div>

                <div id="content-kamera" style="display:none;">
                    <div class="pay-cam-wrapper" id="mode-ambil-gambar" onclick="$('#file-bukti').click()">
                        <div class="cam-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z">
                                </path>
                                <circle cx="12" cy="13" r="4"></circle>
                            </svg>
                        </div>
                        <div class="cam-text">Simpan Bukti Transfer</div>
                        <button class="btn-kamera">Buka Kamera</button>
                        <input type="file" id="file-bukti" accept="image/*" capture="environment"
                            style="display:none;">
                    </div>
                    <div class="pay-preview-wrapper" id="mode-preview-gambar">
                        <img src="" id="img-preview" class="preview-img"><br>
                        <button class="btn-kamera" onclick="$('#file-bukti').click()">Ambil Ulang</button>
                    </div>
                </div>
            </div>

            <div class="co-footer">
                <button class="btn-proses-orange" id="btn-proses" style="border-radius:12px;"
                    onclick="prosesCheckout()">PROSES</button>
            </div>
        </div>

        <div id="success-screen">
            <div class="ss-header">Pesanan Selesai</div>

            <div class="ss-info-card">
                <span class="ss-info-label">Metode Pembayaran</span>
                <span class="ss-info-val" id="res-metode">-</span>
            </div>

            <div class="ss-info-card" style="margin-bottom: 24px;">
                <span class="ss-info-label">Kembalian</span>
                <span class="ss-info-val" id="res-kembalian">0</span>
            </div>

            <div class="ss-receipt">
                <div class="ss-receipt-top">
                    <img src="{{ asset('asset_dore/img/sai_icon/logo-text.png') }}" class="ss-receipt-logo"
                        alt="SAI Logo" onerror="this.style.display='none'">
                    <span class="ss-receipt-no" id="res-nojual">#000000000</span>
                </div>

                <div class="ss-receipt-title">Nota Transaksi</div>
                <div class="ss-receipt-subtitle" id="res-date-kasir">00.00.0000 00:00 KASIR</div>

                <div id="res-item-list"></div>
                <div class="ss-divider"></div>

                <div class="ss-sum-row">
                    <span>Harga Jual</span>
                    <span class="ss-sum-val" id="res-hrgjual">0</span>
                </div>
                <div class="ss-sum-row">
                    <span>Potongan</span>
                    <span class="ss-sum-val">0</span>
                </div>
                <div class="ss-sum-row bold">
                    <span>Total</span>
                    <span id="res-total">0</span>
                </div>

                <div class="ss-divider"></div>

                <div class="ss-sum-row">
                    <span>Metode Pembayaran</span>
                    <span class="ss-sum-val" id="res-metode-bawah">-</span>
                </div>
                <div class="ss-sum-row">
                    <span>Nominal</span>
                    <span class="ss-sum-val" id="res-nominal">0</span>
                </div>
                <div class="ss-sum-row">
                    <span>Kembali</span>
                    <span class="ss-sum-val" id="res-kembali-bawah">0</span>
                </div>
                <div class="ss-sum-row" style="margin-top: 16px;">
                    <span>Jenis Pesanan</span>
                    <span class="ss-sum-val">Dilayani</span>
                </div>

                <div style="text-align: center; margin-top: 32px;">
                    <svg width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#111"
                        stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                        <rect x="7" y="7" width="3" height="3"></rect>
                        <rect x="14" y="7" width="3" height="3"></rect>
                        <rect x="7" y="14" width="3" height="3"></rect>
                        <rect x="14" y="14" width="3" height="3"></rect>
                        <line x1="12" y1="7" x2="12" y2="17"></line>
                        <line x1="7" y1="12" x2="17" y2="12"></line>
                    </svg>
                </div>
            </div>

            <div class="co-footer" style="padding: 0; bottom: 0;">
                <button class="btn-cetak-selesai" onclick="cetakDanSelesai()">Cetak dan selesai</button>
            </div>
        </div>

        <div class="modal-success-overlay" id="modal-final-success">
            <div class="modal-success-box">
                <div class="icon-success-circle">
                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                </div>
                <div class="modal-success-title">Transaksi Selesai</div>
                <div class="modal-success-msg">
                    Data transaksi telah berhasil disimpan ke server. Keranjang belanja akan dikosongkan.
                </div>
                <button class="btn-success-ok" onclick="resetDanKembali()">Selesai & Tutup</button>
            </div>
        </div>

    </div>
@endsection

@push('script')
    <script>
        let cartData = [];
        let grandTotal = 0;
        let UangPas = 0;
        let namaKasir = "{{ Session::get('userLog') ?? 'KASIR' }}";

        $(document).ready(function() {
            // Setup global CSRF token & Credentials (Wajib untuk Server YPT)
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                xhrFields: {
                    withCredentials: true
                }
            });

            cartData = JSON.parse(localStorage.getItem('pos_cart')) || [];
            if (cartData.length === 0) {
                alert('Keranjang Anda kosong!');
                window.history.back();
                return;
            }

            renderCheckoutCart();
            updateDateTime();
            getJenisBayar();

            $('#pay-method-list').on('change', 'input[name="metode"]', function() {
                let namaMetode = $(this).data('nama').toLowerCase();
                if (namaMetode.includes('cash') || namaMetode.includes('tunai')) {
                    $('#content-tunai').show();
                    $('#content-kamera').hide();
                } else {
                    $('#content-tunai').hide();
                    $('#content-kamera').show();
                }
            });

            $('#input-nominal').on('input', function() {
                let val = $(this).val().replace(/[^0-9]/g, '');
                if (val !== '') {
                    $(this).val(parseInt(val).toLocaleString('id-ID'));
                } else {
                    $(this).val('');
                }
            });
        });

        function getJenisBayar() {
            $.ajax({
                type: 'GET',
                url: "{{ url('toko-master/jenis-bayar') }}",
                dataType: 'json',
                success: function(result) {
                    if (result.status && result.daftar) {
                        let html = '';
                        result.daftar.forEach((item, index) => {
                            let checked = index === 0 ? 'checked' : '';
                            html += `
                            <label class="pay-pill">
                                <input type="radio" name="metode" class="pay-radio" value="${item.kode_jenis}" data-nama="${item.nama}" ${checked}> 
                                ${item.nama}
                            </label>`;
                        });
                        $('#pay-method-list').html(html);
                        $('input[name="metode"]:checked').trigger('change');
                    } else if (!result.status && result.message === "Unauthorized") {
                        window.location.href = "{{ url('admin-auth/sesi-habis') }}";
                    }
                }
            });
        }

        window.setNominal = function(val) {
            $('#input-nominal').val(parseInt(val).toLocaleString('id-ID'));
        };

        function renderCheckoutCart() {
            let totalQty = 0;
            grandTotal = 0;
            let html = '';

            cartData.forEach(item => {
                totalQty += item.qty;
                let subTotal = item.qty * item.harga;
                grandTotal += subTotal;

                html += `
                <div class="pesanan-item-row">
                    <div>
                        <div class="pi-name">${item.qty}x ${item.nama}</div>
                    </div>
                    <div class="pi-price">Rp ${new Intl.NumberFormat('id-ID').format(subTotal)}</div>
                </div>`;
            });

            $('#pesanan-list-container').html(html);
            $('#badge-qty').text(totalQty);
            let formattedTotal = new Intl.NumberFormat('id-ID').format(grandTotal);
            $('#text-total-price').text('Rp ' + formattedTotal);
            UangPas = grandTotal;
            renderPayChips(grandTotal);
        }

        window.togglePesanan = function() {
            $('#pesanan-list-container').slideToggle(200);
            $('#icon-pesanan').toggleClass('open');
        }

        function generateCashSuggestions(total) {
            if (total <= 0) return [];
            let suggestions = new Set();
            suggestions.add(total);
            let next5k = Math.ceil(total / 5000) * 5000;
            if (next5k > total) suggestions.add(next5k);
            let next10k = Math.ceil(total / 10000) * 10000;
            if (next10k > total) suggestions.add(next10k);
            let next50k = Math.ceil(total / 50000) * 50000;
            if (next50k > total) suggestions.add(next50k);
            const baseNotes = [10000, 20000, 50000, 100000, 150000, 200000];
            for (let note of baseNotes) {
                if (note > total) suggestions.add(note);
            }
            return Array.from(suggestions).sort((a, b) => a - b).slice(0, 5);
        }

        function renderPayChips(total) {
            let container = $('#pay-chip-container');
            container.empty();
            if (total <= 0) return;
            let suggestions = generateCashSuggestions(total);
            suggestions.forEach((nominal, index) => {
                let label = (index === 0 && nominal === total) ? "Uang Pas" : new Intl.NumberFormat('id-ID').format(
                    nominal);
                let html = `<div class="pay-chip" onclick="setNominal(${nominal})">${label}</div>`;
                container.append(html);
            });
        }

        function updateDateTime() {
            const now = new Date();
            const day = String(now.getDate()).padStart(2, '0');
            const monthNames = ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Ags", "Sep", "Okt", "Nov", "Des"];
            const month = monthNames[now.getMonth()];
            const year = now.getFullYear();
            $('#text-tanggal-jam').text(`${day} ${month} ${year}`);
            $('#input-tanggal-jam').val(`${year}-${String(now.getMonth()+1).padStart(2, '0')}-${day}`);
        }

        window.prosesCheckout = function() {
            let selectedMetode = $('input[name="metode"]:checked');
            let kodeJenis = selectedMetode.val();
            let namaMetode = selectedMetode.data('nama');
            let isCash = namaMetode.toLowerCase().includes('cash') || namaMetode.toLowerCase().includes('tunai');

            let rawNominal = $('#input-nominal').val().replace(/\./g, '');
            let nominal = parseInt(rawNominal) || 0;

            if (isCash && nominal < grandTotal) {
                alert("Nominal pembayaran tidak boleh kurang dari total tagihan.");
                return;
            }

            $('#btn-proses').text('MEMPROSES...').prop('disabled', true);

            let formData = new FormData();
            let totalBayar = isCash ? nominal : grandTotal;
            let kembalian = isCash && (nominal > grandTotal) ? nominal - grandTotal : 0;

            formData.append('kode_jenis', kodeJenis);
            formData.append('total_trans', grandTotal);
            formData.append('total_disk', 0);
            formData.append('total_stlh', grandTotal);
            formData.append('total_bayar', totalBayar);
            formData.append('kembalian', kembalian);

            cartData.forEach(item => {
                formData.append('kode_barang[]', item.kode);
                formData.append('harga_barang[]', item.harga);
                formData.append('qty_barang[]', item.qty);
                formData.append('sub_barang[]', item.qty * item.harga);
                formData.append('disc_barang[]', 0);
                formData.append('ppn_barang[]', 0);
            });

            $.ajax({
                type: 'POST',
                url: "{{ url('toko-trans/penjualan') }}",
                dataType: 'json',
                data: formData,
                async: false,
                contentType: false,
                cache: false,
                processData: false,
                success: function(result) {
                    if (result.data && result.data.status) {

                        $('#checkout-form-container').hide();
                        $('#success-screen').show();
                        window.scrollTo(0, 0);

                        $('#res-metode').text(namaMetode);
                        $('#res-metode-bawah').text(namaMetode);

                        let formatKembali = new Intl.NumberFormat('id-ID').format(kembalian);
                        $('#res-kembalian').text(formatKembali);
                        $('#res-kembali-bawah').text(formatKembali);

                        $('#res-nojual').text(result.data.no_jual);

                        const now = new Date();
                        const dateStr = String(now.getDate()).padStart(2, '0') + '.' +
                            String(now.getMonth() + 1).padStart(2, '0') + '.' +
                            now.getFullYear() + ' ' +
                            String(now.getHours()).padStart(2, '0') + ':' +
                            String(now.getMinutes()).padStart(2, '0');
                        $('#res-date-kasir').text(dateStr + ' ' + namaKasir);

                        let itemHtml = '';
                        cartData.forEach(item => {
                            itemHtml += `
                            <div class="ss-item-row">
                                <div class="ss-item-qty">${item.qty}</div>
                                <div class="ss-item-name">${item.nama}</div>
                                <div class="ss-item-price">${new Intl.NumberFormat('id-ID').format(item.harga)}</div>
                                <div class="ss-item-sub">${new Intl.NumberFormat('id-ID').format(item.qty * item.harga)}</div>
                            </div>`;
                        });
                        $('#res-item-list').html(itemHtml);

                        let formatTotal = new Intl.NumberFormat('id-ID').format(grandTotal);
                        $('#res-hrgjual').text(formatTotal);
                        $('#res-total').text(formatTotal);
                        $('#res-nominal').text(new Intl.NumberFormat('id-ID').format(totalBayar));

                    } else if (result.data && !result.data.status && result.data.message ===
                        "Unauthorized") {
                        alert("Sesi Anda telah habis. Silakan login kembali.");
                        window.location.href = "{{ url('/admin-auth/sesi-habis') }}";
                    } else {
                        let errorMsg = result.data ? result.data.message : "Terjadi kesalahan";
                        alert("Transaksi Gagal: " + errorMsg);
                        $('#btn-proses').text('PROSES').prop('disabled', false);
                    }
                },
                error: function(xhr, status, error) {
                    alert("Terjadi kesalahan server: " + error);
                    $('#btn-proses').text('PROSES').prop('disabled', false);
                }
            });
        };

        window.cetakDanSelesai = function() {
            // Tampilkan Modal Final (Berhasil & Reset)
            $('#modal-final-success').addClass('active');
        };

        window.resetDanKembali = function() {
            // 1. Bersihkan Keranjang dari LocalStorage
            localStorage.removeItem('pos_cart');

            // 2. Sembunyikan Modal
            $('#modal-final-success').removeClass('active');

            // 3. Kembali ke Halaman Utama secara bersih (Refresh State)
            window.location.href = "{{ route('saku-mobile.page.home') }}";
        };
    </script>
@endpush