@push('styles')
<style type="text/css">
    .StripeElement {
      box-sizing: border-box;

      height: 40px;

      padding: 10px 12px;

      border: 1px solid transparent;
      border-radius: 4px;
      background-color: white;

      box-shadow: 0 1px 3px 0 #e6ebf1;
      -webkit-transition: box-shadow 150ms ease;
      transition: box-shadow 150ms ease;
    }

    .StripeElement--focus {
      box-shadow: 0 1px 3px 0 #cfd7df;
    }

    .StripeElement--invalid {
      border-color: #fa755a;
    }

    .StripeElement--webkit-autofill {
      background-color: #fefde5 !important;
    }
</style>
@endpush
<div class="row text-center justify-content-center">
    <div class="col-md-8">
        <h5 class="mt-3 mb-2" for="card-element">
           Informations de la carte bancaire
        </h5>

        <div id="cardElement"></div>

        <small class="form-text text-muted" id="cardErrors" role="alert"></small>

        <input type="hidden" name="payment_method" id="paymentMethod">
<p class="mt-2 text-justify">
        En cliquant sur "Abonnez-vous maintenant", vous acceptez nos <strong>conditions générales de vente</strong>. Votre abonnement sera renouvelé automatiquement jusqu'à ce que vous le annuliez, conformément aux modalités détaillées dans nos conditions générales
    </p>
    </div>
</div>
@push('scripts')
<script src="https://js.stripe.com/v3/"></script>
<script>
    const stripe = Stripe('{{ config('services.stripe.key') }}');
    
     const options = {
          // Fully customizable with appearance API.
          appearance: {
                  theme: 'stripe'
                },
                locale: 'fr',
        };
        
    const elements = stripe.elements(options);

    var cardElement = elements.create('card', {
        style: {
            base: {
                iconColor: '#000',
                color: '#000',
                fontWeight: '500',
                fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
                fontSize: '16px',
                fontSmoothing: 'antialiased',
                ':-webkit-autofill': {
                    color: '#fce883',
                },
                '::placeholder': {
                    color: '#87BBFD',
                },
            },
            invalid: {
                iconColor: '#FFC7EE',
                color: '#FFC7EE',
            },
        },
    });

    cardElement.mount('#cardElement');
</script>

<script>
    const form = document.getElementById('paymentForm');
    const payButton = document.getElementById('payButton');

    payButton.addEventListener('click', async(e) => {
        if (form.elements.payment_platform.value === "{{ $paymentPlatform->id }}") {
            e.preventDefault();

            const { paymentMethod, error } = await stripe.createPaymentMethod(
                'card', cardElement, {
                    billing_details: {
                        "name": "{{ auth()->user()->first_name }}",
                        "email": "{{ auth()->user()->email }}"
                    }
                }
            );

            if (error) {
                const displayError = document.getElementById('cardErrors');

                displayError.textContent = error.message;
            } else {
                const tokenInput = document.getElementById('paymentMethod');

                tokenInput.value = paymentMethod.id;
                form.submit();
            }
        }
    });
</script>
@endpush