@extends('front.main')
@push('style')
@endpush
@section('content')
  <div x-data="paymentsCheckout">
        <div id="component-container"></div>
    </div>
@endsection
@push('script')

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('paymentsCheckout', () => ({
                paymentMethodsResponse: @js($paymentMethodsResponse),
                async init() {

                    const configuration = {
                        clientKey: "test_HV22OEG4IJDKRPNRL6VNWMJ7RQSYSEIK",
                        environment: "test",
                        amount: {
                            value: {{ intval($amount) }},
                            currency: 'ANY'
                        },
                        locale: 'in-IN',
                        countryCode: 'ANY',

                        // The full /paymentMethods response object from your server. Contains the payment methods configured in your account.
                        paymentMethodsResponse: this.paymentMethodsResponse,
                        onSubmit: async (state, component, actions) => {
                            try {
                            // Make a POST /payments request from your server.
                            const result = await makePaymentsCall(state.data, 'us', 'nl-NL', {value: {{intval($amount)}},currency: 'USD'});

                            // If the /payments request from your server fails, or if an unexpected error occurs.
                            if (!result.resultCode) {
                                actions.reject();
                                return;
                            }

                            const {
                                resultCode,
                                action,
                                order,
                                donationToken
                            } = result;

                            // If the /payments rts are available.
                            // You must call this, even if the result of the payment is unsuccessful.equest request from your server is successful, you must call this to resolve whichever of the listed objec
                            actions.resolve({
                                resultCode,
                                action,
                                order,
                                donationToken,
                            });
                            } catch (error) {
                            console.error("onSubmit", error);
                            actions.reject();
                            }
                        },
                        onAdditionalDetails: async (state, component, actions) => {
                        },
                        onPaymentCompleted: (result, component) => {
                            console.info(result, component,'pass');
                        },
                        onPaymentFailed: (result, component) => {
                            console.info(result, component);
                        },
                        onError: (error, component) => {
                            console.error(error.name, error.message, error.stack, component);
                        }
                    };

                    const checkout = await AdyenCheckout(configuration);
                    //const card = new Card(checkout).mount('#component-container');
                    const dropin = new Dropin(checkout, {
                        // Include the payment methods that imported.
                        paymentMethodComponents: [Card,Gpay],
                        // Mount it to the container you created.
                    }).mount('#component-container');
                },
                initCheckout() {

                }
            }));
        });
 	async function makePaymentsCall(data, countryCode, locale, amount) {
        try {
            const response = await fetch("{{ route('payments') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                body: JSON.stringify({
                    paymentData: data,
                    countryCode: countryCode,
                    locale: locale,
                    amount: amount
                })
            });
            // Check if the response is OK (status code 200-299)
            if (!response.ok) {
                const errorData = await response.json();
                console.error("Error response:", errorData);
                return { resultCode: errorData.resultCode || 500, action: null, order: null, donationToken: null };
            }

            // Parse and return the response data
            const result = await response.json();
            return { resultCode: 'authorised', action: null, order: null, donationToken: null };

        } catch (error) {
            console.error("Error in makePaymentsCall:", error);
            return error;
        }
    }
        </script>
@endpush