document.addEventListener("DOMContentLoaded", () => {
    const stripe = Stripe("pk_live_thCcMjKeVsvIonddjuI6Fljp");
    
      const paymentForm = document.querySelector("#Payment");
      if (paymentForm) {
        let elements;
        initialize();
  
        paymentForm.addEventListener("submit", handleSubmit);
  
        // Fetches a payment intent and captures the client secret
        async function initialize() {
            showLoader(true); // Show loader before fetching data

          const emailInput = document.querySelector('input[name="email"]');
          const nameInput = document.querySelector('input[name="name"]'); 
          const passwordInput = document.querySelector('input[name="password"]');
          const priceInput = document.querySelector('input[name="price"]'); 
          const programid = document.querySelector('input[name="programid"]'); 

          const email     =  emailInput.value;
          const name      =  nameInput.value;
          const pass      =  passwordInput.value;
          const price     =  priceInput.value;
          const program   =  programid.value;


        try {
            const response = await fetch("/ajax.php?view=vipbuy&ajax=create", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ email: email, name: name, pass: pass, price: price, pid:program })
            });

            const { clientSecret } = await response.json();

            elements = stripe.elements({ clientSecret });

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

        } catch (error) {
            console.error("Error initializing payment:", error);
            showMessage("Failed to load payment UI. Please try again.");
        } finally {
            showLoader(false); // Hide loader after UI is ready
        }
    }
        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=vipdone",
            },
          });
  
          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("Details");

    if (method === 'paypal') {
      paymentForm.action = 'https://www.paypal.com/cgi-bin/webscr';
    }

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


  function showLoader(isLoading) {
    if (!isLoading) {
        document.getElementById("full-page-loader").style.display = "none";
    }else{
        document.getElementById("full-page-loader").style.display = "flex";

    }
}