@extends('layouts.app')
@section('style')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection
@section('content')
    <div class="col-12 col-md-6 overflow-page">
        <div class="row">
            <!-- register-header -->
            <div class="col-12 news-header px-5 text-primary text-opensans d-flex align-items-center">
                <span class="px-3">Account Details</span>
            </div>
            <style>

            </style>
            <!-- register-content -->
            <div class="col-12 news-content panel-content-h">
                <!-- register -->
                <div class="col-12 py-4">
                    <!-- register-title -->
                    <div class="px-4 notice-footer text-center mb-5">
                        <p class="text-white text-bold p-0 m-0">SHOP</p>
                        <p class="text-secondary login-options p-0 m-0">Buy Donation Points</p>
                    </div>

                    <div class="panel-content p-5 my-4">
                        <p class="text-primary text-center text-opensans">
                            Points Shop
                        </p>

                        <p class="text-white">1 point = 1 USD</p>

                        <p class="text-white">You Will Pay : <span id="total">0</span> USD</p>

                        <input onchange="setMoney()" onkeyup="setMoney()" id="points" class="form-control mt-2"
                            maxlength="14" name="name" type="number" placeholder="Enter Points Count" required="">

                        <div id="paypal-button-container" class="mt-4"></div>

                        <div class="text-success" id="success"></div>


                    </div>


                </div>
            </div>

        </div>
    </div>
@endsection

<script>
    function setMoney() {
        let val = $('#points').val();
        if (val < 0) {
            alert('Enter Points Count');
        }

        $('#total').html(val);
    }
</script>
<script
    src="https://www.paypal.com/sdk/js?client-id=AV6HGGAvaSYLw0iNWSB-_QIz_K_fh3VejXFUptEpZcvLY-ZqoEao2CpQ_7cBk81yOPWXTQcVzLWMHLzr&components=buttons&enable-funding=paylater,venmo,card"
    data-sdk-integration-source="integrationbuilder_sc"></script>


<script>
    window.paypal
        .Buttons({
            style: {
                shape: "rect",
                layout: "vertical",
            },
            async createOrder() {
                try {
                    const response = await fetch("/create-order", {
                        method: "POST",
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                .getAttribute(
                                    'content')
                        },

                        body: JSON.stringify({
                            cart: [{
                                id: document.getElementById('points').value,
                            }, ],
                        }),
                    });

                    const orderData = await response.json();

                    if (orderData.id) {
                        return orderData.id;
                    } else {
                        const errorDetail = orderData?.details?.[0];
                        const errorMessage = errorDetail ?
                            `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})` :
                            JSON.stringify(orderData);

                        throw new Error(errorMessage);
                    }
                } catch (error) {
                    console.error(JSON.stringify(error));
                }
            },
            async onApprove(data, actions) {
                try {
                    const response = await fetch(`/capture-order`, {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                .getAttribute(
                                    'content')
                        },
                        body: JSON.stringify({
                            orderID: data.orderID
                        }),
                    });

                    const orderData = await response.json();

                    const errorDetail = orderData?.details?.[0];


                    if (errorDetail?.issue === "INSTRUMENT_DECLINED") {

                        return actions.restart();
                    } else if (errorDetail) {

                        throw new Error(`${errorDetail.description} (${orderData.debug_id})`);
                    } else if (!orderData.purchase_units) {
                        throw new Error(JSON.stringify(orderData));
                    } else {

                        const transaction =
                            orderData?.purchase_units?.[0]?.payments?.captures?.[0] ||
                            orderData?.purchase_units?.[0]?.payments?.authorizations?.[0];

                        document.getElementById("success").innerHTML = "Transaction completed";

                    }
                } catch (error) {
                    console.error(error);

                }
            },
        })
        .render("#paypal-button-container");
</script>
{{-- <script>
    
    // Render the PayPal button
    paypal.Buttons({
        createOrder: function(data, actions) {
            return fetch('/create-order', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                            'content')
                    },
                    body: JSON.stringify({
                        cart: [{
                            id: document.getElementById('points').value
                        }]
                    })
                }).then(response => response.json())
                .then(orderData => {
                    if (orderData.id) {
                        return orderData.id;
                    } else {
                        const errorDetail = orderData?.details?.[0];
                        const errorMessage = errorDetail ?
                            `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})` :
                            JSON.stringify(orderData);
                        throw new Error(errorMessage);
                    }
                });
        },
        onApprove: function(data, actions) {
            return fetch('/capture-order', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                            'content')
                    },
                    body: JSON.stringify({
                        orderID: data.orderID
                    })
                }).then(response => response.json())
                .then(orderData => {
                    if (orderData.status === 'COMPLETED') {
                        alert('Transaction completed by ' + orderData.payer.name.given_name);
                        window.location.href = '/invoice';
                    } else {
                        throw new Error('Order not completed');
                    }

                }).catch(err => {
                    console.error('Error:', err);
                });
        },
        onError: function(err) {
            console.error('An error occurred:', err);
        }
    }).render('#paypal-button-container');
</script> --}}