

<?php $__env->startSection('title', 'Complete Payment'); ?>

<?php $__env->startSection('content'); ?>
<div class="min-h-screen bg-gray-50 py-8 px-4">
    <div class="max-w-2xl mx-auto">

        
        <div class="bg-white rounded-xl shadow-sm p-4 mb-4 flex justify-between items-center">
            <div>
                <p class="text-sm text-gray-500">Order</p>
                <p class="font-semibold text-gray-800">#<?php echo e($order->order_number); ?></p>
            </div>
            <div class="text-right">
                <p class="text-sm text-gray-500">Amount</p>
                <p class="font-bold text-green-600 text-lg">Rs. <?php echo e(number_format($order->total)); ?></p>
            </div>
        </div>

        
        <div id="iframe-container" class="bg-white rounded-xl shadow-sm overflow-hidden" style="height:600px;">
            <iframe
                id="safepay-frame"
                src="<?php echo e($checkoutUrl); ?>"
                width="100%"
                height="100%"
                frameborder="0"
                allow="payment"
            ></iframe>
        </div>

        
        <div id="manual-btn" style="display:none;" class="text-center mt-4">
            <div class="bg-green-50 border border-green-200 rounded-xl p-6">
                <div class="text-4xl mb-2">✅</div>
                <h3 class="text-green-700 font-bold text-lg mb-1">Payment Successful!</h3>
                <p class="text-gray-500 text-sm mb-4">Click below to complete your order</p>
                <a href="<?php echo e(route('checkout.safepay.callback')); ?>?order_id=<?php echo e($order->id); ?>&uid=<?php echo e($order->user_id); ?>"
                   class="inline-block bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-8 rounded-xl transition">
                    Complete My Order →
                </a>
            </div>
        </div>

        
        <div id="cancel-link" class="text-center mt-3">
            <a href="<?php echo e(route('cart.index')); ?>" class="text-sm text-gray-400 hover:text-gray-600">
                Cancel and return to cart
            </a>
        </div>
    </div>
</div>

<script>
    var shown = false;

    function showCompleteButton() {
        if (shown) return;
        shown = true;
        document.getElementById('iframe-container').style.display = 'none';
        document.getElementById('manual-btn').style.display = 'block';
        document.getElementById('cancel-link').style.display = 'none';
    }

    // ✅ postMessage — check "name" field specifically
    window.addEventListener('message', function(event) {
        if (!event.data) return;

        var data = event.data;
        var dataStr = typeof data === 'string' ? data : JSON.stringify(data);

        // ✅ Safepay postrobot mein "name" field check karo
        // postrobot_hello = handshake (ignore)
        // koi aur name = action (success ho sakta hai)
        try {
            var parsed = typeof data === 'string' ? JSON.parse(data) : data;

            // Array format check
            if (Array.isArray(parsed) && parsed[0]) {
                var item = parsed[0];
                var name = item.name || '';

                // postrobot_hello ignore
                if (name === 'postrobot_hello') return;

                // Koi aur message = payment action
                if (name && name !== 'postrobot_hello') {
                    console.log('Safepay action:', name, item);
                    // Agar tmx_profiling nahi aur koi action hai
                    if (!dataStr.includes('tmx_profiling')) {
                        showCompleteButton();
                    }
                }
            }

            // Object format check
            if (parsed && parsed.name && parsed.name !== 'postrobot_hello') {
                if (!dataStr.includes('tmx_profiling')) {
                    showCompleteButton();
                }
            }

        } catch(e) {
            // String message
            if (
                dataStr.includes('TRACKER_ENDED') ||
                dataStr.includes('payment:success') ||
                dataStr.includes('checkout:complete') ||
                (dataStr.includes('success') && !dataStr.includes('tmx_profiling'))
            ) {
                showCompleteButton();
            }
        }
    });

    // ✅ Iframe load count — 2nd load = payment page complete
    // First load = payment form, second load = success page
    var loadCount = 0;
    document.getElementById('safepay-frame').addEventListener('load', function() {
        loadCount++;
        console.log('iframe load count:', loadCount);
        // 2nd ya baad mein load = success screen
        if (loadCount >= 2) {
            showCompleteButton();
        }
    });
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/devlools/public_html/E-Commerce/resources/views/checkout/safepay_checkout.blade.php ENDPATH**/ ?>