document.addEventListener("DOMContentLoaded", () => {
    
    
    const hiddenStripeInput = document.querySelector('input[name="tab"]');
    const paymentId = hiddenStripeInput ? hiddenStripeInput.value : null;

      const paymentForm = document.querySelector("#"+paymentId);
      
      if (paymentForm) {
        const stripe = Stripe("pk_live_thCcMjKeVsvIonddjuI6Fljp");
        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="sales_amount"]');
          const value = hiddenInput.value;
  
          const { clientSecret } = await fetch("/ajax.php?view=salespages&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 salesid = document.querySelector('input[name="salesid"]');
          const value = salesid.value;

          const list = document.querySelector('input[name="luid"]');
          const listid = list.value;
          
          const baseUrl = "https://www.bulletproofhusband.com/index.php?view=salespagesdone";

          const returnUrl = `${baseUrl}&id=${encodeURIComponent(value)}&id2=${encodeURIComponent(listid)}`;
          const { error } = await stripe.confirmPayment({
            elements,
            confirmParams: {
              // Make sure to change this to your payment completion page
              return_url: returnUrl,
            },
          });
  
          // 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");
          }
        }
  
      }

      document.getElementById("nextbtnid")?.addEventListener("click", function(event) {
        // Prevent the default form submission
        event.preventDefault();
      
        const form = this.closest("form");

        if (form.checkValidity()) {
          this.disabled = true;
          this.innerHTML = 'Processing... <i class="fas fa-spinner fa-spin"></i>';
          form.submit();
        } else {
          form.reportValidity();
        }
        
      });

  });