<x-main.header />

<main class="shop-main">
    <section class="banner-inner" style="background-image: url({{ asset('storage/images/'.$banner->banner_image) }});">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-11 col-12 px-lg-12">
                    <div class="banner-txt">
                        <div class="col-lg-7 col-12 pe-lg-5">
                            <h1 class="theme-h1"><p><strong>CheckOut</strong></p></h1>
                            <ul>
                                <li>PayPal</li>
                                <li>{{ $banner->banner_heading }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="checkout-sec pt-5 pb-3">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-11 col-12 px-lg-4">
                	<div id="paypal-button-container"></div>
                </div>
            </div>
        </div>
    </section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>

<script>
    $(document).ready(function(){
 
       var getAmount = '{{ $order->total_price }}';
      var getcurrency = 'USD';

      
        paypal.Button.render({
            env: 'production', // sandbox | production
            style: {
            label: 'checkout',
            size: 'responsive', // small | medium | large | responsive
            shape: 'rect',  // pill | rect
            color: 'gold'    // gold | blue | silver | black
        },
            client: {
                   // sandbox:  
                production: 'AXh8CJGz0y1DeW691XT0Rnjp6so9XTC4Xzu4PRZNIt3aAlyInh5EQQW2HYb2t8KnJYcqH4rSgZTNa82o'
            },
            // Show the buyer a 'Pay Now' button in the checkout flow
            commit: true,
            // payment() is called when the button is clicked
            payment: function(data, actions) {
                // Make a call to the REST api to create the payment
                return actions.payment.create({
                    payment: {
                        transactions: [
                            {
                                amount: { total: getAmount, currency: getcurrency } 
                            }
                        ]
                    }
                });
            },
            // onAuthorize() is called when the buyer approves the payment
            onAuthorize: function(data, actions) {
              console.log(data);
                // Make a call to the REST api to execute the payment
                return actions.payment.execute().then(function() {
                    //window.alert('Payment Complete!');
                   toastr.success('Thank you! your payment has been made.','Payment Success',{timeOut: 1500});
                    var EXECUTE_URL = '';
                    var params = {
                     payment_status:'Completed',
                     custom:'{{ $order->id }}',
                     paymentID: data.paymentID,
                     payerID: data.payerID
                    };
                     if(paypal.request.post(EXECUTE_URL, params)){
                     if(params.payment_status=='Completed'){
                      setInterval(function(){ 
                         window.location = "{{ url('/success_payment') }}"+'/'+{{ $order->id }}
                      }, 3000); 
                     } else {
                      toastr.error("Payment Failed","Error",{timeOut: 1500});
                      window.location = "{{ url('/cancel_payment') }}"+'/'+{{ $order->id }}
                     }
                    }
                }).catch(function (error) {
                  console.log(error);
                  toastr.error("Payment Failed","Error",{timeOut: 1500});
                });
            }
        }, '#paypal-button-container');
});
    </script>
    <!-- End Paypal -->

<x-main.footer />