{{-- <form action="/payment/process" method="POST">
    @csrf
    <input type="hidden" name="amount" value="8000">
    <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
        data-key="{{ env('STRIPE_KEY') }}"
        data-name="Shobhit Test"
        data-description="Example Payment"
        data-amount="700"
        data-locale="auto">
    </script>
</form>

@if ($errors->any())
    <div class="alert alert-danger">
        {{ $errors->first() }}
    </div>
@endif
 --}}

 <form action="/payment/process" method="POST" id="payment-form">
    @csrf
    <input type="hidden" name="amount" value="8000">
    <input type="hidden" name="metadata" id="metadata" value="">

    <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
        data-key="{{ env('STRIPE_KEY') }}"
        data-name="Shobhit Test"
        data-description="Example Payment"
        data-amount="700"
        data-locale="auto"
        data-label="Pay Now">
    </script>
</form>

@if ($errors->any())
    <div class="alert alert-danger">
        {{ $errors->first() }}
    </div>
@endif

<script>
// Example metadata
const metadata = {
    customer_id: '12345',
    order_id: '67890',
    product: 'Test Product'
};

document.getElementById('metadata').value = JSON.stringify(metadata);

var stripeHandler = StripeCheckout.configure({
    key: "{{ env('STRIPE_KEY') }}",
    image: 'https://staging-bridge.staqo.com/assets/img/logo.svg',
    locale: 'auto',
    token: function(token) {
        // Add the token to the form
        var form = document.getElementById('payment-form');
        var hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'stripeToken');
        hiddenInput.setAttribute('value', token.id);
        form.appendChild(hiddenInput);

        // Submit the form
        form.submit();
    }
});

document.querySelector('.stripe-button').addEventListener('click', function(e) {
    e.preventDefault();

    stripeHandler.open({
        name: 'Shobhit Test',
        description: 'Example Payment',
        amount: 700,
        metadata: metadata
    });
});

// Close Checkout on page navigation
window.addEventListener('popstate', function() {
    stripeHandler.close();
});
</script>