<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <title>Pay Now</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js" integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="container mt-5 text-center">
    <div class="row justify-content-center">
        <div class="col-md-3">
            <div class="container mt-5 text-center">
                <!-- Set up a container element for the button -->
                <div id="paypal-button-container"></div>

                <!-- Include the PayPal JavaScript SDK -->
                <script src="https://www.paypal.com/sdk/js?client-id=AawEu5DYRoIMZAXTw2bcIioVe5OK2Ei4_RBvbdxC8DllsNzOnSbjoH_PGrdoLq-QrsVwoc1Xrw4Bz_7u&currency=USD"></script>

                <script>
                    const urlSearchParams = new URLSearchParams(window.location.search);
                    const params = Object.fromEntries(urlSearchParams.entries());
                    console.log(params)
                    if (params.amount != undefined && params.order_id != undefined){
                        paypal.Buttons({

                            // Set up the transaction
                            createOrder: function(data, actions) {
                                return actions.order.create({
                                    purchase_units: [{
                                        amount: {
                                            value: params.amount
                                        }
                                    }]
                                });
                            },

                            // Finalize the transaction
                            onApprove: function(data, actions) {
                                return actions.order.capture().then(function(orderData) {
                                    // Successful capture! For demo purposes:
                                    //   console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
                                    var transaction = orderData.purchase_units[0].payments.captures[0];
                                    // alert('Transaction '+ transaction.status + ': ' + transaction.id + '\n\nSee console for all available details');

                                    console.log('transaction')
                                    console.log(orderData)
                                    if (orderData.status=='COMPLETED'){
                                        let orderDetails = {}
                                        orderDetails.amount     =    orderData.purchase_units[0].payments.captures[0].amount.value
                                        orderDetails.id         =    orderData.id
                                        orderDetails.date       =    orderData.create_time
                                        orderDetails.order_id   =    params.order_id
                                        orderDetails.status     =    orderData.status

                                        axios.post(window.location.origin+'/api/payment-accept', orderDetails).then(res=>{
                                            if (res.data.msg == 'success'){
                                                window.location.href = window.location.origin+'/payment-success'
                                            }
                                        })
                                    }else{
                                        window.location.href = window.location.origin+'/cancel-payment'
                                    }
                                    // Replace the above to show a success message within this page, e.g.
                                    // const element = document.getElementById('paypal-button-container');
                                    // element.innerHTML = '';
                                    // element.innerHTML = '<h3>Thank you for your payment!</h3>';
                                    // Or go to another URL:  actions.redirect('thank_you.html');
                                });
                            }


                        }).render('#paypal-button-container');
                    }else{
                        document.querySelector('#paypal-button-container').innerHTML = 'Order Id and Amount is Required'
                    }
                    // Render the PayPal button into #paypal-button-container

                </script>







            </div>
        </div>
    </div>
</div>
</body>
</html>
