{{-- <div id="reaplceButton">
    <div class="paymentMethod_bg">
      <form id="payment-form">
        <div id="payment-element">
          <!-- Elements will create form elements here -->
        </div>
        {{__('words.By Selecting the button below, I agree to the terms between you and Ambayo Payments.')}}
<button id="submit" class="btn btn-danger mt-4">{{__('words.Confirm and pay')}}</button> --}}
{{-- <div id="error-message" class="info-danger">
          <!-- Display error message to your customers here -->
        </div> --}}
{{-- </form>
    </div>   
  </div> --}}

  <div class="verifySellerBox">
    <div class="verifySellerBoxInner">
      <div class="verifyIconOuter">
        <img class="me-2" src="{{asset('frontend/img/verified.svg')}}" alt="verify-icon" />
        <p class="mb-0">{{__("words.Verified Seller")}}</p>
      </div>
      <p class="subText">{{__("words.Verification will be valid for 1 year.")}}<br>
        {{__("words.The subscription plan will start from the date of
        completion of verification")}}</p>
      <p class="verifyYear_"><strong><span class="yearsmallText_">1</span> <span class="yearText">{{__("words.Year")}}</span></strong>
        <span class="yearamount_">${{auth()->user()->isCompanySeller() ? '99.00' : '39.00'}} USD</span>
      </p>
    </div>
    <div class="verifySellerBoxInner mobileDesignseller">
      <div class="verifyInnermain">
      <div class="verifyIconOuter">
        <img class="me-2" src="{{asset('frontend/img/verified.svg')}}" alt="verify-icon" />
        <p class="mb-0">{{__("words.Verified Seller")}}</p>
      </div>
      
      <p class="verifyYear_"><strong><span class="yearsmallText_">1</span> <span class="yearText">{{__("words.Year")}}</span></strong>
        <span class="yearamount_">${{auth()->user()->isCompanySeller() ? '99.00' : '39.00'}} USD</span>
      </p>
      </div>
      <p class="subText">{{__("words.Verification will be valid for 1 year.<br>
        The subscription plan will start from the date of
        completion of verification")}}</p>
    </div>
  </div>
  
  
  <!-- <legend>Account information</legend> -->
  <div class="paymentMain_">
    <div class="cyptoPayment_ mb-4">
      <label class="checkbox_ mb-0">
        <input type="radio" name="methode_type" class="selectedCrypto" value="1" checked>
        <span class="checkmark"></span>
        <div class="currencyItemTxt">
          <h3 class="semiboldHead_">{{__("words. Credit or Debit Card")}}</h3>
        </div>
      </label>
      <div class="paymentMethod_bgcrypto stripeForm mt-3">
        <div class="col-md-12">
          <form id="payment-form" action="">
            <div id="payment-element">
              <!-- Elements will create form elements here -->
            </div>
  
            <button id="submit" class="btn btn-danger payWithStripe mt-4 d-none">{{__("words.Confirm and Pay")}}</button>
  
            <div id="error-message">
  
              <!-- Display error message to your customers here -->
  
            </div>
          </form>
        </div>
  
      </div>
    </div>
    <div class="cyptoPayment_">
      <label class="checkbox_ mb-0">
        <input type="radio" name="methode_type" class="selectedCrypto" value="2">
        <span class="checkmark"></span>
        <div class="currencyItemTxt">
          <h3 class="semiboldHead_"> {{__("words.Cryptocurrency")}}</h3>
        </div>
      </label>
      <div class="paymentMethod_bgcrypto Cryptoform mt-3">
  
        <div class="bottomPayment">
          <div class="paymentImages_">
            <div class="innerCotentimg_">
              <img class="paymentImgg_" src="{{ asset('/frontend/img/crypto1.svg') }}">
              <img class="paymentImgg_" src="{{ asset('/frontend/img/c-11.png') }}">
              <img class="paymentImgg_" src="{{ asset('/frontend/img/c-12.png') }}">
              <img class="paymentImgg_" src="{{ asset('/frontend/img/crypto3.svg') }}">
              <img class="paymentImgg_" src="{{ asset('/frontend/img/litecoin.png') }}">
              <img class="paymentImgg_" src="{{ asset('/frontend/img/dogicon.png') }}">
              <img class="paymentImgg_" src="{{ asset('/frontend/img/c-1.png') }}">
              <img class="paymentImgg_" src="{{ asset('/frontend/img/greenbit.png') }}">
              <img class="paymentImgg_" src="{{ asset('/frontend/img/c3.png') }}">
              <img class="paymentImgg_" src="{{ asset('/frontend/img/c-6.png') }}">
              <img class="paymentImgg_" src="{{ asset('/frontend/img/c-8.png') }}">
              <img class="paymentImgg_" src="{{ asset('/frontend/img/c-10.png') }}">
              <img class="paymentImgg_" src="{{ asset('/frontend/img/wrappedEthier.png') }}">
            </div>
            {{-- <form id="coinbaseForm" class="d-none" method="POST" action="{{route('subscription.coinbaseCharge')}}">
            @csrf
            <input type="hidden" name="amount" value="39">
            <a id="paywithcoin" class="btn confirmPay_ mt-4 paywithcoin">Confirm and Pay</a>
            </form> --}}
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="paymentNote" class="mt-4"> 
             <span class="redColor_">{{__("words.Note")}}:</span>
              <p>{{__("words.If you pay with cryptocurrency, it may take some time to confirm the payment depending on the network load and the network fee you have paid.")}}</p>     
          </div>
          <h5 class="semigreyhead_ paygrey_ ">{{__("words.By Selecting the button below, I agree to the terms between you and Ambayo Payments.")}}</h5>
  
  <script>
    function getStripeNote() {
      return `  <div id="paymentNote"> 
             <span class="redColor_"> {{__("words.Note")}} :</span>
              <p class="parapayment_">{{__("words.If you pay with cryptocurrency, it may take some time to confirm the payment depending on the network load and the network fee you have paid.")}}   </p>     
          </div> `;
    }
  
    function getCoinbaseNote() {
      return `
      <div id="paymentNote"> 
        <span class="redColor_"> {{__("words.Note")}} :</span>
          <p class="parapayment_">{{__("words.It may take some time to confirm the payment you can wait or come back later. Once the payment is confirmed, we will send you a notification to your email {user@email.com}.")}}  </p>     
      </div>`;
    }
  
  
  
  
    $('.Cryptoform').addClass('d-none');
    setTimeout(() => {
      $('.selectedCrypto').each(function() {
        if (this.checked) {
          var sThisVal = (this.checked ? $(this).val() : "");
          $('#payForPlan').attr('data-ref', sThisVal);
          if (sThisVal == 1) {
            $('.stripeForm').removeClass('d-none');
            $('.Cryptoform').addClass('d-none');
            $('#payForPlan').attr('data-ref', '1');
            $('#paymentNote').html(getStripeNote());
          } else {
            $('.stripeForm').addClass('d-none');
            $('.Cryptoform').removeClass('d-none');
            $('#payForPlan').attr('data-ref', '2');
            $('#paymentNote').html(getCoinbaseNote());
  
  
          }
  
        }
  
      })
    }, 2000);
  
    // $(document).on('click', '#payForPlan', function(e) {
    //   if ($(this).attr('data-ref') == 1) {
        
    //     $('.payWithStripe').trigger('click');
    //   } else {
    //     return window.location.href = site_url + '/company/coingate/charge';
    //     // $('#coinbaseForm').submit();
    //   }
    // })

    $(document).on('click', '#payForPlan', function(e) {
    e.preventDefault(); // prevent default action
    
    //API to check payment status
    $.ajax({
        url: site_url + '/check-seller-verification-payment-status',
        method: 'GET',
        success: function(response) {
            if (response.status === 'completed') {
                alert('Payment already inprocess.');
            } else {
                // Proceed with payment options
                if ($('#payForPlan').attr('data-ref') == 1) {
                    $('.payWithStripe').trigger('click');
                } else {
                    window.location.href = site_url + '/company/coingate/charge';
                }
            }
        },
        error: function() {
            alert('Error checking payment status. Please try again.');
        }
    });
});

  
    $(document).on('change', '.selectedCrypto', function(e) {
      if ($(this).val() == 1) {
        $('.stripeForm').removeClass('d-none');
        $('.Cryptoform').addClass('d-none');
        $('#payForPlan').attr('data-ref', '1');
        $('#paymentNote').html(getStripeNote());
  
      } else {
        $('.stripeForm').addClass('d-none');
        $('.Cryptoform').removeClass('d-none');
        $('#payForPlan').attr('data-ref', '2');
        $('#paymentNote').html(getCoinbaseNote());
  
  
      }
    })
  
  
  
    // Set your publishable key: remember to change this to your live publishable key in production
    // See your keys here: https://dashboard.stripe.com/apikeys
    var site_url = window.location.protocol + '//' + window.location.host;
  
    const stripe = Stripe("{{ config('services.stripe.key') }}");
    
    const options = {
      clientSecret: '{{$clientSecret}}',
      // Fully customizable with appearance API.
      appearance: {
        //theme: 'none',
        rules: {
          '.Input:focus': {
            outline: 'none',
            boxShadow: 'none',
            borderColor: '#e6e6e6'
  
          },
        }
      },
    };
  
    // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 3
    const elements = stripe.elements(options);
    const subscriptionId = '{{isset($userId) ? $userId : '
    '}}'
    
    // Create and mount the Payment Element
    const paymentElement = elements.create('payment');
    paymentElement.mount('#payment-element');
  
  
    const form = document.getElementById('payment-form');
  
    form.addEventListener('submit', async (event) => {
      event.preventDefault();
      const {
        error
      } = await stripe.confirmPayment({
        //`Elements` instance that was used to create the Payment Element
        elements,
        confirmParams: {
          return_url: site_url + '/payment-response' + '?id=' + subscriptionId,
        },
      });
  
      if (error) {
  
        // console.log(error);
        // This point will only be reached if there is an immediate error when
        // confirming the payment. Show error to your customer (for example, payment
        // details incomplete)
        if (error.type != "validation_error") {
          const messageContainer = document.querySelector('#error-message');
          messageContainer.textContent = error.message;
        }
  
      } else {
        // 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`.
      }
    });
  </script>