{% extends "base.html.twig" %}

{% block title %} 3IM | Création d'un prélévement SEPA{% endblock %}

{% block body %}

 <section class="hero-wrap hero-wrap-2" style="background-image: url('{{ asset('img/bg_3.jpg') }}');" data-stellar-background-ratio="0.5">
      <div class="overlay"></div>
         <div class="container">
             <div class="row no-gutters slider-text align-items-center justify-content-center">
                 <div class="col-md-9 text-center">
                     <h1 class="mb-2 bread">Création d'un prélévement SEPA</h1>
                 </div>
              </div>
        </div>
 </section>
        

        <br><br>    
        <div class="site-section">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h2 class="h3 mb-5 text-black" style="text-align: center; font-size: 40px; color: #007bff;">Création d'un prélévement SEPA</h2>
                    </div>

                    <form action="" method="post" id="setup-form">
                        <div class="form-row inline">
                            <div class="col">
                            <label for="accountholder-name">
                                Name
                            </label>
                            <input
                                id="accountholder-name"
                                name="accountholder-name"
                                placeholder="Jenny Rosen"
                                required
                            />
                            </div>

                            <div class="col">
                            <label for="email">
                                Email Address
                            </label>
                            <input
                                id="email"
                                name="email"
                                type="email"
                                placeholder="jenny.rosen@example.com"
                                required
                            />
                            </div>
                        </div>

                        <div class="form-row">
                            <!--
                            Using a label with a for attribute that matches the ID of the
                            Element container enables the Element to automatically gain focus
                            when the customer clicks on the label.
                            -->
                            <label for="iban-element">
                            IBAN
                            </label>
                            <div id="iban-element">
                            <!-- A Stripe Element will be inserted here. -->
                            </div>
                        </div><br>

                        <!-- Add the client_secret from the SetupIntent as a data attribute   -->
                        <button class="btn btn-primary btn-lg btn-block" id="submit-button" data-secret="{{ client_secret }}">
                            Set up SEPA Direct Debit
                        </button><br>

                        <!-- Display mandate acceptance text. -->
                        <div id="mandate-acceptance">
                            By providing your payment information and confirming this payment, you
                            authorise (A) Service Informatique et Telecom and Stripe, our payment service provider
                            and/or PPRO, its local service provider, to send instructions to your
                            bank to debit your account and (B) your bank to debit your account in
                            accordance with those instructions. As part of your rights, you are
                            entitled to a refund from your bank under the terms and conditions of
                            your agreement with your bank. A refund must be claimed within 8 weeks
                            starting from the date on which your account was debited. Your rights
                            are explained in a statement that you can obtain from your bank. You
                            agree to receive notifications for future debits up to 2 days before
                            they occur.
                        </div>
                        <!-- Used to display form errors. -->
                        <div id="error-message" role="alert"></div>
                        </form>
                    
                </div>
            </div>
        </div>
        <br><br><br>
        
 {% endblock %}

  {% block javascripts %}
        <script>
            var stripe = Stripe('{{ sepaPayment.customer.sepaAccount.publicKey }}');
            var elements = stripe.elements();
        </script>
        <script src="{{ asset('js/client_stripe_sepa.js') }}"></script>
  {% endblock %}