// Create the Card Fields Component and define callbacks MSIN-3855 checkout

    const cardField = paypal.CardFields({

        createOrder: function (data) {
            setProcessing(true);
            console.log("create_order start");
            console.log(data.paymentSource);


            const cardNumber = data.number;
            const cardType = detectCardType(cardNumber);



            var postData = {request_type: 'create_order', payment_source: data.paymentSource};
            return fetch("/paypal_advanced/paypal_checkout_init.php", {
                method: "POST",
                headers: {'Accept': 'application/json'},
                body: encodeFormData(postData)
            })
                .then((res) => {

                    return res.json();
                })
                .then((result) => {
                    resultMessage("<?php afficheTexte('preloader_wait', 1, 0, 1);?> ");
                    setProcessing(false);
                    console.log(result.msg);
                    console.log(result.status);
                    console.log(result.data.id);
                    if (result.status == 1) {
                        console.log("create_order statut ok");
                        return result.data.id;
                    } else {

                        console.log("erreur create_order");
                        let errorMessage = result.msg;
                        let translatedErrorMessage = translateErrorMessage(errorMessage);
                        resultMessage(`${translatedErrorMessage}`);

                        return false;
                    }
                });

        },
        onApprove: function (data) {
            setProcessing(true);

            console.log("onApprove");
            const {orderID} = data;
            var postData = {request_type: 'capture_order', order_id: orderID};
            return fetch('/paypal_advanced/paypal_checkout_init.php', {
                method: "POST",
                headers: {'Accept': 'application/json'},
                body: encodeFormData(postData)
            })
                .then((res) => {

                    return res.json();
                })
                .then((result) => {
// Redirect to success page
                    if (result.status == 1) {
                        console.log("capture_order");
                        window.location.href = "/paiement_update.php?checkout_ref_id=" + result.ref_id;
                    } else {


                        console.log("erreur capture order");
                        let errorMessage = result.msg;
                        let translatedErrorMessage = translateErrorMessage(errorMessage);
                        resultMessage(`${translatedErrorMessage}`);

                    }
                    setProcessing(false);
                });
        },
        onError: function (error) {
            console.error('Erreur lors du traitement du paiement', error);
        },
    });

    // Render the PayPal Button for PayPal account payments MSIN-3856
    paypal.Buttons({
        style: {
            shape: 'rect',
            color: 'gold',
            layout: 'vertical',
            label: 'paypal',
            height: 40, // Hauteur du bouton
            size: 'responsive' // Option pour rendre le bouton responsive
        },
// Custom onClick event handler
        onClick: function (data, actions) {
// Perform your custom logic here
            console.log('PayPal button clicked!');

            let isValid = true;


            var $termes = $('input.chk_termes[type=checkbox]:not(:checked)');

            if (!$termes.length) {
                isValid = true;

            } else {


                var str_alert = "<?php afficheTexte('terme_accepter') ?>";

                setTimeout(function () {
                    alert(str_alert);
                }, 1000);
                return actions.reject();
            }


// Example: Validate a form, show a message, or track the event

            if (!isValid) {
// Prevent the payment flow if the form is not valid
                console.log('Reject the payment and prevent the flow');
                return actions.reject(); // Reject the payment and prevent the flow
            } else {
                console.log('Continue with the payment flow');
                return actions.resolve(); // Continue with the payment flow
            }
        },


        createOrder: function (data) {
            console.log("create_order paypal js");

            var postData = {request_type: 'create_order', payment_source: 'paypal'};
            return fetch("/paypal_advanced/paypal_checkout_init.php", {
                method: "POST",
                headers: {'Accept': 'application/json'},
                body: encodeFormData(postData)
            })
                .then((res) => {


                    return res.json();
                })
                .then((result) => {
                    resultMessage("<?php afficheTexte('preloader_wait', 1, 0, 1);?> ");
                    setProcessing(false);
                    if (result.status == 1) {
                        console.log("create_order paypal ok");
                        return result.data.id;

                    } else {
                        console.log("erreur create_order pay pal");

                        let errorMessage = result.msg;
                        let translatedErrorMessage = translateErrorMessage(errorMessage);
                        resultMessage(`${translatedErrorMessage}`);

                        return false;
                    }
                });
        }
        ,
        onApprove: function (data, actions) {

            const orderID = data.orderID;
            console.log("onApprove paypal");
            return actions.order.capture().then(function (details) {
// Retrieve the transaction ID
                const transactionID = details.purchase_units[0].payments.captures[0].id;


// finalise la transaction

                var postData = {
                    payeremail: details.payer.email_address,
                    payername: details.payer.name.surname + details.payer.name.given_name,
                    request_type: 'fin_paypal',
                    payment_source: 'paypal',
                    order_id: orderID,
                    transaction_id: transactionID,
                    order_status: details.status
                };
                return fetch("/paypal_advanced/paypal_checkout_init.php", {
                    method: "POST",
                    headers: {'Accept': 'application/json'},
                    body: encodeFormData(postData)
                })
                    .then((res) => {


                        return res.json();
                    })
                    .then((result) => {
                        resultMessage("<?php afficheTexte('preloader_wait', 1, 0, 1);?> ");
                        setProcessing(false);
                        if (result.status == 1) {
                            console.log("result.ref_id");
                            console.log(result.ref_id);
                            window.location.href = "/paiement_update.php?checkout_ref_id=" + result.ref_id;
// return result.data.id;

                        } else {
                            console.log("erreur fin paypal");

                            let errorMessage = result.msg;
                            let translatedErrorMessage = translateErrorMessage(errorMessage);
                            resultMessage(`${translatedErrorMessage}`);

                            return false;
                        }
                    });


            });


        },
        onError: function (err) {
            console.error('An error occurred during the transaction', err);
        }
    }).render('#paypal-button-container');

    // Render each field after checking for eligibility
    if (cardField.isEligible()) {

        const nameField = cardField.NameField({
            placeholder: "<?php echo afficheTexte('checkout_nomsurlacarte', 0)?>" // Translate placeholder
        });
        nameField.render("#card-name-field-container");


        const numberField = cardField.NumberField({
            placeholder: "<?php echo afficheTexte('checkout_ccnumber', 0)?>" // Translate placeholder
        });
        numberField.render("#card-number-field-container");


        const cvvField = cardField.CVVField({
            placeholder: "<?php echo afficheTexte('checkout_cvv', 0)?>" // Translate placeholder
        });
        cvvField.render("#card-cvv-field-container");

        const expiryField = cardField.ExpiryField({
            placeholder: "<?php echo afficheTexte('checkout_cexpiryField', 0)?>" // Translate placeholder
        });


        expiryField.render("#card-expiry-field-container");

// Add click listener to submit button and call the submit function on the card-number-field-container component
// checkout
        document
            .getElementById("card-field-submit-button")
            .addEventListener("click", () => {
                let isValid = true;


                var $termes = $('input.chk_termes[type=checkbox]:not(:checked)');

                if (!$termes.length) {
                    isValid = true;

                } else {
                    isValid = false;
                    var str_alert = "<?php afficheTexte('terme_accepter') ?>";

                    /*if ($termes.data('pop_up') == 'location_policy') {
                    str_alert = $("#chk_location_policy").data('msg') + "\n" + str_alert;
                    }*/

                    alert(str_alert);
                }

                if (!isValid) {

                    return; // Stop further execution if validation fails
                }
// verifie si cheques
                    checkboxValue = $('#chk_pai_6').val()
                    console.log("type paiement");
                    console.log(checkboxValue);
                    if (checkboxValue == 6) {
                        grecaptcha.ready(function () {
                            grecaptcha.execute('<?php echo RECAPTCHA_SITE_KEY; ?>', {action: 'achat'}).then(function (token) {
                                document.getElementById('g-recaptcha-response').value = token;
                                console.log("checkboxValue == 6 js");
                                $("#frm_panier").submit();
                                $('body').css('cursor', 'wait');
                            });
                        });
                    }

                    cardField.submit().then(() => {

                    })
                        .catch((error) => {
                            console.log("erreur bouton paiement");

                            let str = error.message;
                            let result = str.substring(str.indexOf('.') + 1);
                            let resultObject = JSON.parse(result);
                            let description = resultObject.details[0].description;
                            console.log(description);
                            let errorMessage = description;
                            let translatedErrorMessage = translateErrorMessage(errorMessage);

                            resultMessage(`${translatedErrorMessage}`);
                            return;
                        });


            });
    } else {
// Hides card fields if the merchant isn't eligible
        document.querySelector("#checkout-form").style = "display: none";
    }

    const encodeFormData = (data) => {
        var form_data = new FormData();

        for (var key in data) {
            form_data.append(key, data[key]);
        }
        return form_data;
    }

    // Show a loader on payment form processing
    const setProcessing = (isProcessing) => {
        if (isProcessing) {
            document.querySelector(".overlay").classList.remove("hidden");
        } else {
            document.querySelector(".overlay").classList.add("hidden");
        }

    }

    // Display status message
    const resultMessage = (msg_txt) => {
        const messageContainer = document.querySelector("#paymentResponse");

        messageContainer.classList.remove("hidden");
        messageContainer.textContent = msg_txt;

        setTimeout(function () {
            messageContainer.classList.add("hidden");
            messageContainer.textContent = "";
        }, 5000);
        return;
    }

    // fin paypal adv