<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Innoversion Checkout - Mock Gateway</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Outfit', sans-serif;
            background-color: #f3f4f6;
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
    <div class="max-w-md w-full bg-white rounded-3xl shadow-2xl border border-slate-100 overflow-hidden relative">
        <!-- Zoho Branding Header -->
        <div class="bg-[#18243c] p-6 text-center text-white relative">
            <div class="absolute top-6 left-6 flex items-center gap-1">
                <span class="h-2.5 w-2.5 bg-red-500 rounded-full"></span>
                <span class="h-2.5 w-2.5 bg-yellow-500 rounded-full"></span>
                <span class="h-2.5 w-2.5 bg-green-500 rounded-full"></span>
            </div>
            <h1 class="text-xl font-extrabold tracking-wide uppercase flex items-center justify-center gap-1.5">
                <i class="bi bi-shield-lock-fill text-emerald-400"></i> Innoversion Checkout
            </h1>
            <p class="text-xs text-slate-400 mt-1">Mock Payment Gateway Mode</p>
        </div>

        <!-- Checkout Details Body -->
        <div class="p-6">
            <div class="text-center mb-6">
                <span class="text-xs font-bold text-slate-450 uppercase tracking-widest block mb-1">Total Payment Due</span>
                <div class="text-3xl font-black text-slate-800">₹{{ number_format($recharge->amount, 2) }}</div>
            </div>

            <!-- Billing Info Cards -->
            <div class="bg-slate-50 border border-slate-100 rounded-2xl p-4 mb-6">
                <div class="flex justify-between items-center mb-2.5">
                    <span class="text-xs font-semibold text-slate-400">Merchant</span>
                    <span class="text-xs font-bold text-slate-700">Document Verification Hub</span>
                </div>
                <div class="flex justify-between items-center mb-2.5">
                    <span class="text-xs font-semibold text-slate-400">Client Account</span>
                    <span class="text-xs font-bold text-slate-700">{{ $recharge->apiClient?->name ?? 'Client' }}</span>
                </div>
                <div class="flex justify-between items-center mb-2.5">
                    <span class="text-xs font-semibold text-slate-400">Reference ID</span>
                    <span class="text-xs font-mono font-bold text-slate-700">#REC-{{ $recharge->id }}</span>
                </div>
                <div class="h-px bg-slate-200 my-2"></div>
                <div class="flex justify-between items-center">
                    <span class="text-xs font-semibold text-slate-450">Payment Type</span>
                    <span class="text-xs font-bold text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-md">Wallet Credit</span>
                </div>
            </div>

            <!-- Simulation Alert -->
            <div class="bg-yellow-50 border border-yellow-200/80 rounded-2xl p-4 text-xs text-yellow-800 mb-6 flex gap-2">
                <i class="bi bi-info-circle-fill text-yellow-600 text-base shrink-0"></i>
                <div>
                    <strong class="font-bold block mb-0.5">Payment Simulation</strong>
                    You are in test mode. You can simulate a successful or failed payment to verify how the wallet balances and webhook recharges behave.
                </div>
            </div>

            <!-- Action Form -->
            <form action="{{ route('zoho.mock-checkout.complete', ['recharge_id' => $recharge->id]) }}" method="POST" class="space-y-3">
                @csrf
                <button type="submit" name="status" value="completed" class="w-full py-3.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl shadow-lg shadow-emerald-600/10 font-bold transition-all text-sm flex items-center justify-center gap-2">
                    <i class="bi bi-check-circle-fill"></i> Simulate Success
                </button>
                <button type="submit" name="status" value="failed" class="w-full py-3.5 bg-rose-50 hover:bg-rose-100 text-rose-650 border border-rose-200 rounded-xl font-bold transition-all text-sm flex items-center justify-center gap-2">
                    <i class="bi bi-x-circle-fill"></i> Simulate Failure
                </button>
            </form>
        </div>

        <!-- Footer -->
        <div class="bg-slate-50 p-4 text-center text-[10px] text-slate-400 border-t border-slate-100 flex items-center justify-center gap-1">
            <i class="bi bi-lock-fill"></i> SSL 256-bit Encryption Mockup
        </div>
    </div>
</body>
</html>
