async function submitOrderToServer(){
    const totalHarga = hitungTotalHarga();

    if (sessionStorage.getItem('order_id')) {
        currentStep = 2;
        showStep(currentStep);
        return;
    }
    const biodataResult = JSON.parse(sessionStorage.getItem('checkout_biodata') || '{}');
    const cartResult = JSON.parse(sessionStorage.getItem('cart') || '[]');
    try {
        const response = await fetch('/submit-checkout', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            },
            body: JSON.stringify({ cartResult, biodataResult, totalHarga }),
        })

        const result = await response.json();
        if (response.ok && result.status) {
            // Hapus sessionStorage

            sessionStorage.setItem('order_id', result.data.no_order);
            sessionStorage.setItem('time_order', result.entry_at);
            currentStep = 2;
            showStep(currentStep)
            document.getElementById('no_order_display').textContent  = result.data.no_order
            document.getElementById('no_order_price').textContent  = result.data.total_harga ? 'Rp ' + parseInt(result.data.total_harga).toLocaleString('id-ID') : ''
            $("#no_order_result").val(result.data.no_order)
        }
    } catch (error) {
        console.error('message '+error);
            Swal.fire({
                title: 'Gagal!',
                text: 'Terdapat kesalahan coba lagi nanti!',
                icon: 'error',
                confirmButtonText: 'Tutup!'
            })
    }
}

   function previewBuktiPembayaran() {
        const input = document.getElementById('bukti_pembayaran');
        const preview = document.getElementById('bukti_preview');
        const previewText = document.getElementById('preview_text');

        if (input.files && input.files[0]) {
            const file = input.files[0];
            const reader = new FileReader();

            reader.onload = function (e) {
                preview.src = e.target.result;
                preview.classList.remove('d-none');
                previewText.classList.add('d-none');
            }

            if (file.size <= 2 * 1024 * 1024) { // 2MB limit
                reader.readAsDataURL(file);
            } else {
                alert("Ukuran file maksimal 2MB.");
                input.value = '';
                preview.classList.add('d-none');
                previewText.classList.remove('d-none');
            }
        }
    }

    $("#checkoutFormFinal").on('submit', async function(e){
        e.preventDefault()
        const buttonSubmit = $(this).find('button[type="submit"]')
        if(buttonSubmit.prop('disabled')) return;
        buttonSubmit.prop('disabled', true)
        .html('<i class="fas fa-spinner fa-spin me-2"></i>Memproses...')

            const cara_pembayaran = document.getElementById('cara_pembayaran').value;
            const bukti_pembayaran = document.querySelector('input[name="bukti_pembayaran"]').value;

            if(cara_pembayaran === 'transfer' && !bukti_pembayaran){
                    Swal.fire({
                        title: 'Bukti pembayaran kosong!',
                        text: 'Silahkan upload bukti pembayaran jika metode yang dipakai transfer.',
                        icon: 'warning',
                    })
                    buttonSubmit.prop('disabled', false).html('Selesaikan Pesanan');
                    return;
            }

            // }
            const form = this;

            const formData = new FormData(form);
            const clearSession = () => {
                sessionStorage.removeItem('cart');
                sessionStorage.removeItem('checkout_biodata');
                sessionStorage.removeItem('order_id');
                sessionStorage.removeItem('time_order');
            };

            try {
                const response = await fetch('/finish-checkout', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                });

                const result = await response.json();
                if (result.status) {
                    // ✅ Hapus sessionStorage di client
                clearSession()
                Swal.fire({
                        title: '<span style="color: #00796b;">Pesanan Berhasil!</span>',
                        icon: 'success',
                        iconColor: '#2e7d32', // Warna hijau Kemenkes
                        html: `
                            <p class="text-muted mb-4">Terima kasih, pesanan Anda sedang kami siapkan.</p>
                            <div class="p-3 border-0 rounded-4 shadow-sm mb-3" style="background-color: #f1f8f7;">
                                <p class="small fw-bold mb-3 text-uppercase" style="color: #004d40; letter-spacing: 1px;">Bantu Kami Meningkatkan Layanan:</p>

                                <button type="button" onclick="location.href='/survey?no_order=${result.no_order}&type=pengguna_baru'"
                                    class="btn w-100 mb-3 py-3 border-0 shadow-sm transition-hover"
                                    style="background-color: #00a99d; color: white; border-radius: 12px;">
                                    <div class="fw-bold px-2">Saya Pengguna Baru</div>
                                    <div style="font-size: 0.75rem; opacity: 0.9;">Survei kemudahan aplikasi pemesanan</div>
                                </button>

                                <button type="button" onclick="location.href='/survey?no_order=${result.no_order}&type=pelanggan_setia'"
                                    class="btn w-100 py-3 border-0 shadow-sm transition-hover"
                                    style="background-color: #005eb8; color: white; border-radius: 12px;">
                                    <div class="fw-bold px-2">Saya Pelanggan Setia</div>
                                    <div style="font-size: 0.75rem; opacity: 0.9;">Survei rasa, variasi, dan penampilan menu</div>
                                </button>
                            </div>
                        `,
                        showConfirmButton: false,
                        showCancelButton: true,
                        cancelButtonText: 'Lewati & Selesai',
                        cancelButtonColor: '#6c757d',
                        customClass: {
                            popup: 'rounded-4',
                            cancelButton: 'px-4 py-2 rounded-3'
                        }
                    }).then(() => {
                         window.location.href = "/success-page"; // kehalaman success
                    });
                } else {
                    clearSession()
                    Swal.fire({
                        title: 'Gagal!',
                        text: result.message,
                        icon: 'error',
                        confirmButtonText: 'Tutup!'
                    }).then(() => {
                        window.location.href = "/";
                    });
                }
            } catch (err) {
                clearSession()
                Swal.fire({
                    title: 'Gagal!',
                    text: "Terjadi kesalahan saat mengirim data.",
                    icon: 'error',
                    confirmButtonText: 'Tutup!'
                })
            }finally{
                buttonSubmit.prop('disabled', false).html('Selesaikan Pesanan');
            }
    })