document.addEventListener("DOMContentLoaded", () => {
  const stripe = Stripe("pk_live_thCcMjKeVsvIonddjuI6Fljp");
  
    const paymentForm = document.querySelector("#Shipping");
    if (paymentForm) {
      let elements;
      initialize();

      paymentForm.addEventListener("submit", handleSubmit);

      // Fetches a payment intent and captures the client secret
      async function initialize() {

        const hiddenInput = document.querySelector('input[name="book_amount"]');
        const value = hiddenInput.value;

        const { clientSecret } = await fetch("/ajax.php?view=freebookbuy&ajax=create", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ amount: value })
        }).then((r) => r.json());

        elements = stripe.elements({ clientSecret });

        const paymentElementOptions = {
          layout: "accordion",
        };
          
        const paymentElement = elements.create("payment", paymentElementOptions);
        paymentElement.mount("#payment-element");
        
      }

      async function handleSubmit(e) {
        e.preventDefault();
        setLoading(true);

        const { error } = await stripe.confirmPayment({
          elements,
          confirmParams: {
            // Make sure to change this to your payment completion page
            return_url: "https://www.bulletproofhusband.com/index.php?view=freebookdone",
          },
        });

        // This point will only be reached if there is an immediate error when
        // confirming the payment. Otherwise, your customer will be redirected to
        // your `return_url`. For some payment methods like iDEAL, your customer will
        // be redirected to an intermediate site first to authorize the payment, then
        // redirected to the `return_url`.
        if (error.type === "card_error" || error.type === "validation_error") {
          showMessage(error.message);
        } else {
          showMessage("An unexpected error occurred.");
        }

        setLoading(false);
      }

      // ------- UI helpers -------

      function showMessage(messageText) {
        const messageContainer = document.querySelector("#payment-message");

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

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

        // Show a spinner on payment submission
        function setLoading(isLoading) {
          const spinner = document.querySelector("#stripespinner");
          const buttonText = document.querySelector("#button-text");
          const submitButton = document.querySelector("#submit");
          if (isLoading) {
            // Disable the button and show the spinner, hide the text
            submitButton.disabled = true;
            spinner.classList.remove("stripehidden");
            buttonText.classList.add("stripehidden");
          } else {
            // Enable the button and hide the spinner, show the text
            submitButton.disabled = false;
            spinner.classList.add("stripehidden");
            buttonText.classList.remove("stripehidden");
          }
        }

    }

});

  // Set the payment method and submit the form
  function setPaymentMethod(method) {
    const paymentForm = document.getElementById("Delivery");

    if (method === 'paypal') {
      paymentForm.action = "https://www.bulletproofhusband.com/index.php?view=freebookbuy";
    }

    if (paymentForm.checkValidity()) {
      paymentForm.submit(); // Only submit if the form is valid
    } else {
      paymentForm.reportValidity(); // Show validation errors
    }
  }