<?php
include('includes/session.php');
error_reporting(0);
include('includes/dbconnection.php');
$tabSessionID = $_GET['tab_id']; // Tab ID

if (!isset($_SESSION['pending_transfer'])) {
    header("Location: wallet_details_b.php?status=error&message=No pending transfer found.&tab_id=$tabSessionID");
    exit();
}

$transfer = $_SESSION['pending_transfer'];
?>
<!DOCTYPE html>
<html lang="en">
<?php @include("includes/head.php"); ?>

<body class="bg-slate-50 flex items-center justify-center min-h-screen p-4">

    <div class="max-w-md w-full bg-white rounded-3xl shadow-xl p-8 border border-slate-100">
        <div class="text-center mb-8">
            <div class="w-20 h-20 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-shield-alt text-3xl"></i>
            </div>
            <h2 class="text-2xl font-black text-slate-800">Final Security Step</h2>
            <p class="text-slate-500 text-sm">Verify your ₦<?php echo number_format($transfer['amount'], 2); ?> transfer to <?php echo $transfer['recipient_acc']; ?></p>
        </div>

        <form action="complete_transfer_b.php" method="POST" id="finalVerifyForm" class="space-y-6">
            <div>
                <label class="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1">Email OTP</label>
                <input type="text" name="otp_code" required maxlength="6" 
                       class="w-full border-2 border-slate-100 p-4 rounded-2xl text-center text-2xl tracking-[0.5em] focus:border-blue-500 outline-none" 
                       placeholder="000000">
            </div>

            <div>
                <label class="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1">Transaction PIN</label>
                <input type="password" name="transaction_pin" required maxlength="4" 
                       class="w-full border-2 border-slate-100 p-4 rounded-2xl text-center text-2xl tracking-[1em] focus:border-blue-500 outline-none" 
                       placeholder="****">
            </div>

            <button type="submit" id="btnFinal" class="w-full bg-slate-900 text-white py-4 rounded-2xl font-bold hover:bg-black transition-all shadow-lg">
                Confirm & Pay ₦<?php echo number_format($transfer['amount'], 2); ?>
            </button>
            
            <a href="wallet_details_b.php" class="block text-center text-slate-400 text-sm font-bold mt-4">Cancel Transaction</a>
        </form>
    </div>

    <script>
        document.getElementById('finalVerifyForm').addEventListener('submit', function() {
            const btn = document.getElementById('btnFinal');
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-circle-notch animate-spin"></i> Authorizing...';
            btn.className = "w-full bg-slate-700 text-white py-4 rounded-2xl font-bold cursor-not-allowed transition-all shadow-lg";
        });
    </script>
</body>
</html>