{% extends 'base.html.twig' %}
{% block title %}{{ 'titre_page_payement'|trans }}{% endblock %}
{% block body %}


<div class="container background-payment">
    <div class="row mt-5 mb-5">
        <div class="col-12">
        <div class="card">
            <div class="card-header text-center">
                <h1>{{ 'titre_payement'|trans }}</h1>
            </div>
            <div class="card-body">
                <div class="jumbotron">
                    <div class="container forpayment">
                        {% for label, messages in app.flashes %}
                                <div class="alert black alert-{{ label }}">
                                    {%  for message in messages %}
                                        <p>{{ message | raw }}</p>
                                    {% endfor %}
                                </div>
                        {% endfor %}
                        <p>{{ 'texte_payement_1'|trans }} <strong>{{p}} euros</strong>. {{ 'texte_payement_2'|trans }} </p>
                        </br>
                        <form action="{{ path('charge') }}" method="post" id="payment-form">
                            <div class="form-row">
                                <label for="card-element">
                                    {{'texte_payement_3'|trans}} :
                                </label>
                                </br>
                                </br>
                                <div id="card-element">
                                    <!-- A Stripe Element will be inserted here. -->
                                </div>
                                </br>
                                <!-- Used to display form errors. -->
                                <div id="card-errors" role="alert"></div>
                            </div>
                            <div class="row mt-5 text-center">
                                <button class="btn btn-primary btn-block">{{ 'bouton_valider_payement'|trans }}</button>
                        </form>
                                <div class="col-12 center-block">
                                    <a href="{{path('booking') }}" class="btn blue">{{ 'bouton_annul_payement'|trans }}</a>
                                </div>

                            </div>
                        <div class="row center-block">
                            <div class="col-12 text-center">
                                <br>
                                <br>
                                <img src="{{ asset('http://projet4.ludoviczibelli.fr/cb-1.jpg') }}" width="216" height="48" class="center-block image_carte" alt="Cartes bancaires">
                            </div>
                        </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    <script>
    // Create a Stripe client.
    var stripe = Stripe('pk_test_WWSGvJradzBDixAZ77Zwdhyd00cTfI0G9p');

    // Create an instance of Elements.
    var elements = stripe.elements();

    // Custom styling can be passed to options when creating an Element.
    // (Note that this demo uses a wider set of styles than the guide below.)
    var style = {
      base: {
        color: '#32325d',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
          color: '#aab7c4'
        }
      },
      invalid: {
        color: '#fa755a',
        iconColor: '#fa755a'
      }
    };

    // Create an instance of the card Element.
    var card = elements.create('card', {style: style});

    // Add an instance of the card Element into the `card-element` <div>.
    card.mount('#card-element');

    // Handle real-time validation errors from the card Element.
    card.addEventListener('change', function(event) {
      var displayError = document.getElementById('card-errors');
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = '';
      }
    });

    // Handle form submission.
    var form = document.getElementById('payment-form');
    // on place une écoute (addEventListener) sur
    // le form et l'action submit du form
    // écoute = listenner = surveiller un évènement sur un objet du dom
    // ex: un clic de la souris, un clic sur le clavier ou le submit d'un form
    form.addEventListener('submit', function(event) {
      event.preventDefault();
     console.log('hello');
      stripe.createToken(card).then(function(result) {
        if (result.error) {
          console.log('error');
          // Inform the user if there was an error.
          var errorElement = document.getElementById('card-errors');
          console.log(result.error);
          errorElement.textContent = result.error.message;
        } else {

          console.log('ok');
          // Send the token to your server.
          stripeTokenHandler(result.token);
        }
      });
    });

    // Submit the form with the token ID.
    function stripeTokenHandler(token) {
      // Insert the token ID into the form so it gets submitted to the server
      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();
            }
    </script>
{% endblock %}