<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment Status</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=Inter:wght@400;600&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #05070A;
        }
        .font-outfit {
            font-family: 'Outfit', sans-serif;
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center text-white px-4 relative overflow-hidden">
    <!-- Glowing background blobs -->
    <div class="absolute top-1/4 -right-20 w-80 h-80 rounded-full bg-cyan-500/10 blur-[100px] pointer-events-none"></div>
    <div class="absolute bottom-1/4 -left-20 w-80 h-80 rounded-full bg-blue-600/10 blur-[100px] pointer-events-none"></div>

    <div class="w-full max-w-md bg-white/[0.02] border border-white/10 rounded-3xl p-8 backdrop-blur-xl text-center relative z-10">
        @php
            $statusLower = strtolower($status ?? '');
            $isSuccess = $statusLower === 'success' || $statusLower === 'successful' || $statusLower === 'completed';
            $isCancelled = $statusLower === 'cancelled';
        @endphp

        @if($isSuccess)
            <!-- Success State -->
            <div class="w-20 h-20 bg-emerald-500/10 border border-emerald-500/30 rounded-full flex items-center justify-center mx-auto mb-6">
                <svg class="w-10 h-10 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path>
                </svg>
            </div>
            <h1 class="font-outfit font-black text-2xl mb-3">Payment Successful!</h1>
            <p class="text-gray-400 text-sm mb-6">
                Your payment of <strong>{{ $currency ?? 'USD' }} {{ $amount ?? '' }}</strong> was received. You can now close this window and return to the application to access your predictions.
            </p>
        @elseif($isCancelled)
            <!-- Cancelled State -->
            <div class="w-20 h-20 bg-amber-500/10 border border-amber-500/30 rounded-full flex items-center justify-center mx-auto mb-6">
                <svg class="w-10 h-10 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                </svg>
            </div>
            <h1 class="font-outfit font-black text-2xl mb-3">Payment Cancelled</h1>
            <p class="text-gray-400 text-sm mb-6">
                The transaction has been cancelled. You can return to the application safely.
            </p>
        @else
            <!-- Failed State -->
            <div class="w-20 h-20 bg-rose-500/10 border border-rose-500/30 rounded-full flex items-center justify-center mx-auto mb-6">
                <svg class="w-10 h-10 text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </div>
            <h1 class="font-outfit font-black text-2xl mb-3">Payment Failed</h1>
            <p class="text-gray-400 text-sm mb-6">
                The transaction could not be processed. Please check your credentials or try again later.
            </p>
        @endif

        @if(isset($tx_ref))
            <div class="bg-white/5 border border-white/10 rounded-2xl py-3 px-4 mb-6 text-left">
                <div class="text-xs text-gray-500 uppercase tracking-wider mb-0.5">Reference ID</div>
                <div class="text-sm font-semibold font-mono text-gray-300 break-all">{{ $tx_ref }}</div>
            </div>
        @endif

        <div class="text-xs text-gray-500">
            Please tap the close button or return to the app.
        </div>
    </div>
</body>
</html>
