{% extends 'bo/base.html.twig' %}

{% trans_default_domain 'FOSUserBundle' %}

{% block title %}Votre compte{% endblock %}

{% block body %}
    <section class="g-bg-izibrick-light-v5">
        <div class="container g-py-100">
            <div class="row justify-content-center">
                <div class="col-sm-12 col-lg-10">
                    <div class="u-shadow-v21 g-bg-white rounded g-py-40 g-px-30">
                        {% include 'bo/order/wizard.html.twig' with {'step': 4} %}

                        <div id="nav-1-2-default-hor-left-big-icons" class="tab-content">
                            <div class="tab-pane fade show active" id="nav-1-2-default-hor-left-big-icons--1"
                                 role="tabpanel">

                                <div id="wizard-tab1" class="tab-pane">

                                    <div class="row justify-content-center align-items-center no-gutters mt20">
                                        <div class="col-lg-5 g-bg-teal g-rounded-left-5--lg-up">
                                            <div class="g-pa-50">
                                                <!-- Form -->
                                                {{ form_start(formLogin, {'method': 'post', 'action': path('order_login'), 'attr': {'class': 'g-py-15'}}) }}
                                                <form class="g-py-15" action="{{ path("order_login") }}"
                                                      method="post">
                                                    <h2 class="h3 g-color-white mb-4">J'ai un compte</h2>
                                                    {% if formLogin.vars.errors|length %}
                                                        <div class="alert-error">
                                                            {{ form_errors(formLogin) }}
                                                        </div>
                                                    {% endif %}
                                                    <div class="mb-4">
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text g-width-45 g-brd-right-none g-brd-white g-color-white"><i
                                                                            class="icon-finance-067 u-line-icon-pro"></i></span>
                                                            </div>
                                                            {{ form_widget(formLogin.username,
                                                                {'attr':
                                                                    {
                                                                        'placeholder': 'Email',
                                                                        'class':'form-control g-color-black g-brd-left-none g-brd-white g-bg-transparent g-color-white g-placeholder-white g-pl-0 g-pr-15 g-py-13'
                                                                    }
                                                                }
                                                            ) }}
                                                        </div>
                                                    </div>

                                                    <div class="g-mb-40">
                                                        <div class="input-group rounded">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text g-width-45 g-brd-right-none g-brd-white g-color-white"><i
                                                                            class="icon-communication-062 u-line-icon-pro"></i></span>
                                                            </div>

                                                            {{ form_widget(formLogin.plainPassword,
                                                                {'attr':
                                                                    {
                                                                        'placeholder': 'Mot de passe',
                                                                        'class':'form-control g-color-black g-brd-left-none g-brd-white g-bg-transparent g-color-white g-placeholder-white g-pl-0 g-pr-15 g-py-13'
                                                                    }
                                                                }
                                                            ) }}
                                                        </div>
                                                    </div>
                                                    <div class="g-mb-60">
                                                        <button class="btn btn-md btn-block u-btn-primary rounded text-uppercase g-py-13"
                                                                type="submit">Se connecter
                                                        </button>
                                                    </div>
                                                    {{ form_end(formLogin) }}
                                            </div>
                                        </div>

                                        <div class="col-lg-7 g-bg-white g-rounded-right-5--lg-up">
                                            <div class="g-pa-50">
                                                <!-- Form -->
                                                {{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'g-py-15'}}) }}
                                                <h2 class="h3 g-color-black mb-4">Je crée mon compte</h2>
                                                {% if error is defined and error is not null %}
                                                    <div class="alert alert-danger">
                                                        {{ error }}<br/>
                                                        En cas de problème, <a
                                                                href="{{ path('our-contact', {'subject':1}) }}"
                                                                class="alert-link">contactez-nous</a>
                                                    </div>
                                                {% endif %}
                                                <div class="mb-4 row">
                                                    <div class="col-6">
                                                        <div class="input-group rounded">
                                                            {{ form_widget(form.lastname, {
                                                                'attr':{
                                                                    'placeholder': 'Nom',
                                                                    'class':'form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-pr-15 g-py-13'
                                                                }
                                                            }) }}
                                                        </div>
                                                    </div>
                                                    <div class="col-6">
                                                        <div class="input-group rounded">
                                                            {{ form_widget(form.firstname, {
                                                                'attr':{
                                                                    'placeholder': 'Prénom',
                                                                    'class':'form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-pr-15 g-py-13'
                                                                }
                                                            }) }}
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="mb-4 row">
                                                    <div class="col-8">
                                                        <div class="input-group rounded">
                                                            {{ form_widget(form.email, {
                                                                'attr':{
                                                                    'placeholder': 'Email',
                                                                    'class':'form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-pr-15 g-py-13'
                                                                }
                                                            }) }}
                                                        </div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="input-group rounded">
                                                            {{ form_widget(form.phone, {
                                                                'attr':{
                                                                    'placeholder': 'Téléphone',
                                                                    'class':'form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-pr-15 g-py-13'
                                                                }
                                                            }) }}
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="mb-4 row">
                                                    <div class="col-6">
                                                        <div class="input-group rounded">
                                                            {{ form_widget(form.plainPassword.first, {
                                                                'attr':{
                                                                    'placeholder': 'Mot de passe',
                                                                    'class':'form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-pr-15 g-py-13'
                                                                }
                                                            }) }}
                                                        </div>
                                                    </div>
                                                    <div class="col-6">
                                                        <div class="input-group rounded">
                                                            {{ form_widget(form.plainPassword.second, {
                                                                'attr':{
                                                                    'placeholder': 'Répêter mot de passe',
                                                                    'class':'form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-pr-15 g-py-13'
                                                                }
                                                            }) }}
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="mb-1">
                                                    <label class="form-check-inline u-check g-color-gray-dark-v5 g-font-size-12 g-pl-25 mb-2">
                                                        {{ form_widget(form.cgu, {'attr':{'class':'g-hidden-xs-up g-pos-abs g-top-0 g-left-0'}}) }}
                                                        <div class="u-check-icon-checkbox-v6 g-absolute-centered--y g-left-0">
                                                            <i class="fa" data-check-icon="&#xf00c"></i>
                                                        </div>
                                                        J'accepte les&nbsp;<a href="{{ path('cgu') }}" target="_blank">Conditions
                                                            Générales d'Utilisation</a>
                                                    </label>
                                                    <div class="col-sm-12 form-errors mt0 no-display" id="error-cgu">
                                                        <ul>
                                                            <li>Veuillez valider les CGU.</li>
                                                        </ul>
                                                    </div>
                                                </div>

                                                <button id="form-register-submit"
                                                        class="btn btn-md btn-block u-btn-primary rounded text-uppercase g-py-13"
                                                        type="submit">Créer mon compte
                                                </button>
                                                {{ form_end(form) }}
                                                <!-- End Form -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock body %}

{% block javascripts %}
    <script type="text/javascript">
        $(document).on('ready', function () {
            $('#form-register-submit').on('click', function (e) {
                if(!$('#app_user_registration_cgu').prop('checked')){
                    $('#error-cgu').removeClass('no-display');
                    e.preventDefault();
                }else{
                    $('#error-cgu').addClass('no-display');
                }
            });

        });
    </script>
{% endblock %}