<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment Action Required</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .card {
            border-radius: 1rem;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        .spinner-border {
            width: 3rem;
            height: 3rem;
        }
        .btn-primary {
            background-color: #f0513c;
            border-color: #f0513c;
        }
        .btn-primary:hover {
            background-color: #d94331;
            border-color: #d94331;
        }
    </style>
</head>
<body>

<div class="container vh-100 d-flex justify-content-center align-items-center">
    <div class="card p-4 p-md-5 text-center w-100" style="max-width: 500px;">
        <div class="mb-4">
            <div class="spinner-border text-danger" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
        <h3 class="mb-3">Payment Action Required</h3>
        <p class="text-muted mb-4">
            To complete your payment, additional verification is required. Please follow the instructions from your bank to finalize your transaction.
        </p>
        <!--<a id="redirectBtn" href="#" class="btn btn-primary btn-lg w-100 mb-3">Proceed to Payment Verification</a>-->
        
    </div>
</div>

<!-- Optional Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://js.stripe.com/v3/"></script>

<!--<script>-->
<!--    const stripe = Stripe("pk_live_51Q1AUQAwacMkjoVrYWRtnQYR1lYvSH1vOA43ToJefQPmQFPhKmzcpHxJadskVPP8oFPkrqR0yXKLiGk4zde7nYFC00jIkbG1KA");-->
    
<!--    const clientSecret = "<?php echo $_GET['client_secret']; ?>";-->
<!--    const reg = "<?php echo $_GET['reg']; ?>";-->
    
<!--    stripe.confirmCardPayment(clientSecret).then(function(result) {-->
    
<!--        if (result.error) {-->
<!--            alert("Payment failed: " + result.error.message);-->
<!--            window.location.href = "checkout.php?reg=" + reg;-->
<!--        } else {-->
    
<!--            if (result.paymentIntent.status === "succeeded") {-->
<!--                alert("Payment Successfull");-->
<!--                window.location.href = "checkout.php?reg=" + reg;-->
<!--            }-->
    
<!--        }-->
<!--    });-->
<!--</script>-->

<script>
const stripe = Stripe("pk_live_51Q1AUQAwacMkjoVrYWRtnQYR1lYvSH1vOA43ToJefQPmQFPhKmzcpHxJadskVPP8oFPkrqR0yXKLiGk4zde7nYFC00jIkbG1KA");

const clientSecret = "<?php echo $_GET['client_secret']; ?>";
const reg = "<?php echo $_GET['reg']; ?>";
const pi = "<?php echo $_GET['pi']; ?>";

stripe.confirmCardPayment(clientSecret).then(function(result) {

    if (result.error) {
        alert("Payment failed: " + result.error.message);
        window.location.href = "checkout.php?reg=" + reg;
    } 
    else {

        if (result.paymentIntent.status === "succeeded") {

            // call backend to update payment status
            fetch("stripe_success.php", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    invoice_id: reg,
                    payment_intent: pi
                })
            })
            .then(res => res.json())
            .then(data => {

                alert("Payment Successful");

                window.location.href = "checkout.php?reg=" + reg;

            });

        }

    }

});
</script>


</body>
</html>