@extends('layouts.app')

@section('title', 'Midtrans Payment')

@section('content')
<div class="min-h-[80vh] flex items-center justify-center py-12 px-4">
    <div class="max-w-2xl w-full">
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
            <div class="h-2 bg-gradient-to-r from-purple-500 to-blue-600"></div>
            
            <div class="px-8 py-8 text-center">
                <!-- Loading State -->
                <div id="loadingState" class="py-12">
                    <div class="animate-spin rounded-full h-16 w-16 border-b-2 border-blue-600 mx-auto mb-4"></div>
                    <h2 class="text-xl font-semibold text-gray-800 mb-2">Mengarahkan ke Midtrans...</h2>
                    <p class="text-gray-600">Harap tunggu sebentar</p>
                </div>

                <!-- Error State -->
                <div id="errorState" class="hidden py-12">
                    <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <h2 class="text-xl font-semibold text-gray-800 mb-2">Gagal Memproses Pembayaran</h2>
                    <p class="text-gray-600 mb-6" id="errorMessage">Terjadi kesalahan, silakan coba lagi</p>
                    <div class="space-x-3">
                        <a href="/checkout" class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700">
                            Kembali ke Checkout
                        </a>
                        <button onclick="location.reload()" class="inline-block bg-gray-500 text-white px-6 py-3 rounded-lg hover:bg-gray-600">
                            Coba Lagi
                        </button>
                    </div>
                </div>

                <!-- Dummy Payment Info (for testing) -->
                @if(env('MIDTRANS_IS_PRODUCTION') == false)
                <div class="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg text-left">
                    <h4 class="font-bold text-yellow-800 mb-2">🔧 Mode Testing (Sandbox)</h4>
                    <p class="text-sm text-yellow-700 mb-2">Anda menggunakan mode sandbox.</p>
                    <ul class="text-xs text-yellow-600 list-disc pl-4 space-y-1">
                        <li>Gunakan kartu kredit test: <strong>4811 1111 1111 1114</strong></li>
                        <li>CVV: <strong>123</strong></li>
                        <li>Expiry: bulan/tahun apa saja (contoh: 12/25)</li>
                        <li>3DS PIN: <strong>112233</strong></li>
                    </ul>
                    @if(strpos($snapToken, 'dummy-') === 0)
                    <div class="mt-3 p-2 bg-orange-100 rounded">
                        <p class="text-xs text-orange-700 font-medium">⚠️ Mode Dummy (koneksi ke server Midtrans gagal)</p>
                        <button onclick="simulatePayment()" class="mt-2 w-full bg-green-600 text-white py-2 rounded-lg hover:bg-green-700 text-sm">
                            Simulasi Pembayaran Berhasil
                        </button>
                    </div>
                    @endif
                </div>
                @endif
            </div>
        </div>

        <!-- Order Summary -->
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden mt-6">
            <div class="px-8 py-6">
                <h3 class="text-lg font-semibold mb-4">Ringkasan Pesanan</h3>
                <div class="space-y-2">
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Order Number</span>
                        <span class="font-medium">{{ $order->order_number }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Total Pembayaran</span>
                        <span class="font-bold text-lg text-blue-600">Rp {{ number_format($order->total, 0, ',', '.') }}</span>
                    </div>
                </div>

                <div class="mt-4 p-3 bg-blue-50 rounded-lg">
                    <p class="text-xs text-blue-800">
                        <span class="font-bold">🔒 Aman & Terpercaya</span><br>
                        Anda akan diarahkan ke halaman pembayaran aman Midtrans. 
                        Jangan tutup halaman ini sampai proses selesai.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Midtrans Snap Script -->
<script src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="{{ $clientKey }}"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const snapToken = '{{ $snapToken }}';
        const loadingState = document.getElementById('loadingState');
        const errorState = document.getElementById('errorState');
        const errorMessage = document.getElementById('errorMessage');

        console.log('Snap Token:', snapToken);
        console.log('Client Key:', '{{ $clientKey }}');

        if (!snapToken || snapToken === '') {
            showError('Token pembayaran tidak valid');
            return;
        }

        // Check if this is dummy token (for testing without actual Midtrans)
        if (snapToken.startsWith('dummy-')) {
            console.log('Using dummy token for testing');
            // Hide loading state
            loadingState.style.display = 'none';
            return;
        }

        // Tunggu sebentar untuk memastikan Snap sudah ready
        setTimeout(function() {
            // Open Snap popup for real token
            if (typeof window.snap !== 'undefined') {
                console.log('Snap is loaded, opening payment...');
                
                window.snap.pay(snapToken, {
                    onSuccess: function(result) {
                        console.log('Payment success:', result);
                        window.location.href = '/checkout/success/{{ $order->id }}?method=midtrans&status=success';
                    },
                    onPending: function(result) {
                        console.log('Payment pending:', result);
                        window.location.href = '/checkout/success/{{ $order->id }}?method=midtrans&status=pending';
                    },
                    onError: function(result) {
                        console.error('Payment error:', result);
                        showError(result.status_message || 'Terjadi kesalahan pembayaran');
                    },
                    onClose: function() {
                        console.log('Payment popup closed');
                        if (!confirm('Apakah Anda yakin ingin membatalkan pembayaran?')) {
                            // Reopen snap if user cancels close
                            window.snap.pay(snapToken);
                        } else {
                            window.location.href = '/checkout?status=cancelled';
                        }
                    }
                });
                
                // Hide loading state
                loadingState.style.display = 'none';
            } else {
                console.error('Snap is not loaded');
                showError('Midtrans Snap tidak dapat dimuat. Silakan refresh halaman.');
            }
        }, 1000);
    });

    function showError(message) {
        document.getElementById('loadingState').classList.add('hidden');
        const errorState = document.getElementById('errorState');
        const errorMessage = document.getElementById('errorMessage');
        errorMessage.textContent = message;
        errorState.classList.remove('hidden');
    }

    // For dummy mode - simulate successful payment
    function simulatePayment() {
        window.location.href = '/checkout/success/{{ $order->id }}?method=midtrans&status=success&dummy=1';
    }
</script>
@endsection