<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Midtrans Snap Test</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <script type="text/javascript"
        src="https://app.sandbox.midtrans.com/snap/snap.js"
        data-client-key="{{ config('services.midtrans.client_key') }}"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <div class="bg-white p-8 rounded-lg shadow-lg text-center">
        <h1 class="text-2xl font-bold mb-4">Uji Coba Midtrans Snap</h1>
        <p class="mb-6 text-gray-700">Klik tombol di bawah untuk menampilkan pop-up pembayaran Midtrans.</p>
        <button id="pay-button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            Bayar Sekarang!
        </button>

        <div id="after-payment-options" class="mt-8 hidden">
            <p class="text-lg mb-4">Pembayaran telah diproses atau ditutup.</p>
            <a href="/food-order" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded inline-block">
                Mulai Order Baru
            </a>
            <button id="retest-button" class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded inline-block ml-4">
                Ulangi Tes Pembayaran
            </button>
        </div>

        <script type="text/javascript">
            const payButton = document.getElementById('pay-button');
            const afterPaymentOptions = document.getElementById('after-payment-options');
            const retestButton = document.getElementById('retest-button');
            const snapToken = "{{ $snapToken }}";

            function showAfterPaymentOptions() {
                payButton.classList.add('hidden');
                afterPaymentOptions.classList.remove('hidden');
            }

            if (snapToken) {
                payButton.addEventListener('click', function () {
                    snap.pay(snapToken, {
                        enabledPayments: ['credit_card', 'bca_va', 'bni_va', 'bri_va', 'other_va'],
                        onSuccess: function(result){
                            alert("Pembayaran Berhasil! Cek konsol untuk detail.");
                            console.log(result);
                            showAfterPaymentOptions();
                        },
                        onPending: function(result){
                            alert("Pembayaran Pending! Cek konsol untuk detail.");
                            console.log(result);
                            showAfterPaymentOptions();
                        },
                        onError: function(result){
                            alert("Pembayaran Gagal! Cek konsol untuk detail.");
                            console.log(result);
                            showAfterPaymentOptions();
                        },
                        onClose: function(){
                            alert('Anda menutup pop-up tanpa menyelesaikan pembayaran.');
                            showAfterPaymentOptions();
                        }
                    });
                });

                retestButton.addEventListener('click', function() {
                    window.location.reload();
                });

            } else {
                alert("Snap Token tidak ditemukan. Periksa log server Anda.");
                console.error("Snap Token is empty or null.");
            }
        </script>
    </div>
</body>
</html>
