@extends("layouts.app")
@section("content")
    <div class="loaderOverlay d-none">
        <div class="spinner-grow" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>


    <!-- Begin: Main Slider -->
    <div class="main-slider">
        <img class="img-fluid w-100" src="{{asset('images/innerBnnr.jpg')}}" alt="First slide">
        <div class="carousel-caption">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="text-uppercase">CHECK OUT</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Main Slider -->

    <div class="checkOutStyle">
        <div class="container d-flex justify-content-center">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            @if($data['gateway'] == 'paypal')
                <script
                        src="https://www.paypal.com/sdk/js?client-id=AcKwbyi3-LtcW9orYwnWecAHjTaU6SDpJ6JiVW6FIP3lO-9yY-DjWoPNoo6vTbfEW2Xitkmkiiz5O1le&currency=USD&enable-funding=venmo"></script>
                <style>
                    .loaderOverlay {
                        position: fixed;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: #000000;
                        z-index: 1000;
                        opacity: 0.5;
                    }

                    .loaderOverlay .spinner-grow {
                        background: #fff;
                        font-size: 0;
                    }
                </style>
                <div id="paypal-button-container"></div>
            @section('script')
                <script>
                    let fundingSource = 'paypal'
                    paypal.Buttons({
                        onClick: (data) => {
                            fundingSource = data.fundingSource

                            // Use this value to determine what funding source was used to pay
                            // Update your confirmation pages and notifications from "PayPal" to "Venmo"
                        },
                        // Sets up the transaction when a payment button is clicked
                        createOrder: (data, actions) => {
                            return actions.order.create({
                                purchase_units: [{
                                    amount: {
                                        value: '{{ $data['total'] }}'
                                    }
                                }]
                            });
                        },
                        // Finalize the transaction after payer approval
                        onApprove: (data, actions) => {
                            return actions.order.capture().then(function (orderData) {
                                // console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
                                storeCheckoutDetails(orderData);
                            });
                        }
                    }).render('#paypal-button-container');

                    function storeCheckoutDetails(gatewayData) {
                        $.ajax({
                            'url': '{{ route('paypalCharge') }}',
                            'data': {
                                ...gatewayData,
                                fundingSource
                            },
                            method: 'POST',
                            dataType: 'json',
                            headers: {
                                'X-CSRF-TOKEN': $('input[name="_token"]').val(),
                            },
                            beforeSend: function () {
                                $('.loaderOverlay').removeClass('d-none');
                            },
                            success: function (res) {
                                // console.log(res.data.url);
                                if (res.hasOwnProperty('errors')) {
                                    for (const re in res.errors) {
                                        toastr.error(res.errors[re][0]);
                                    }
                                } else {
                                    console.log("res.data", res.data)
                                    if (res.data.hasOwnProperty('error')) {
                                        toastr.error(res.data.error);
                                    } else {
                                        window.location = res.data.url
                                    }
                                }
                            },
                            complete: function () {
                                $('.loaderOverlay').addClass('d-none');
                            }
                        });
                    }
                </script>
            @endsection
            @elseif($data['gateway'] == 'square')
                <form action="{{ route('squareCharge') }}" method="POST">
                    @csrf
                    <button type="submit" class="btn btn-primary btn-lg">Pay with square</button>
                </form>
            @endif
        </div>
    </div>
@endsection