{% extends 'front.html.twig' %}
{% block title %} Register CNFCE {% endblock %}
{% block stytesheets %}
    {{ parent() }}
{% endblock %}
{% block body %}
    <!-- breadcrumb area start -->
    <section class="breadcrumb-area" id="home">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb-area-content">
                        <h2>Register</h2>
                        <ul>
                            <li><a href="{{ path('front_home') }}">Home</a></li>
                            <li><a href="#">Register</a></li>
                            <li class="active"><a href="#">Adherant</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section><!-- breadcrumb area end -->
    <!-- login section start -->
    <section class="ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 offset-lg-1">
                    <div class="login-form">
                        <h2>Create Your Account Adherant !</h2>
                        {{ include('@AppBundle/Default/flashBag.html.twig') }}
                        {{ form_start(form) }}
                            <div class="row">
                                <div class="col-md-6">
                                    <label>{{ form_label(form.username) }} <span class="text-danger">*</span></label>
                                    {{ form_widget(form.username) }}
                                    <span class="text text-danger">{{ form_errors(form.username) }}</span>
                                </div>
                                <div class="col-md-6">
                                    <label>{{ form_label(form.email) }} <span class="text-danger">*</span></label>
                                    {{ form_widget(form.email) }}
                                    <span class="text text-danger">{{ form_errors(form.email) }}</span>
                                </div>
                                <div class="col-md-6">
                                    <label>{{ form_label(form.firstname) }} <span class="text-danger">*</span></label>
                                    {{ form_widget(form.firstname) }}
                                    <span class="text text-danger">{{ form_errors(form.firstname) }}</span>
                                </div>
                                <div class="col-md-6">
                                    <label>{{ form_label(form.lastname) }} <span class="text-danger">*</span></label>
                                    {{ form_widget(form.lastname) }}
                                    <span class="text text-danger">{{ form_errors(form.lastname) }}</span>
                                </div>
                                <div class="col-md-6">
                                    <label>{{ form_label(form.speciality) }} <span class="text-danger">*</span></label>
                                    {{ form_widget(form.speciality) }}
                                    <span class="text text-danger">{{ form_errors(form.speciality) }}</span>
                                </div>
                                <div class="col-md-6">
                                    <label>{{ form_label(form.grade) }} <span class="text-danger">*</span></label>
                                    {{ form_widget(form.grade) }}
                                    <span class="text text-danger">{{ form_errors(form.grade) }}</span>
                                </div>
                                <div class="col-md-6">
                                    <label>{{ form_label(form.service) }} <span class="text-danger">*</span></label>
                                    {{ form_widget(form.service) }}
                                    <span class="text text-danger">{{ form_errors(form.service) }}</span>
                                </div>
                                <div class="col-md-6">
                                    <label>{{ form_label(form.phone) }} <span class="text-danger">*</span></label>
                                    {{ form_widget(form.phone) }}
                                    <span class="text text-danger">{{ form_errors(form.phone) }}</span>
                                </div>
                                <div class="col-md-6">
                                    <label>{{ form_label(form.country) }} <span class="text-danger">*</span></label>
                                    {{ form_widget(form.country,{'attr':{'style':' height: 50px !important;border: 1px solid #f1f1f1 !important;'}}) }}
                                    <span class="text text-danger">{{ form_errors(form.country) }}</span>
                                </div>
                                <div class="col-md-6">
                                    <label>{{ form_label(form.adress) }} <span class="text-danger">*</span></label>
                                    {{ form_widget(form.adress) }}
                                    <span class="text text-danger">{{ form_errors(form.adress) }}</span>
                                </div>
                                <div class="col-md-6">
                                    <label>{{ form_label(form.city) }} <span class="text-danger">*</span></label>
                                    {{ form_widget(form.city) }}
                                    <span class="text text-danger">{{ form_errors(form.city) }}</span>
                                </div>
                                <div class="col-md-6">
                                    <label>{{ form_label(form.postalCode) }} <span class="text-danger">*</span></label>
                                    {{ form_widget(form.postalCode,{'attr':{'style':' height: 50px !important;border: 1px solid #f1f1f1 !important;'}}) }}
                                    <span class="text text-danger">{{ form_errors(form.postalCode) }}</span>
                                </div>
                                <div class="col-md-6">
                                    <label>{{ form_label(form.plainPassword.first) }} <span class="text-danger">*</span></label>
                                    {{ form_widget(form.plainPassword.first) }}
                                    <span class="text text-danger">{{ form_errors(form.plainPassword.first) }}</span>
                                </div>
                                <div class="col-md-6">
                                    <label>{{ form_label(form.plainPassword.second) }} <span class="text-danger">*</span></label>
                                    {{ form_widget(form.plainPassword.second) }}
                                    <span class="text text-danger">{{ form_errors(form.plainPassword.second) }}</span>
                                </div>
                                <div class="col-md-12">
                                    <div class="login-form-btn">
                                        <input type="submit" class="btn theme-btn theme-btn8" value="Create Account" name="submit">
                                        <input type="reset" class="btn theme-btn theme-btn5" value="Cancel" name="cancel">
                                    </div>
                                </div>
                            </div>
                        {{ form_end(form) }}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- login section end -->


    <section class="ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 offset-lg-1">
                    <div class="login-form">
                        <h2>Paiment Online !</h2>
                        <form action="{{ path('front_compte_paiment') }}" method="post" id="payment-form">
                            <div class="form-row">
                                <label for="card-element">
                                    Credit or debit card
                                </label>
                                <div id="card-element">
                                    <!-- A Stripe Element will be inserted here. -->
                                </div>

                                <!-- Used to display form errors. -->
                                <div id="card-errors" role="alert"></div>
                            </div>
                            <button>Submit Payment</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript">
        var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
        var elements = stripe.elements();
        // Custom styling can be passed to options when creating an Element.
        var style = {
            base: {
                // Add your base input styles here. For example:
                fontSize: '16px',
                color: "#32325d",
            }
        };
        // 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');

        card.addEventListener('change', function(event) {
            var displayError = document.getElementById('card-errors');
            if (event.error) {
                displayError.textContent = event.error.message;
            } else {
                displayError.textContent = '';
            }
        });

        // Create a token or display an error when the form is submitted.
        var form = document.getElementById('payment-form');
        form.addEventListener('submit', function(event) {
            event.preventDefault();

            stripe.createToken(card).then(function(result) {
                if (result.error) {
                    // Inform the customer that there was an error.
                    var errorElement = document.getElementById('card-errors');
                    errorElement.textContent = result.error.message;
                } else {
                    // Send the token to your server.
                    stripeTokenHandler(result.token);
                }
            });
        });

        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 %}