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


    <div class="innerBan">
        <img src="{{ asset('front/images/innerbnr1.png') }}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2>Checkout Details</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End: Main Slider -->

    <div class="col-md-11 mx-auto">
        <nav aria-label="breadcrumb" class="bg-white">
            <ol class="breadcrumb bg-white">
                <li class="breadcrumb-item"><a href="{{ route('front.home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="#">Browser Art</a></li>
                <li class="breadcrumb-item active" aria-current="page">Checkout Details</li>
            </ol>
        </nav>
    </div>

    <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>
            @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
@push('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>
@endpush